aircox/static/aircox/css/admin.css

@@ -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;
 }

aircox/static/aircox/css/public.css

@@ -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;
 }

aircox/templates/aircox/page_detail.html

@@ -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">{% translate "Post comment" %}</button>
-            <button type="submit" class="button is-success">{% translate "Post comment" %}</button>
         </div>
     </form>
 </section>

aircox/views/diffusion.py

@@ -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)

assets/src/assets/components.scss

@@ -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,6 +475,10 @@
     .header {
         display: flex;
         flex-direction: row;
+
+        .title, .button {
+            background-color: var(--a-playlist-header-bg);
+            color: var(--a-playlist-header-fg);
         }
 
         .title {
@@ -476,6 +486,7 @@
             margin: 0;
             padding: var(--a-playlist-title-pd);
         }
+    }
 
     li {
         list-style: none;
@@ -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;
     }

assets/src/components/APlayer.vue

@@ -53,12 +53,11 @@
             <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()"
-                <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>
-                    <span>Live</span>
             </button>
             <button ref="pinPlaylistButton" :class="playlistButtonClass('pin')"
                     @click="togglePanel('pin')" v-show="sets.pin.length">
@@ -72,8 +71,6 @@
                     {{ sets.queue.length }}</span>
                 <span class="icon"><span class="fa fa-list"></span></span>
             </button>
-
-            </div>
         </div>
     </div>
 </template>

assets/src/components/ASoundItem.vue

@@ -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>

assets/src/index.js

@@ -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
      */