Added diamond banner

primefaces · Oct 22, 2020 · b40a260 · b40a260
1 parent 8144cbc
commit b40a260
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 26 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -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" />
@@ -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: {
@@ -80,6 +86,7 @@ export default {
         },
         hideNews() {
             this.newsActive = false;
+            sessionStorage.setItem('primevue-news-hidden', 'true');
         },
         changeTheme(event) {
             let themeElement = document.getElementById('theme-link');

diff --git a/src/assets/images/topbar-diamond-bg.png b/src/assets/images/topbar-diamond-bg.png
diff --git a/src/assets/images/topbar-diamond-mockup.png b/src/assets/images/topbar-diamond-mockup.png
diff --git a/src/assets/styles/app/_news.scss b/src/assets/styles/app/_news.scss
@@ -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%;
@@ -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;
@@ -79,4 +95,4 @@
     .layout-content {
         padding-top: 140px;
     }
-}
+}
diff --git a/src/assets/styles/app/_responsive.scss b/src/assets/styles/app/_responsive.scss
@@ -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;
@@ -31,7 +37,7 @@
                 width: 150px;
             }
         }
-        
+
         .app-theme {
             margin-left: 0;
             margin-right: 23px;
@@ -48,7 +54,7 @@
                 height: 40px;
                 line-height: 40px;
                 width: 25%;
-                
+
                 > a {
                     padding-bottom: 0;
                     height: 40px;
@@ -81,9 +87,9 @@
         padding-top: 110px;
 
         .content-section {
-            &.introduction { 
+            &.introduction {
                 flex-direction: column;
-                
+
                 .app-inputstyleswitch {
                     margin-top: 1.5rem;
                 }
@@ -105,7 +111,7 @@
             transition: background-color .5s;
         }
     }
-    
+
     .home {
         .introduction > div {
             width: 100%;
@@ -174,4 +180,4 @@
             }
         }
     }
-}
+}