Skip to content

Tenzing / Tenzing-Web-2023

Go to a project
Toggle navigation
Toggle navigation pinning
7e740cb2 by Jeff Balicki
Options

tiles 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 85045dfc
Inline Side-by-side
Showing 17 changed files with 397 additions and 99 deletions
.env
**/.DS_Store
/wp-content/uploads/*
<?php
/**
* Work Block Template.
*
* @param array $block The block settings and attributes.
* @param string $content The block inner HTML (empty).
* @param bool $is_preview True during AJAX preview.
* @param (int|string) $post_id The post ID this block is saved to.
*/
?>
<?php if( have_rows('work') ): ?>
<?php $rowCount = count( get_field('work') ); //GET THE COUNT ?>
<?php $i = 1; ?>
<div class="tiles">
<?php while( the_repeater_field('work') ): ?>
<div class="tile <?php if($i == $rowCount): ?> last <?php endif; ?>">
<div class="tile_image" style="background-image:url(<?php the_sub_field('background_image'); ?>);">
<div class="hover_content">
<?php the_sub_field('hover_text'); ?>
</div>
<div class="tile_content">
<?php the_sub_field('content'); ?>
</div>
</div>
</div>
<?php $i++; ?>
<?php endwhile; ?>
<br clear="both">
</div>
<?php endif; ?>
......@@ -15811,6 +15811,7 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
.the-work {
background-color: #333333;
margin: 0px -25%;
padding: 40px 0%;
}
.the-work h2, .the-work .h2 {
text-transform: uppercase;
......@@ -15819,58 +15820,13 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
line-height: 72px;
font-weight: 400;
margin-bottom: 20px;
padding: 0px 2%;
}
.the-work p:first-of-type {
.the-work p.first-of-type {
color: #fff;
font-size: 20px;
line-height: 24px;
}
.tiles {
display: grid;
grid-template-columns: auto auto auto;
-moz-column-width: 33%;
column-width: 33%;
-moz-column-gap: 0px;
column-gap: 0px;
grid-auto-flow: dense;
grid-template-rows: masonry;
}
.tile {
display: inline-grid;
margin: 0px;
cursor: pointer;
font-size: 40px;
text-align: center;
background-color: #eee;
vertical-align: top;
height: 220px;
grid-column-end: span 1;
grid-row-end: span 1;
}
.tile:hover {
background-color: #f5f5cd;
}
.tile.expand {
background-color: #ccc;
grid-column-end: span 2;
grid-row-end: span 2;
height: 440px;
}
.tile.expand:hover {
background-color: #999;
}
.last-expand .tile:nth-of-type(7) {
grid-column-end: 4;
}
.last-expand .tile:nth-of-type(8) {
grid-row-end: 4;
grid-column-end: 4;
padding: 0px 20%;
}
.wp-block-getwid-tabs__nav-link {
......@@ -15959,4 +15915,76 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
text-align: center;
}
.tiles {
display: grid;
grid-template-columns: auto auto auto;
-moz-column-width: 33%;
column-width: 33%;
-moz-column-gap: 0px;
column-gap: 0px;
grid-auto-flow: dense;
grid-template-rows: masonry;
margin-top: 40px;
max-width: 100vw;
margin: auto;
transition: 0.5s;
background: #333;
}
.tile {
display: inline-grid;
margin: 0px;
cursor: pointer;
text-align: center;
background: #333;
vertical-align: top;
grid-column-end: span 1;
grid-row-end: span 1;
}
.tile .tile_image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 275px;
width: 100%;
}
.tile .hover_content {
opacity: 0;
}
.tile .tile_content {
display: none;
}
.tile:hover .hover_content {
opacity: 1;
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
}
.tile.expand {
grid-column-end: span 2;
grid-row-end: span 2;
}
.tile.expand .hover_content {
display: none;
}
.tile.expand .tile_content {
margin-top: -16px;
display: block;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
.tile.expand .tile_image {
height: 550px;
}
.tile.expand:hover .hover_content {
display: none;
}
.tile.expand:hover .tile_content {
display: block;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
/*# sourceMappingURL=child-theme.css.map */
\ No newline at end of file
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -7,7 +7,7 @@
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
include 'inc/blocks.php';
/**
......
<?php
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
add_action('acf/init', 'my_acf_init_block_types');
function my_acf_init_block_types() {
// Check function exists.
if( function_exists('acf_register_block_type') ) {
acf_register_block_type( array(
'title' => __( 'Work', 'client_textdomain' ),
'name' => 'carousel',
'render_template' => 'blocks/work/work.php',
'mode' => 'edit',
'supports' => [
'align' => false,
'anchor' => true,
'customClassName' => true
]
));
}
}
\ No newline at end of file
......@@ -14643,6 +14643,9 @@
};
_getGSAP() && gsap.registerPlugin(ScrollTrigger);
//const grid = document.querySelector(".tiles");
//wrapGrid(grid);
//const scroll = new LocomotiveScroll();
document.addEventListener("DOMContentLoaded", function () {
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -1199,6 +1199,38 @@
"fastq": "^1.6.0"
}
},
"@popmotion/easing": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@popmotion/easing/-/easing-1.0.2.tgz",
"integrity": "sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw=="
},
"@popmotion/popcorn": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/@popmotion/popcorn/-/popcorn-0.4.4.tgz",
"integrity": "sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg==",
"requires": {
"@popmotion/easing": "^1.0.1",
"framesync": "^4.0.1",
"hey-listen": "^1.0.8",
"style-value-types": "^3.1.7",
"tslib": "^1.10.0"
},
"dependencies": {
"framesync": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/framesync/-/framesync-4.1.0.tgz",
"integrity": "sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==",
"requires": {
"hey-listen": "^1.0.5"
}
},
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"@popperjs/core": {
"version": "2.11.6",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
......@@ -1307,6 +1339,19 @@
"integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
"dev": true
},
"@types/lodash": {
"version": "4.14.191",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
},
"@types/lodash.throttle": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.7.tgz",
"integrity": "sha512-znwGDpjCHQ4FpLLx19w4OXDqq8+OvREa05H89obtSyXyOFKL3dDjCslsmfBz0T2FU8dmf5Wx1QvogbINiGIu9g==",
"requires": {
"@types/lodash": "*"
}
},
"@types/node": {
"version": "18.11.11",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.11.tgz",
......@@ -1341,6 +1386,18 @@
"integrity": "sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==",
"dev": true
},
"animate-css-grid": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/animate-css-grid/-/animate-css-grid-1.5.1.tgz",
"integrity": "sha512-Bw48dm3kjJshSO8TY6PtWJ7gvXluh2ad97zPiNu1jTRyRywAzsbKlwG45byL9cJ/x9N126rkU5U9y1jzHK8ttQ==",
"requires": {
"@popmotion/easing": "^1.0.2",
"@types/lodash.throttle": "^4.1.7",
"framesync": "^6.1.2",
"lodash.throttle": "^4.1.1",
"popmotion": "^8.7.6"
}
},
"ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
......@@ -2147,6 +2204,14 @@
"integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
"dev": true
},
"framesync": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
"integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
"requires": {
"tslib": "2.4.0"
}
},
"fresh": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
......@@ -2362,6 +2427,11 @@
"has-symbols": "^1.0.2"
}
},
"hey-listen": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
"integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
},
"hosted-git-info": {
"version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
......@@ -2798,6 +2868,11 @@
"integrity": "sha512-7FGG40uhC8Mm633uKW1r58aElFlBlxCrg9JfSi3P6aYiWmfiWF0PgMd86ZUsxE5GwWPdHoS2+48bwTh2VPkIQA==",
"dev": true
},
"lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
},
"magic-string": {
"version": "0.26.7",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
......@@ -3199,6 +3274,35 @@
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
"dev": true
},
"popmotion": {
"version": "8.7.6",
"resolved": "https://registry.npmjs.org/popmotion/-/popmotion-8.7.6.tgz",
"integrity": "sha512-gzU0mRAik8FIEOP4Nk5yqYptJIvHLoq/IRU+rANmKjDZ7tynAivYQ9cIJAxVaoS9h0zfXvN0cFBAg93ncmHHkA==",
"requires": {
"@popmotion/easing": "^1.0.1",
"@popmotion/popcorn": "^0.4.4",
"framesync": "^4.0.0",
"hey-listen": "^1.0.5",
"style-value-types": "^3.1.7",
"stylefire": "^7.0.1",
"tslib": "^1.10.0"
},
"dependencies": {
"framesync": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/framesync/-/framesync-4.1.0.tgz",
"integrity": "sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==",
"requires": {
"hey-listen": "^1.0.5"
}
},
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"portscanner": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",
......@@ -4027,6 +4131,49 @@
"integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
"dev": true
},
"style-value-types": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-3.2.0.tgz",
"integrity": "sha512-ih0mGsrYYmVvdDi++/66O6BaQPRPRMQHoZevNNdMMcPlP/cH28Rnfsqf1UEba/Bwfuw9T8BmIMwbGdzsPwQKrQ==",
"requires": {
"hey-listen": "^1.0.8",
"tslib": "^1.10.0"
},
"dependencies": {
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"stylefire": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/stylefire/-/stylefire-7.0.3.tgz",
"integrity": "sha512-Q0l7NSeFz/OkX+o6/7Zg3VZxSAZeQzQpYomWmIpOehFM/rJNMSLVX5fgg6Q48ut2ETNKwdhm97mPNU643EBCoQ==",
"requires": {
"@popmotion/popcorn": "^0.4.4",
"framesync": "^4.0.0",
"hey-listen": "^1.0.8",
"style-value-types": "^3.1.7",
"tslib": "^1.10.0"
},
"dependencies": {
"framesync": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/framesync/-/framesync-4.1.0.tgz",
"integrity": "sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==",
"requires": {
"hey-listen": "^1.0.5"
}
},
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
......@@ -4161,6 +4308,11 @@
"nopt": "~1.0.10"
}
},
"tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"typescript": {
"version": "4.9.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.3.tgz",
......
......@@ -42,6 +42,7 @@
},
"homepage": "https://understrap.com",
"dependencies": {
"animate-css-grid": "^1.5.1",
"gsap": "^3.11.4",
"locomotive-scroll": "^4.1.4"
},
......
......@@ -4,6 +4,10 @@ import ScrollTrigger from "gsap/ScrollTrigger";
import ScrollToPlugin from "gsap/ScrollToPlugin";
import "_count-up";
import { wrapGrid } from 'animate-css-grid'
//const grid = document.querySelector(".tiles");
//wrapGrid(grid);
//const scroll = new LocomotiveScroll();
......
......@@ -15,4 +15,5 @@
@import "theme/menu";
@import "theme/body";
@import "theme/footer";
@import "theme/tabs";
\ No newline at end of file
@import "theme/tabs";
@import "theme/tiles";
\ No newline at end of file
......
......@@ -282,7 +282,7 @@
.the-work{
background-color: #333333;
margin: 0px -25%;
//padding: 40px 25%;
padding: 40px 0%;
h2{
text-transform: uppercase;
color: #fff;
......@@ -290,57 +290,12 @@
line-height: 72px;
font-weight: 400;
margin-bottom: 20px;
padding: 0px 2%;
}
p:first-of-type{
p.first-of-type{
color: #fff;
font-size: 20px;
line-height: 24px;
}
}
.tiles{
display: grid;
grid-template-columns: auto auto auto;
column-width: 33%;
column-gap: 0px;
grid-auto-flow: dense;
grid-template-rows: masonry;
}
.tile {
display: inline-grid;
margin: 0px;
cursor: pointer;
font-size: 40px;
text-align: center;
background-color: #eee;
vertical-align: top;
height: 220px;
grid-column-end: span 1;
grid-row-end: span 1;
}
.tile:hover {
background-color: #f5f5cd;
}
.tile.expand {
background-color: #ccc;
grid-column-end: span 2;
grid-row-end: span 2;
height: 440px;
}
.tile.expand:hover {
background-color: #999;
}
.last-expand{
.tile:nth-of-type(7){
//grid-column-end: 3;
// grid-row-end: 3;
grid-column-end:4;
}
.tile:nth-of-type(8){
//grid-column-end: 3;
grid-row-end: 4;
grid-column-end:4;
padding: 0px 20%;
}
}
......
.tiles{
display: grid;
grid-template-columns: auto auto auto;
column-width: 33%;
column-gap: 0px;
grid-auto-flow: dense;
grid-template-rows: masonry;
margin-top: 40px;
max-width: 100vw;
margin: auto;
transition: .5s;
background: #333;
}
.tile {
display: inline-grid;
margin: 0px;
cursor: pointer;
text-align: center;
background: #333;
vertical-align: top;
grid-column-end: span 1;
grid-row-end: span 1;
.tile_image{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 275px;
width: 100%;
}
.hover_content{
opacity: 0;
}
.tile_content{
display: none;
}
}
.tile:hover {
.hover_content{
opacity: 1;
background-color: rgba(0,0,0,0.6);
height: 100%;
}
}
.tile.expand {
grid-column-end: span 2;
grid-row-end: span 2;
.hover_content{
display: none;
}
.tile_content{
margin-top: -16px;
display: block;
height: 100%;
background-color: rgba(0,0,0,0.7);
}
.tile_image{
height: 550px;
}
}
.tile.expand:hover {
.hover_content{
display: none;
}
.tile_content{
display: block;
height: 100%;
background-color: rgba(0,0,0,0.7);
}
}
// .last-expand{
// .tile:nth-of-type(4){
// grid-column-end:2;
// }
// .tile:nth-of-type(5){
// grid-row-end: 4;
// grid-column-end:2;
// }
// }