update ui of the big menu
This commit is contained in:
parent
8c3dd2a4f6
commit
5a86e16861
|
@ -122,3 +122,68 @@
|
||||||
width: 0;
|
width: 0;
|
||||||
transition-property: width;
|
transition-property: width;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#side-menu.side-menu-big {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-big .side-menu-header {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-big .side-menu-apps-list {
|
||||||
|
height: auto;
|
||||||
|
position: static;
|
||||||
|
max-width: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-big .side-menu-app a {
|
||||||
|
padding: 7px 0 7px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-categories-wrapper {
|
||||||
|
padding: 0 10% 50px 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-categories {
|
||||||
|
width: 100%;
|
||||||
|
max-height: calc(100vh - 50px);
|
||||||
|
overflow: auto;
|
||||||
|
position: relative;
|
||||||
|
top: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-category {
|
||||||
|
flex: auto;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-category-title {
|
||||||
|
padding-left: 10px;
|
||||||
|
color: var(--side-menu-text-color, #fff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-big .side-menu-app-icon {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.side-menu-categories-wrapper {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-categories {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-menu-category {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -15,18 +15,26 @@ You should have received a copy of the GNU Affero General Public License
|
||||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<div id="side-menu">
|
<div id="side-menu" class="side-menu-big">
|
||||||
<div v-for="category in items">
|
<div class="side-menu-header">
|
||||||
<h2 v-html="category.name"></h2>
|
<button class="side-menu-opener"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ul>
|
<div class="side-menu-categories-wrapper">
|
||||||
<li v-for="app in category.apps">
|
<div class="side-menu-categories">
|
||||||
<a v-bind:href="app.href" v-bind:title="app.name">
|
<div class="side-menu-category" v-for="category in items">
|
||||||
<img class="side-menu-app-icon" v-bind:src="app.icon"></span>
|
<h2 class="side-menu-category-title" v-html="category.name"></h2>
|
||||||
<span class="side-menu-app-text" v-html="app.name"></span>
|
|
||||||
</a>
|
<ul class="side-menu-apps-list">
|
||||||
</li>
|
<li class="side-menu-app" v-for="app in category.apps">
|
||||||
</ul>
|
<a v-bind:href="app.href" v-bind:title="app.name">
|
||||||
|
<img class="side-menu-app-icon" v-bind:src="app.icon"></span>
|
||||||
|
<span class="side-menu-app-text" v-html="app.name"></span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in a new issue