s416138/ClearBowl
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[CLEAR-58] Fix header

Browse Source
This commit is contained in:
Gabriela Pałka 2020-01-08 15:07:28 +01:00
parent a31e08f9c4
commit 68b3c5ebc4
1 changed files with 86 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
front/components/Layout/ClearBowlHeader.vue
View File

@ -1,94 +1,104 @@
<template> <template>
<Header> <Header>
<Menu mode="horizontal" theme="dark" active-name="1"> <Menu mode="horizontal" theme="dark" active-name="1">
<NuxtLink to="/"> <Row>
<div class="layout-logo"> <Col span="8">
<img class="logo" src="../../static/bowl.png"/> <NuxtLink to="/">
<div class="logo-text">ClearBowl</div> <div class="layout-logo">
</div> <img class="logo" src="../../static/bowl.png"/>
</NuxtLink> <div class="logo-text">ClearBowl</div>
<div v-if="!$auth.loggedIn" class="layout-nav"> </div>
<NuxtLink to="/login"> </NuxtLink>
<MenuItem name="login"> </Col>
<Icon type="ios-log-in" size="20"/> <Col span="8" offset="8">
Zaloguj <div v-if="!$auth.loggedIn" style="position: relative; float: right">
</MenuItem> <NuxtLink to="/login">
</NuxtLink> <MenuItem name="login">
<NuxtLink to="/register"> <Icon type="ios-log-in" size="20"/>
<MenuItem name="register"> Zaloguj
<Icon type="ios-person-add" size="20"/> </MenuItem>
Zarejestruj </NuxtLink>
</MenuItem> <NuxtLink to="/register">
</NuxtLink> <MenuItem name="register">
</div> <Icon type="ios-person-add" size="20"/>
<div v-else class="layout-nav"> Zarejestruj
<div style="display: flex"> </MenuItem>
<div>Witaj, {{ $auth.user.email }}</div> </NuxtLink>
<MenuItem name="logout"> </div>
<div @click="logout"> <div v-else>
<Icon type="ios-log-out" size="20"/> <Row style="margin-bottom: 10px;">
<span>Wyloguj</span> <Col span="16" style="text-align: right">
</div> <div>Witaj, {{ $auth.user.email }}</div>
</MenuItem> </Col>
</div> <Col span="8">
</div> <MenuItem name="logout">
</Menu> <div @click="logout">
</Header> <Icon type="ios-log-out" size="20"/>
<span>Wyloguj</span>
</div>
</MenuItem>
</Col>
</Row>
</div>
</Col>
</Row>
</Menu>
</Header>
</template> </template>
<script> <script>
export default { export default {
name: "ClearBowlHeader", name: "ClearBowlHeader",
methods: { methods: {
logout() { logout() {
this.$auth.logout() this.$auth.logout()
} }
}
} }
}
</script> </script>
<style scoped> <style scoped>
.ivu-menu-dark { .ivu-menu-dark {
background: white; background: white;
} }
.ivu-layout-header { .ivu-layout-header {
background: white; background: white;
border-bottom: black solid; border-bottom: black solid;
border-width: thin; border-width: thin;
} }
.layout-logo { .layout-logo {
background: transparent; background: transparent;
float: left; float: left;
position: relative; position: relative;
top: 10px; top: 10px;
left: 20px; left: 20px;
} }
.logo { .logo {
max-width: 40px; max-width: 40px;
max-height: 40px; max-height: 40px;
} }
.logo-text { .logo-text {
color: black; color: black;
float: right; float: right;
font-size: 30px; font-size: 30px;
margin-top: -7px; margin-top: -7px;
margin-left: 5px; margin-left: 5px;
} }
.layout-nav { /*.layout-nav {*/
width: 320px; /* width: 320px;*/
margin: 0 auto; /* margin: 0 auto;*/
margin-right: 20px; /* margin-right: 20px;*/
} /*}*/
.ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu { .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item, .ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu {
color: black; color: black;
} }
</style> </style>