feat: work on date menu

assets/package.json

@@ -10,8 +10,10 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.0.0",
+    "@popperjs/core": "^2.11.8",
     "core-js": "^3.8.3",
     "lodash": "^4.17.21",
+    "v-calendar": "^3.1.2",
     "vue": "^3.2.13",
     "vue3-carousel": "^0.3.1"
   },

assets/src/app.js

@@ -1,4 +1,4 @@
-import 'vue3-carousel/dist/carousel.css'
+import {Calendar, DatePicker} from 'v-calendar';
 import components from './components'
 
 import { Carousel, Pagination, Navigation, Slide } from 'vue3-carousel'
@@ -12,6 +12,10 @@ const App = {
         Carousel,
         Pagination,
         Navigation,
+        ...{
+            VCalendar: Calendar,
+            VDatepicker: DatePicker
+        },
     },
 
     computed: {

assets/src/appBuilder.js

@@ -15,14 +15,17 @@ export default class Builder {
     /**
      * Fetch app from remote and mount application.
      */
-    fetch(url, {el='#app', ...options}={}) {
-        return fetch(url, options).then(response => response.text())
+    fetch(url, {el='#app', historySave=true, ...options}={}) {
+        const fut = fetch(url, options).then(response => response.text())
             .then(content => {
                 let doc = new DOMParser().parseFromString(content, 'text/html')
                 let app = doc.querySelector(el)
                 content = app ? app.innerHTML : content
                 return this.mount({content, title: doc.title, reset:true, url })
             })
+        if(historySave)
+            fut.then(() => this.historySave(url))
+        return fut
     }
 
     /**
@@ -61,7 +64,9 @@ export default class Builder {
             container.innerHTML = content
         if(title)
             document.title = title
-        return createApp(config, props)
+        const app = createApp(config, props)
+        app.config.globalProperties.window = window
+        return app
     }
 
     unmount() {
@@ -106,7 +111,7 @@ export default class Builder {
             else
                 options = {...options, method: target.method, body: formData}
         }
-        this.fetch(url, options).then(() => this.historySave(url))
+        this.fetch(url, options)
         event.preventDefault();
         event.stopPropagation();
     }

assets/src/assets/styles.scss

@@ -1,6 +1,5 @@
 @charset "utf-8";
 
-
 $font-special: "bagnard";
 $font-special-url: url("assets/Bagnard.otf");
 
@@ -45,14 +44,32 @@ $screen-wide: 1380px;
 
 
 
+@import 'v-calendar/style.css';
 @import "~bulma/sass/utilities/_all.sass";
-@import "~bulma/sass/components/dropdown.sass";
 
 $body-background-color: $light;
 $menu-item-hover-background-color: #dfdfdf;
 $menu-item-active-background-color: #d2d2d2;
 
-@import "~bulma";
+@import "~bulma/sass/base/_all";
+@import "~bulma/sass/components/_all";
+@import "~bulma/sass/form/_all";
+@import "~bulma/sass/grid/_all";
+@import "~bulma/sass/helpers/_all";
+@import "~bulma/sass/layout/_all";
+@import "~bulma/sass/elements/box";
+@import "~bulma/sass/elements/button";
+@import "~bulma/sass/elements/container";
+@import "~bulma/sass/elements/content";
+@import "~bulma/sass/elements/icon";
+// @import "~bulma/sass/elements/image";
+// @import "~bulma/sass/elements/notification";
+@import "~bulma/sass/elements/progress";
+@import "~bulma/sass/elements/table";
+@import "~bulma/sass/elements/tag";
+@import "~bulma/sass/elements/title";
+
+
 
 //-- helpers/modifiers
 .is-fullwidth { width: 100%; }
@@ -157,40 +174,6 @@ a.navbar-item.is-active {
     }
 }
 
-//-- cards
-.card {
-    .title {
-        a {
-            color: $dark;
-        }
-
-        padding: 0.2em;
-        font-size: $size-5;
-        font-weight: $weight-medium;
-    }
-
-    &.is-primary {
-        box-shadow: 0em 0em 0.5em $black
-    }
-}
-
-.card-super-title {
-    position: absolute;
-    z-index: 1000;
-    font-size: $size-6;
-    font-weight: $weight-bold;
-    padding: 0.2em;
-    top: 1em;
-    background-color: #ffffffc7;
-    max-width: 90%;
-
-    .fas {
-        padding: 0.1em;
-        font-size: 0.8em;
-    }
-}
-
-
 //-- page
 .page {
     & > .cover {
@@ -221,6 +204,7 @@ a.navbar-item.is-active {
 }
 
 
+// FIXME: remove -> only used in comment
 .media.item .headline {
     line-height: 1.2em;
     max-height: calc(1.2em * 3);
@@ -503,6 +487,54 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
     }
 }
 
+.dropdown-item {
+    font-size: unset !important
+}
+
+
+.vc-weekday-1, .vc-weekday-7 {
+    color: var(--highlight-color-2) !important;
+}
+
+
+// ---- secondary navigation
+nav {
+    margin: $mp-3 0;
+
+    .nav-item {
+        font-family: unset;
+        list-style: none;
+        display: inline-block;
+        margin-bottom: $mp-3;
+        vertical-align: unset !important;
+
+        a, .button {
+            padding: $mp-3;
+            border: 1px solid hsl(0deg, 0%, 86%);
+            background-color: var(--highlight-color);
+        }
+
+        button, .button {
+            vertical-align: inherit;
+            padding-top: $mp-3;
+            padding-bottom: $mp-3;
+            height: unset !important;
+        }
+
+        &.active a, &.active button {
+            background-color: var(--highlight-color-2);
+            color: var(--highlight-color);
+        }
+
+        &:not(:last-child) {
+            margin-right: $mp-2;
+        }
+
+    }
+}
+
+
+
 // ---- ---- previews & page items
 .preview {
     position: relative;
@@ -548,8 +580,6 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
 }
 
 
-
-
 .list-item {
     width: 100%;
 
@@ -568,10 +598,13 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
     }
 
     .media-content {
-        height: var(--preview-cover-small-size);
         display: flex;
         flex-direction: column;
 
+        .list-item:not(.no-cover) & {
+            height: var(--preview-cover-small-size);
+        }
+
         .content { flex-grow: 1; }
 
         .actions {
@@ -639,26 +672,6 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
 }
 
 
-.preview-nav {
-    margin-top: $mp-3;
-
-    .nav-item {
-        font-size: $text-size-bigger;
-        font-family: unset;
-        list-style: none;
-        display: inline-block;
-
-        &:not(:last-child) {
-            margin-right: $mp-2;
-        }
-
-        a {
-            padding: $mp-3;
-        }
-    }
-}
-
-
 .preview-header {
     width: 100%;
 

assets/src/components/ACarousel.vue

@@ -1,23 +0,0 @@
-<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

@@ -1,24 +1,18 @@
 <template>
-<div>
-    <div :class="['a-dropdown', itemClass, active ? activeClass : '']"
-            style="display: flex; flex-direction: row"
-            @click="noButton && toggle()">
-        <div style="flex:auto">
-            <slot name="item"></slot>
-        </div>
-        <slot name="button">
-            <span :class="[buttonClass]" style="flex-grow:0" @click="toggle()">
-                <span class="icon">
-                    <i v-if="!active" :class="buttonIconOpen"></i>
-                    <i v-if="active" :class="buttonIconClose"></i>
-                </span>
+<component :is="tag" :class="[itemClass, active ? activeClass : '']">
+    <slot name="before-button"></slot>
+    <slot name="button" :toggle="toggle" :active="active">
+        <button :class="[buttonClass]" @click="toggle()">
+            <span class="icon">
+                <i v-if="!active" :class="buttonIconOpen"></i>
+                <i v-if="active" :class="buttonIconClose"></i>
             </span>
-        </slot>
-    </div>
-    <div :class="contentClass" v-if="active">
+        </button>
+    </slot>
+    <div :class="contentClass" v-show="active">
         <slot></slot>
     </div>
-</div>
+</component>
 </template>
 <script>
 export default {
@@ -29,9 +23,9 @@ export default {
     },
 
     props: {
-        itemClass: String,
+        tag: {type: String, default: "div"},
         activeClass: {type: String, default: "is-active"},
-        buttonClass: String,
+        buttonClass: {type: String, default: "button"},
         buttonIconOpen: { type: String, default:"fa fa-angle-down"},
         buttonIconClose: { type: String, default:"fa fa-angle-up"},
         contentClass: String,

assets/src/index.js

@@ -12,6 +12,7 @@ import Builder from './appBuilder'
 import Sound from './sound'
 import {Set} from './model'
 
+import "./assets/vendor"
 import './assets/styles.scss'
 
 
@@ -68,5 +69,10 @@ window.aircox = {
         else
             for(let item of container.querySelectorAll('a.navbar-item'))
                 item.style.display = null;
+    },
+
+    pickDate(url, date) {
+        url = `${url}?date=${date.id}`
+        this.builder.fetch(url)
     }
 }