bachir/enfrancais-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge main routes in dropdown for smartphones

Browse Source
This commit is contained in:
axolotle
2021-06-16 16:02:04 +02:00
parent 38d3737ef6
commit 0a0470ee23
3 changed files with 41 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/scss/abstracts/_variables.scss
+1
View File
@@ -52,6 +52,7 @@ $yiq-contrasted-threshold: 120;
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
sm: 576px, sm: 576px,
tb: 768px,
md: 1024px, md: 1024px,
lg: 1200px, lg: 1200px,
xl: 1440px, xl: 1440px,
src/assets/scss/base/_bootstrap-overrides.scss
+2 -2
View File
@@ -6,14 +6,14 @@ legend {
border: 0; border: 0;
padding: 0; padding: 0;
margin-left: -#{$header-spacer-sm}; margin-left: -#{$header-spacer-sm};
margin-top: 5px; margin-top: 10px;
.dropdown-item { .dropdown-item {
font-size: $font-size-sm; font-size: $font-size-sm;
padding: .25rem $header-spacer-sm; padding: .25rem $header-spacer-sm;
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(tb) {
margin-left: -#{$header-spacer}; margin-left: -#{$header-spacer};
.dropdown-item { .dropdown-item {
src/pages/_partials/MainHeader.vue
+38 -18
View File
@@ -10,6 +10,13 @@
<span class="sr-only">Menu</span> <span class="sr-only">Menu</span>
</template> </template>
<b-dropdown-item
v-for="link in mainRoutes" :key="link.to"
:to="link.to" class="d-tb-none" :class="'dropdown-item-' + link.variant"
>
{{ $t('sections.' + link.to) }}
</b-dropdown-item>
<b-dropdown-item v-for="name in subRoutes" :key="name" :to="{ name }"> <b-dropdown-item v-for="name in subRoutes" :key="name" :to="{ name }">
{{ $t('sections.' + name) }} {{ $t('sections.' + name) }}
</b-dropdown-item> </b-dropdown-item>
@@ -20,7 +27,7 @@
</b-navbar-brand> </b-navbar-brand>
</div> </div>
<nav class="nav-list"> <nav class="nav-list d-none d-tb-block">
<ul> <ul>
<li v-for="link in mainRoutes" :key="link.to"> <li v-for="link in mainRoutes" :key="link.to">
<b-button :to="link.to" :active="$route.name === link.to" :variant="link.variant"> <b-button :to="link.to" :active="$route.name === link.to" :variant="link.variant">
@@ -68,21 +75,38 @@ export default {
justify-content: stretch; justify-content: stretch;
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(tb) {
height: $header-height; height: $header-height;
padding: 0 $header-spacer; padding: 0 $header-spacer;
} }
::v-deep .dropdown-toggle { ::v-deep {
padding: 0; .dropdown-toggle {
border: 0; padding: 0;
line-height: 1; border: 0;
padding: 0 .5rem; line-height: 1;
margin-left: -.5rem; padding: 0 .5rem;
margin-left: -.5rem;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(tb) {
padding: 0 .75rem; padding: 0 .75rem;
margin-left: -.75rem; margin-left: -.75rem;
}
}
.dropdown-menu {
@include media-breakpoint-down(sm) {
width: 100vw;
}
@each $variant in 'dark', 'kit', 'creation' {
.dropdown-item-#{$variant} {
background-color: theme-color($variant);
a:not(:hover):not(:focus) {
color: if($variant == 'dark', $white, $black);
}
}
}
} }
} }
@@ -97,7 +121,7 @@ export default {
stroke-linecap: round; stroke-linecap: round;
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(tb) {
width: 16px; width: 16px;
height: 16px; height: 16px;
@@ -110,10 +134,6 @@ export default {
&-brand { &-brand {
display: flex; display: flex;
@include media-breakpoint-down(xs) {
padding-bottom: $header-spacer-sm;
}
.navbar-brand { .navbar-brand {
font-size: inherit; font-size: inherit;
font-weight: $font-weight-bold; font-weight: $font-weight-bold;
@@ -121,7 +141,7 @@ export default {
line-height: 1; line-height: 1;
padding: 0; padding: 0;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(tb) {
font-size: 1.3125rem; font-size: 1.3125rem;
} }
} }
@@ -177,7 +197,7 @@ export default {
.btn { .btn {
font-size: inherit; font-size: inherit;
@include media-breakpoint-up(sm) { @include media-breakpoint-up(tb) {
font-size: 1rem; font-size: 1rem;
} }
} }