#203 dedesign header
This commit is contained in:
Avris
parent
5671046a37
commit
5609321ea2
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<h1 class="text-nowrap">
|
||||
<nuxt-link to="/">
|
||||
<div class="d-none d-lg-flex justify-content-between align-items-center flex-row nav-custom btn-group mb-0">
|
||||
<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' : ''}`">
|
||||
<h1 v-if="link.header" class="text-nowrap">
|
||||
<Icon v="tags"/>
|
||||
<span class="higher"><T>title</T></span>
|
||||
</nuxt-link>
|
||||
</h1>
|
||||
<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' : ''}`">
|
||||
</h1>
|
||||
<template v-else>
|
||||
<Icon :v="link.icon" size="1.6"/>
|
||||
<br/>
|
||||
<span class="text-nowrap"><Spelling :text="link.text"/></span>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
<div>
|
||||
<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">
|
||||
<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>
|
||||
-->
|
||||
</template>
|
||||
</nuxt-link>
|
||||
<div class="nav-item flex-grow-0">
|
||||
<VersionDropdown end/>
|
||||
</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;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 2rem 2rem 0 2rem;
|
||||
padding: 0;
|
||||
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 {
|
||||
border-bottom: 3px solid $primary;
|
||||
padding-bottom: calc(#{$btn-padding-y-sm} - 2px);
|
||||
color: $primary;
|
||||
&.btn {
|
||||
&:hover, &:focus, &.active {
|
||||
border-bottom: 3px solid $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;
|
||||
.higher {
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
text-decoration: none;
|
||||
.higher {
|
||||
position: relative;
|
||||
top: -0.1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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"/>
|
||||
|
|
|
|||
Reference in New Issue