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

mobil navbar fix and transparent

Browse Source
This commit is contained in:
ogerly 2023-01-17 07:36:34 +01:00
parent 8c033842fb
commit 5203644283
2 changed files with 56 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/components/Menu/Navbar.vue
View File

@ -1,45 +1,47 @@
<template>
<div class="navbar-component position-sticky">
<b-navbar toggleable="lg" class="pr-4">
<b-navbar-brand>
<b-img
class="imgLogo mt-lg--2 mt-3 mb-3 d-none d-lg-block zindex10"
:src="logo"
width=""
alt="..."
/>
<div v-b-toggle.sidebar-mobile variant="link" class="d-block d-lg-none">
<span class="navbar-toggler-icon h2"></span>
</div>
</b-navbar-brand>
<b-img class="sheet-img position-absolute zindex-1" :src="sheet"></b-img>
<b-navbar-nav class="ml-auto" right>
<div class="d-flex align-items-center">
<div class="mr-3">
<avatar
:username="username.username"
:initials="username.initials"
:color="'#fff'"
:size="61"
></avatar>
<div class="navbar-component">
<div class="navbar-element">
<b-navbar toggleable="lg" class="pr-4">
<b-navbar-brand>
<b-img
class="imgLogo mt-lg--2 mt-3 mb-3 d-none d-lg-block zindex10"
:src="logo"
width=""
alt="..."
/>
<div v-b-toggle.sidebar-mobile variant="link" class="d-block d-lg-none">
<span class="navbar-toggler-icon h2"></span>
</div>
<div>
<div data-test="navbar-item-username">{{ username.username }}</div>
</b-navbar-brand>
<div class="text-right" data-test="navbar-item-email">
{{ $store.state.email }}
<b-img class="sheet-img position-absolute zindex-1" :src="sheet"></b-img>
<b-navbar-nav class="ml-auto" right>
<div class="d-flex align-items-center">
<div class="mr-3">
<avatar
:username="username.username"
:initials="username.initials"
:color="'#fff'"
:size="61"
></avatar>
</div>
<div>
<div data-test="navbar-item-username">{{ username.username }}</div>
<div class="text-right" data-test="navbar-item-email">
{{ $store.state.email }}
</div>
</div>
</div>
</div>
</b-navbar-nav>
</b-navbar>
<!-- <div class="alertBox">
</b-navbar-nav>
</b-navbar>
<!-- <div class="alertBox">
<b-alert show dismissible variant="light" class="nav-alert text-dark">
<small>{{ $t('1000thanks') }}</small>
</b-alert>
</div> -->
</div>
</div>
</template>
@ -72,6 +74,10 @@ export default {
</script>
<style lang="scss">
.navbar-element {
position: sticky;
}
.auth-header {
font-family: 'Open Sans', sans-serif !important;
height: 150px;
@ -117,6 +123,12 @@ button.navbar-toggler > span.navbar-toggler-icon {
}
}
@media screen and (max-width: 450px) {
.navbar-element {
z-index: 1000;
position: fixed;
width: 100%;
background-color: #f5f5f5e6;
}
.sheet-img {
left: 27%;
max-width: 61%;

14
frontend/src/layouts/DashboardLayout.vue
View File

@ -3,7 +3,7 @@
<div v-if="skeleton">
<skeleton-overview />
</div>
<div v-else>
<div v-else class="mx--3 mx-lg-0">
<!-- navbar -->
<b-row>
<b-col>
@ -13,7 +13,7 @@
<mobile-sidebar @admin="admin" @logout="logout" />
<!-- Breadcrumb -->
<b-row>
<b-row class="breadcrumb">
<b-col cols="10" offset-lg="2">
<breadcrumb />
</b-col>
@ -336,7 +336,9 @@ export default {
}
</script>
<style>
/* frontend/public/img/svg/Gradido_Blaetter_Mainpage.svg */
.breadcrumb {
background-color: transparent;
}
.main-page {
background-attachment: fixed;
background-position: center;
@ -369,4 +371,10 @@ export default {
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(4, 112, 6, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media screen and (max-width: 450px) {
.breadcrumb {
padding-top: 60px;
}
}
</style>