work on design: items, components

assets/package.json

@@ -12,7 +12,8 @@
     "@fortawesome/fontawesome-free": "^6.0.0",
     "core-js": "^3.8.3",
     "lodash": "^4.17.21",
-    "vue": "^3.2.13"
+    "vue": "^3.2.13",
+    "vue3-carousel": "^0.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -20,7 +21,7 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
-    "bulma": "^0.9.3",
+    "bulma": "^0.9.4",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "sass": "^1.49.9",

assets/src/app.js

@@ -1,13 +1,47 @@
+import 'vue3-carousel/dist/carousel.css'
 import components from './components'
 
+import { Carousel, Pagination, Navigation, Slide } from 'vue3-carousel'
+
 const App = {
     el: '#app',
     delimiters: ['[[', ']]'],
-    components: {...components},
+    components: {
+        ...components,
+        Slide,
+        Carousel,
+        Pagination,
+        Navigation,
+    },
 
     computed: {
         player() { return window.aircox.player; },
     },
+
+    data() {
+        return {
+            carouselBreakpoints: {
+                400: {
+                    itemsToShow: 1
+                },
+                600: {
+                    itemsToShow: 1.75
+                },
+                800: {
+                    itemsToShow: 3
+                },
+                1024: {
+                    itemsToShow: 4
+                },
+                1280: {
+                    itemsToShow: 4
+                },
+                1380: {
+                    itemsToShow: 5
+                },
+            }
+        }
+    }
 }
 
 export const PlayerApp = {

assets/src/assets/styles.scss

@@ -1,5 +1,50 @@
 @charset "utf-8";
 
+
+$font-special: "bagnard";
+$font-special-url: url("assets/Bagnard.otf");
+
+$black: #000;
+$white: #fff;
+
+$mp-1: 0.2em;
+$mp-2: 0.4em;
+$mp-3: 0.8em;
+$mp-4: 1.2em;
+$mp-5: 1.6em;
+$mp-6: 2em;
+$mp-7: 4em;
+
+$text-size-small: 0.6em;
+$text-size-smaller: 0.8em;
+$text-size: 1em;
+$text-size-medium: 1.2em;
+$text-size-bigger: 1.6em;
+$text-size-big: 2em;
+
+$h1-size: 40px;
+$h2-size: 32px;
+$h3-size: 28px;
+$h4-size: 24px;
+$h5-size: 20px;
+$h6-size: 14px;
+
+$weight-light: 100;
+$weight-lighter: 300;
+$weight-normal: 400;
+$weight-bolder: 500;
+$weight-bold: 700;
+
+$screen-very-small: 400px;
+//TODO: switch small & smaller
+$screen-small: 600px;
+$screen-smaller: 800px;
+$screen-normal: 1024px;
+$screen-wider: 1280px;
+$screen-wide: 1380px;
+
+
+
 @import "~bulma/sass/utilities/_all.sass";
 @import "~bulma/sass/components/dropdown.sass";
 
@@ -325,3 +370,324 @@ aside {
     width: 100%;
     border: none;
 }
+
+
+// -- layout
+
+:root {
+    --text-color: black;
+    --highlight-color: rgba(255, 255, 0, 1);
+    --highlight-color-alpha: rgba(255, 255, 0, 0.6);
+    --highlight-color-2: rgb(0, 0, 254);
+    --highlight-color-2-alpha: rgb(0, 0, 254, 0.6);
+    --heading-height: 30em;
+    --heading-title-bg-color: rgba(255, 255, 0, 1);
+    --heading-bg-color: var(--highlight-color);
+    --heading-bg-highlight-color: var(--highlight-color-2);
+
+    --preview-media-height: 10em;
+    --preview-media-cover-size: 10em;
+
+    --preview-cover-size: 24em;
+    --preview-cover-small-size: 14em;
+}
+
+.page a {
+    background-color: var(--highlight-color-alpha);
+    color: var(--text-color);
+}
+
+
+// ---- helpers
+.d-inline { display: inline; }
+.d-block { display: block; }
+.d-inline-block { display: inline-block; }
+
+.p-relative { position: relative }
+.p-absolute { position: absolute }
+.p-fixed { position: fixed }
+.p-sticky { position: sticky }
+.p-static { position: static }
+
+.height-full { height: 100%; }
+.flex-push-right { margin-left: auto; }
+
+
+.is-clickable { cursor: pointer; }
+
+// ---- components
+.btn-hg, .btn-outline-hg {
+    border: 0.1em var(--highlight-color) solid;
+    background-color: var(--highlight-color-alpha) !important;
+    border-radius: 0.2em;
+}
+
+
+.button {
+    &.action {
+        border-color: var(--highlight-color-2-alpha);
+        justify-content: center;
+        padding: $mp-2 !important;
+        min-width: 2em;
+
+        .icon { margin: 0em !important; }
+
+        label {
+            margin-left: $mp-2;
+        }
+    }
+
+}
+
+.list-filters {
+    text-align: right;
+}
+
+.content {
+    font-size: $text-size-medium;
+}
+
+
+// ---- items
+
+.preview {
+    position: relative;
+    background-size: cover;
+
+    &.preview-card {
+        &:not(.wide) {
+            max-width: 30em;
+        }
+    }
+
+    &.preview-item {
+        width: 100%;
+    }
+
+    &.columns, .headings.columns {
+        margin: 0em;
+        .column { padding: 0em; }
+    }
+
+    .title {
+        font-weight: $weight-bold;
+        font-size: $text-size-bigger;
+    }
+    .subtitle {
+        font-weight: $weight-bolder;
+        font-size: $text-size-bigger;
+    }
+    .content, .actions {
+        font-size: $text-size-medium;
+    }
+
+    .headings {
+        background-size: cover;
+
+        * { margin: 0em; padding: 0em; }
+
+        a {
+            color: var(--text-color);
+        }
+    }
+}
+
+.heading, .headings-container > * {
+    display: inline-block;
+
+    &:not(:empty) {
+        background-color: var(--heading-bg-color);
+        padding: $mp-1;
+        margin-top: 0em !important;
+        vertical-align: top;
+
+        &.highlight {
+            background-color: var(--heading-bg-highlight-color);
+            color: var(--highlight-color);
+        }
+    }
+
+    &.title {
+        background-color: var(--heading-title-bg-color);
+    }
+}
+
+.actions {
+    &.no-label label {
+        display: none;
+    }
+}
+
+
+
+
+.list-item {
+    width: 100%;
+
+    &:not(:last-child) {
+        margin-bottom: calc($mp-4 / 2);
+    }
+
+    &:not(:first-child) {
+        margin-top: calc($mp-4 / 2);
+    }
+
+    .headings {
+        padding-top: 0em;
+        margin-bottom: $mp-3 !important;
+        background-color: var(--heading-bg-color);
+    }
+
+    .media-content {
+        height: var(--preview-cover-small-size);
+        display: flex;
+        flex-direction: column;
+
+        .content { flex-grow: 1; }
+
+        .actions {
+            flex-grow: 0;
+            text-align: right;
+        }
+    }
+}
+
+
+// ---- cards
+.preview-cover {
+    background-size: cover;
+    height: var(--preview-cover-size);
+    width: var(--preview-cover-size);
+
+    &.small {
+        min-width: unset;
+        height: var(--preview-cover-small-size);
+        width: var(--preview-cover-small-size) !important;
+    }
+}
+
+.preview-card {
+    height: var(--preview-cover-size);
+    min-width: var(--preview-cover-size);
+
+    .card-grid & {
+        min-width: unset;
+    }
+
+    .headings {
+        width: 100%;
+        min-height: 100%;
+
+        padding-top: $mp-3;
+
+        & > div:not(:last-child) {
+            margin-bottom: $mp-3;
+        }
+
+        nav a {
+            font-size: 1em;
+        }
+    }
+
+    .heading {
+        margin-bottom: $mp-3;
+    }
+
+    .actions {
+        position: absolute;
+        bottom: $mp-3;
+        right: $mp-3;
+
+        label {
+            display: none;
+        }
+    }
+}
+
+
+
+.header {
+    background-size: cover;
+
+    .preview {
+        height: var(--heading-height);
+
+        &.no-cover {
+            height: unset;
+        }
+
+        .headings, > .container {
+            width: 100%;
+        }
+
+        > .container, {
+            height: 100%;
+        }
+    }
+
+    .preview-card {
+        max-width: unset;
+    }
+
+    .title {
+        font-size: $h1-size;
+    }
+    .subtitle {
+        font-size: $h2-size;
+    }
+    .content {
+        display: inline !important;
+        font-size: $text-size-medium;
+        font-weight: $weight-bolder;
+        text-align: right;
+
+
+        p {
+            margin-bottom: $mp-3
+        }
+    }
+
+}
+
+
+// -- program grid
+.preview-card {
+    header {
+        .info {
+            float: right;
+        }
+    }
+
+    &.is-active {
+        border-bottom: 1px var(--highlight-color) solid;
+    }
+
+}
+
+
+
+.card-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: $mp-4;
+}
+
+@media screen and (max-width: $screen-wide) {
+    .preview:not(.list-item) {
+        height: 20em !important;
+    }
+
+    .card-grid .preview-card {
+        height: 20em;
+    }
+}
+
+@media screen and (max-width: $screen-normal) {
+    .card-grid {
+        grid-template-columns: 1fr 1fr;
+
+        .preview-card:nth-child(3) {
+            display: none;
+        }
+    }
+}

