djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change button menu to nav menu, fix #17

Browse Source
This commit is contained in:
jb-alvarado 2020-06-29 21:06:37 +02:00
parent b88a514e11
commit 1042db01f6
1 changed files with 49 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
ffplayout/frontend/components/Menu.vue
View File

@ -1,29 +1,29 @@
<template>
<div>
<div class="menu">
<b-button-group size="sm">
<b-button to="/" variant="primary">
<b-nav align="right">
<b-nav-item to="/" class="nav-item" exact-active-class="active-menu-item">
Home
</b-button>
<b-button to="/player" variant="primary">
</b-nav-item>
<b-nav-item to="/player" exact-active-class="active-menu-item">
Player
</b-button>
<b-button to="/media" variant="primary">
</b-nav-item>
<b-nav-item to="/media" exact-active-class="active-menu-item">
Media
</b-button>
<b-button to="/message" variant="primary">
</b-nav-item>
<b-nav-item to="/message" exact-active-class="active-menu-item">
Message
</b-button>
<b-button to="/logging" variant="primary">
</b-nav-item>
<b-nav-item to="/logging" exact-active-class="active-menu-item">
Logging
</b-button>
<b-button to="/configure" variant="primary">
</b-nav-item>
<b-nav-item to="/configure" exact-active-class="active-menu-item">
Configure
</b-button>
<b-button to="/" variant="primary" @click="logout()">
</b-nav-item>
<b-nav-item to="/" @click="logout()">
Logout
</b-button>
</b-button-group>
</b-nav-item>
</b-nav>
</div>
</div>
</template>
@ -56,7 +56,38 @@ export default {
padding: .5em;
}
.menu div {
float: right;
.nav-item {
background-image: linear-gradient(#484e55, #3A3F44 60%, #313539);
background-repeat: no-repeat;
height: 28px;
margin: .05em;
border-radius: 3px;
font-size: .95em;
}
.nav-item:hover {
background-image: linear-gradient(#5a636c, #4c545b 60%, #42484e);
background-repeat: no-repeat;
}
.nav-item a {
padding: .2em .6em .2em .6em;
}
.active-menu-item {
position: relative;
}
.active-menu-item::after {
background: #ff9c36;
content: " ";
width: 100%;
height: 2px;
color: red;
position: absolute;
display: block;
left: 0;
right: 0;
border-radius: 1px;
}
</style>