rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

player button & playlist header fix; timetable order

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
aircox/static/aircox/css/admin.css
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;
}

34
aircox/static/aircox/css/public.css
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;
}

6
aircox/static/aircox/js/chunk-common.js
View File

File diff suppressed because one or more lines are too long

3
aircox/templates/aircox/page_detail.html
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>

1
aircox/views/diffusion.py
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)

43
assets/src/assets/components.scss
View File

@ -24,6 +24,8 @@
--a-progress-bar-color: var(--highlight-color);
--a-progress-bar-pd: #{v.$mp-2};
--a-playlist-header-bg: var(--highlight-color-2-alpha);
--a-playlist-header-fg: var(--highlight-color);
--a-playlist-title-sz: #{v.$text-size};
--a-playlist-title-pd: #{v.$mp-3};
--a-playlist-item-border: 1px var(--highlight-color-2) solid;
@ -32,7 +34,7 @@
--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: #{v.$text-size-medium};
--a-sound-text-sz: #{v.$text-size-medium};
--a-player-url-fg: var(--highlight-color-2);
--a-player-panel-bg: var(--highlight-color);
@ -41,6 +43,7 @@
--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);
@ -111,6 +114,10 @@
color: var(--button-fg);
background-color: var(--button-bg);
&.secondary {
background-color: var(--button-sec-bg);
}
.icon {
vertical-align: middle;
&:not(:only-child) {
@ -121,7 +128,6 @@
&:hover {
border-color: var(--button-hg-bg);
color: var(--button-hg-fg);
opacity: 1 !important;
}
@ -469,12 +475,17 @@
.header {
display: flex;
flex-direction: row;
}
.title {
font-size: var(--a-playlist-title-sz);
margin: 0;
padding: var(--a-playlist-title-pd);
.title, .button {
background-color: var(--a-playlist-header-bg);
color: var(--a-playlist-header-fg);
}
.title {
font-size: var(--a-playlist-title-sz);
margin: 0;
padding: var(--a-playlist-title-pd);
}
}
li {
@ -496,24 +507,24 @@
height: 3rem;
background-color: var(--a-sound-bg);
&.playing, &.playing .title {
&.playing, &.playing .label {
color: var(--a-sound-playing-fg) !important;
}
&:hover {
background-color: var(--a-sound-hv-bg);
.title {
.label {
color: var(--a-sound-hv-fg) !important;
}
}
.title:hover::before, &.playing .title::before {
.label:hover::before, &.playing .label::before {
content: "\f04b";
font-family: "Font Awesome 6 Free";
margin-right: v.$mp-3e;
}
&.playing .title:hover::before {
&.playing .label:hover::before {
content: '';
margin: 0;
}
@ -522,19 +533,22 @@
.headings > * {
}
.title {
.label {
cursor: pointer;
.icon {
padding: 0em v.$mp-3;
}
margin: 0em;
margin: 0em !important;
padding: v.$mp-3e;
font-size: var(--a-sound-title-sz);
font-size: var(--a-sound-text-sz);
font-family: var(--heading-font-family);
}
.button {
width: 3em;
font-size: var(--a-sound-text-sz);
}
}
@ -627,4 +641,5 @@
padding-top: v.$mp-3;
padding-left: v.$mp-3;
padding-right: v.$mp-3;
border-right: 1px black solid;
}

39
assets/src/components/APlayer.vue
View File

@ -53,27 +53,24 @@
<div :class="['a-player-bar-content', loaded && duration ? 'has-progress' : '']">
<slot name="content" :loaded="loaded" :live="live" :current="current"></slot>
</div>
<div>
<button class="button has-text-weight-bold" v-if="loaded" @click="play()">
<span class="icon is-size-6 has-text-danger">
<span class="fa fa-circle"></span>
</span>
<span>Live</span>
</button>
<button ref="pinPlaylistButton" :class="playlistButtonClass('pin')"
@click="togglePanel('pin')" v-show="sets.pin.length">
<span class="is-size-6" v-if="sets.pin.length">
{{ sets.pin.length }}</span>
<span class="icon"><span class="fa fa-star"></span></span>
</button>
<button :class="playlistButtonClass('queue')"
@click="togglePanel('queue')" v-show="sets.queue.length">
<span class="is-size-6" v-if="sets.queue.length">
{{ sets.queue.length }}</span>
<span class="icon"><span class="fa fa-list"></span></span>
</button>
</div>
<button class="button has-text-weight-bold" v-if="loaded" @click="play()"
title="Live">
<span class="icon is-size-6 has-text-danger">
<span class="fa fa-circle"></span>
</span>
</button>
<button ref="pinPlaylistButton" :class="playlistButtonClass('pin')"
@click="togglePanel('pin')" v-show="sets.pin.length">
<span class="is-size-6" v-if="sets.pin.length">
{{ sets.pin.length }}</span>
<span class="icon"><span class="fa fa-star"></span></span>
</button>
<button :class="playlistButtonClass('queue')"
@click="togglePanel('queue')" v-show="sets.queue.length">
<span class="is-size-6" v-if="sets.queue.length">
{{ sets.queue.length }}</span>
<span class="icon"><span class="fa fa-list"></span></span>
</button>
</div>
</div>
</template>

2
assets/src/components/ASoundItem.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="['a-sound-item m-0 button-group', playing && 'playing' || '']">
<slot name="title" :player="player" :item="item" :loaded="loaded">
<span :class="['title is-flex-grow-1 align-left', playing && 'blink' || '']" @click.stop="$emit('togglePlay')">
<span :class="['label is-flex-grow-1 align-left', playing && 'blink' || '']" @click.stop="$emit('togglePlay')">
{{ name || item.name }}
</span>
</slot>

7
assets/src/index.js
View File

@ -41,6 +41,8 @@ window.aircox = {
playerLoader = playerLoader || new VueLoader(playerConfig)
playerLoader.enable(false)
this.playerLoader = playerLoader
document.addEventListener("keypress", e => this.onKeyPress(e), false)
}
if(initApp) {
@ -52,6 +54,11 @@ window.aircox = {
}
},
onKeyPress(event) {
if(event.key == " ")
this.player.togglePlay()
},
/**
* Filter navbar dropdown menu items
*/