add small navbar for login and register

This commit is contained in:
ogerly 2022-05-13 07:19:55 +02:00
parent 54cbdeed7d
commit 8697425392
4 changed files with 39 additions and 16 deletions

View File

@ -12,15 +12,14 @@
<b-img class="header-img d-block d-lg-none" :src="sheet"></b-img>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-collapse id="nav-collapse" is-nav class="mt-5 mt-lg-0">
<b-navbar-nav class="ml-auto" right>
<b-nav-item href="https://gradido.net/de/" target="_blank">
{{ $t('auth.navbar.overGradido') }}
</b-nav-item>
<b-nav-item class="ml-5">
<b-link to="/register">{{ $t('signup') }} {{ $t('|') }}</b-link>
<b-link to="/login">{{ $t('signin') }}</b-link>
</b-nav-item>
<b-nav-item class="ml-lg-5" to="/register">{{ $t('signup') }}</b-nav-item>
<span class="d-none d-lg-block mt-3">{{ $t('|') }}</span>
<b-nav-item to="/login">{{ $t('signin') }}</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>

View File

@ -47,7 +47,7 @@ export default {
.mobil-start-box {
position: fixed;
height: 100%;
z-index: 1000;
z-index: 10000;
}
.mobil-start-box-text {
position: fixed;

View File

@ -0,0 +1,18 @@
<template>
<div class="navbar-small text-center">
<b-navbar>
<b-collapse is-nav class="mt-5 mt-lg-0">
<b-navbar-nav class="ml-md-auto">
<b-nav-item class="ml-lg-5" to="/register">{{ $t('signup') }}</b-nav-item>
<span class="mt-3">{{ $t('|') }}</span>
<b-nav-item to="/login">{{ $t('signin') }}</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name: 'NavbarSmall',
}
</script>

View File

@ -15,10 +15,14 @@
<b-button variant="gradido">{{ $t('auth.left.learnMore') }}</b-button>
</div>
</div>
<b-row class="justify-content-md-center">
<b-col sm="12" md="8" offset-lg="6" lg="6">
<div class="right-content-box ml-2 ml-sm-4 mr-2 mr-sm-4">
<b-row class="d-none d-md-block d-lg-none mt-7">
<b-col class="zindex1000 mb--4">
<navbar-small />
</b-col>
</b-row>
<b-row class="mt-5 pl-2 pl-md-0 pl-lg-0">
<b-col cols="9">
<div class="h1 mb--2">{{ $t('welcome') }}</div>
@ -57,15 +61,11 @@
<b-row class="d-inline d-sm-inline d-md-none d-lg-none mb-3">
<b-col class="text-center">
<b-avatar src="img/brand/gradido_coin●.png" size="6rem"></b-avatar>
<div>
<span>
<router-link to="login">{{ $t('signup') }}</router-link>
</span>
{{ $t('|') }}
<span>
<router-link to="register">{{ $t('signin') }}</router-link>
</span>
</div>
<b-row class="mt-4">
<b-col class="zindex1000 mb--4">
<navbar-small />
</b-col>
</b-row>
</b-col>
</b-row>
<b-card-body class="">
@ -83,6 +83,7 @@
<script>
import MobileStart from '@/components/Auth/MobileStart.vue'
import AuthHeader from '@/components/Auth/Header.vue'
import NavbarSmall from '@/components/Auth/NavbarSmall.vue'
import Carousel from '@/components/Auth/Carousel.vue'
import LanguageSwitch from '@/components/LanguageSwitch2'
import AuthFooter from '@/components/Auth/Footer.vue'
@ -92,6 +93,7 @@ export default {
components: {
MobileStart,
AuthHeader,
NavbarSmall,
Carousel,
LanguageSwitch,
AuthFooter,
@ -172,6 +174,10 @@ export default {
overflow: hidden;
}
.zindex1000 {
z-index: 1000;
}
@media screen and (min-width: 2000px) {
.right-content {
height: 100%;