styles fix

aircox/locale/fr/LC_MESSAGES/django.po

@@ -126,11 +126,11 @@ msgstr "type"
 
 #: models/diffusion.py:137 models/log.py:131
 msgid "Diffusion"
-msgstr "Date de diffusion"
+msgstr "Diffusion"
 
 #: models/diffusion.py:138
 msgid "Diffusions"
-msgstr "Dates de diffusion"
+msgstr "Diffusions"
 
 #: models/diffusion.py:139
 msgid "edit the diffusions' planification"
@@ -325,7 +325,7 @@ msgstr "Page d'accueil"
 
 #: models/page.py:291
 msgid "Timetable"
-msgstr "Temps"
+msgstr "Horaires"
 
 #: models/page.py:292
 msgid "Programs list"

aircox/templates/aircox/home.html

@@ -58,7 +58,7 @@
 
 {% if podcasts %}
 <section class="container">
-    <h2 class="title is-3 p-2">{% translate "Last podcasts" %}</h2>
+    <h2 class="title">{% translate "Last podcasts" %}</h2>
     {% include "./widgets/carousel.html" with objects=podcasts url_name="podcast-list" url_label=_("All podcasts") %}
 </section>
 {% endif %}

aircox/templates/aircox/program_detail.html

@@ -2,10 +2,15 @@
 {% comment %}Detail page of a show{% endcomment %}
 {% load i18n aircox %}
 
-{% block content-container %}
+{% block content %}
+{{ block.super }}
+
 {% with schedules=object.schedule_set.all %}
-{% if schedules %}
+{% if object.active and schedules %}
-<header class="container schedules">
+<header class="schedules mt-3">
+    <h4 class="title is-4 mr-3">
+        {% translate "Diffusions" %}
+    </h4>
     {% for schedule in schedules %}
     <div class="schedule">
         <div class="heading">
@@ -33,8 +38,13 @@
 {% endif %}
 {% endwith %}
 
+{% endblock %}
+
+
+{% block main %}
 {{ block.super }}
 
+
 {% if episodes %}
 <section class="container">
     <h2 class="title is-2">{% translate "Last Episodes" %}</h2>

aircox/templates/aircox/widgets/episode.html

@@ -59,7 +59,7 @@
 {% block actions %}
 {{ block.super }}
 {% if object.episodesound_set.available.public.count %}
-<button class="button action" @click="player.playButtonClick($event)"
+<button type="button" class="button action" @click="player.playButtonClick($event)"
         data-sounds="{{ object.podcasts|json }}">
     <span class="icon is-small">
         <span class="fas fa-play"></span>

assets/src/components/AList.vue

