From 73ded4f8413e348f68c0da851da8fa942fbb5830 Mon Sep 17 00:00:00 2001 From: Emilee Chen Date: Thu, 7 Apr 2016 22:04:26 -0700 Subject: [PATCH 1/2] Workin on modal :hankey::hankey::hankey: --- css/compiled/lookbook.css | 14 ++++++++++++++ css/lookbook.scss | 16 ++++++++++++++++ html/lookbook.html | 10 ++++++++-- script/modal.js | 8 ++++++++ 4 files changed, 46 insertions(+), 2 deletions(-) create mode 100644 script/modal.js diff --git a/css/compiled/lookbook.css b/css/compiled/lookbook.css index 0abdd75..59ef64a 100644 --- a/css/compiled/lookbook.css +++ b/css/compiled/lookbook.css @@ -89,6 +89,20 @@ h1 { .cover { object-fit: cover; } +.lightbox-hidden { + width: 100%; + height: 100%; + position: absolute; + background-color: #333; + top: -100vh; + transition: 1s ease; + opacity: 0.8; + z-index: 1; } + +.lightbox { + transform: translate(0, 100vh); + transition: 1s ease; } + .nametag { min-width: 0; color: #fEfefd; diff --git a/css/lookbook.scss b/css/lookbook.scss index 9d51b74..c028b7c 100644 --- a/css/lookbook.scss +++ b/css/lookbook.scss @@ -53,6 +53,22 @@ h1 { object-fit: cover; } +.lightbox-hidden { + width: 100%; + height: 100%; + position: absolute; + background-color: $offblack; + top: -100vh; + transition: 1s ease; + opacity: 0.8; + z-index: 1; +} + +.lightbox { + transform: translate(0, 100vh); + transition: 1s ease; +} + .nametag { min-width: 0; color: $offwhite; diff --git a/html/lookbook.html b/html/lookbook.html index 8a8dbf8..400bd9a 100644 --- a/html/lookbook.html +++ b/html/lookbook.html @@ -1,15 +1,18 @@ + + + + +
- March 2016 / InnoDxRetreat -
@@ -20,14 +23,17 @@
+ +
+
diff --git a/script/modal.js b/script/modal.js new file mode 100644 index 0000000..a594ab8 --- /dev/null +++ b/script/modal.js @@ -0,0 +1,8 @@ +$(document).ready(function() { + $(".block").click(function() { + $(".lightbox-hidden").addClass("lightbox"); + }); + $("#modal").click(function() { + $("#modal").removeClass("lightbox"); + }); +}); \ No newline at end of file From e1e8e54c65fec086141a1967743928f432f68e28 Mon Sep 17 00:00:00 2001 From: Emilee Chen Date: Thu, 14 Apr 2016 21:41:25 -0700 Subject: [PATCH 2/2] Add modal for lookbook --- css/compiled/lookbook.css | 22 +++++++++++++++++----- css/lookbook.scss | 29 ++++++++++++++++++++++++----- html/lookbook.html | 28 ++++++++++++++++------------ script/modal.js | 22 ++++++++++++++++++++-- 4 files changed, 77 insertions(+), 24 deletions(-) diff --git a/css/compiled/lookbook.css b/css/compiled/lookbook.css index 59ef64a..01e66e9 100644 --- a/css/compiled/lookbook.css +++ b/css/compiled/lookbook.css @@ -90,18 +90,30 @@ h1 { object-fit: cover; } .lightbox-hidden { + display: flex; width: 100%; height: 100%; - position: absolute; - background-color: #333; + position: fixed; + background-color: rgba(0, 0, 0, 0.8); + /*background-color: $offblack;*/ top: -100vh; - transition: 1s ease; - opacity: 0.8; + transition: .5s ease; + /*opacity: 0.8;*/ z-index: 1; } .lightbox { transform: translate(0, 100vh); - transition: 1s ease; } + transition: .5s ease; } + +.modal-contain { + display: flex; + margin: auto auto; + width: 90vw; + height: 90vh; } + +.modal-img { + width: 100%; + object-fit: contain; } .nametag { min-width: 0; diff --git a/css/lookbook.scss b/css/lookbook.scss index c028b7c..dd5934d 100644 --- a/css/lookbook.scss +++ b/css/lookbook.scss @@ -53,22 +53,39 @@ h1 { object-fit: cover; } + .lightbox-hidden { + display: flex; width: 100%; height: 100%; - position: absolute; - background-color: $offblack; + position: fixed; + background-color: rgba(0, 0, 0, 0.8); + /*background-color: $offblack;*/ top: -100vh; - transition: 1s ease; - opacity: 0.8; + transition: .5s ease; + /*opacity: 0.8;*/ z-index: 1; } .lightbox { transform: translate(0, 100vh); - transition: 1s ease; + transition: .5s ease; } +.modal-contain { + display: flex; + margin: auto auto; + width: 90vw; + height: 90vh; +} + +.modal-img{ + width: 100%; + object-fit: contain; +} + + + .nametag { min-width: 0; color: $offwhite; @@ -103,3 +120,5 @@ h1 { } + + diff --git a/html/lookbook.html b/html/lookbook.html index 400bd9a..1d471d5 100644 --- a/html/lookbook.html +++ b/html/lookbook.html @@ -7,7 +7,11 @@ - +
@@ -15,26 +19,26 @@ March 2016 / InnoDxRetreat
- +
designed by
 somebody's name
- - - - - - + + + + + +
- - - - + + + +
from
 diff --git a/script/modal.js b/script/modal.js index a594ab8..4edba7e 100644 --- a/script/modal.js +++ b/script/modal.js @@ -1,8 +1,26 @@ $(document).ready(function() { - $(".block").click(function() { + $(".img-block").click(function() { $(".lightbox-hidden").addClass("lightbox"); + var src = $(this).attr("src"); + $(".modal-img").attr("src", src); + // scrollLock(); }); $("#modal").click(function() { $("#modal").removeClass("lightbox"); + // scrollLock(); }); -}); \ No newline at end of file +}); + + +// var locked = false; + +// function scrollLock() { +// if (locked) { +// $('body').css( 'overflow', 'visible' ); +// locked = false; +// } +// else { +// $('body').css( 'overflow', 'hidden' ); +// locked = true; +// } +// };