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

#132 | #121: backoffice / dev-1.0-121 #131

Merged
thomas merged 151 commits from dev-1.0-121 into develop-1.0 2024-04-28 20:02:14 +00:00
Conversation 2 Commits 151 Files Changed 348 +106 -63
9 changed files with 106 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 294c848415 - Show all commits

34
aircox/static/aircox/css/admin.css
View File

@ -21,6 +21,8 @@
--a-progress-bar-bg: var(--highlight-color-2); --a-progress-bar-bg: var(--highlight-color-2);
--a-progress-bar-color: var(--highlight-color); --a-progress-bar-color: var(--highlight-color);
--a-progress-bar-pd: 0.4rem; --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-sz: 1rem;
--a-playlist-title-pd: 0.6rem; --a-playlist-title-pd: 0.6rem;
--a-playlist-item-border: 1px var(--highlight-color-2) solid; --a-playlist-item-border: 1px var(--highlight-color-2) solid;
@ -28,13 +30,14 @@
--a-sound-hv-bg: var(--highlight-color); --a-sound-hv-bg: var(--highlight-color);
--a-sound-playing-fg: var(--highlight-color-alpha); --a-sound-playing-fg: var(--highlight-color-alpha);
--a-sound-hv-fg: var(--highlight-color-2); --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-url-fg: var(--highlight-color-2);
--a-player-panel-bg: var(--highlight-color); --a-player-panel-bg: var(--highlight-color);
--a-player-bar-bg: var(--highlight-color); --a-player-bar-bg: var(--highlight-color);
--a-player-bar-title-alone-sz: 1.6rem; --a-player-bar-title-alone-sz: 1.6rem;
--button-fg: var(--highlight-color-2); --button-fg: var(--highlight-color-2);
--button-bg: var(--highlight-color); --button-bg: var(--highlight-color);
--button-sec-bg: var(--highlight-color-alpha);
--button-hg-fg: var(--text-color); --button-hg-fg: var(--text-color);
--button-hg-bg: var(--highlight-color); --button-hg-bg: var(--highlight-color);
--button-active-fg: 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; display: flex;
flex-direction: row; 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); font-size: var(--a-playlist-title-sz);
margin: 0; margin: 0;
padding: var(--a-playlist-title-pd); 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; height: 3rem;
background-color: var(--a-sound-bg); 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; color: var(--a-sound-playing-fg) !important;
} }
.a-sound-item:hover { .a-sound-item:hover {
background-color: var(--a-sound-hv-bg); background-color: var(--a-sound-hv-bg);
} }
.a-sound-item:hover .title { .a-sound-item:hover .label {
color: var(--a-sound-hv-fg) !important; 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"; content: "\f04b";
font-family: "Font Awesome 6 Free"; font-family: "Font Awesome 6 Free";
margin-right: 0.6em; margin-right: 0.6em;
} }
.a-sound-item.playing .title:hover::before { .a-sound-item.playing .label:hover::before {
content: ""; content: "";
margin: 0; margin: 0;
} }
.a-sound-item .title { .a-sound-item .label {
cursor: pointer; cursor: pointer;
margin: 0em; margin: 0em !important;
padding: 0.6em; 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; padding: 0em 0.6rem;
} }
.a-sound-item .button { .a-sound-item .button {
width: 3em; width: 3em;
font-size: var(--a-sound-text-sz);
} }
.player-container { .player-container {
@ -467,6 +476,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
padding-top: 0.6rem; padding-top: 0.6rem;
padding-left: 0.6rem; padding-left: 0.6rem;
padding-right: 0.6rem; padding-right: 0.6rem;
border-right: 1px black solid;
} }
/* Bulma Utilities */ /* 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); color: var(--button-fg);
background-color: var(--button-bg); 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 { #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; 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; 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 { #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); color: var(--button-hg-fg);
opacity: 1 !important; 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-bg: var(--highlight-color-2);
--a-progress-bar-color: var(--highlight-color); --a-progress-bar-color: var(--highlight-color);
--a-progress-bar-pd: 0.4rem; --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-sz: 1rem;
--a-playlist-title-pd: 0.6rem; --a-playlist-title-pd: 0.6rem;
--a-playlist-item-border: 1px var(--highlight-color-2) solid; --a-playlist-item-border: 1px var(--highlight-color-2) solid;
@ -28,13 +30,14 @@
--a-sound-hv-bg: var(--highlight-color); --a-sound-hv-bg: var(--highlight-color);
--a-sound-playing-fg: var(--highlight-color-alpha); --a-sound-playing-fg: var(--highlight-color-alpha);
--a-sound-hv-fg: var(--highlight-color-2); --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-url-fg: var(--highlight-color-2);
--a-player-panel-bg: var(--highlight-color); --a-player-panel-bg: var(--highlight-color);
--a-player-bar-bg: var(--highlight-color); --a-player-bar-bg: var(--highlight-color);
--a-player-bar-title-alone-sz: 1.6rem; --a-player-bar-title-alone-sz: 1.6rem;
--button-fg: var(--highlight-color-2); --button-fg: var(--highlight-color-2);
--button-bg: var(--highlight-color); --button-bg: var(--highlight-color);
--button-sec-bg: var(--highlight-color-alpha);
--button-hg-fg: var(--text-color); --button-hg-fg: var(--text-color);
--button-hg-bg: var(--highlight-color); --button-hg-bg: var(--highlight-color);
--button-active-fg: 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; display: flex;
flex-direction: row; 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); font-size: var(--a-playlist-title-sz);
margin: 0; margin: 0;
padding: var(--a-playlist-title-pd); 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; height: 3rem;
background-color: var(--a-sound-bg); 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; color: var(--a-sound-playing-fg) !important;
} }
.a-sound-item:hover { .a-sound-item:hover {
background-color: var(--a-sound-hv-bg); background-color: var(--a-sound-hv-bg);
} }
.a-sound-item:hover .title { .a-sound-item:hover .label {
color: var(--a-sound-hv-fg) !important; 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"; content: "\f04b";
font-family: "Font Awesome 6 Free"; font-family: "Font Awesome 6 Free";
margin-right: 0.6em; margin-right: 0.6em;
} }
.a-sound-item.playing .title:hover::before { .a-sound-item.playing .label:hover::before {
content: ""; content: "";
margin: 0; margin: 0;
} }
.a-sound-item .title { .a-sound-item .label {
cursor: pointer; cursor: pointer;
margin: 0em; margin: 0em !important;
padding: 0.6em; 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; padding: 0em 0.6rem;
} }
.a-sound-item .button { .a-sound-item .button {
width: 3em; width: 3em;
font-size: var(--a-sound-text-sz);
} }
.player-container { .player-container {
@ -467,6 +476,7 @@ preview-header:not(.no-cover) .card-headings .heading, preview-header:not(.no-co
padding-top: 0.6rem; padding-top: 0.6rem;
padding-left: 0.6rem; padding-left: 0.6rem;
padding-right: 0.6rem; padding-right: 0.6rem;
border-right: 1px black solid;
} }
/* Bulma Utilities */ /* Bulma Utilities */
@ -7393,6 +7403,9 @@ a.tag:hover {
color: var(--button-fg); color: var(--button-fg);
background-color: var(--button-bg); 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 { .button .icon, a.button .icon, button.button .icon, .nav-urls a .icon {
vertical-align: middle; vertical-align: middle;
} }
@ -7403,7 +7416,6 @@ a.tag:hover {
margin-left: 0.6rem; margin-left: 0.6rem;
} }
.button:hover, a.button:hover, button.button:hover, .nav-urls a:hover { .button:hover, a.button:hover, button.button:hover, .nav-urls a:hover {
border-color: var(--button-hg-bg);
color: var(--button-hg-fg); color: var(--button-hg-fg);
opacity: 1 !important; 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 %} {% endfor %}
<div class="has-text-right"> <div class="has-text-right">
<button type="reset" class="button is-danger mr-3">{% translate "Reset" %}</button> <button type="submit" class="button">{% translate "Post comment" %}</button>
<button type="submit" class="button is-success">{% translate "Post comment" %}</button>
</div> </div>
</form> </form>
</section> </section>

1
aircox/views/diffusion.py
View File

@ -51,4 +51,5 @@ class TimeTableView(GetDateMixin, BaseDiffusionListView):
if object_list is None: if object_list is None:
logs = self.get_logs(self.date) logs = self.get_logs(self.date)
object_list = Log.merge_diffusions(logs, self.object_list) 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) 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-color: var(--highlight-color);
--a-progress-bar-pd: #{v.$mp-2}; --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-sz: #{v.$text-size};
--a-playlist-title-pd: #{v.$mp-3}; --a-playlist-title-pd: #{v.$mp-3};
--a-playlist-item-border: 1px var(--highlight-color-2) solid; --a-playlist-item-border: 1px var(--highlight-color-2) solid;
@ -32,7 +34,7 @@
--a-sound-hv-bg: var(--highlight-color); --a-sound-hv-bg: var(--highlight-color);
--a-sound-playing-fg: var(--highlight-color-alpha); --a-sound-playing-fg: var(--highlight-color-alpha);
--a-sound-hv-fg: var(--highlight-color-2); --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-url-fg: var(--highlight-color-2);
--a-player-panel-bg: var(--highlight-color); --a-player-panel-bg: var(--highlight-color);
@ -41,6 +43,7 @@
--button-fg: var(--highlight-color-2); --button-fg: var(--highlight-color-2);
--button-bg: var(--highlight-color); --button-bg: var(--highlight-color);
--button-sec-bg: var(--highlight-color-alpha);
--button-hg-fg: var(--text-color); --button-hg-fg: var(--text-color);
--button-hg-bg: var(--highlight-color); --button-hg-bg: var(--highlight-color);
--button-active-fg: var(--highlight-color); --button-active-fg: var(--highlight-color);
@ -111,6 +114,10 @@
color: var(--button-fg); color: var(--button-fg);
background-color: var(--button-bg); background-color: var(--button-bg);
&.secondary {
background-color: var(--button-sec-bg);
}
.icon { .icon {
vertical-align: middle; vertical-align: middle;
&:not(:only-child) { &:not(:only-child) {
@ -121,7 +128,6 @@
&:hover { &:hover {
border-color: var(--button-hg-bg);
color: var(--button-hg-fg); color: var(--button-hg-fg);
opacity: 1 !important; opacity: 1 !important;
} }
@ -469,12 +475,17 @@
.header { .header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
}
.title { .title, .button {
font-size: var(--a-playlist-title-sz); background-color: var(--a-playlist-header-bg);
margin: 0; color: var(--a-playlist-header-fg);
padding: var(--a-playlist-title-pd); }
.title {
font-size: var(--a-playlist-title-sz);
margin: 0;
padding: var(--a-playlist-title-pd);
}
} }
li { li {
@ -496,24 +507,24 @@
height: 3rem; height: 3rem;
background-color: var(--a-sound-bg); background-color: var(--a-sound-bg);
&.playing, &.playing .title { &.playing, &.playing .label {
color: var(--a-sound-playing-fg) !important; color: var(--a-sound-playing-fg) !important;
} }
&:hover { &:hover {
background-color: var(--a-sound-hv-bg); background-color: var(--a-sound-hv-bg);
.title { .label {
color: var(--a-sound-hv-fg) !important; color: var(--a-sound-hv-fg) !important;
} }
} }
.title:hover::before, &.playing .title::before { .label:hover::before, &.playing .label::before {
content: "\f04b"; content: "\f04b";
font-family: "Font Awesome 6 Free"; font-family: "Font Awesome 6 Free";
margin-right: v.$mp-3e; margin-right: v.$mp-3e;
} }
&.playing .title:hover::before { &.playing .label:hover::before {
content: ''; content: '';
margin: 0; margin: 0;
} }
@ -522,19 +533,22 @@
.headings > * { .headings > * {
} }
.title { .label {
cursor: pointer; cursor: pointer;
.icon { .icon {
padding: 0em v.$mp-3; padding: 0em v.$mp-3;
} }
margin: 0em; margin: 0em !important;
padding: v.$mp-3e; 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 { .button {
width: 3em; width: 3em;
font-size: var(--a-sound-text-sz);
} }
} }
@ -627,4 +641,5 @@
padding-top: v.$mp-3; padding-top: v.$mp-3;
padding-left: v.$mp-3; padding-left: v.$mp-3;
padding-right: 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' : '']"> <div :class="['a-player-bar-content', loaded && duration ? 'has-progress' : '']">
<slot name="content" :loaded="loaded" :live="live" :current="current"></slot> <slot name="content" :loaded="loaded" :live="live" :current="current"></slot>
</div> </div>
<div> <button class="button has-text-weight-bold" v-if="loaded" @click="play()"
<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="icon is-size-6 has-text-danger">
<span class="fa fa-circle"></span> <span class="fa fa-circle"></span>
</span> </span>
<span>Live</span> </button>
</button> <button ref="pinPlaylistButton" :class="playlistButtonClass('pin')"
<button ref="pinPlaylistButton" :class="playlistButtonClass('pin')" @click="togglePanel('pin')" v-show="sets.pin.length">
@click="togglePanel('pin')" v-show="sets.pin.length"> <span class="is-size-6" v-if="sets.pin.length">
<span class="is-size-6" v-if="sets.pin.length"> {{ sets.pin.length }}</span>
{{ sets.pin.length }}</span> <span class="icon"><span class="fa fa-star"></span></span>
<span class="icon"><span class="fa fa-star"></span></span> </button>
</button> <button :class="playlistButtonClass('queue')"
<button :class="playlistButtonClass('queue')" @click="togglePanel('queue')" v-show="sets.queue.length">
@click="togglePanel('queue')" v-show="sets.queue.length"> <span class="is-size-6" v-if="sets.queue.length">
<span class="is-size-6" v-if="sets.queue.length"> {{ sets.queue.length }}</span>
{{ sets.queue.length }}</span> <span class="icon"><span class="fa fa-list"></span></span>
<span class="icon"><span class="fa fa-list"></span></span> </button>
</button>
</div>
</div> </div>
</div> </div>
</template> </template>

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

@ -1,7 +1,7 @@
<template> <template>
<div :class="['a-sound-item m-0 button-group', playing && 'playing' || '']"> <div :class="['a-sound-item m-0 button-group', playing && 'playing' || '']">
<slot name="title" :player="player" :item="item" :loaded="loaded"> <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 }} {{ name || item.name }}
</span> </span>
</slot> </slot>

7
assets/src/index.js
View File

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