@@ -16,7 +16,7 @@
 </template>
 <script>
 export default {
-    emits: ['select', 'unselect', 'move'],
+    emits: ['select', 'unselect', 'move', 'remove'],
     data() {
         return {
             selectedIndex: this.defaultIndex,
@@ -50,11 +50,16 @@ export default {
         findIndex(pred) { return this.set.findIndex(pred) },
 
         remove(index, select=false) {
+            const item = this.set.get(index)
+            if(!item)
+                return
+
             this.set.remove(index);
             if(index < this.selectedIndex)
                 this.selectedIndex--;
             if(select && this.selectedIndex == index)
                 this.select(index)
+            this.$emit('remove', {index, item, set: this.set})
         },
 
         select(index) {

assets/src/components/APlayer.vue

@@ -274,7 +274,6 @@ export default {
             if(event.type == 'ended' && (!this.playlist || this.playlist.selectNext() == -1))
                 this.play();
         },
-
     },
 
     mounted() {

assets/src/components/APlaylist.vue

@@ -29,7 +29,7 @@ import ASoundItem from './ASoundItem';
 
 export default {
     extends: AList,
-    emits: [...AList.emits, 'remove'],
+    emits: [...AList.emits],
     components: { ASoundItem },
 
     props: {

assets/src/pageLoad.js

@@ -141,7 +141,7 @@ export default class PageLoad {
         let submit = event.type == 'submit';
         let target = submit || event.target.tagName == 'A'
                         ? event.target : event.target.closest('a');
-        if(!target || target.hasAttribute('target') || (target.data && target.data.forceReload))
+        if(!target || target.hasAttribute('target') || (target.dataset && target.dataset.forceReload))
             return;
 
         let url = submit ? target.getAttribute('action') || ''

assets/src/styles/common.scss

@@ -16,7 +16,7 @@ input.half-field:not(:active):not(:hover) {
     --body-bg: #fff;
     --text-color: black;
     --text-color-light: #555;
-    --break-color: rgb(225, 225, 225);
+    --break-color: rgb(225, 225, 225, 0.8);
 
     --main-color: #EFCA08;
     --main-color-light: #F4da51;
@@ -67,7 +67,7 @@ body.mobile {
 }
 
 @media screen and (max-width: v.$screen-normal) {
-    html { font-size: 18px !important; }
+    html { font-size: 16px !important; }
 }
 
 @media screen and (max-width: v.$screen-wider) {
@@ -75,7 +75,7 @@ body.mobile {
 }
 
 @media screen and (min-width: v.$screen-wider) {
-    html { font-size: 24px !important; }
+    html { font-size: 20px !important; }
 }
 
 h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {

assets/src/styles/components.scss

@@ -1,10 +1,10 @@
 @use "vars" as v;
 
 :root {
-    --title-1-sz: 1.6rem;
+    --title-1-sz: 1.4rem;
-    --title-2-sz: 1.4rem;
+    --title-2-sz: 1.3rem;
-    --title-3-sz: 1.3rem;
+    --title-3-sz: 1.1rem;
-    --title-4-sz: 1.2rem;
+    --title-4-sz: 1.0rem;
     --subtitle-1-sz: 1.6rem;
     --subtitle-2-sz: 1.4rem;
     --subtitle-3-sz: 1.2rem;
@@ -16,22 +16,17 @@
     --heading-hg-bg: var(--secondary-color);
     --heading-link-hv-fg: var(--link-fg);
 
-    --cover-w: 14rem;
+    --cover-w: 10rem;
-    --cover-h: 14rem;
+    --cover-h: 10rem;
     --cover-small-w: 10rem;
     --cover-small-h: 10rem;
     --cover-tiny-w: 10rem;
     --cover-tiny-h: 10rem;
 
     --card-w: var(--cover-w);
-
-
     --preview-bg: var(--body-bg);
-    --preview-title-sz: var(--title-3-sz);
+    --preview-title-sz: var(--title-4-sz);
-    --preview-subtitle-sz: var(--title-3-sz);
+    --preview-subtitle-sz: var(--title-4-sz);
-    --preview-cover-size: 14rem;
-    --preview-cover-small-size: 10rem;
-    --preview-cover-tiny-size: 4rem;
     --preview-wide-content-sz: #{v.$text-size-2};
     --preview-heading-bg-color: var(--main-color);
     --header-height: var(--cover-h);
@@ -96,6 +91,23 @@
     }
 }
 
+@media screen and (max-width: v.$screen-wide) {
+    :root {
+        --cover-w: 8rem;
+        --cover-h: 8rem;
+        --cover-small-w: 4rem;
+        --cover-small-h: 4rem;
+        --cover-tiny-w: 2rem;
+        --cover-tiny-h: 2rem;
+
+        --section-content-sz: 1rem;
+
+        // --preview-title-sz: #{v.$text-size};
+        // --preview-subtitle-sz: #{v.$text-size-smaller};
+        // --preview-wide-content-sz: #{v.$text-size};
+    }
+}
+
 // ---- headings
 
 .no-reset h1 { font-size: var(--title-1-sz); }
@@ -133,7 +145,7 @@
     &:not(:empty) {
         // border-bottom: 1px var(--heading-bg) solid;
         // color: var(--heading-fg);
-        padding: v.$mp-2;
+        //padding: v.$mp-2;
         margin-top: 0em !important;
         vertical-align: top;
 
@@ -306,16 +318,16 @@
 
     &.small, .preview.small & {
         min-width: unset;
-        height: var(--preview-cover-small-size);
+        height: var(--cover-small-h);
-        width: var(--preview-cover-small-size) !important;
+        width: var(--cover-small-w) !important;
-        min-width: var(--preview-cover-small-size);
+        min-width: var(--cover-small-w);
     }
 
     &.tiny, .preview.tiny & {
         min-width: unset;
-        height: var(--preview-cover-tiny-size);
+        height: var(--cover-tiny-h);
-        width: var(--preview-cover-tiny-size) !important;
+        width: var(--cover-tiny-w) !important;
-        min-width: var(--preview-cover-tiny-size);
+        min-width: var(--cover-tiny-w);
     }
 }
 
@@ -378,7 +390,7 @@
         margin-bottom: unset;
 
         .list-item:not(.no-cover) & {
-            min-height: var(--preview-cover-small-size);
+            min-height: var(--cover-small-h);
         }
     }
 

assets/src/styles/public.scss

@@ -22,7 +22,7 @@
 
         &:not(:last-child) {
             padding-bottom: calc(v.$mp-4 / 2);
-            border-bottom: 2px var(--break-color) solid;
+            // border-bottom: 2px var(--break-color) solid;
         }
 
         > .title, h3.title {
@@ -60,7 +60,8 @@
     margin: v.$mp-3;
     margin-left: 0rem;
     padding: v.$mp-2;
-    border-bottom: 1px var(--main-color) solid;
+    text-color: var(--main-color);
+    background-color: var(--main-color-light);
 
     .heading {
         padding: 0em;