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

WIP: Design #135

Closed
thomas wants to merge 64 commits from dev-1.0-118-design into develop-1.0
pull from: dev-1.0-118-design
merge into: rc:develop-1.0
Conversation 1 Commits 64 Files Changed 120 +23747 -5761
77 changed files with 23747 additions and 5761 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 69d77e1d0c - Show all commits

44
aircox/static/aircox/css/chunk-common.css
View File

@ -9403,9 +9403,11 @@ a.navbar-item.is-active {
--preview-cover-small-size: 10em;
--player-panel-bg: var(--highlight-color-alpha);
--player-bar-bg: var(--highlight-color);
--progress-border: 1px var(--highlight-color-2) solid;
--progress-bg-color: transparent;
--progress-bar-color: var(--highlight-color-2);
--progress-border-size: 1px;
--progress-border: var(--progress-border-size) var(--highlight-color-2) solid;
--progress-bg: transparent;
--progress-bar-bg: var(--highlight-color-2);
--progress-bar-color: var(--highlight-color);
}
body {
@ -9583,6 +9585,15 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
font-size: unset !important;
}
.list-urls {
margin-top: 0.8em;
text-align: right;
font-size: 1.4em;
}
.list-urls a:not(:last-child) {
margin-right: 0.8em;
}
.vc-weekday-1, .vc-weekday-7 {
color: var(--highlight-color-2) !important;
}
@ -9840,15 +9851,19 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
flex-direction: row;
margin: 0em;
padding: 0em;
background-color: var(--progress-bg-color);
background-color: var(--progress-bg);
}
.a-progress .a-progress-bar-container {
flex-grow: 1;
margin: 0em 0.8em;
border: var(--progress-border);
margin: 0em;
}
.a-progress > time, .a-progress .a-progress-bar {
height: 100%;
padding: 0.4em;
}
.a-progress .a-progress-bar {
background-color: var(--progress-bar-color);
background-color: var(--progress-bar-bg);
color: var(--progress-bar-color);
}
.playlist .header, .a-playlist .header {
@ -9923,6 +9938,21 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
background-color: transparent;
}
.a-player-progress {
background: var(--player-bar-bg);
height: 0.4em;
overflow: hidden;
}
.a-player-progress time {
display: none;
}
.a-player-progress:hover {
height: 2em;
}
.a-player-progress:hover time {
display: unset;
}
.a-player-bar {
display: flex;
background: var(--player-bar-bg);

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

File diff suppressed because one or more lines are too long

14
aircox/templates/aircox/home.html
View File

@ -38,6 +38,13 @@
{% for object in logs %}
{% include "./widgets/log.html" with widget="item" %}
{% endfor %}
<nav class="list-urls">
<a href="{% url "diffusion-list" %}"
aria-label="{% translate "Show all program's for today" %}">
{% translate "Today" %}
</a>
</nav>
</section>
{% endif %}
@ -50,6 +57,13 @@
{% page_widget "item" object open=True %}
{% endfor %}
</div>
<nav class="list-urls">
<a href="{% url "page-list" %}"
aria-label="{% translate "Show all publications" %}">
{% translate "All publications" %}
</a>
</nav>
</section>
{% endif %}
{% endblock %}

22
aircox/templates/aircox/program_detail.html
View File

@ -16,12 +16,10 @@
{% endfor %}
</section>
<nav class="has-text-right">
<li class="nav-item">
<a href="{% url "episode-list" parent_slug=program.slug %}">
{% translate "All episodes" %}
</a>
</li>
<nav class="list-urls">
<a href="{% url "episode-list" parent_slug=program.slug %}">
{% translate "All episodes" %}
</a>
</nav>
</section>
{% endif %}
@ -37,13 +35,11 @@
{% endfor %}
</section>
<nav class="has-text-right">
<li class="nav-item">
<a href="{% url "article-list" parent_slug=program.slug %}"
aria-label="{% translate "Show all program's articles" %}">
{% translate "All articles" %}
</a>
</li>
<nav class="list-urls">
<a href="{% url "article-list" parent_slug=program.slug %}"
aria-label="{% translate "Show all program's articles" %}">
{% translate "All articles" %}
</a>
</nav>
</section>
{% endif %}

42
assets/src/assets/styles.scss
View File

@ -173,9 +173,11 @@ a.navbar-item.is-active {
--player-panel-bg: var(--highlight-color-alpha);
--player-bar-bg: var(--highlight-color);
--progress-border: 1px var(--highlight-color-2) solid;
--progress-bg-color: transparent;
--progress-bar-color: var(--highlight-color-2);
--progress-border-size: 1px;
--progress-border: var(--progress-border-size) var(--highlight-color-2) solid;
--progress-bg: transparent;
--progress-bar-bg: var(--highlight-color-2);
--progress-bar-color: var(--highlight-color);
}
@ -341,6 +343,15 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
font-size: unset !important
}
.list-urls {
margin-top: $mp-3;
text-align: right;
font-size: $text-size-medium;
a:not(:last-child) {
margin-right: $mp-3;
}
}
.vc-weekday-1, .vc-weekday-7 {
color: var(--highlight-color-2) !important;
@ -668,16 +679,21 @@ nav li {
flex-direction: row;
margin: 0em;
padding: 0em;
background-color: var(--progress-bg-color);
background-color: var(--progress-bg);
.a-progress-bar-container {
flex-grow: 1;
margin: 0em $mp-3;
border: var(--progress-border);
margin: 0em;
}
> time, .a-progress-bar {
height: 100%;
padding: $mp-2;
}
.a-progress-bar {
background-color: var(--progress-bar-color);
background-color: var(--progress-bar-bg);
color: var(--progress-bar-color)
}
}
@ -769,6 +785,18 @@ nav li {
}
}
.a-player-progress {
background: var(--player-bar-bg);
height: 0.4em;
overflow: hidden;
time { display: none; }
&:hover {
height: 2em;
time { display: unset; }
}
}
.a-player-bar {
display: flex;

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

@ -36,6 +36,11 @@
</APlaylist>
</div>
<div class="a-player-progress" v-if="loaded && duration">
<AProgress v-if="loaded && duration" :value="currentTime" :max="this.duration"
:format="displayTime"
@select="audio.currentTime = $event"></AProgress>
</div>
<div class="a-player-bar button-group">
<button class="button" @click="togglePlay()"
:title="buttonTitle" :aria-label="buttonTitle">
@ -47,9 +52,6 @@
</div>
<div :class="['a-player-bar-content', loaded && duration ? 'has-progress' : '']">
<slot name="content" :loaded="loaded" :live="live" :current="current"></slot>
<AProgress v-if="loaded && duration" :value="currentTime" :max="this.duration"
:format="displayTime" class="pt-1 is-size-7"
@select="audio.currentTime = $event"></AProgress>
</div>
<div>
<button class="button has-text-weight-bold" v-if="loaded" @click="play()">
@ -251,6 +253,7 @@ export default {
//! Play/pause
togglePlay(playlist=null, index=0) {
if(playlist !== null) {
this.panel = null;
let item = this.sets[playlist].get(index);
if(!this.playlist || this.playlistName !== playlist || this.loaded != item) {
this.play(playlist, index);

9
assets/src/components/AProgress.vue
View File

@ -1,11 +1,16 @@
<template>
<div class="a-progress m-0">
<time class="time-now">
<slot name="value" :value="valueDisplay" :max="max">{{ format(valueDisplay) }}</slot>
<slot name="value" :value="value" :max="max">{{ format(value) }}</slot>
</time>
<div ref="bar" class="a-progress-bar-container" @click.stop="onClick" @mouseleave.stop="onMouseMove"
@mousemove.stop="onMouseMove">
<div :class="progressClass" :style="progressStyle">&nbsp;</div>
<div :class="progressClass" :style="progressStyle">
<time>
{{ hoverValue && format(hoverValue) || "))))"}}
</time>
&nbsp;
</div>
</div>
<time class="time-total">
<slot name="value" :value="valueDisplay" :max="max">{{ format(max) }}</slot>