#203 dedesign header

assets/style.scss

@@ -49,15 +49,24 @@ html {
 
 body {
     margin: 2rem;
-    margin-top: 160px;
     background-image: linear-gradient(74deg, rgba(236, 236, 236,0.02) 0%, rgba(236, 236, 236,0.02) 13%,transparent 13%, transparent 64%,rgba(55, 55, 55,0.02) 64%, rgba(55, 55, 55,0.02) 71%,rgba(239, 239, 239,0.02) 71%, rgba(239, 239, 239,0.02) 100%),linear-gradient(170deg, rgba(8, 8, 8,0.02) 0%, rgba(8, 8, 8,0.02) 1%,transparent 1%, transparent 60%,rgba(9, 9, 9,0.02) 60%, rgba(9, 9, 9,0.02) 80%,rgba(198, 198, 198,0.02) 80%, rgba(198, 198, 198,0.02) 100%),linear-gradient(118deg, rgba(134, 134, 134,0.02) 0%, rgba(134, 134, 134,0.02) 30%,transparent 30%, transparent 43%,rgba(85, 85, 85,0.02) 43%, rgba(85, 85, 85,0.02) 47%,rgba(103, 103, 103,0.02) 47%, rgba(103, 103, 103,0.02) 100%),linear-gradient(249deg, rgba(178, 178, 178,0.02) 0%, rgba(178, 178, 178,0.02) 8%,transparent 8%, transparent 47%,rgba(161, 161, 161,0.02) 47%, rgba(161, 161, 161,0.02) 61%,rgba(19, 19, 19,0.02) 61%, rgba(19, 19, 19,0.02) 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
 }
 
-main {
+.container {
     margin: 0 auto;
+    width: 100%;
     max-width: min(90vw, 920px);
 }
 
+@include media-breakpoint-up('lg', $grid-breakpoints) {
+    body {
+        margin-top: $header-margin;
+    }
+    .sticky-top {
+        top: $header-height - 1px;
+    }
+}
+
 section {
     margin: 2*$spacer 0;
 }

assets/variables.scss

@@ -7,6 +7,9 @@ $alert-border-level: -3;
 $link-decoration: none;
 $link-hover-decoration: underline;
 
+$header-height: 80px;
+$header-margin: $header-height + 36px;
+
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";

components/Dropdown.vue

@@ -5,7 +5,7 @@
         >
             <slot name="toggle">Dropdown</slot>
         </button>
-        <ul :class="['dropdown-menu', shown ? 'show' : '']" >
+        <ul :class="['dropdown-menu', end ? 'dropdown-menu-end' : '', shown ? 'show' : '']" >
             <slot name="menu">
                 <li class="dropdown-item">Option</li>
             </slot>
@@ -17,6 +17,7 @@
     export default {
         props: {
             btnClass: { 'default': 'btn-secondary' },
+            end: { type: Boolean },
         },
         data() {
             return {
@@ -42,3 +43,9 @@
         },
     }
 </script>
+
+<style lang="scss" scoped>
+    .dropdown-menu-end {
+        right: 0;
+    }
+</style>

components/Header.vue

@@ -1,67 +1,31 @@
 <template>
     <header v-if="config.header" class="mb-4">
-        <div class="mb-3 d-flex justify-content-between align-items-center flex-column flex-md-row">
+        <div class="d-none d-lg-flex justify-content-between align-items-center flex-row nav-custom btn-group mb-0">
-            <h1 class="text-nowrap">
+            <nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`nav-item btn btn-sm ${isActiveRoute(link) ? 'active' : ''} ${link.header ? 'flex-grow-0' : ''}`">
-                <nuxt-link to="/">
+                <h1 v-if="link.header" class="text-nowrap">
                     <Icon v="tags"/>
                     <span class="higher"><T>title</T></span>
-                </nuxt-link>
+                </h1>
-            </h1>
+                <template v-else>
-            <div class="flex-grow-1 btn-group d-flex nav-custom mb-2">
-                <nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
                     <Icon :v="link.icon" size="1.6"/>
                     <br/>
                     <span class="text-nowrap"><Spelling :text="link.text"/></span>
-                </nuxt-link>
+                </template>
-            </div>
+            </nuxt-link>
-            <div>
+            <div class="nav-item flex-grow-0">
-                <div v-if="config.locale === 'zh'" class="btn-group m-2">
+                <VersionDropdown end/>
-                    <button v-for="(display, code) in {traditional: '繁體', simplified: '简体'}"
-                            :class="'btn btn-sm ' + (spelling === code ? 'btn-secondary disabled' : 'btn-outline-secondary')"
-                            :disabled="spelling === code"
-                            @click="setSpelling(code)"
-                    >
-                        {{display}}
-                    </button>
-                </div>
-                <Dropdown v-if="Object.keys(locales).length > 1" btnClass="btn-outline-secondary btn-sm" class="d-inline-block">
-                    <template v-slot:toggle>
-                        <Icon v="language"/>
-                        {{locales[config.locale].name}}
-                    </template>
-
-                    <template v-slot:menu>
-                        <li v-for="(options, locale) in locales" :key="locale" v-if="locale !== config.locale">
-                            <a :href="options.url" class="dropdown-item">
-                                {{options.name}}
-                            </a>
-                        </li>
-                        <li class="dropdown-divider"></li>
-                        <li>
-                            <LocaleLink locale="en" link="/blog/creating-new-language-version" class="dropdown-item small">
-                                <Icon v="plus"/>
-                                <T>localise.shorter</T>
-                            </LocaleLink>
-                        </li>
-                    </template>
-                </Dropdown>
-                <!--
-                <div class="btn-group">
-                    <a v-for="(options, locale) in locales" :key="locale"
-                       :href="options.url"
-                       :class="'btn btn-sm ' + (locale === config.locale ? 'btn-secondary disabled' : 'btn-outline-secondary')"
-                       :disabled="locale === config.locale"
-                    >
-                        {{options.name}}
-                    </a>
-                    <LocaleLink locale="en" link="/blog/creating-new-language-version" class="btn btn-sm btn-outline-secondary">
-                        <Icon v="plus"/>
-                    </LocaleLink>
-                </div>
-                -->
             </div>
         </div>
-        <div class="d-block d-md-none">
+        <div class="d-block d-lg-none">
+            <div class="text-center mb-3">
+                <nuxt-link to="/">
+                    <h1 class="text-nowrap">
+                        <Icon v="tags"/>
+                        <span class="higher"><T>title</T></span>
+                    </h1>
+                </nuxt-link>
+                <VersionDropdown/>
+            </div>
             <div class="btn-group-vertical d-flex nav-custom mb-2">
                 <nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
                     <Icon :v="link.icon"/>
@@ -92,7 +56,7 @@
             <a href="#" class="float-end" @click.prevent="dismissCensus">
                 <Icon v="times"/>
             </a>
-            <Icon v="user-chart" size="2" class="d-inline-block float-start mr-3 mt-2"/>
+            <Icon v="user-chart" size="2" class="d-inline-block float-start me-3 mt-2"/>
             <T silent>census.banner</T>
         </div>
     </header>
@@ -127,6 +91,7 @@
                 const links = [];
 
                 links.push({
+                    header: true,
                     link: '/',
                     icon: 'home',
                     text: this.$t('home.header'),
@@ -300,19 +265,11 @@
     @import "assets/variables";
 
     header {
-        position: fixed;
+        padding: 0;
-        top: 0;
-        left: 0;
-        padding: 2rem 2rem 0 2rem;
         width: 100%;
-        z-index: 9999;
-        backdrop-filter: blur(12px);
-        @supports not (backdrop-filter: blur(12px)) {
-            background-color: $white;
-        }
     }
 
-    @include media-breakpoint-down('md', $grid-breakpoints) {
+    @include media-breakpoint-down('lg', $grid-breakpoints) {
         h1 {
             font-size: 2rem;
         }
@@ -331,6 +288,22 @@
                 text-align: left;
             }
         }
+
+        .hamburger-menu {
+            position: fixed;
+            top: $spacer;
+            left: $spacer;
+            z-index: 1030;
+            transition: all .5s ease-in-out;
+            .btn-hamburger {
+                &:not(:active):not(:hover):not(:focus):not(.active) {
+                    background-color: $white;
+                }
+                &.active {
+                    background-color: $secondary;
+                }
+            }
+        }
     }
 
     .nav-custom-start {
@@ -348,47 +321,52 @@
         }
     }
 
-    @include media-breakpoint-up('md', $grid-breakpoints) {
+    @include media-breakpoint-up('lg', $grid-breakpoints) {
+        header {
+            position: fixed;
+            z-index: 9999;
+            top: 0;
+            left: 0;
+            backdrop-filter: blur(12px);
+            @supports not (backdrop-filter: blur(12px)) {
+                background-color: $white;
+            }
+        }
+
         .nav-custom:not(.nav-custom-start) {
-            .btn {
+            .nav-item {
                 border-bottom: 1px solid $gray-500;
                 border-radius: 0;
 
-                &:hover, &:focus, &.active {
+                &.btn {
-                    border-bottom: 3px solid $primary;
+                    &:hover, &:focus, &.active {
-                    padding-bottom: calc(#{$btn-padding-y-sm} - 2px);
+                        border-bottom: 3px solid $primary;
-                    color: $primary;
+                        padding-bottom: calc(#{$btn-padding-y-sm} - 2px);
+                        color: $primary;
+                    }
+                }
+
+                height: $header-height;
+                padding-top: 1.2rem;
+                margin-top: 3px;
+
+                &:first-child, &:last-child {
+                    padding-left: 1rem;
+                    padding-right: 1rem;
                 }
             }
         }
+
+        .hamburger-menu {
+            display: none;
+        }
     }
 
     h1 {
-        a {
+        text-decoration: none;
-            text-decoration: none;
+        .higher {
-            .higher {
+            position: relative;
-                position: relative;
+            top: -0.1em;
-                top: -0.1em;
-            }
-            &:hover .higher {
-                text-decoration: underline;
-            }
-        }
-    }
-
-    .hamburger-menu {
-        position: fixed;
-        top: $spacer;
-        left: $spacer;
-        z-index: 1030;
-        transition: all .5s ease-in-out;
-        .btn-hamburger {
-            &:not(:active):not(:hover):not(:focus):not(.active) {
-                background-color: $white;
-            }
-            &.active {
-                background-color: $secondary;
-            }
         }
     }
 </style>

components/InclusiveDictionary.vue

@@ -23,7 +23,7 @@
             </div>
         </section>
 
-        <Table :data="visibleEntries()" :marked="(el) => !el.approved" fixed ref="dictionarytable">
+        <Table :data="visibleEntries()" columns="3" :marked="(el) => !el.approved" fixed ref="dictionarytable">
             <template v-slot:header>
                 <th class="text-nowrap">
                     <Icon v="comment-times"/>

components/InclusiveSubmitForm.vue

@@ -49,7 +49,7 @@
             <div class="form-group">
                 <label><strong><T>nouns.inclusive.categories</T>:</strong></label>
                 <a v-for="category in config.nouns.inclusive.categories"
-                   href="#" :class="['badge border mx-2', form.categories.includes(category) ? 'bg-primary' : 'bg-light']"
+                   href="#" :class="['badge border mx-2 text-decoration-none', form.categories.includes(category) ? 'bg-primary text-white' : 'bg-light text-primary']"
                    @click.prevent="form.categories = form.categories.includes(category) ? form.categories.filter(c => c !== category) : [...form.categories, category]"
                 >
                     {{ category }}

components/VersionDropdown.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="pt-1">
+        <div v-if="config.locale === 'zh'" class="btn-group m-2">
+            <button v-for="(display, code) in {traditional: '繁體', simplified: '简体'}"
+                    :class="'btn btn-sm ' + (spelling === code ? 'btn-secondary disabled' : 'btn-outline-secondary')"
+                    :disabled="spelling === code"
+                    @click="setSpelling(code)"
+            >
+                {{display}}
+            </button>
+        </div>
+        <Dropdown v-if="Object.keys(locales).length > 1" btnClass="btn-outline-secondary btn-sm" class="d-inline-block" :end="end">
+            <template v-slot:toggle>
+                <Icon v="language"/>
+                {{locales[config.locale].name}}
+            </template>
+
+            <template v-slot:menu>
+                <li v-for="(options, locale) in locales" :key="locale" v-if="locale !== config.locale">
+                    <a :href="options.url" class="dropdown-item">
+                        {{options.name}}
+                    </a>
+                </li>
+                <li class="dropdown-divider"></li>
+                <li>
+                    <LocaleLink locale="en" link="/blog/creating-new-language-version" class="dropdown-item small">
+                        <Icon v="plus"/>
+                        <T>localise.shorter</T>
+                    </LocaleLink>
+                </li>
+            </template>
+        </Dropdown>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            end: {type: Boolean},
+        },
+    }
+</script>

layouts/default.vue

@@ -2,12 +2,12 @@
     <div class="d-flex flex-column vh-100">
         <div class="flex-grow-1">
             <Header/>
-            <main>
+            <main class="container">
                 <Nuxt/>
                 <ScrollButton/>
             </main>
         </div>
-        <div>
+        <div class="container">
             <Footer/>
         </div>
         <Confirm ref="confirm"/>