Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/primefaces/primevue
Browse files Browse the repository at this point in the history
  • Loading branch information
cagataycivici committed Oct 22, 2020
2 parents 63326bf + b40a260 commit 6c30f9a
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 26 deletions.
19 changes: 13 additions & 6 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
<template>
<div class="layout-wrapper" :class="containerClass">
<a class="layout-news" href="https://www.primefaces.org/store" target="_blank" tabindex="-1" v-if="newsActive">
<div class="layout-news" v-if="newsActive">
<div class="layout-news-container">
<img class="layouts-news-text-image" alt="easter" src="./assets/images/topbar-easter-2020-text.png">
<img class="layouts-news-mockup-image" alt="easter" src="./assets/images/topbar-easter-2020-ultima.png">
<a href="#" class="layout-news-close" @click="hideNews">
<img class="layouts-news-mockup-image" src="./assets/images/topbar-diamond-mockup.png">
<span class="layout-news-details">
</span>
<a href="https://www.primefaces.org/layouts/diamond-vue" target="_blank" tabindex="-1" style="text-decoration: none" class="layout-news-button">
LEARN MORE<i class="pi pi-angle-right"></i>
</a>
<a tabindex="0" class="layout-news-close" @click="hideNews">
<i class="pi pi-times"></i>
</a>
</div>
</a>
</div>

<app-topbar @menubutton-click="onMenuButtonClick" @change-theme="changeTheme" :theme="theme" />
<app-menu :active="sidebarActive" />
Expand Down Expand Up @@ -37,14 +41,16 @@ export default {
data() {
return {
sidebarActive: false,
newsActive: false,
newsActive: true,
theme: 'saga-blue'
}
},
mounted() {
if (this.isOutdatedIE()) {
this.$toast.add({severity: 'warn', summary: 'Limited Functionality', detail: 'Although PrimeVue supports IE11, ThemeSwitcher in this application cannot be not fully supported by your browser. Please use a modern browser for the best experience of the showcase.'});
}
this.newsActive = this.newsActive && sessionStorage.getItem('primevue-news-hidden') == null;
},
watch: {
$route: {
Expand Down Expand Up @@ -80,6 +86,7 @@ export default {
},
hideNews() {
this.newsActive = false;
sessionStorage.setItem('primevue-news-hidden', 'true');
},
changeTheme(event) {
let themeElement = document.getElementById('theme-link');
Expand Down
Binary file added src/assets/images/topbar-diamond-bg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/topbar-diamond-mockup.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 24 additions & 8 deletions src/assets/styles/app/_news.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
display: flex;
justify-content: center;
align-items: center;
background-image: url("assets/images/topbar-easter-2020-bg.jpg");
background-image: url("assets/images/topbar-diamond-bg.png");

.layout-news-container {
width: 100%;
Expand Down Expand Up @@ -40,18 +40,34 @@
}
}

img.layouts-news-text-image {
height: 60px;
}

img.layouts-news-mockup-image {
height: 70px;
position: absolute;
right: 52px;
}

.layout-news-button {
border: 1px solid #ffffff;
color: #ffffff;
font-size: 15px;
padding: .3em .3em .5em 1em;
font-weight: bold;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
transition: background-color 0.15s;
margin-left: 2em;
position: relative;
z-index: 1;

&:hover {
background-color: rgba(255, 255, 255, 0.25);
}
}
}

.layout-news-close {
cursor: pointer;
color: #fff;
position: absolute;
z-index: 2;
Expand Down Expand Up @@ -79,4 +95,4 @@
.layout-content {
padding-top: 140px;
}
}
}
30 changes: 18 additions & 12 deletions src/assets/styles/app/_responsive.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,24 @@
.layout-content {
padding-top: 180px;
}

.layout-sidebar {
top: 0;
height: 100%;
}
.layout-news-container {
background-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, #FFFFFF 100%);
}
img.layouts-news-mockup-image {
display: none;

.layout-news-button {
opacity: 0;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
top: 0;
left: 0;
}
}

.layout-topbar {
height: 110px;
flex-wrap: wrap;
Expand All @@ -31,7 +37,7 @@
width: 150px;
}
}

.app-theme {
margin-left: 0;
margin-right: 23px;
Expand All @@ -48,7 +54,7 @@
height: 40px;
line-height: 40px;
width: 25%;

> a {
padding-bottom: 0;
height: 40px;
Expand Down Expand Up @@ -81,9 +87,9 @@
padding-top: 110px;

.content-section {
&.introduction {
&.introduction {
flex-direction: column;

.app-inputstyleswitch {
margin-top: 1.5rem;
}
Expand All @@ -105,7 +111,7 @@
transition: background-color .5s;
}
}

.home {
.introduction > div {
width: 100%;
Expand Down Expand Up @@ -174,4 +180,4 @@
}
}
}
}
}

0 comments on commit 6c30f9a

Please sign in to comment.