player button & playlist header fix; timetable order

This commit is contained in:
bkfox
2024-01-03 19:51:39 +01:00
parent 1f6381bf07
commit 294c848415
9 changed files with 106 additions and 63 deletions

View File

@ -21,6 +21,8 @@
--a-progress-bar-bg: var(--highlight-color-2);
--a-progress-bar-color: var(--highlight-color);
--a-progress-bar-pd: 0.4rem;
--a-playlist-header-bg: var(--highlight-color-2-alpha);
--a-playlist-header-fg: var(--highlight-color);
--a-playlist-title-sz: 1rem;
--a-playlist-title-pd: 0.6rem;
--a-playlist-item-border: 1px var(--highlight-color-2) solid;
@ -28,13 +30,14 @@
--a-sound-hv-bg: var(--highlight-color);
--a-sound-playing-fg: var(--highlight-color-alpha);
--a-sound-hv-fg: var(--highlight-color-2);
--a-sound-title-sz: 1.4rem;
--a-sound-text-sz: 1.4rem;
--a-player-url-fg: var(--highlight-color-2);
--a-player-panel-bg: var(--highlight-color);
--a-player-bar-bg: var(--highlight-color);
--a-player-bar-title-alone-sz: 1.6rem;
--button-fg: var(--highlight-color-2);
--button-bg: var(--highlight-color);
--button-sec-bg: var(--highlight-color-alpha);
--button-hg-fg: var(--text-color);
--button-hg-bg: var(--highlight-color);
--button-active-fg: var(--highlight-color);
@ -326,7 +329,11 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
display: flex;
flex-direction: row;
}
.playlist .title, .a-playlist .title {
.playlist .header .title, .playlist .header .button, .a-playlist .header .title, .a-playlist .header .button {
background-color: var(--a-playlist-header-bg);
color: var(--a-playlist-header-fg);
}
.playlist .header .title, .a-playlist .header .title {
font-size: var(--a-playlist-title-sz);
margin: 0;
padding: var(--a-playlist-title-pd);
@ -346,35 +353,37 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
height: 3rem;
background-color: var(--a-sound-bg);
}
.a-sound-item.playing, .a-sound-item.playing .title {
.a-sound-item.playing, .a-sound-item.playing .label {
color: var(--a-sound-playing-fg) !important;
}
.a-sound-item:hover {
background-color: var(--a-sound-hv-bg);
}
.a-sound-item:hover .title {
.a-sound-item:hover .label {
color: var(--a-sound-hv-fg) !important;
}
.a-sound-item .title:hover::before, .a-sound-item.playing .title::before {
.a-sound-item .label:hover::before, .a-sound-item.playing .label::before {
content: "\f04b";
font-family: "Font Awesome 6 Free";
margin-right: 0.6em;
}
.a-sound-item.playing .title:hover::before {
.a-sound-item.playing .label:hover::before {
content: "";
margin: 0;
}
.a-sound-item .title {
.a-sound-item .label {
cursor: pointer;
margin: 0em;
margin: 0em !important;
padding: 0.6em;
font-size: var(--a-sound-title-sz);
font-size: var(--a-sound-text-sz);
font-family: var(--heading-font-family);
}
.a-sound-item .title .icon {
.a-sound-item .label .icon {
padding: 0em 0.6rem;
}
.a-sound-item .button {
width: 3em;
font-size: var(--a-sound-text-sz);
}
.player-container {
@ -467,6 +476,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
padding-top: 0.6rem;
padding-left: 0.6rem;
padding-right: 0.6rem;
border-right: 1px black solid;
}
/* Bulma Utilities */
@ -2690,6 +2700,9 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
color: var(--button-fg);
background-color: var(--button-bg);
}
#player .button.secondary, #player a.button.secondary, #player button.button.secondary, #player .nav-urls a.secondary, .ax .button.secondary, .ax a.button.secondary, .ax button.button.secondary, .ax .nav-urls a.secondary {
background-color: var(--button-sec-bg);
}
#player .button .icon, #player a.button .icon, #player button.button .icon, #player .nav-urls a .icon, .ax .button .icon, .ax a.button .icon, .ax button.button .icon, .ax .nav-urls a .icon {
vertical-align: middle;
}
@ -2700,7 +2713,6 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
margin-left: 0.6rem;
}
#player .button:hover, #player a.button:hover, #player button.button:hover, #player .nav-urls a:hover, .ax .button:hover, .ax a.button:hover, .ax button.button:hover, .ax .nav-urls a:hover {
border-color: var(--button-hg-bg);
color: var(--button-hg-fg);
opacity: 1 !important;
}

View File

@ -21,6 +21,8 @@
--a-progress-bar-bg: var(--highlight-color-2);
--a-progress-bar-color: var(--highlight-color);
--a-progress-bar-pd: 0.4rem;
--a-playlist-header-bg: var(--highlight-color-2-alpha);
--a-playlist-header-fg: var(--highlight-color);
--a-playlist-title-sz: 1rem;
--a-playlist-title-pd: 0.6rem;
--a-playlist-item-border: 1px var(--highlight-color-2) solid;
@ -28,13 +30,14 @@
--a-sound-hv-bg: var(--highlight-color);
--a-sound-playing-fg: var(--highlight-color-alpha);
--a-sound-hv-fg: var(--highlight-color-2);
--a-sound-title-sz: 1.4rem;
--a-sound-text-sz: 1.4rem;
--a-player-url-fg: var(--highlight-color-2);
--a-player-panel-bg: var(--highlight-color);
--a-player-bar-bg: var(--highlight-color);
--a-player-bar-title-alone-sz: 1.6rem;
--button-fg: var(--highlight-color-2);
--button-bg: var(--highlight-color);
--button-sec-bg: var(--highlight-color-alpha);
--button-hg-fg: var(--text-color);
--button-hg-bg: var(--highlight-color);
--button-active-fg: var(--highlight-color);
@ -326,7 +329,11 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
display: flex;
flex-direction: row;
}
.playlist .title, .a-playlist .title {
.playlist .header .title, .playlist .header .button, .a-playlist .header .title, .a-playlist .header .button {
background-color: var(--a-playlist-header-bg);
color: var(--a-playlist-header-fg);
}
.playlist .header .title, .a-playlist .header .title {
font-size: var(--a-playlist-title-sz);
margin: 0;
padding: var(--a-playlist-title-pd);
@ -346,35 +353,37 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
height: 3rem;
background-color: var(--a-sound-bg);
}
.a-sound-item.playing, .a-sound-item.playing .title {
.a-sound-item.playing, .a-sound-item.playing .label {
color: var(--a-sound-playing-fg) !important;
}
.a-sound-item:hover {
background-color: var(--a-sound-hv-bg);
}
.a-sound-item:hover .title {
.a-sound-item:hover .label {
color: var(--a-sound-hv-fg) !important;
}
.a-sound-item .title:hover::before, .a-sound-item.playing .title::before {
.a-sound-item .label:hover::before, .a-sound-item.playing .label::before {
content: "\f04b";
font-family: "Font Awesome 6 Free";
margin-right: 0.6em;
}
.a-sound-item.playing .title:hover::before {
.a-sound-item.playing .label:hover::before {
content: "";
margin: 0;
}
.a-sound-item .title {
.a-sound-item .label {
cursor: pointer;
margin: 0em;
margin: 0em !important;
padding: 0.6em;
font-size: var(--a-sound-title-sz);
font-size: var(--a-sound-text-sz);
font-family: var(--heading-font-family);
}
.a-sound-item .title .icon {
.a-sound-item .label .icon {
padding: 0em 0.6rem;
}
.a-sound-item .button {
width: 3em;
font-size: var(--a-sound-text-sz);
}
.player-container {
@ -467,6 +476,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
padding-top: 0.6rem;
padding-left: 0.6rem;
padding-right: 0.6rem;
border-right: 1px black solid;
}
/* Bulma Utilities */
@ -7393,6 +7403,9 @@ a.tag:hover {
color: var(--button-fg);
background-color: var(--button-bg);
}
.button.secondary, a.button.secondary, button.button.secondary, .nav-urls a.secondary {
background-color: var(--button-sec-bg);
}
.button .icon, a.button .icon, button.button .icon, .nav-urls a .icon {
vertical-align: middle;
}
@ -7403,7 +7416,6 @@ a.tag:hover {
margin-left: 0.6rem;
}
.button:hover, a.button:hover, button.button:hover, .nav-urls a:hover {
border-color: var(--button-hg-bg);
color: var(--button-hg-fg);
opacity: 1 !important;
}

File diff suppressed because one or more lines are too long

View File

@ -87,8 +87,7 @@ Context:
{% endfor %}
<div class="has-text-right">
<button type="reset" class="button is-danger mr-3">{% translate "Reset" %}</button>
<button type="submit" class="button is-success">{% translate "Post comment" %}</button>
<button type="submit" class="button">{% translate "Post comment" %}</button>
</div>
</form>
</section>

View File

@ -51,4 +51,5 @@ class TimeTableView(GetDateMixin, BaseDiffusionListView):
if object_list is None:
logs = self.get_logs(self.date)
object_list = Log.merge_diffusions(logs, self.object_list)
object_list = list(reversed(object_list))
return super().get_context_data(date=self.date, dates=dates, object_list=object_list, **kwargs)