work on website; fix stuffs on aircox too

aircox_web/assets/index.js

@@ -1,3 +1,5 @@
 import './js';
 import './styles.scss';
+import './noscript.scss';
+import './vue';
 

aircox_web/assets/js/index.js

@@ -3,9 +3,12 @@ import Buefy from 'buefy';
 
 Vue.use(Buefy);
 
-var app = new Vue({
-  el: '#app',
-})
+window.addEventListener('load', () => {
+    var app = new Vue({
+      el: '#app',
+      delimiters: [ '[[', ']]' ],
+    })
+});
 
 
 

aircox_web/assets/styles.scss

@@ -10,9 +10,12 @@ $body-background-color: $light;
 }
 
 .navbar.has-shadow {
-    box-shadow: 0em 0.1em 0.5em rgba(0,0,0,0.1);
+    box-shadow: 0em 0.05em 0.5em rgba(0,0,0,0.1);
 }
 
+/*
+
+
 .navbar-brand img {
     min-height: 6em;
 }
@@ -20,5 +23,22 @@ $body-background-color: $light;
 .navbar-menu .navbar-item:not(:last-child) {
     border-right: 1px $grey solid;
 }
+*/
 
 
+/** page **/
+img.cover {
+    border: 0.2em black solid;
+}
+
+
+.headline {
+    font-size: 1.2em;
+    padding: 0.2em 0em;
+}
+
+img.cover {
+    float: right;
+    max-width: 40%;
+}
+

aircox_web/assets/vue/index.js

@@ -0,0 +1,11 @@
+import Vue from 'vue';
+
+import Tab from './tab.vue';
+import Tabs from './tabs.vue';
+
+Vue.component('a-tab', Tab);
+Vue.component('a-tabs', Tabs);
+
+export {Tab, Tabs};
+
+

aircox_web/assets/vue/tab.vue

@@ -0,0 +1,31 @@
+<template>
+    <li @click.prevent="onclick"
+        :class="{'is-active': $parent.value == value}">
+        <slot></slot>
+    </li>
+</template>
+
+<script>
+export default {
+    props: {
+        value: { default: undefined },
+    },
+
+    methods: {
+        select() {
+            this.$parent.selectTab(this);
+        },
+
+        onclick(event) {
+            this.select();
+            /*if(event.target.href != document.location)
+                window.history.pushState(
+                    { url: event.target.href },
+                    event.target.innerText + ' - ' + document.title,
+                    event.target.href
+                ) */
+        }
+    }
+}
+</script>
+

aircox_web/assets/vue/tabs.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <div class="tabs is-centered">
+            <ul><slot name="tabs" :value="value" /></ul>
+        </div>
+
+        <slot :value="value"/>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        default: { default: null },
+    },
+
+    data() {
+        return {
+            value: this.default,
+        }
+    },
+
+    computed: {
+        tab() {
+            const vnode = this.$slots.default && this.$slots.default.find(
+                elm => elm.child && elm.child.value == this.value
+            );
+            return vnode && vnode.child;
+        }
+    },
+
+    methods: {
+        selectTab(tab) {
+            const value = tab.value;
+            if(this.value === value)
+                return;
+
+            this.value = value;
+            this.$emit('select', {target: this, value: value, tab: tab});
+        },
+    },
+}
+</script>
+
+