From de04cf0ae487be3e7a2a30028c023e4d31737170 Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Thu, 14 Aug 2014 16:57:44 -0400
Subject: [PATCH] Photo gallery style update

---
 .../Photos/templates/photoGalleryWrapper.html | 199 +-----------
 Toolkit/Photos/templates/photos.html          |   2 +
 .../Videos/templates/webPageDecorator.html    |   2 +
 styles.css                                    | 286 ++++++++++++++++--
 4 files changed, 273 insertions(+), 216 deletions(-)

diff --git a/Toolkit/Photos/templates/photoGalleryWrapper.html b/Toolkit/Photos/templates/photoGalleryWrapper.html
index e48bb57..5f860cf 100644
--- a/Toolkit/Photos/templates/photoGalleryWrapper.html
+++ b/Toolkit/Photos/templates/photoGalleryWrapper.html
@@ -1,198 +1,3 @@
-<style>
-#media-photo-gallery {
-    font-size:12px;
-}
-#gallery {
-    clear:both;
-}
-.gallery {
-    text-align: center;
-    list-style: none outside none;
-    padding: 10px 0 0 0;
-}
-.gallery:after {
-    clear: both;
-    content: ".";
-    display: block;
-    height: 0;
-    visibility: hidden;
-}
-.gallery li {
-    background: none repeat scroll 0 0 #F5F3E5;
-    float: left;
-    margin: 0 2% 26px 0;
-    overflow: hidden;
-    position: relative;
-    width: 23%
-}
-/*.gallery li:nth-child(4n+1) {
-    clear: both;
-    margin: 0 16px 26px 0;
-}
-.gallery li:nth-child(4n+2) {
-    margin: 0 16px 26px 0;
-}
-.gallery li:nth-child(4n+3) {
-    margin: 0 16px 26px 0;
-}
-.gallery li:nth-child(4n+4) {
-    margin: 0 0 26px 0;
-}*/
-.gallery li img {
-    width: 100%;
-    border: 1px solid #2797AB;
-    display: block;
-    height: auto;/*width: 143px;*/
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-.gallery li:hover img {
-    border: 1px solid #B8C728;
-}
-.gallery .ui-content {
-    overflow: hidden;
-}
-/*#inside #main {
-    width: 720px;
-}*/
-#staticBanners {
-    /*display:none;*/
-}
-.media-gallery-download {
-    font-size: 10px;
-    min-height: 22px;
-}
-#media-photo-gallery div {
-    clear:none;
-    font-size: 1em;
-    height: auto;
-    margin: 0;
-    padding: 0;
-}
-#media-photo-gallery div p {
-    display: block;
-    color: black;
-    padding: 5px;
-    text-shadow: none;
-    font-weight: normal;
-}
-#media-photo-gallery div a {
-}
-#filter_wrapper {
-    overflow: hidden;
-}
-#cat_filter_wrapper {
-    float: left;
-    height: 56px;
-}
-#photoCategoryLabel {
-    float: left;
-}
-#photoCategoryId {
-    float: left;
-    clear: left;
-    width: 180px;
-    height: 24px;
-    border: 1px solid #ABADB3;
-    box-sizing: border-box;
-    padding:.2em;/.3em;
-}
-#photoCategoryId option {
-    padding: 3px;
-}
-#media-login #username {
-    float: left;
-    width: 100px;
-    height: 10px;
-    padding: 5px;
-    margin: 0 5px 0 0;
-    border: 1px solid #ABADB3;
-}
-#media-login #password {
-    float: left;
-    width: 100px;
-    height: 10px;
-    padding: 5px;
-    margin: 0 5px 0 0;
-    border: 1px solid #ABADB3;
-}
-#media-login #submit {
-    display: block;
-    float: left;
-    width: 24px;
-    height: 22px;
-    cursor: pointer;
-    background: url(<?php echo $t->base_url;?>assets/play.gif) 50% 50% no-repeat;
-    border: 1px solid #ABADB3;
-    -bracket-:hack(;
-        height: 22px;
-    );
-}
-.photoHead {
-    display: block;
-    text-align: center;
-    min-height: 38px;
-    margin: 0 !important;
-    padding: 5px;
-    background: none;
-}
-.captionWrapper {
-    display: block;
-    width: 100%;
-    overflow: hidden;
-}
-.captionTitleWrapper {
-    display: block;
-    width: 50%;
-    float: left;
-    font-size: 18px;
-    font-size: 1.8rem;
-    font-weight: bold;
-    color: #FFF;
-    text-align: left;
-    padding: 10px 20px;
-    margin: 0;
-}
-.captionDescWrapper {
-    display: block;
-    width: 50%;
-    float: left;
-    clear: left;
-    font-size: 14px;
-    font-size: 1.4rem;
-    color: #FFF;
-    text-align: left;
-    padding: 0 20px 10px 20px;
-    margin: 0;
-}
-.download_wrapper {
-    display: block;
-    position: absolute;
-    z-index: 99;
-    top: 10px;
-    right: 20px;
-    width: 30%;
-    font-size: 14px;
-    font-size: 1.4rem;
-    color: #FFF;
-    text-align: left;
-    padding: 6px 0 10px 20px;
-    margin: 0;
-    text-align: right;
-}
-.download_wrapper a {
-    color: #CCC;
-}
-.download_wrapper a:hover {
-    color: #FFF;
-}
-.ps-caption-content {
-    width: 100%;
-    overflow: hidden;
-    position: relative;
-}
-</style>
 <flexy:toJavascript flexy:prefix="" base_url="base_url" ></flexy:toJavascript>
 <flexy:toJavascript flexy:prefix="" pageId="pageId" ></flexy:toJavascript>
 <div id="media-photo-gallery">
