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

Added galleria link to sidebar

pull/256/head
mertsincan 2020-03-31 16:27:54 +03:00
parent d3e93428fd
commit 7bb7b97d67
4 changed files with 110 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/AppMenu.vue
View File

@ -131,6 +131,14 @@
<router-link to="/toast">Toast</router-link> <router-link to="/toast">Toast</router-link>
</div> </div>
<span>
<img alt="multimedia" class="layout-menu-icon-inactive" src="./assets/images/menu/multimedia.svg" />
<span>Multimedia</span>
</span>
<div>
<router-link to="/galleria">Galleria</router-link>
</div>
<span> <span>
<img alt="misc" class="layout-menu-icon-inactive" src="./assets/images/menu/misc.svg" /> <img alt="misc" class="layout-menu-icon-inactive" src="./assets/images/menu/misc.svg" />
<span>Misc</span> <span>Misc</span>
@ -162,4 +170,4 @@ export default {
} }
} }
} }
</script> </script>

101
src/assets/styles/app.scss
View File

@ -67,7 +67,7 @@
} }
} }
@mixin rotate($deg) { @mixin rotate($deg) {
-webkit-transform: rotate($deg); -webkit-transform: rotate($deg);
-moz-transform: rotate($deg); -moz-transform: rotate($deg);
-o-transform: rotate($deg); -o-transform: rotate($deg);
@ -156,7 +156,7 @@ a {
box-shadow: 0 0 0 0.2em $focusBorderColor; box-shadow: 0 0 0 0.2em $focusBorderColor;
} }
} }
.topbar-menu { .topbar-menu {
list-style-type: none; list-style-type: none;
float: right; float: right;
@ -214,7 +214,7 @@ a {
> li { > li {
line-height: 1; line-height: 1;
&.topbar-submenu-header { &.topbar-submenu-header {
padding: 6px 12px; padding: 6px 12px;
font-weight: bold; font-weight: bold;
@ -280,7 +280,7 @@ a {
} }
} }
} }
} }
} }
@ -296,23 +296,23 @@ a {
position: relative; position: relative;
top: -1px; top: -1px;
} }
.theme-badge.material { .theme-badge.material {
background: #2196F3; /* fallback for old browsers */ background: #2196F3; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #2196F3, #2196F3); /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to bottom, #2196F3, #2196F3); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #2196F3, #2196F3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(to bottom, #2196F3, #2196F3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
} }
.theme-badge.bootstrap { .theme-badge.bootstrap {
background: #563D7C; /* fallback for old browsers */ background: #563D7C; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #563D7C, #966BD8); /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to bottom, #563D7C, #966BD8); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #563D7C, #966BD8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(to bottom, #563D7C, #966BD8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
} }
.theme-badge.darkmode { .theme-badge.darkmode {
background-color: #141d26; background-color: #141d26;
background: -webkit-linear-gradient(to bottom, #141d26, #5a6067); /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to bottom, #141d26, #5a6067); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #141d26, #5a6067); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(to bottom, #141d26, #5a6067); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
} }
} }
} }
@ -359,19 +359,19 @@ a {
&.layout-menu-icon-active { &.layout-menu-icon-active {
display: none; display: none;
} }
&.layout-menu-icon-inactive { &.layout-menu-icon-inactive {
display: inline; display: inline;
} }
} }
} }
> div { > div {
background-color: #ffffff; background-color: #ffffff;
padding: 0 15px 15px 15px; padding: 0 15px 15px 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
a { a {
display: inline-block; display: inline-block;
padding: 6px; padding: 6px;
@ -401,7 +401,7 @@ a {
.menuitem-badge { .menuitem-badge {
background: #00b09b; /* fallback for old browsers */ background: #00b09b; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #96c93d, #00b09b); /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(to bottom, #96c93d, #00b09b); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #96c93d, #00b09b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(to bottom, #96c93d, #00b09b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding: 2px 4px; padding: 2px 4px;
vertical-align: middle; vertical-align: middle;
border-radius: 3px; border-radius: 3px;
@ -435,7 +435,7 @@ a {
.layout-content { .layout-content {
margin-left: 280px; margin-left: 280px;
padding-top: 70px; padding-top: 70px;
.content-section { .content-section {
display: block; display: block;
padding: 30px; padding: 30px;
@ -444,17 +444,17 @@ a {
&:first-of-type > div > span { &:first-of-type > div > span {
line-height: 1.5em; line-height: 1.5em;
} }
h2 { h2 {
margin-top: 0; margin-top: 0;
} }
&.introduction { &.introduction {
color: #ffffff; color: #ffffff;
@include background-gradient-left2right(#455C71,#526F89); @include background-gradient-left2right(#455C71,#526F89);
.feature-intro { .feature-intro {
h1 { h1 {
font-size: 28px; font-size: 28px;
margin: 0 0 20px 0; margin: 0 0 20px 0;
@ -479,10 +479,15 @@ a {
} }
} }
} }
&.implementation { &.implementation {
background-color: #ffffff; background-color: #ffffff;
> hr {
margin-top: 24px;
opacity: .3;
}
> h3 { > h3 {
font-weight: 400; font-weight: 400;
margin-top: 30px; margin-top: 30px;
@ -537,8 +542,8 @@ a {
border-radius: 3px; border-radius: 3px;
@include transition(background-color .1s); @include transition(background-color .1s);
&:hover { &:hover {
background-color: #4c667d; background-color: #4c667d;
} }
&:focus { &:focus {
@ -555,7 +560,7 @@ a {
} }
} }
} }
&.documentation { &.documentation {
border-top: 1px solid #dadada; border-top: 1px solid #dadada;
@ -589,12 +594,12 @@ a {
color: #638fb7; color: #638fb7;
font-weight: 700; font-weight: 700;
@include transition(color .2s); @include transition(color .2s);
&:hover { &:hover {
color: #82a5c5; color: #82a5c5;
} }
} }
.btn-viewsource { .btn-viewsource {
background-color: #444; background-color: #444;
padding: .5em 1em; padding: .5em 1em;
@ -604,7 +609,7 @@ a {
margin: .5em 0; margin: .5em 0;
display: inline-block; display: inline-block;
@include transition(background-color .2s); @include transition(background-color .2s);
&:hover { &:hover {
background-color: #595959; background-color: #595959;
color: #fff; color: #fff;
@ -637,7 +642,7 @@ a {
border: 0 none; border: 0 none;
top: 1px; top: 1px;
@include border-radius-top(3px); @include border-radius-top(3px);
a { a {
font-weight: 400; font-weight: 400;
color: #34495e; color: #34495e;
@ -701,7 +706,7 @@ a {
color: #ffffff; color: #ffffff;
} }
} }
li { li {
line-height: 1.5; line-height: 1.5;
} }
@ -753,11 +758,11 @@ a {
float: right; float: right;
font-size: 24px; font-size: 24px;
} }
a { a {
margin-left: 16px; margin-left: 16px;
} }
.icon-github { .icon-github {
width: 29.1px; width: 29.1px;
height: 29.1px; height: 29.1px;
@ -785,10 +790,10 @@ a {
background-color: #ffffff; background-color: #ffffff;
backface-visibility: hidden; backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
&.layout-config-active { &.layout-config-active {
transform: translate3d(0,0,0); transform: translate3d(0,0,0);
.layout-config-content-wrapper { .layout-config-content-wrapper {
.layout-config-button { .layout-config-button {
i { i {
@ -803,7 +808,7 @@ a {
height: 100%; height: 100%;
padding: 0; padding: 0;
@include shadow(0 2px 10px 0 rgba(0, 0, 0, 0.24)); @include shadow(0 2px 10px 0 rgba(0, 0, 0, 0.24));
.layout-config-button { .layout-config-button {
display: block; display: block;
position: absolute; position: absolute;
@ -821,7 +826,7 @@ a {
@include border-radius-left(3px); @include border-radius-left(3px);
@include transition(background-color .2s, box-shadow .2s); @include transition(background-color .2s, box-shadow .2s);
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 5px 22px 4px rgba(0, 0, 0, 0.12), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 12px 17px 2px rgba(0, 0, 0, 0.14); 0 12px 17px 2px rgba(0, 0, 0, 0.14);
i { i {
@ -999,13 +1004,13 @@ a {
padding: 10px 24px 9px 24px; padding: 10px 24px 9px 24px;
border-radius: 3px; border-radius: 3px;
@include transition(background-color .2s); @include transition(background-color .2s);
&:hover { &:hover {
background-color: #708EA5; background-color: #708EA5;
color: #ffffff; color: #ffffff;
} }
} }
.home-button2 { .home-button2 {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
@ -1015,13 +1020,13 @@ a {
border-radius: 3px; border-radius: 3px;
@include transition(background-color .2s); @include transition(background-color .2s);
display: inline-block; display: inline-block;
&:hover { &:hover {
background-color: #E5AF36; background-color: #E5AF36;
color: #8C6816 !important; color: #8C6816 !important;
} }
} }
/* Introduction */ /* Introduction */
.introduction { .introduction {
background-color: #1976d2; background-color: #1976d2;
@ -1080,7 +1085,7 @@ a {
@include shadow(0 0.8px 1.7px rgba(0, 0, 0, 0.008), 0 1.9px 4.2px rgba(0, 0, 0, 0.012),0 3.6px 7.9px rgba(0, 0, 0, 0.015),0 6.5px 14.1px rgba(0, 0, 0, 0.018),0 12.1px 26.3px rgba(0, 0, 0, 0.022),0 29px 63px rgba(0, 0, 0, 0.03)); @include shadow(0 0.8px 1.7px rgba(0, 0, 0, 0.008), 0 1.9px 4.2px rgba(0, 0, 0, 0.012),0 3.6px 7.9px rgba(0, 0, 0, 0.015),0 6.5px 14.1px rgba(0, 0, 0, 0.018),0 12.1px 26.3px rgba(0, 0, 0, 0.022),0 29px 63px rgba(0, 0, 0, 0.03));
height: 100%; height: 100%;
border-radius: 4px; border-radius: 4px;
.feature-card-detail { .feature-card-detail {
padding: 0 16px 16px 16px; padding: 0 16px 16px 16px;
} }
@ -1168,13 +1173,13 @@ a {
} }
} }
} }
.templates { .templates {
background-color: #f5f7f8; background-color: #f5f7f8;
text-align: center; text-align: center;
padding: 30px; padding: 30px;
border-bottom: 1px solid #c4c5c6; border-bottom: 1px solid #c4c5c6;
h3 { h3 {
font-size:24px; font-size:24px;
color: #484848; color: #484848;
@ -1186,7 +1191,7 @@ a {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
} }
img { img {
width: 100%; width: 100%;
} }
@ -1267,7 +1272,7 @@ a {
width: 180px; width: 180px;
} }
} }
.topbar-menu { .topbar-menu {
background-color: #ffffff; background-color: #ffffff;
float: none; float: none;
@ -1312,13 +1317,13 @@ a {
.layout-content { .layout-content {
margin-left: 0; margin-left: 0;
padding-top: 111px; padding-top: 111px;
.content-section { .content-section {
&.submenu ul li { &.submenu ul li {
width: 50%; width: 50%;
} }
} }
} }
.home { .home {
@ -1347,7 +1352,7 @@ a {
top: 110px; top: 110px;
height: calc(100% - 110px); height: calc(100% - 110px);
transform: translate3d(100%,0,0); transform: translate3d(100%,0,0);
.layout-config-button { .layout-config-button {
left: auto; left: auto;
right: -52px; right: -52px;
@ -1443,8 +1448,8 @@ pre[class*="language-"] code {
/* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */ /* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
.dark-theme { .dark-theme {
.implementation { .implementation {
background-color: #3f3f3f !important; background-color: #3f3f3f !important;
color: #dedede !important; color: #dedede !important;
> h3, > h3,
@ -1456,4 +1461,4 @@ pre[class*="language-"] code {
background-color: #535353 !important; background-color: #535353 !important;
} }
} }
} }

2
src/main.js
View File

@ -71,6 +71,7 @@ import ToggleButton from './components/togglebutton/ToggleButton';
import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox'; import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
import InputMask from './components/inputmask/InputMask'; import InputMask from './components/inputmask/InputMask';
import ValidationMessage from './components/validationmessage/ValidationMessage'; import ValidationMessage from './components/validationmessage/ValidationMessage';
import Galleria from './components/galleria/Galleria';
import CodeHighlight from './views/codehighlight/CodeHighlight'; import CodeHighlight from './views/codehighlight/CodeHighlight';
@ -157,6 +158,7 @@ Vue.component('TreeTable', TreeTable);
Vue.component('TriStateCheckbox', TriStateCheckbox); Vue.component('TriStateCheckbox', TriStateCheckbox);
Vue.component('InputMask', InputMask); Vue.component('InputMask', InputMask);
Vue.component('ValidationMessage', ValidationMessage); Vue.component('ValidationMessage', ValidationMessage);
Vue.component('Galleria', Galleria);
Vue.component('CodeHighlight', CodeHighlight); Vue.component('CodeHighlight', CodeHighlight);

47
src/router.js
View File

@ -599,7 +599,52 @@ export default new Router({
path: '/tristatecheckbox', path: '/tristatecheckbox',
name: 'tristatecheckbox', name: 'tristatecheckbox',
component: () => import('./views/tristatecheckbox/TriStateCheckboxDemo.vue') component: () => import('./views/tristatecheckbox/TriStateCheckboxDemo.vue')
} },
{
path: '/galleria',
name: 'galleria',
component: () => import('./views/galleria/GalleriaDemo.vue')
},
{
path: '/galleria/basic',
name: 'galleriabasic',
component: () => import('./views/galleria/GalleriaBasicDemo.vue')
},
{
path: '/galleria/indicator',
name: 'galleriaindicator',
component: () => import('./views/galleria/GalleriaIndicatorDemo.vue')
},
{
path: '/galleria/thumbnail',
name: 'galleriathumbnail',
component: () => import('./views/galleria/GalleriaThumbnailDemo.vue')
},
{
path: '/galleria/preview',
name: 'galleriapreview',
component: () => import('./views/galleria/GalleriaPreviewDemo.vue')
},
{
path: '/galleria/responsive',
name: 'galleriaresponsive',
component: () => import('./views/galleria/GalleriaResponsiveDemo.vue')
},
{
path: '/galleria/fullscreen',
name: 'galleriafullscreen',
component: () => import('./views/galleria/GalleriaFullScreenDemo.vue')
},
{
path: '/galleria/circular',
name: 'galleriacircular',
component: () => import('./views/galleria/GalleriaCircularDemo.vue')
},
{
path: '/galleria/caption',
name: 'galleriacaption',
component: () => import('./views/galleria/GalleriaCaptionDemo.vue')
}
], ],
scrollBehavior() { scrollBehavior() {
return {x: 0, y: 0}; return {x: 0, y: 0};