assets/src/components/ACarousel.vue

@@ -0,0 +1,23 @@
+<template>
+  <carousel :items-to-show="1.5">
+    <slot></slot>
+    <template #addons>
+        <navigation />
+        <pagination />
+    </template>
+  </carousel>
+</template>
+
+<script>
+// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
+import 'vue3-carousel/dist/carousel.css'
+import { Carousel, Pagination, Navigation } from 'vue3-carousel'
+
+export default {
+  components: {
+    Carousel,
+    Pagination,
+    Navigation,
+  },
+}
+</script>

assets/src/components/ADropdown.vue

@@ -0,0 +1,43 @@
+<template>
+<div>
+    <div :class="itemClass" @click="noButton && toggle()">
+        <slot name="button">
+            <span :class="['float-right', buttonClass]" @click="toggle()">
+                <span class="icon">
+                    <i v-if="!active" :class="buttonIconOpen"></i>
+                    <i v-if="active" :class="buttonIconClose"></i>
+                </span>
+            </span>
+        </slot>
+        <slot name="item"></slot>
+    </div>
+    <div :class="contentClass" v-if="active">
+        <slot></slot>
+    </div>
+</div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            "active": this.open,
+        }
+    },
+
+    props: {
+        itemClass: String,
+        buttonClass: String,
+        buttonIconOpen: { type: String, default:"fa fa-angle-down"},
+        buttonIconClose: { type: String, default:"fa fa-angle-up"},
+        contentClass: String,
+        open: {type: Boolean, default: false},
+        noButton: {type: Boolean, default: false},
+    },
+
+    methods: {
+        toggle() {
+            this.active = !this.active
+        }
+    },
+}
+</script>

assets/src/components/index.js

@@ -1,4 +1,5 @@
 import AAutocomplete from './AAutocomplete.vue'
+import ADropdown from "./ADropdown.vue"
 import AEpisode from './AEpisode.vue'
 import AList from './AList.vue'
 import APage from './APage.vue'
@@ -14,7 +15,7 @@ import AStreamer from './AStreamer.vue'
  * Core components
  */
 export const base = {
-    AAutocomplete, AEpisode, AList, APage, APlayer, APlaylist,
+    AAutocomplete, ADropdown, AEpisode, AList, APage, APlayer, APlaylist,
     AProgress, ASoundItem,
 }