vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

UI refactor on demo layout

pull/1047/head
Cagatay Civici 2021-03-02 14:09:38 +03:00
parent 9434ae6e7d
commit 10624d740b
5 changed files with 28 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/AppMenu.vue
View File

@ -1,5 +1,8 @@
<template>
<div :class="['layout-sidebar', {'active': active}]">
<router-link to="/" class="logo">
<img alt="logo" src="./assets/images/primevue-logo.png">
</router-link>
<div class="layout-sidebar-filter p-fluid p-input-filled">
<AutoComplete v-model="selectedRoute" :suggestions="filteredRoutes" @complete="searchRoute($event)" @item-select="onItemSelect($event)" scrollHeight="300px" placeholder="Search"
field="name" optionGroupLabel="name" optionGroupChildren="children">

3
src/AppTopBar.vue
View File

@ -3,9 +3,6 @@
<a class="menu-button" @click="$emit('menubutton-click')">
<i class="pi pi-bars"></i>
</a>
<router-link to="/" class="logo">
<img alt="logo" src="./assets/images/primevue-logo.png">
</router-link>
<div class="app-theme" v-tooltip.bottom="theme">
<img :src="'demo/images/themes/' + logoMap[theme]" />
</div>

1
src/assets/styles/app/_content.scss
View File

@ -1,6 +1,5 @@
.layout-content {
margin-left: 250px;
padding-top: 70px;
.content-section {
padding: 2rem;

27
src/assets/styles/app/_menu.scss
View File

@ -1,20 +1,40 @@
.layout-sidebar {
position: fixed;
left: 0;
top: 70px;
height: calc(100% - 70px);
top: 0;
height: 100%;
background-color: var(--surface-a);
width: 250px;
border-right: 1px solid var(--surface-d);
user-select: none;
transition: transform .4s cubic-bezier(.05,.74,.2,.99);
display: flex;
flex-direction: column;
.logo {
min-height: 70px;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid var(--surface-d);
z-index: 1;
border-right: 1px solid var(--surface-d);
img {
width: 180px;
}
&:focus {
outline: 0 none;
transition: box-shadow .2s;
box-shadow: 0 0 0 0.2rem $focusBorderColor;
}
}
.layout-menu {
padding: 0 1rem;
overflow-y: auto;
flex-grow: 1;
border-right: 1px solid var(--surface-d);
.menu-category {
display: block;
@ -96,5 +116,6 @@
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--surface-d);
background-color: var(--surface-a);
border-right: 1px solid var(--surface-d);
}
}

18
src/assets/styles/app/_topbar.scss
View File

@ -2,16 +2,13 @@
background-color: var(--surface-a);
padding: 0;
height: 70px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 997;
box-shadow: 0 0 4px rgba(0,0,0,0.25);
border-bottom: 1px solid var(--surface-d);
display: flex;
align-items: center;
padding: 0 35px;
padding-left: 285px;
.menu-button {
display: none;
@ -33,18 +30,6 @@
}
}
.logo {
img {
width: 180px;
}
&:focus {
outline: 0 none;
transition: box-shadow .2s;
box-shadow: 0 0 0 0.2rem $focusBorderColor;
}
}
.app-theme {
background-color: var(--primary-color);
color: var(--primary-color-text);
@ -53,7 +38,6 @@
box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
width: 39px;
height: 39px;
margin-left: 70px;
img {
width: 25px;