Skip to content

GitLab

Commit beafe23f authored by Martin Leblanc's avatar Martin Leblanc Committed by Eric Bremner
Browse files

ISTWCMS-4872:css for basic grid of thumbnails as well as a masonry view

parent 6e040fec
Hide whitespace changes
Inline Side-by-side
Showing with 149 additions and 86 deletions
source/_patterns/00-config/01-mixins/_mixins.uw.scss
View file @ beafe23f
......@@ -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,36 @@ $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(){
@include flex();
@include align-items(flex-start);
@include medium{
.uw-contained-width--narrow &,
.layout--uw-inverted-l-right &,
.layout--uw-inverted-l-left &,
.layout--uw-2-col &,
.layout--uw-3-col &,
.layout--uw-4-col &{
// Display of elements gallery style.
@mixin uw-flex-gallery(){
}
}
@include large{
.uw-contained-width--wide &{
}
}
}
// Display of gallery item.
@mixin uw-flex-gallery-item(){
......
source/_patterns/04-components/image-gallery/_image-gallery.scss
View file @ beafe23f
$size: 6;
#gallery {
$size-small: 3;
$size-medium: 6;
$size-xlarge: 9;
.uw-ig-grid{
display: grid;
grid-gap: 0.5em;
grid-template: repeat($size, 1fr) / repeat($size, 1fr);
height: calc(100vh - 10px);
@media (max-width: 800px) {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: center;
> div {
margin: 1%;
width: 48%;
@media (max-width: 350px) {
width: 98%;
}
}
grid-gap: 1rem;
grid-template-columns: repeat(2, 1fr);
@include small{
grid-template-columns: repeat($size-small, 1fr);
}
> div {
//Grid Structure
&:nth-child(#{$size}n + 1) {
grid-column: span 2;
grid-row: span 2;
}
&:nth-child(2) {
grid-column: span 3;
grid-row: span 3;
@include medium{
grid-template-columns: repeat($size-medium, 1fr);
}
@include xl{
.uw-full-width.layout--uw-1-col &{
grid-template-columns: repeat($size-xlarge, 1fr);
}
&:nth-child(4) {
grid-column: span 1;
grid-row: span 2;
}
}
> 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: #000;
font: bold 4em "Helvetica";
color: #fff;
display: block;
height: 100%;
left:0;
mix-blend-mode: difference;
opacity: 0;
padding: 2rem;
position: absolute;
//text-shadow: 0 -1px 5px #fff, -1px 0px 5px #fff, 0 1px 5px #fff, 1px 0px 5px #fff;
transition: all ease 1s;
top:0;
transition: all ease 250ms;
width: 100%;
}
> img {
min-height: 100%;
transition: all ease 1s;
object-fit: cover;
transition: all ease 250ms;
width: 100%;
}
&:hover {
img {
filter: blur(4px);
filter: blur(1px);
}
a {
opacity: 1;
}
}
}
}
.uw-ig-masonry{
> div {
box-shadow: 0 2px 8px 0 rgba(#000, 0.2), 0 3px 20px 0 rgba(#000, 0.19);
overflow: hidden;
position: relative;
@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;
//}
}
div,
a {
align-items: center;
display: flex;
justify-content: center;
text-decoration: none;
}
}
//
// lightbox
//
[id^="lightbox-"] {
[id^="uw-lightbox-"] {
&:target {
opacity:1;
pointer-events:inherit;
z-index:100;
img {
filter:blur(0);
}
}
align-items: center;
background-color: rgba($uw-black, 0.5);
background-color: rgba($uw-black, 0.7);
display: flex;
height: 100vh;
justify-content: center;
......@@ -106,20 +149,21 @@ $size: 6;
pointer-events: none;
position: fixed;
top: 0;
transition: opacity 450ms ease-in-out;
transition: opacity 250ms ease-in-out;
width: 100vw;
.content {
color: #fff;
.uw-lightbox__content {
color: #fff !important;
max-width: 90%;
position: relative;
z-index:100;
&:hover > .close {
opacity: 1;
transform: scale(1, 1);
}
&:hover > .title {
&:hover > .uw-lightbox__title {
opacity: 1;
transform: translateY(-3px); //Fix extra line at end
......@@ -129,10 +173,10 @@ $size: 6;
}
> * {
transition: all 450ms ease-in-out;
transition: all 250ms ease-in-out;
}
}
.title {
.uw-lightbox__title {
bottom: 0;
display: block;
font-size: 1.5em;
......@@ -144,8 +188,9 @@ $size: 6;
width: 100%;
&::after {
background-color: rgba($uw-black, 0.4);
background-color: rgba($uw-black, 0.7);
bottom: 0;
color:#fff !important;
content: ' ';
height: 100%;
left: 0;
......@@ -168,8 +213,8 @@ $size: 6;
.close {
align-items: center;
background-color: rgba($uw-black, 0.5);
color:#fff;
background-color: rgba($uw-black, 0.7);
color:#fff !important;
display: flex;
height: 2em;
justify-content: center;
......@@ -187,3 +232,4 @@ $size: 6;
}
}
}
source/_patterns/04-components/image-gallery/image-gallery.twig
View file @ beafe23f
{% if type == NULL or type == 'slider' %}
<div id="uw-ig-{{ images.id }}" class="uw-ig" data-id="{{ images.id }}">
<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' %}
......@@ -32,14 +32,16 @@
</div>
{% else %}
<div id="gallery">
<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="#lightbox-{{ index }}">
<a href="#uw-lightbox-{{ index }}">
{% if image.caption %}
{{ image.caption }}
<span class="uw-ig__caption">
{{ image.caption }}
</span>
{% endif %}
</a>
</div>
......@@ -49,13 +51,13 @@
{% for images in image_gallery.images %}
{% for index, image in images %}
<div class="lightbox" id="lightbox-{{ index }}" />
<div class="content">
<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="title">{{ image.caption }}</div>
<div class="uw-lightbox__title">{{ image.caption }}</div>
{% endif %}
<a class="close" href="#gallery"></a>
<a class="close" href="#uw-gallery"></a>
</div>
</div>
{% endfor %}
......
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