@@ -281,7 +86,7 @@
         {end:}
         </div>
     </div>
-    <div class="gallery_wrapper">
+    <div class="gallery_wrapper container">
         <div flexy:if="expired">
             <p>We’re sorry, but your access to this page has expired. If you
             require additional time to select photos, please fill out and
@@ -295,7 +100,7 @@
             <p>The Traverse City Tourism Marketing Team</p>
         </div>
         <h2 flexy:if="photoCategoryName">{photoCategoryName}</h2>
-        <ul id="Gallery" class="gallery">
+        <ul id="Gallery" class="gallery row small-block-grid-2 medium-block-grid-3 large-block-grid-4">
             {if:photos}
             <flexy:include src="photos.html">
             {end:}
diff --git a/Toolkit/Photos/templates/photos.html b/Toolkit/Photos/templates/photos.html
index 90e3171..6f7b451 100755
--- a/Toolkit/Photos/templates/photos.html
+++ b/Toolkit/Photos/templates/photos.html
@@ -3,6 +3,7 @@ if ($t->photos) {
     foreach ($t->photos as $photo) {
         ?>
         <li>
+            <div class="imgBorderMe">
             <a data-download="<?php if($photo->getDownload()){echo '1';}else{echo '0';}?>" data-photoid="<?php echo $photo->getId()?>" data-download="<?php echo $photo->getDownload()?>" rel="<?php echo htmlspecialchars($photo->getDescription())?>" title="<?php echo htmlspecialchars($photo->getTitle())?>" class="photoimg" href="<?php echo $t->photoUrlLarge.$photo->getImage()?>">
                 <img title="<?php echo htmlspecialchars($photo->getTitle())?>" alt="<?php echo htmlspecialchars($photo->getDescription())?>" src="<?php echo $t->photoUrlSmall.$photo->getImage()?>">
                 <?php if ($photo->getTitle()) {?>
@@ -25,6 +26,7 @@ if ($t->photos) {
                     <a href="<?php echo $t->photoDownWeb.$photo->getId()?>/">Web</a>&nbsp;-&nbsp;<a href="<?php echo $t->photoDownPrint.$photo->getId()?>/">Print</a>
                 </span>
             <?php } ?>
+            </div>
         </li>
     <?php }
 }
diff --git a/Toolkit/Videos/templates/webPageDecorator.html b/Toolkit/Videos/templates/webPageDecorator.html
index 6b05fbb..9f8b142 100644
--- a/Toolkit/Videos/templates/webPageDecorator.html
+++ b/Toolkit/Videos/templates/webPageDecorator.html
@@ -1,10 +1,12 @@
 <ul id="videoGallery" class="small-block-grid-1 medium-block-grid-3 large-block-grid-4">
     {foreach:videos,v} 
         <li class="vThumb">
+            <div class="imgBorderMe">
                 <a href="http://www.youtube.com/embed/{v[code]}?rel=0&hd=1" class="various fancybox.iframe vidimg">
                     <img src="http://img.youtube.com/vi/{v[code]}/default.jpg">
                 <span class="vTitle">{v[title]:h}<span class="play"></span></span>
                 </a>
+            </div>
         </li>
     {end:}
 </ul>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 5e01748..1d0fc99 100644
--- a/styles.css
+++ b/styles.css
@@ -799,30 +799,14 @@ ul#videoGallery li {
 /*	margin: 0 1.5% 24px 1.5%;*/
 /*        padding: 0 1.0% 20px 1.0%;*/
 	padding: 0;
-	border: 1px solid #DDDFDD;
 	background: #FDFDFF;
-	border-radius: 3px;
 	-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
 	-moz-box-shadow:    1px 1px 3px rgba(0, 0, 0, 0.05);
 	box-shadow:         1px 1px 3px rgba(0, 0, 0, 0.05);
 }
