styling

aircox/models/sound.py

@@ -100,7 +100,7 @@ class Sound(models.Model):
     def _upload_to(self, filename):
         subdir = AIRCOX_SOUND_ARCHIVES_SUBDIR if self.type == self.TYPE_ARCHIVE else \
                  AIRCOX_SOUND_EXCERPTS_SUBDIR
-        return os.path.join(o.program.path, subdir, filename)
+        return os.path.join(self.program.path, subdir, filename)
 
     file = models.FileField(
         _('file'), upload_to=_upload_to

aircox/static/aircox/css/chunk-common.css

@@ -10648,6 +10648,22 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   opacity: 1;
 }
 
+.float-right {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-hidden.is-fullwidth {
+  max-width: 100%;
+}
+
 .navbar + .container {
   margin-top: 1em;
 }

aircox/templates/aircox/base.html

@@ -107,7 +107,7 @@ Usefull context:
                         {% block main %}
                             {% block content %}
                             {% if page and page.content %}
-                            <section class="page-content">{{ page.content|safe }}</section>
+                            <section class="page-content mb-2">{{ page.content|safe }}</section>
                             {% endif %}
                             {% endblock %}
                         {% endblock main %}

aircox/templates/aircox/page_detail.html

@@ -40,7 +40,7 @@ Context:
     <div class="media box">
         <div class="media-content">
             <p>
-                <strong>{{ comment.nickname }}</strong>
+                <strong class="mr-2">{{ comment.nickname }}</strong>
                 <time datetime="{{ comment.date }}" title="{{ comment.date }}">
                     <small>{{ comment.date|naturaltime }}</small>
                 </time>

aircox_streamer/templates/aircox_streamer/source_item.html

@@ -47,11 +47,11 @@
 
         <div v-if="source.isQueue">
             <hr>
-            <h6 class="title is-6 is-marginless">{% trans "Add sound" %}</h6>
-            <form class="columns" @submit.prevent="source.push($event.target.elements['sound_id'].value)">
-                <div class="column field is-small">
+            <h6 class="title is-6">{% trans "Add sound" %}</h6>
+            <form @submit.prevent="source.push($event.target.elements['sound_id'].value); $event.target.reset()">
+                <div class="field is-grouped">
                     {# TODO: select station => change the shit #}
-                    <a-autocomplete class="is-fullwidth"
+                    <a-autocomplete class="control is-expanded"
                         url="{% url "aircox:sound-list" %}?station={{ station.pk }}&search=${query}"
                         name="sound_id" :model="Sound" label-field="name"
                         placeholder="{% trans "Select a sound" %}">
@@ -60,12 +60,7 @@
                                 <span class="is-size-7 is-italic has-text-info">[[ item.data.file ]]</span>
                             </template>
                     </a-autocomplete>
-                    <p class="help">
-                    {% trans "Add a sound to the queue (queue may start playing)" %}
-                    </p>
-                    {# TODO: help text about how it works #}
-                </div>
-                <div class="column control is-one-fifth">
+                    <div class="control">
                         <button type="submit" class="button is-primary">
                             <span class="icon">
                                 <span class="fas fa-plus"></span>
@@ -73,6 +68,11 @@
                             <span>{% trans "Add" %}</span>
                         </button>
                     </div>
+                </div>
+                <p class="help">
+                {% trans "Add a sound to the queue (queue may start playing)" %}
+                </p>
+                {# TODO: help text about how it works #}
             </form>
 
             <div v-if="source.queue.length">

aircox_streamer/templates/aircox_streamer/streamer.html

@@ -24,8 +24,8 @@ aircox.init({apiUrl: "{% url "admin:api:streamer-list" %}"},
                 </span>
             </div>
             <div class="navbar-end">
-                <div class="select navbar-item">
-                    <select onchange="selectStreamer" class="control"
+                <div class="control navbar-item">
+                    <select onchange="selectStreamer" class="select"
                             title="{% trans "Select a station" %}"
                             aria-label="{% trans "Select a station" %}">
                         <option v-for="streamer of streamers" :value="streamer.id">[[ streamer.data.name ]]</option>

assets/src/assets/styles.scss

@@ -31,6 +31,11 @@ $body-background-color: $light;
     }
 }
 
+.float-right { float: right }
+.float-left { float: left }
+.overflow-hidden { overflow: hidden }
+.overflow-hidden.is-fullwidth { max-width: 100%; }
+
 //-- navbar
 .navbar + .container {
     margin-top: 1em;

assets/src/components/AAutocomplete.vue

@@ -1,19 +1,32 @@
 <template>
     <div :class="dropdownClass">
         <div class="dropdown-trigger is-fullwidth">
-            <div class="control is-expanded">
             <input type="hidden" :name="name"
                 :value="selectedValue" />
+            <div v-show="!selected" class="control is-expanded">
                 <input type="text" :placeholder="placeholder"
                     ref="input" class="input is-fullwidth"
-                    @keyup="onKeyUp" @focus="active=true" @click="active=true"/>
+                    @keydown.capture="onKeyPress"
+                    @keyup="onKeyUp" @focus="this.cursor < 0 && move(0)"/>
             </div>
+            <button v-if="selected" class="button is-normal is-fullwidth has-text-left is-inline-block overflow-hidden"
+                    @click="select(-1, false, true)">
+                <span class="icon is-small ml-1">
+                    <i class="fa fa-pen"></i>
+                </span>
+                <span class="is-inline-block" v-if="selected">
+                    <slot name="button" :index="selectedIndex" :item="selected"
+                        :value-field="valueField" :labelField="labelField">
+                    {{ selected.data[labelField] }}
+                    </slot>
+                </span>
+            </button>
         </div>
         <div class="dropdown-menu is-fullwidth">
             <div class="dropdown-content" style="overflow: hidden">
                 <a v-for="(item, index) in items" :key="item.id"
-                    :class="['dropdown-item', index === this.selectedIndex ? 'is-active':'']"
-                    @click="select(index); active=false" :title="item.data[labelField]">
+                    :class="['dropdown-item', (index == this.cursor) ? 'is-active':'']"
+                    @click.capture.prevent="select(index, false, false)" :title="item.data[labelField]">
                     <slot name="item" :index="index" :item="item" :value-field="valueField"
                         :labelField="labelField">
                     {{ item.data[labelField] }}
@@ -40,10 +53,10 @@ export default {
 
     data() {
         return {
-            active: false,
             value: '',
             items: [],
             selectedIndex: -1,
+            cursor: -1,
             isFetching: false,
         }
     },
@@ -69,13 +82,19 @@ export default {
         },
 
         dropdownClass() {
-            const active = this.active && this.items.length;
+            const active = this.cursor > -1 && this.items.length;
             return ['dropdown', active ? 'is-active':'']
         },
     },
 
     methods: {
-        select(index, relative) {
+        move(index=-1, relative=false) {
+            if(relative)
+                index += this.cursor
+            this.cursor = Math.max(-1, Math.min(index, this.items.length-1))
+        },
+    
+        select(index=-1, relative=false, active=null) {
             if(relative)
                 index += this.selectedIndex
             else if(index == this.selectedIndex)
@@ -86,28 +105,39 @@ export default {
                 this.$refs.input.value = this.selectedLabel
                 this.$refs.input.focus()
             }
+            if(this.selectedIndex < 0)
+                this.$emit('unselect')
+            else
                 this.$emit('select', index, this.selected, this.selectedValue)
+
+            if(active!==null)
+                active && this.move(0) || this.move(-1)
+        },
+
+        onKeyPress: function(event) {
+            switch(event.keyCode) {
+                case 13: this.select(this.cursor, false, false)
+                         break
+                case 27: this.select()
+                         break
+                case 38: this.move(-1, true)
+                         break
+                case 40: this.move(1, true)
+                         break
+                default: return
+            }
+            event.preventDefault()
+            event.stopPropagation()
         },
 
         onKeyUp: function(event) {
-            this.active = true
-            switch(event.keyCode) {
-                case 27: this.active = false
-                         return
-                case 38: this.select(-1, true)
-                         return
-                case 40: this.select(1, true)
-                         return
-            }
-
-
             const value = event.target.value
             if(value === this.value)
                 return
 
             this.value = value;
             if(!value)
-                return this.select(null)
+                return this.selected && this.select(-1)
 
             this.fetch(value)
         },
@@ -120,11 +150,16 @@ export default {
             return this.model.fetch(this.url.replace('${query}', query), {many:true})
                 .then(items => { this.items = items || []
                                  this.isFetching = false
-                                 this.active = items.length > 0
+                                 this.move(0)
                                  return items },
                       data => {this.isFetching = false; Promise.reject(data)})
         },
     },
+
+    mounted() {
+        const form = this.$el.closest('form')
+        form.addEventListener('reset', () => { this.value=''; this.select(-1) })
+    }
 }
 
 </script>

assets/src/components/APlayer.vue

@@ -40,7 +40,7 @@
             <div class="media-content">
                 <slot name="content" :loaded='loaded' :live='live'></slot>
                 <AProgress v-if="loaded && duration" :value="currentTime" :max="this.duration"
-                    :format="displayTime"
+                    :format="displayTime" class="pt-1 is-size-7"
                     @select="audio.currentTime = $event"></AProgress>
             </div>
             <div class="media-right">