Foundation on video gallery

Had to get rid of margin between the videos, or it forces
foundation-affected videos off to the next row. Fully responsive.

diff --git a/Toolkit/Videos/templates/webDecorator.html b/Toolkit/Videos/templates/webDecorator.html
index b0414f5..45e1b94 100644 (file)
--- a/Toolkit/Videos/templates/webDecorator.html
+++ b/Toolkit/Videos/templates/webDecorator.html
@@ -3,17 +3,4 @@
             <img src="assets/video_image.png">
             <span class="vidoverlay"></span> 
        </a>
-       <a class="video_link_txt" href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1">{title}</a>
-       
-               
-    <!-- <p>{descr}</p> -->
-       <!-- <a id="video_link_main" href="{videoUrl}">See All Our Videos</a> -->
-       
-       <!-- 
-       <a href="http://www.youtube.com/embed/{vCode}?rel=0&hd=1" class="various fancybox.iframe" id="vidimg">
-               <img src="http://img.youtube.com/vi/{vCode}/0.jpg">
-               <span id="video_link_txt">Watch {title}</span>
-               <span id="vidoverlay"></span>
-       </a>
-       <a id="video_link_main" href="{videoUrl}">See All Our Videos</a> -->
 </div>

diff --git a/Toolkit/Videos/templates/webPageDecorator.html b/Toolkit/Videos/templates/webPageDecorator.html
index 257e1d9..6b05fbb 100644 (file)
--- a/Toolkit/Videos/templates/webPageDecorator.html
+++ b/Toolkit/Videos/templates/webPageDecorator.html
@@ -1,13 +1,10 @@
-<ul id="videoGallery">
-    {foreach:videos,v}
-<!--        {if:v[firstInRow]}<div class="vRow">{end:}-->
-            <li class="vThumb">
+<ul id="videoGallery" class="small-block-grid-1 medium-block-grid-3 large-block-grid-4">
+    {foreach:videos,v} 
+        <li class="vThumb">
                 <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>
-            </li>
-<!--        {if:v[lastInRow]}</div> /.galleryRow  {end:}-->
+        </li>
     {end:}
-</ul>
+</ul>
\ No newline at end of file

diff --git a/styles.css b/styles.css
index e2a59fd..0201275 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -775,8 +775,10 @@ ul#videoGallery {
 ul#videoGallery li {
        display: block;
        float: left;
-       width: 22%;
-       margin: 0 1.5% 24px 1.5%;
+/*     width: 22%;*/
+        margin-bottom: 20px;
+/*     margin: 0 1.5% 24px 1.5%;*/
+/*        padding: 0 1.0% 20px 1.0%;*/
        padding: 0;
        border: 1px solid #DDDFDD;
        background: #FDFDFF;
@@ -785,7 +787,7 @@ ul#videoGallery li {
        -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) {
+/*ul#videoGallery li:nth-child(4n-3) {
        clear: left;
        width: 22.75%;
        margin: 0 3% 24px 0;
@@ -801,7 +803,7 @@ ul#videoGallery li:nth-child(4n-1) {
 ul#videoGallery li:nth-child(4n) {
        width: 22.75%;
        margin: 0 0 24px 0;
-}
+}*/
 ul#videoGallery li a {
        position: relative;
        z-index: 10;
@@ -905,6 +907,9 @@ footer > .columns {
   .play {
       background: none;
   }
+  .vTitle {
+      padding-right: 0 !important;
+  }
 }
 footer .adventure-guide p {
   font-size: 18px;