-/*ul#videoGallery li:nth-child(4n-3) {
-	clear: left;
-	width: 22.75%;
-	margin: 0 3% 24px 0;
+.vthumb {
+	padding: 5px;
 }
-ul#videoGallery li:nth-child(4n-2) {
-	width: 22.75%;
-	margin: 0 3% 24px 0;
-}
-ul#videoGallery li:nth-child(4n-1) {
-	width: 22.75%;
-	margin: 0 3% 24px 0;
-}
-ul#videoGallery li:nth-child(4n) {
-	width: 22.75%;
-	margin: 0 0 24px 0;
-}*/
 ul#videoGallery li a {
 	position: relative;
 	z-index: 10;
@@ -848,6 +832,11 @@ ul#videoGallery li a:hover span.vTitle {
 	color: #3FAC46;
 }
 
+#home_video_wrapper a {
+        margin: 5px 0 5px 0;
+        font-size: 14px;
+}
+
 .play {
 	display: block;
 	position: absolute;
@@ -1016,6 +1005,7 @@ footer .copyright .separator {
 .xls    { background-image: url(images/file-ext/xls.gif);}
 .zip    { background-image: url(images/file-ext/zip.png);}
 .rar    { background-image: url(images/file-ext/rar.gif);}
+
 /*Weather*/
 #weather {
     color: black;
@@ -1069,4 +1059,262 @@ footer .copyright .separator {
 }
 #main ol ol ol ol {
     list-style: lower-alpha;
-}
\ No newline at end of file
+}
+
+/* Photo gallery */
+
+#media-photo-gallery {
+    width:100% !important;
+}
+
+.gallery {
+    clear: both;
+    list-style: none outside none;
+    margin: 20px 0 10px;
+    padding: 0;
+    width: 100%;
+}
+
+#photo_wrapper, #photo_cats_wrapper {
+    clear: left;
+    margin-top: 0;
+}
+#photo_wrapper h2, #photo_cats_wrapper h2 {
+    display: block;
+    margin: 0;
+    overflow: hidden;
+    padding: 5px;
+    width: 100%;
+}
+#photo_wrapper p, #photo_cats_wrapper p {
+    color: #333;
+    display: block;
+    margin: 0;
+    overflow: hidden;
+    padding: 5px;
+    width: 100%;
+}
+.gallery {
+    clear: both;
+    list-style: none outside none;
+    margin: 20px 0 10px;
+    padding: 0;
+    width: 100%;
+}
+.gallery:after {
+    clear: both;
+    content: ".";
+    display: block;
+    height: 0;
+    visibility: hidden;
+}
+.gallery li {
+    background: none repeat scroll 0 0 #fdfdff;
+    padding: 1%;
+    display: block;
+    float: left;
+}
+
+.gallery li a {
+    display: block;
+    overflow: hidden;
+    padding: 10px 10px 5px 10px;
+    width: 100%;
+}
+.gallery li a img {
+    display: block;
+    width: 100%;
+}
+.gallery li a span.phototitle {
+    color: #a9aba9;
+    display: block;
+    font-size: 12px;
+    padding: 5px 0 0;
+    width: 100%;
+}
+.gallery li a:hover span.phototitle {
+    color: #3fac46;
+}
+.ps-caption h1, .ps-caption h2, .ps-caption h3 {
+    color: #fff;
+}
+#photo_wrapper h3 {
+    padding-bottom: 0;
+}
+
+.photoimg img{
+    margin-bottom: 5px !important;
+}
+
+.imgBorderMe {
+    padding-bottom: 5px;
+    border: 1px solid #dddfdd;
+    border-radius: 3px;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+#media-photo-gallery {
+    font-size:12px;
+}
+#gallery {
+    clear:both;
+}
+.gallery {
+    text-align: center;
+    list-style: none outside none;
+    padding: 10px 0 0 0;
+}
+.gallery:after {
+    clear: both;
+    content: ".";
+    display: block;
+    height: 0;
+    visibility: hidden;
+}
+.gallery li img {
+    width: 100%;
+    border: 1px solid #2797AB;
+    display: block;
+    height: auto;/*width: 143px;*/
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.gallery li:hover img {
+    border: 1px solid #B8C728;
+}
+.gallery .ui-content {
+    overflow: hidden;
+}
+/*#inside #main {
+    width: 720px;
+}*/
+#staticBanners {
+    /*display:none;*/
+}
+.media-gallery-download {
+    font-size: 10px;
+    min-height: 22px;
+    padding-bottom: 5px !important;
+}
+.media-gallery-download a {
+    padding: 2px !important;
+    display: inline !important;
+}
+#media-photo-gallery div {
+    clear:none;
+    font-size: 1em;
+    height: auto;
+    margin: 0;
+}
+#media-photo-gallery div p {
+    display: block;
+    color: black;
+    padding: 5px;
+    text-shadow: none;
+    font-weight: normal;
+}
+#media-photo-gallery div a {
+}
+#filter_wrapper {
+    overflow: hidden;
+}
+#cat_filter_wrapper {
+    float: left;
+    height: 56px;
+}
+#photoCategoryLabel {
+    float: left;
+}
+#photoCategoryId {
+    float: left;
+    clear: left;
+    width: 180px;
+    height: 24px;
+    border: 1px solid #ABADB3;
+    box-sizing: border-box;
+    padding:.2em;/.3em;
+}
+#photoCategoryId option {
+    padding: 3px;
+}
+#media-login #username {
+    float: left;
+    width: 100px;
+    height: 10px;
+    padding: 5px;
+    margin: 0 5px 0 0;
+    border: 1px solid #ABADB3;
+}
+#media-login #password {
+    float: left;
+    width: 100px;
+    height: 10px;
+    padding: 5px;
+    margin: 0 5px 0 0;
+    border: 1px solid #ABADB3;
+}
+
+.photoHead {
+    display: block;
+    text-align: center;
+    min-height: 38px;
+    margin: 0 !important;
+    padding: 5px;
+    background: none;
+}
+.captionWrapper {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+}
+.captionTitleWrapper {
+    display: block;
+    width: 50%;
+    float: left;
+    font-size: 18px;
+    font-size: 1.8rem;
+    font-weight: bold;
+    color: #FFF;
+    text-align: left;
+    padding: 10px 20px;
+    margin: 0;
+}
+.captionDescWrapper {
+    display: block;
+    width: 50%;
+    float: left;
+    clear: left;
+    font-size: 14px;
+    font-size: 1.4rem;
+    color: #FFF;
+    text-align: left;
+    padding: 0 20px 10px 20px;
+    margin: 0;
+}
+.download_wrapper {
+    display: block;
+    position: absolute;
+    z-index: 99;
+    top: 10px;
+    right: 20px;
+    width: 30%;
+    font-size: 14px;
+    font-size: 1.4rem;
+    color: #FFF;
+    text-align: left;
+    padding: 6px 0 10px 20px;
+    margin: 0;
+    text-align: right;
+}
+.download_wrapper a {
+    color: #CCC;
+}
+.download_wrapper a:hover {
+    color: #FFF;
+}
+.ps-caption-content {
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+}
-- 
2.17.1