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

new year sale added

pull/1915/head
Tuğçe Küçükoğlu 2021-12-20 17:48:18 +03:00
parent 9797d6c44d
commit 0234546b3d
6 changed files with 86 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.vue
View File

@ -1,13 +1,11 @@
<template>
<div class="layout-wrapper" :class="containerClass">
<div class="layout-news" v-if="newsActive">
<div class="layout-news-container">
<a href="https://www.primefaces.org/primeblocks-vue" class="layouts-news-mockup" target="_blank">
<img class="layouts-news-mockup-image" src="./assets/images/topbar-primeblocks-device.png">
</a>
<a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" style="text-decoration: none" class="layout-news-button">
LEARN MORE
<i class="pi pi-angle-right"></i>
<div class="layout-news-container" @click="redirect">
<img class="layout-news-mockup-image p-ml-2" src="./assets/images/topbar-newyear-logo.svg">
<h3 class="layout-news-header p-px-2">DISCOUNT UP TO 50% ON EVERYTHING AT PRIMESTORE</h3>
<a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" class="layout-news-button">
Read More
</a>
<a tabindex="0" class="layout-news-close" @click="hideNews">
<i class="pi pi-times"></i>
@ -152,6 +150,9 @@ export default {
},
isDarkTheme(theme) {
return theme.indexOf('dark') !== -1 || theme.indexOf('vela') !== -1 || theme.indexOf('arya') !== -1 || theme.indexOf('luna') !== -1;
},
redirect() {
window.location.href = 'https://www.primefaces.org/primeblocks-vue';
}
},
computed: {

2
src/AppMenu.vue
View File

@ -22,7 +22,7 @@
<Tag v-if="child.badge" :value="child.badge"></Tag>
</router-link>
<template v-if="child.children">
<router-link :to="child.children[0].to" v-slot="{isActive}" custom>
<router-link :to="child.children[0].to" v-slot="{isActive}" custom>
<div>
<a tabindex="0" @click="toggleSubmenu($event, child.meta[0])">
{{child.name}}

BIN
src/assets/images/topbar-newyear-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

44
src/assets/images/topbar-newyear-logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 385 KiB

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

@ -4,8 +4,8 @@
justify-content: center;
align-items: center;
margin-left: 250px;
background-image: linear-gradient(197.37deg, rgba(0, 120, 227, 0.07) -0.38%, rgba(165, 72, 181, 0) 101.89%), linear-gradient(115.93deg, rgba(62, 136, 246, 0.15) 4.86%, rgba(62, 180, 246, 0.0495) 38.05%, rgba(62, 235, 246, 0) 74.14%), radial-gradient(56.47% 76.87% at 6.92% 7.55%, rgba(62, 136, 246, 0.05) 0%, rgba(62, 158, 246, 0.013) 52.16%, rgba(62, 246, 246, 0) 100%), linear-gradient(306.53deg, rgba(163, 171, 217, 0.1) 19.83%, rgba(163, 171, 217, 0) 97.33%);
background-color: white;
background-image: url('./assets/images/topbar-newyear-bg.png'), linear-gradient(180deg, #D2000B 0%, #9B0008 100%);
background-blend-mode: multiply;
.layout-news-container {
width: 100%;
@ -17,49 +17,56 @@
font-weight: bold;
font-size: 20px;
.layouts-news-mockup {
display: inline-block;
overflow: hidden;
.layout-news-header {
margin: 0;
background: linear-gradient(180deg, #D8000A 0%, rgba(255, 0, 0, 0) 100%);
border-radius: 4px 4px 0px 0px;
text-shadow: 0px 4px 4.4px rgba(0, 0, 0, 0.3);
font-weight: 900;
}
img.layouts-news-mockup-image {
height: 70px;
img.layout-news-mockup-image {
position: absolute;
left: 250px;
}
.layout-news-button {
border: 2px solid #283738;
color: #283738;
font-size: 15px;
padding: 0.3em 0.3em 0.5em 1em;
background: linear-gradient(180deg, #D8000A 0%, rgba(251, 0, 1, 0.4) 89.06%, rgba(255, 0, 0, 0) 100%);
border-radius: 5px;
color: #ffffff;
font-size: 14px;
padding: 0.5em 0.75em;
font-weight: 700;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
transition: background-color 0.15s;
margin-left: 1rem;
position: relative;
text-decoration: none;
z-index: 1;
&:hover {
background-color: rgba(0, 0, 0, 0.25);
background: linear-gradient(180deg, #EE000B 0%, rgba(255, 0, 0, 0.55) 100%);
}
}
}
.layout-news-close {
cursor: pointer;
color: #fff;
color: #ffffff;
position: absolute;
z-index: 2;
right: 28px;
background-color: rgba(0,0,0,.3);
background: linear-gradient(180deg, #D8000A 0%, rgba(255, 0, 0, 0) 100%);
filter: drop-shadow(0px 12px 12px rgba(0, 0, 0, 0.17));
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
width: 23px;
height: 23px;
width: 34px;
height: 34px;
&:hover {
background: linear-gradient(180deg, #EE000B 0%, rgba(255, 0, 0, 0.55) 100%);
}
}
}

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

@ -4,9 +4,14 @@
.layout-news {
margin-left: 0;
.layout-news-button {
.layout-news-button,
.layout-news-mockup-image {
display: none;
}
.layout-news-header {
font-size: 1rem;
}
}
}