Skip to content

GitLab

Commit ff19a61f authored by Eric Bremner's avatar Eric Bremner
Browse files

Merge branch 'feature/ISTWCMS-4872-ebremner-thumbnail-image-gallery' into '3.0.x' 

Feature/istwcms 4872 ebremner thumbnail image gallery

See merge request !138
parents 0c1ce1e3 4217a10f
Hide whitespace changes
Inline Side-by-side
Showing with 325 additions and 37 deletions
source/_patterns/00-config/01-mixins/_mixins.uw.scss
View file @ ff19a61f
......@@ -304,6 +304,9 @@ $test-color-12: #f00;
}@else if $value == card{
@include flexbox();
@include flex-direction(column);
}@else if $value == masonry{
@include flexbox();
@include flex-flow(row wrap);
}@else{
@include flexbox();
@include flex-flow(row wrap);
......@@ -356,24 +359,12 @@ $test-color-12: #f00;
}
// Display of list item.
@mixin uw-flex-list-item(){
//
}
// Display of elements in mosaic style.
@mixin uw-flex-mosaic(){
//
}
// Display of mosiac item.
@mixin uw-flex-mosaic-item(){
//
@mixin uw-flex-masonry-item(){
}
// Display of elements gallery style.
@mixin uw-flex-gallery(){
}
// Display of gallery item.
@mixin uw-flex-gallery-item(){
......
source/_patterns/03-layouts/content/_content.scss
View file @ ff19a61f
......@@ -7,3 +7,11 @@
padding:0 0 1rem
}
}
// Tabs in admin
.tabs{
z-index: gesso-z-index(wrapper);
}
.is-collapse-enabled .tabs__trigger{
z-index: gesso-z-index(content);
}
source/_patterns/03-layouts/site-container/_site-container.scss
View file @ ff19a61f
......@@ -50,7 +50,7 @@
position:relative;
width: 100%;
// Puts the content at z-index 3
z-index: gesso-z-index(content);
//z-index: gesso-z-index(content);
}
.uw-footer {
......
source/_patterns/04-components/image-gallery/_image-gallery.scss 0 → 100644
View file @ ff19a61f
$size-small: 3;
$size-medium: 6;
$size-xlarge: 9;
.uw-ig-grid{
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(2, 1fr);
@include small{
grid-template-columns: repeat($size-small, 1fr);
}
@include medium{
grid-template-columns: repeat($size-medium, 1fr);
.uw-contained-width--narrow &,
.layout--uw-2-col &,
.layout--uw-3-col &,
.layout--uw-4-col &,
.layout--uw-5-col & {
grid-template-columns: repeat($size-small, 1fr);
}
}
@include xl{
.uw-full-width.layout--uw-1-col &{
grid-template-columns: repeat($size-xlarge, 1fr);
}
}
> div {
box-shadow: 0 2px 3px 0 rgba(#000, 0.2), 0 3px 10px 0 rgba(#000, 0.19);
overflow: hidden;
position: relative;
> a {
background-color: #000;
color: #fff;
display: block;
height: 100%;
left:0;
mix-blend-mode: difference;
opacity: 0;
position: absolute;
top:0;
transition: all ease 250ms;
width: 100%;
}
> img {
min-height: 100%;
object-fit: cover;
transition: all ease 250ms;
width: 100%;
}
&:hover {
img {
filter: blur(1px);
}
a {
opacity: 1;
}
}
}
}
.uw-ig-masonry{
@include medium{
grid-template-columns: repeat($size-medium, 1fr);
height:100%;
> div {
//Grid Structure
&:nth-child(#{$size-medium}n + 1) {
grid-column: span 2;
grid-row: span 2;
}
&:nth-child(2) {
grid-column: span 3;
grid-row: span 3;
}
&:nth-child(4) {
grid-column: span 1;
grid-row: span 2;
}
}
// Inside narrow width section or multiple
// column layout, make columns 3"
.uw-contained-width--narrow &,
.layout--uw-2-col &,
.layout--uw-3-col &,
.layout--uw-4-col &,
.layout--uw-5-col & {
grid-template-columns: repeat($size-small, 1fr);
> div {
&:nth-child(#{$size-small}n + 1) {
grid-column: span 1;
grid-row: span 1;
}
}
}
}
@include xl{
.uw-full-width.layout--uw-1-col &{
grid-template-columns: repeat($size-xlarge, 1fr);
}
> div {
//&:nth-child(#{$size-xlarge}n + 1) {
// grid-column: span 2;
// grid-row: span 2;
//}
//
//&:nth-child(2) {
// grid-column: span 3;
// grid-row: span 3;
//}
//&:nth-child(3) {
// grid-column: span 1;
// grid-row: span 2;
//}
//&:nth-child(4) {
// grid-column: span 2;
// grid-row: span 2;
//}
//&:nth-child(5) {
// grid-column: span 1;
// grid-row: span 1;
//}
//&:nth-child(6) {
// grid-column: span 2;
// grid-row: span 2;
//}
}
}
}
//
// lightbox
//
[id^="uw-lightbox-"] {
&:target {
opacity:1;
pointer-events:inherit;
z-index:100;
img {
filter:blur(0);
}
.uw-lightbox__content{
display:inherit;
img{
display:inherit;
}
}
}
align-items: center;
background-color: rgba($uw-black, 0.7);
display: flex;
height: 100vh;
justify-content: center;
left: 0;
opacity:0;
pointer-events: none;
position: fixed;
top: 0;
transition: opacity 250ms ease-in-out;
width: 100vw;
.uw-lightbox__content {
color: #fff !important;
display:none;
max-height:80%;
max-width: 90%;
position: relative;
img{
display:none;
}
&:hover > .close {
opacity: 1;
transform: scale(1, 1);
}
&:hover > .uw-lightbox__title {
opacity: 1;
transform: translateY(-3px); //Fix extra line at end
&::after{
opacity:1;
}
}
> * {
transition: all 250ms ease-in-out;
}
}
.uw-lightbox__title {
bottom: 0;
display: block;
font-size: 1.5em;
margin: 0;
opacity: 0;
padding: 1em;
position: absolute;
transform: translateY(50%);
width: 100%;
&::after {
background-color: rgba($uw-black, 0.7);
bottom: 0;
color:#fff !important;
content: ' ';
height: 100%;
left: 0;
mix-blend-mode: soft-light;
opacity: 0;
position: absolute;
transform-origin: bottom;
transition: all 350ms ease-in-out 250ms;
width: 100%;
}
}
img {
filter: blur(50px);
margin: 0;
max-height: 90vh;
max-width: 100%;
padding: 0;
}
.close {
align-items: center;
background-color: rgba($uw-black, 0.7);
color:#fff !important;
display: flex;
height: 2em;
justify-content: center;
opacity: 0;
position: absolute;
right: 0;
text-decoration:none;
top: 0;
transform: scale(0, 0);
transform-origin: right top;
width: 2em;
&::after {
content: "X";
}
}
}
source/_patterns/04-components/image-gallery/image-gallery.twig
View file @ ff19a61f
<div id="uw-ig-{{ images.id }}" class="uw-ig" data-id="{{ images.id }}">
<div class="uw-ig__wrapper">
{% if type == NULL or type == 'slider' %}
<div id="uw-ig-{{ images.id }}" class="uw-ig {{ modifier_classes }}" data-id="{{ images.id }}">
<div class="uw-ig__wrapper">
{% embed '@layouts/carousel/carousel.twig' %}
{% embed '@layouts/carousel/carousel.twig' %}
{% block content %}
{% block content %}
{% for image in images.images %}
{% for image in images.images %}
<div class="uw-ig__item-wrapper">
<div class="uw_ig__image">
{% include '@components/responsive-image/responsive-image.twig' with {
'sources': image.image.sources,
'img_element': image.image.img_element['#uri'],
'alt': image.image.alt
} %}
</div>
{% if image.caption %}
<div class="uw_ig__caption">
{% include '@components/caption/caption.twig' with {
'caption': image.caption
<div class="uw-ig__item-wrapper">
<div class="uw_ig__image">
{% include '@components/responsive-image/responsive-image.twig' with {
'sources': image.image.sources,
'img_element': image.image.img_element['#uri'],
'alt': image.image.alt
} %}
</div>
{% endif %}
</div>
{% if image.caption %}
<div class="uw_ig__caption">
{% include '@components/caption/caption.twig' with {
'caption': image.caption
} %}
</div>
{% endif %}
</div>
{% endfor %}
{% endblock %}
{% endembed %}
</div>
</div>
{% else %}
{% endfor %}
{% endblock %}
{% endembed %}
<div class="uw-ig-grid " id="uw-gallery">
{% for images in image_gallery.images %}
{% for index, image in images %}
<div>
<img src="{{ image.image.thumbnail }}" alt="{{ image.image.alt }}" />
<a href="#uw-lightbox-{{ index }}">
{% if image.caption %}
<span class="uw-ig__caption">
{{ image.caption }}
</span>
{% endif %}
</a>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
{% for images in image_gallery.images %}
{% for index, image in images %}
<div class="uw-lightbox" id="uw-lightbox-{{ index }}">
<div class="uw-lightbox__content">
<img src="{{ image.image.original }}" alt="{{ image.image.alt }}">
{% if image.caption %}
<div class="uw-lightbox__title">{{ image.caption }}</div>
{% endif %}
<a class="close" href="#uw-gallery"></a>
</div>
</div>
{% endfor %}
{% endfor %}
{% endif %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment