IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

rename Header.vue to Navbar.vue

Browse Source
This commit is contained in:
ogerly 2022-05-13 10:17:21 +02:00
parent 8697425392
commit 47ee6bfe88
1 changed files with 16 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/components/Auth/Header.vue → frontend/src/components/Auth/Navbar.vue
View File

@ -1,16 +1,20 @@
<template> <template>
<div class="auth-header"> <div class="auth-header position-sticky">
<b-navbar toggleable="lg" class="p-0 pr-4"> <b-navbar toggleable="lg" class="pr-4">
<b-img <b-img
class="imgLogoBack" class="imgLogo position-absolute ml--3 mt--3 p-2 zindex1000"
:src="logo"
width="200"
alt="..."
/>
<b-img
class="imgLogoBack mt--3 ml--3"
src="img/template/gradido_background_header.png" src="img/template/gradido_background_header.png"
width="230"
alt="start background image" alt="start background image"
></b-img> ></b-img>
<div class="p-3"> <b-img class="sheet-img position-absolute d-block d-lg-none zindex1000" :src="sheet"></b-img>
<b-img class="imgLogo" :src="logo" alt="..." /> <b-navbar-toggle target="nav-collapse" class="zindex1000"></b-navbar-toggle>
</div>
<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 class="mt-5 mt-lg-0"> <b-collapse id="nav-collapse" is-nav class="mt-5 mt-lg-0">
<b-navbar-nav class="ml-auto" right> <b-navbar-nav class="ml-auto" right>
@ -18,7 +22,7 @@
{{ $t('auth.navbar.overGradido') }} {{ $t('auth.navbar.overGradido') }}
</b-nav-item> </b-nav-item>
<b-nav-item class="ml-lg-5" to="/register">{{ $t('signup') }}</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> <span class="d-none d-lg-block mt-1">{{ $t('|') }}</span>
<b-nav-item to="/login">{{ $t('signin') }}</b-nav-item> <b-nav-item to="/login">{{ $t('signin') }}</b-nav-item>
</b-navbar-nav> </b-navbar-nav>
</b-collapse> </b-collapse>
@ -27,7 +31,7 @@
</template> </template>
<script> <script>
export default { export default {
name: 'AuthHeader', name: 'AuthNavbar',
data() { data() {
return { return {
logo: 'img/brand/green.png', logo: 'img/brand/green.png',
@ -37,53 +41,21 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.imgLogoBack,
.imgLogo {
position: absolute;
}
.imgLogo {
z-index: 1000;
width: 200px;
max-width: 280px;
top: 19px;
left: 0px;
}
.imgLogoBack {
width: 230px;
max-width: 300px;
height: auto;
top: 0px;
}
.auth-header { .auth-header {
font-family: 'Open Sans', sans-serif !important; font-family: 'Open Sans', sans-serif !important;
position: sticky;
}
.navbar-collapse {
margin-left: 20px;
}
.navbar-collapse li {
padding-top: 10px;
padding-bottom: 10px;
} }
.header-img { .sheet-img {
position: absolute;
top: -11px; top: -11px;
right: 7%; right: 7%;
max-width: 64%; max-width: 64%;
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {
.header-img { .sheet-img {
position: absolute;
top: -15px; top: -15px;
right: 0%; right: 0%;
max-width: 61%; max-width: 61%;
} }
} }
.navbar-toggler {
z-index: 1;
}
</style> </style>