move usermenu to topbar
This commit is contained in:
parent
c66ff6f938
commit
a74707ba6d
@ -14,27 +14,6 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- User Profile -->
|
|
||||||
<div class="user_profile">
|
|
||||||
<a class="trigger">
|
|
||||||
<div class="image"><i class="icon icon-person" aria-hidden="true"></i></div>
|
|
||||||
<div class="text">Hans Zimmer <div class="role">Administrator</div></div>
|
|
||||||
<div class="btn"><i class="icon icon-arrow-up" aria-hidden="true"></i></div>
|
|
||||||
</a>
|
|
||||||
<div class="content">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">
|
|
||||||
<i class="icon icon-color-wand" aria-hidden="true"></i>
|
|
||||||
<div class="title">Profil anpassen</div>
|
|
||||||
</a></li>
|
|
||||||
<li><a href="#">
|
|
||||||
<i class="icon icon-log-out" aria-hidden="true"></i>
|
|
||||||
<div class="title">Ausloggen</div>
|
|
||||||
</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -155,54 +134,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*--------------------------------------------------------------
|
|
||||||
# Left Sidebar (User Profile)
|
|
||||||
--------------------------------------------------------------*/
|
|
||||||
.user_profile {
|
|
||||||
position:fixed; bottom:0px; left:0px; right:0px; cursor:pointer; width:230px;
|
|
||||||
&>.trigger {
|
|
||||||
.clearfix();
|
|
||||||
display:block;
|
|
||||||
|
|
||||||
// a {display:block; width:100%; height:100%;}
|
|
||||||
|
|
||||||
.image {float:left; width:45px; height:45px; padding-top:7px; text-align:center;}
|
|
||||||
.image .icon {font-size:22px; color:#FFF;}
|
|
||||||
.image img {width:70%; margin:0 auto; display:block;}
|
|
||||||
|
|
||||||
.text {float:left; line-height:1; color:#FFF; font-size:14px; padding-left:15px; padding-top: 9px;}
|
|
||||||
.text .role {font-size:12px; color:rgba(255,255,255,0.5); display:block; margin-top:0px;}
|
|
||||||
|
|
||||||
&:hover {background:rgba(40,183,141,0.3);}
|
|
||||||
|
|
||||||
.btn {position:absolute; right:0px; top:0px; width:auto; height:auto; padding-top:12px; padding-right:20px;}
|
|
||||||
.btn .icon {color:#FFF; font-size:18px; transition:all 0.3s;}
|
|
||||||
}
|
|
||||||
|
|
||||||
&>.content {
|
|
||||||
display:none; color:#FFF; padding-bottom:30px;
|
|
||||||
|
|
||||||
ul{
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
li{
|
|
||||||
padding:0px; line-height:1.2; color:#FFF; position:relative;
|
|
||||||
.icon {color:#FFF; font-size:20px; text-align:center; position:relative; left:0; float:left; height:45px; width:45px; line-height:45px;}
|
|
||||||
.navigation_text {position:relative; font-size:14px; display:block; color:#FFF; text-align:left; float:left; padding:0px 10px 0px 15px; width:180px; line-height:45px;}
|
|
||||||
a {color:#FFF; display:block; height:45px;}
|
|
||||||
&:after {clear:both; content:""; display:block;}
|
|
||||||
&:hover {background:rgba(40,183,141,0.3);}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.open {
|
|
||||||
background:rgba(40,183,141,0.3);
|
|
||||||
&>.trigger{background:rgba(40,183,141,0.5);}
|
|
||||||
.icon-arrow-up{transform: rotate(180deg);}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media(max-width: @screen-xs-max) {
|
@media(max-width: @screen-xs-max) {
|
||||||
.sidebar {
|
.sidebar {
|
||||||
left:inherit; position:relative; width:100%; top:0px; margin-bottom:30px;
|
left:inherit; position:relative; width:100%; top:0px; margin-bottom:30px;
|
||||||
|
|||||||
@ -2,12 +2,49 @@
|
|||||||
<div class="topbar">
|
<div class="topbar">
|
||||||
<div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
|
<div class="logo"><a href="#"><img src="assets/images/cms_logo.png" alt=""></a></div>
|
||||||
<div class="name">Meine Website</div>
|
<div class="name">Meine Website</div>
|
||||||
|
|
||||||
|
<!-- User Profile -->
|
||||||
|
<div class="user_profile" ref="user_profile">
|
||||||
|
<a class="trigger" @click.prevent="toggleMenu">
|
||||||
|
<div class="image"><i class="icon icon-user" aria-hidden="true"></i></div>
|
||||||
|
<div class="text">Hans Zimmer <div class="role">Administrator</div></div>
|
||||||
|
<div class="trigger_btn"><i class="icon icon-arrow-down" aria-hidden="true"></i></div>
|
||||||
|
</a>
|
||||||
|
<nav class="user_menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">
|
||||||
|
<i class="icon icon-color-wand" aria-hidden="true"></i>
|
||||||
|
<div class="title">Profil anpassen</div>
|
||||||
|
</a></li>
|
||||||
|
<li><a href="#">
|
||||||
|
<i class="icon icon-log-out" aria-hidden="true"></i>
|
||||||
|
<div class="title">Logout</div>
|
||||||
|
</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Topbar",
|
||||||
|
methods: {
|
||||||
|
toggleMenu() {
|
||||||
|
this.$refs.user_profile.classList.toggle("open");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
@import "../mixins.less";
|
@import "../mixins.less";
|
||||||
|
|
||||||
|
@barHeight: 40px;
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Topbar (Sitename)
|
||||||
|
--------------------------------------------------------------*/
|
||||||
.topbar {
|
.topbar {
|
||||||
.clearfix();
|
.clearfix();
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -16,13 +53,13 @@
|
|||||||
left: 0px;
|
left: 0px;
|
||||||
background: @cms_bg_light;
|
background: @cms_bg_light;
|
||||||
color: white;
|
color: white;
|
||||||
height: 40px;
|
height: @barHeight;
|
||||||
z-index: 1500;
|
z-index: 1500;
|
||||||
|
|
||||||
&>.logo {
|
&>.logo {
|
||||||
display: block;
|
display: block;
|
||||||
width: 70px;
|
width: 70px;
|
||||||
height: 40px;
|
height: @barHeight;
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
@ -48,33 +85,110 @@
|
|||||||
&>.name {
|
&>.name {
|
||||||
float: left;
|
float: left;
|
||||||
width: auto;
|
width: auto;
|
||||||
line-height: 40px;
|
line-height: @barHeight;
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&>.navbutton {
|
// &>.navbutton {
|
||||||
|
// display: block;
|
||||||
|
// float: left;
|
||||||
|
// width: auto;
|
||||||
|
// height: 100%;
|
||||||
|
// font-size: 22px;
|
||||||
|
// margin-left: 40px;
|
||||||
|
// height: @barHeight;
|
||||||
|
// width: 40px;
|
||||||
|
// padding-top: 4px;
|
||||||
|
// cursor: pointer;
|
||||||
|
// text-align: center;
|
||||||
|
// color: white;
|
||||||
|
|
||||||
|
// &:hover {
|
||||||
|
// background: fade(@cms_brand_primary, 30%);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------
|
||||||
|
# Topbar (User Profile)
|
||||||
|
--------------------------------------------------------------*/
|
||||||
|
.user_profile {
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
&>.trigger {
|
||||||
|
.clearfix();
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
padding: 4px 10px;
|
||||||
width: auto;
|
font-size: 0;
|
||||||
height: 100%;
|
|
||||||
font-size: 22px;
|
|
||||||
margin-left: 40px;
|
|
||||||
height: 40px;
|
|
||||||
width: 40px;
|
|
||||||
padding-top: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
background: fade(@cms_brand_primary, 30%);
|
background: fade(@cms_brand_primary, 30%);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
.icon{
|
||||||
export default {
|
font-size: 22px;
|
||||||
name: "Topbar"
|
}
|
||||||
}
|
|
||||||
</script>
|
.image, .text, .trigger_btn{
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
div+div{
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
max-height: @barHeight - 8px;
|
||||||
|
img{
|
||||||
|
width:70%; margin:0 auto; display:block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
.role{
|
||||||
|
display: block;
|
||||||
|
font-size: 11px;
|
||||||
|
color: fade(white, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user_menu {
|
||||||
|
display: none;
|
||||||
|
background: @cms_brand_primary;
|
||||||
|
|
||||||
|
ul{
|
||||||
|
list-style-type: none;
|
||||||
|
|
||||||
|
li{
|
||||||
|
.icon {
|
||||||
|
float:left;
|
||||||
|
width: 45px;
|
||||||
|
line-height:45px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
float: left;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 45px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
a {color:#FFF; display:block; height:45px;}
|
||||||
|
&:after {clear:both; content:""; display:block;}
|
||||||
|
&:hover {background:rgba(40,183,141,0.3);}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.open {
|
||||||
|
.user_menu{display: block;}
|
||||||
|
&>.trigger{background: rgba(40, 183, 141, 0.5);}
|
||||||
|
.trigger_btn .icon:before{transform: rotate(180deg);}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user