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

Showcase refactor

pull/358/head
cagataycivici 2020-07-01 22:35:12 +03:00
parent 2b2ced5700
commit 6aa6bbec99
7 changed files with 87 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/App.vue
View File

@ -18,9 +18,6 @@
<router-view/>
<app-footer />
</div>
<div class="app-theme" v-tooltip.bottom="theme">
<img :src="'demo/images/themes/' + logoMap[theme]" />
</div>
<Toast />
<Toast position="topleft" group="tl" />
<Toast position="bottomleft" group="bl" />
@ -40,42 +37,7 @@ export default {
return {
sidebarActive: false,
newsActive: false,
theme: 'saga-blue',
logoMap: {
'bootstrap4-light-blue': 'bootstrap4-light-blue.svg',
'bootstrap4-light-purple': 'bootstrap4-light-purple.svg',
'bootstrap4-dark-blue': 'bootstrap4-dark-blue.svg',
'bootstrap4-dark-purple': 'bootstrap4-dark-purple.svg',
'md-light-indigo': 'md-light-indigo.svg',
'md-light-deeppurple': 'md-light-deeppurple.svg',
'md-dark-indigo': 'md-dark-indigo.svg',
'md-dark-deeppurple': 'md-dark-deeppurple.svg',
'mdc-light-indigo': 'md-light-indigo.svg',
'mdc-light-deeppurple': 'md-light-deeppurple.svg',
'mdc-dark-indigo': 'md-dark-indigo.svg',
'mdc-dark-deeppurple': 'md-dark-deeppurple.svg',
'saga-blue': 'saga-blue.png',
'saga-green': 'saga-green.png',
'saga-orange': 'saga-orange.png',
'saga-purple': 'saga-purple.png',
'vela-blue': 'vela-blue.png',
'vela-green': 'vela-green.png',
'vela-orange': 'vela-orange.png',
'vela-purple': 'vela-purple.png',
'arya-blue': 'arya-blue.png',
'arya-green': 'arya-green.png',
'arya-orange': 'arya-orange.png',
'arya-purple': 'arya-purple.png',
'nova': 'nova.png',
'nova-alt': 'nova-alt.png',
'nova-accent': 'nova-accent.png',
'nova-vue': 'nova-vue.png',
'luna-blue': 'luna-blue.png',
'luna-green': 'luna-green.png',
'luna-pink': 'luna-pink.png',
'luna-amber': 'luna-amber.png',
'rhea': 'rhea.png'
}
theme: 'saga-blue'
}
},

43
src/AppTopBar.vue
View File

@ -6,6 +6,9 @@
<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>
<ul ref="topbarMenu" class="topbar-menu">
<li><router-link to="/setup">Get Started</router-link></li>
<li class="topbar-submenu">
@ -108,9 +111,47 @@ export default {
this.activeMenuIndex = null;
}
},
props: {
theme: null
},
data() {
return {
activeMenuIndex: null
activeMenuIndex: null,
logoMap: {
'bootstrap4-light-blue': 'bootstrap4-light-blue.svg',
'bootstrap4-light-purple': 'bootstrap4-light-purple.svg',
'bootstrap4-dark-blue': 'bootstrap4-dark-blue.svg',
'bootstrap4-dark-purple': 'bootstrap4-dark-purple.svg',
'md-light-indigo': 'md-light-indigo.svg',
'md-light-deeppurple': 'md-light-deeppurple.svg',
'md-dark-indigo': 'md-dark-indigo.svg',
'md-dark-deeppurple': 'md-dark-deeppurple.svg',
'mdc-light-indigo': 'md-light-indigo.svg',
'mdc-light-deeppurple': 'md-light-deeppurple.svg',
'mdc-dark-indigo': 'md-dark-indigo.svg',
'mdc-dark-deeppurple': 'md-dark-deeppurple.svg',
'saga-blue': 'saga-blue.png',
'saga-green': 'saga-green.png',
'saga-orange': 'saga-orange.png',
'saga-purple': 'saga-purple.png',
'vela-blue': 'vela-blue.png',
'vela-green': 'vela-green.png',
'vela-orange': 'vela-orange.png',
'vela-purple': 'vela-purple.png',
'arya-blue': 'arya-blue.png',
'arya-green': 'arya-green.png',
'arya-orange': 'arya-orange.png',
'arya-purple': 'arya-purple.png',
'nova': 'nova.png',
'nova-alt': 'nova-alt.png',
'nova-accent': 'nova-accent.png',
'nova-vue': 'nova-vue.png',
'luna-blue': 'luna-blue.png',
'luna-green': 'luna-green.png',
'luna-pink': 'luna-pink.png',
'luna-amber': 'luna-amber.png',
'rhea': 'rhea.png'
}
}
},
methods: {

10
src/assets/styles/app/_config.scss
View File

@ -1,12 +1,12 @@
.layout-config {
position: fixed;
padding: 0;
top: 70px;
display: block;
top: 0;
right: 0;
display: block;
width: 550px;
z-index: 996;
height: calc(100% - 70px);
z-index: 998;
height: 100%;
transition: transform .3s;
transform: translate3d(550px,0,0);
backface-visibility: hidden;
@ -41,7 +41,7 @@
background-color: var(--primary-color);
text-align: center;
color: var(--primary-color-text);
top: 200px;
top: 270px;
left: -51px;
z-index: -1;
overflow: hidden;

20
src/assets/styles/app/_core.scss
View File

@ -53,7 +53,7 @@ a {
width: 100%;
height: 100%;
position: fixed;
top: 70px;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
transition: background-color .5s;
@ -203,22 +203,4 @@ h6 {
p {
line-height: 1.5;
margin: 0 0 1rem 0;
}
.app-theme {
background-color: var(--primary-color);
color: var(--primary-color-text);
position: fixed;
left: 285px;
top: 15px;
padding: .5rem;
z-index: 997;
border-radius: 4px;
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;
img {
width: 25px;
}
}

11
src/assets/styles/app/_news.scss
View File

@ -1,4 +1,3 @@
.layout-news {
position: fixed;
top: 0;
@ -7,9 +6,7 @@
height: 70px;
width: 100%;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
background-image: url("assets/images/topbar-easter-2020-bg.jpg");
@ -61,7 +58,6 @@
right: 28px;
background-color: rgba(0,0,0,.3);
border-radius: 50%;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
@ -72,7 +68,7 @@
.layout-wrapper.layout-news-active {
.layout-topbar {
top: 70px
top: 70px;
}
.layout-sidebar {
@ -80,11 +76,6 @@
height: calc(100% - 140px);
}
.layout-config {
top: 140px;
height: calc(100% - 140px);
}
.layout-content {
padding-top: 140px;
}

47
src/assets/styles/app/_responsive.scss
View File

@ -1,19 +1,12 @@
@media screen and (max-width: 960px) {
.layout-wrapper.layout-news-active {
.layout-sidebar {
top: 140px;
height: calc(100% - 140px);
}
.layout-config {
top: 180px;
height: calc(100% - 180px);
}
.layout-content {
padding-top: 180px;
}
.layout-mask {
top: 140px;
.layout-sidebar {
top: 0;
height: 100%;
}
.layout-news-container {
background-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, #FFFFFF 100%);
@ -24,24 +17,28 @@
}
.layout-topbar {
text-align: center;
height: 111px;
flex-wrap: wrap;
justify-content: space-between;
padding: 0;
.menu-button {
display: inline-block;
}
.logo {
margin: 7px 0 6px;
img{
width: 180px;
width: 150px;
}
}
.app-theme {
margin-left: 0;
margin-right: 23px;
}
.topbar-menu {
background-color: var(--surface-a);
float: none;
width: 100%;
height: 41px;
margin: 0;
@ -63,16 +60,16 @@
&.topbar-submenu > ul {
top: 40px;
text-align: left;
}
}
}
}
.layout-sidebar {
top: 70px;
top: 0;
left: -300px;
z-index: 999;
height: 100%;
transition: left .3s;
&.active {
@ -85,10 +82,6 @@
padding-top: 111px;
.content-section {
&.submenu ul li {
width: 50%;
}
&.introduction {
flex-direction: column;
@ -123,8 +116,7 @@
}
.layout-config {
top: 110px;
height: calc(100% - 110px);
height: 100%;
transform: translate3d(100%,0,0);
.layout-config-button {
@ -137,18 +129,13 @@
transform: translate3d(0,0,0);
}
}
.app-theme {
right: 35px;
left: auto;
}
}
@media screen and (max-width: 640px) {
.layout-wrapper.layout-news-active {
.topbar-menu {
>li.topbar-submenu {
>ul {
> li.topbar-submenu {
> ul {
top: 180px;
}
}

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

@ -9,13 +9,13 @@
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;
.menu-button {
display: none;
color: var(--text-color);
position: absolute;
left: 0;
top: 0;
width: 70px;
height: 70px;
line-height: 70px;
@ -34,10 +34,6 @@
}
.logo {
margin-left: 35px;
margin-top: 8px;
display: inline-block;
img {
width: 180px;
}
@ -49,12 +45,27 @@
}
}
.app-theme {
background-color: var(--primary-color);
color: var(--primary-color-text);
padding: .5rem;
border-radius: 4px;
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;
}
}
.topbar-menu {
list-style-type: none;
float: right;
margin: 0 60px 0 0;
margin: 0;
padding: 0;
height: 100%;
margin-left: auto;
> li {
display: inline-block;