From 2144bfc826036e9339e60ab4b585a429381957f3 Mon Sep 17 00:00:00 2001
From: Anthony Talarico <talarico@gaslightmedia.com>
Date: Fri, 12 Feb 2016 13:09:21 -0500
Subject: [PATCH] fixing blocks removing background images

---
 css/app.css            |  74 ++++++++++++-----------------
 js/app.js              |   6 ++-
 js/custom/pageSetup.js |   6 ++-
 parts/glm-blocks.php   |  99 +++++++++++++++++++++++++++++----------
 scss/_main.scss        | 103 ++++++++++++++++++++++-------------------
 5 files changed, 170 insertions(+), 118 deletions(-)

diff --git a/css/app.css b/css/app.css
index 7070288..3128e21 100644
--- a/css/app.css
+++ b/css/app.css
@@ -6657,7 +6657,6 @@ header {
 #block-wrap {
   position: relative;
   z-index: 1;
-  text-align: center;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.35);
   -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.35);
   -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.35);
@@ -6670,9 +6669,10 @@ header {
     -moz-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.55);
     -webkit-box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.55); }
     #block-wrap .blocks .blocks:hover {
-      max-height: 590px; }
+      border-bottom: 5px solid #57b649;
+      margin-bottom: -5px; }
       #block-wrap .blocks .blocks:hover h3 {
-        display: flex;
+        display: block;
         position: relative;
         z-index: 1; }
         @media only screen and (max-width: 40em) {
@@ -6680,7 +6680,7 @@ header {
             font-size: 1.125rem; } }
       #block-wrap .blocks .blocks:hover p {
         color: #FFFFFF;
-        display: flex;
+        display: inline;
         position: relative;
         z-index: 1; }
         @media only screen and (max-width: 40em) {
@@ -6690,7 +6690,7 @@ header {
       #block-wrap .blocks .blocks:hover a {
         font-family: "Times New Roman";
         font-style: italic;
-        display: flex;
+        display: block;
         position: relative;
         z-index: 1;
         font-size: 1.5rem; }
@@ -6708,67 +6708,52 @@ header {
       top: 0;
       padding: 0 15px; }
     #block-wrap .blocks .blocks#block-1 {
-      height: 590px;
-      width: 590px;
-      padding: 0;
-      margin-left: 10px; }
+      max-width: 590px;
+      padding: 0; }
       @media only screen and (min-width: 1025px) and (max-width: 1200px) {
         #block-wrap .blocks .blocks#block-1 {
           width: 49%;
           margin-left: 0.5%; } }
       @media only screen and (min-width:40.063em) and (max-width:64em) {
         #block-wrap .blocks .blocks#block-1 {
-          width: 95%;
-          max-width: 590px;
           margin: 0 auto 21px; } }
       @media only screen and (max-width: 40em) {
         #block-wrap .blocks .blocks#block-1 {
-          width: 95%;
-          height: 100%;
-          min-height: 304px;
-          max-height: 590px;
           margin: 0 auto 21px; } }
-    #block-wrap .blocks .blocks#block-2 {
-      margin-left: 10px; }
     #block-wrap .blocks .blocks#block-3 {
       margin-left: 20px; }
+      @media only screen and (min-width: 1025px) and (max-width: 1200px) {
+        #block-wrap .blocks .blocks#block-3 {
+          margin-left: 3%; } }
+      @media only screen and (min-width: 500px) and (max-width: 640px) {
+        #block-wrap .blocks .blocks#block-3 {
+          margin: 0 0 21px 2% !important; } }
     #block-wrap .blocks .blocks#block-2, #block-wrap .blocks .blocks#block-3 {
-      height: 285px;
       max-width: 285px;
       margin-bottom: 21px; }
+      #block-wrap .blocks .blocks#block-2:hover, #block-wrap .blocks .blocks#block-3:hover {
+        margin-bottom: 16px; }
       @media only screen and (min-width: 1025px) and (max-width: 1200px) {
         #block-wrap .blocks .blocks#block-2, #block-wrap .blocks .blocks#block-3 {
-          width: 48%;
-          margin-left: 3%; } }
+          width: 48%; } }
       @media only screen and (min-width:40.063em) and (max-width:64em) {
         #block-wrap .blocks .blocks#block-2, #block-wrap .blocks .blocks#block-3 {
-          margin: 0 0 21px 0.5% !important;
           display: inline-block;
-          width: 46%; } }
-      @media only screen and (max-width: 40em) {
+          width: 48%; } }
+      @media only screen and (min-width: 500px) and (max-width: 640px) {
         #block-wrap .blocks .blocks#block-2, #block-wrap .blocks .blocks#block-3 {
-          margin: 0 0 21px 0.5% !important;
-          display: inline-block;
-          width: 46%; } }
-    #block-wrap .blocks .blocks#block-4 {
-      height: 285px;
-      width: 590px;
-      margin-left: 10px; }
-      @media only screen and (min-width: 1025px) and (max-width: 1200px) {
-        #block-wrap .blocks .blocks#block-4 {
-          width: 78%;
-          margin: 0 auto 21px 2%; } }
-      @media only screen and (min-width: 320px) and (max-width: 1024px) {
-        #block-wrap .blocks .blocks#block-4 {
-          margin: 0 auto 21px;
-          width: 100%;
-          max-width: 590px;
-          clear: both; } }
+          width: 48%;
+          display: inline-block; } }
       @media only screen and (max-width: 40em) {
-        #block-wrap .blocks .blocks#block-4 {
-          height: 100%;
-          min-height: 140px;
-          max-height: 285px; } }
+        #block-wrap .blocks .blocks#block-2, #block-wrap .blocks .blocks#block-3 {
+          margin: 0 auto 21px; } }
+    @media only screen and (min-width: 1025px) and (max-width: 1200px) {
+      #block-wrap .blocks .blocks#block-4 {
+        width: 100%;
+        margin-left: 0; } }
+    @media only screen and (min-width: 320px) and (max-width: 1024px) {
+      #block-wrap .blocks .blocks#block-4 {
+        margin: 0 auto 21px; } }
     #block-wrap .blocks .blocks.overlay:hover:before {
       position: absolute;
       content: '';
@@ -6777,7 +6762,6 @@ header {
       width: 100%;
       height: 100%;
       display: block;
-      border-bottom: 5px solid #57b649;
       background: rgba(0, 0, 0, 0.8); }
   #block-wrap .blocks div#small-blocks.row, #block-wrap .blocks div#med-block.row {
     margin: 0 auto;
diff --git a/js/app.js b/js/app.js
index 78513d9..a19c658 100644
--- a/js/app.js
+++ b/js/app.js
@@ -59,11 +59,15 @@ $(document).ready(function () {
 //           $("#searchform").css("display", "inline");
             $("#topSearchForm").toggle("slide");
             $("#searchIcon").css("visibility", "hidden");
-        } 
+        }
          $("#lar-search").focus();
     });
     $("#lar-search").blur(function(){
         $("#topSearchForm").toggle("slide");
         $("#searchIcon").css("visibility", "visible");
     });
+    
+    $("#block-2, #block-3").wrapAll(' <div id="small-blocks" class="row collapse">');
+    $("#block-4").wrap('<div id="med-block" class="row collapse">');
+    $("#small-blocks, #med-block").wrapAll('<div class="small-12 large-6 columns">');
 });
diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index ae84b6c..2f0e52c 100644
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -50,11 +50,15 @@ $(document).ready(function () {
 //           $("#searchform").css("display", "inline");
             $("#topSearchForm").toggle("slide");
             $("#searchIcon").css("visibility", "hidden");
-        } 
+        }
          $("#lar-search").focus();
     });
     $("#lar-search").blur(function(){
         $("#topSearchForm").toggle("slide");
         $("#searchIcon").css("visibility", "visible");
     });
+    
+    $("#block-2, #block-3").wrapAll(' <div id="small-blocks" class="row collapse">');
+    $("#block-4").wrap('<div id="med-block" class="row collapse">');
+    $("#small-blocks, #med-block").wrapAll('<div class="small-12 large-6 columns">');
 });
diff --git a/parts/glm-blocks.php b/parts/glm-blocks.php
index 2bebf27..ba8dd67 100644
--- a/parts/glm-blocks.php
+++ b/parts/glm-blocks.php
@@ -5,32 +5,83 @@
     <?php foreach ($blocks as $block):?>
             <?php $post_image_id = get_post_thumbnail_id($block->ID); ?>
             <?php
-                if($count == 1){$thumbnail = wp_get_attachment_image_src( $post_image_id, 'glm_block1', false); }
-                elseif($count == 2 || $count == 3){$thumbnail = wp_get_attachment_image_src( $post_image_id, 'glm_block2_3', false); }
-                elseif($count == 4){$thumbnail = wp_get_attachment_image_src( $post_image_id, 'glm_block4', false); } ?>
-
-           <!--block div -->
-            <div id="block-<?php echo $count; ?>" class="small-11 small-centered large-uncentered large-6 columns blocks overlay" style="background: url('<?php echo $thumbnail[0]; ?>') no-repeat ; background-size: 100% 100% ;">
-                <?php if($block->url):?>
-                <a href="<?php echo $block->url;?>"<?php if($block->externalUrl){echo ' target="_blank"';}?>>
-                    <?php endif;?>
-                    <?php //echo $block->thumbnail;?>
-                    <?php if($block->url):?>
-                </a>
-                <?php endif;?>
-                <?php if($block->url):?>
-                <a class="title-posts" href="<?php echo $block->url;?>"<?php if($block->externalUrl){echo ' target="_blank"';}?>>
-                    <?php endif;?>
-                    <h3><?php echo $block->post_title;?></h3>
-                    <?php if($block->url):?>
-                </a>
-                <?php endif;?>
-                <p><?php echo $block->post_content . $block->post_excerpt;?></p>
-                <a class="blocks-readmore" href="<?php echo $block->url;?>">Read More...</a>
-            </div>
+                if($count == 1){
+                    $thumbnail = wp_get_attachment_image_src( $post_image_id, 'glm_block1', false); ?>
+                     <div id="block-<?php echo $count; ?>" class="small-11 small-centered large-uncentered large-6 columns blocks overlay" >
+                        <?php if($block->url):?>
+                        <a href="<?php echo $block->url;?>"<?php if($block->externalUrl){echo ' target="_blank"';}?>>
+                            <?php endif;?>
+                            <?php //echo $block->thumbnail;?>
+                            <img src="<?php echo $thumbnail[0]; ?>"/>
+                            <?php if($block->url):?>
+                        </a>
+                        <?php endif;?>
+                        <?php if($block->url):?>
+                        <a class="title-posts" href="<?php echo $block->url;?>"<?php if($block->externalUrl){echo ' target="_blank"';}?>>
+                            <?php endif;?>
+                            <div class="block-text">
+                            <h3><?php echo $block->post_title;?></h3>
+                            <?php if($block->url):?>
+                        </a>
+                        <?php endif;?>
+                        <p><?php echo $block->post_content . $block->post_excerpt;?></p>
+                        <a class="blocks-readmore" href="<?php echo $block->url;?>">Read More...</a>
+                        </div>
+                    </div>
+                <?php } 
+    
+                elseif ($count == 2 || $count == 3){
+                    $thumbnail = wp_get_attachment_image_src( $post_image_id, 'glm_block2_3', false); ?>
+                     <div id="block-<?php echo $count; ?>" class="small-11 small-centered large-uncentered large-6 columns blocks overlay" >
+                        <?php if($block->url):?>
+                        <a href="<?php echo $block->url;?>"<?php if($block->externalUrl){echo ' target="_blank"';}?>>
+                            <?php endif;?>
+                            <?php //echo $block->thumbnail;?>
+                            <img src="<?php echo $thumbnail[0]; ?>"/>
+                            <?php if($block->url):?>
+                        </a>
+                        <?php endif;?>
+                        <?php if($block->url):?>
+                        <a class="title-posts" href="<?php echo $block->url;?>"<?php if($block->externalUrl){echo ' target="_blank"';}?>>
+                            <?php endif;?>
+                            <div class="block-text">
+                            <h3><?php echo $block->post_title;?></h3>
+                            <?php if($block->url):?>
+                        </a>
+                        <?php endif;?>
+                        <p><?php echo $block->post_content . $block->post_excerpt;?></p>
+                        <a class="blocks-readmore" href="<?php echo $block->url;?>">Read More...</a>
+                        </div>
+                    </div>
+              <?php  }
+    
+                elseif ($count == 4){
+                    $thumbnail = wp_get_attachment_image_src( $post_image_id, 'glm_block4', false);  ?>
+                     <div id="block-<?php echo $count; ?>" class="small-11 small-centered large-uncentered medium-12 columns blocks overlay" >
+                        <?php if($block->url):?>
+                        <a href="<?php echo $block->url;?>"<?php if($block->externalUrl){echo ' target="_blank"';}?>>
+                            <?php endif;?>
+                            <?php //echo $block->thumbnail;?>
+                            <img src="<?php echo $thumbnail[0]; ?>"/>
+                            <?php if($block->url):?>
+                        </a>
+                        <?php endif;?>
+                        <?php if($block->url):?>
+                        <a class="title-posts" href="<?php echo $block->url;?>"<?php if($block->externalUrl){echo ' target="_blank"';}?>>
+                            <?php endif;?>
+                            <div class="block-text">
+                            <h3><?php echo $block->post_title;?></h3>
+                            <?php if($block->url):?>
+                        </a>
+                        <?php endif;?>
+                        <p><?php echo $block->post_content . $block->post_excerpt;?></p>
+                        <a class="blocks-readmore" href="<?php echo $block->url;?>">Read More...</a>
+                        </div>
+                    </div>
+               <?php } ?>
             <!-- end block# div -->
     <?php $count++; ?>
    <?php endforeach;?>
 </div>
 <!--<div class="separator"><hr></div>-->
-<?php endif;?>
+<?php endif;?>
\ No newline at end of file
diff --git a/scss/_main.scss b/scss/_main.scss
index b73a521..750bde0 100644
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -9,24 +9,24 @@
 #block-wrap {
     position: relative;
     z-index: 1;
-    text-align: center;
     box-shadow: 0 2px 5px 0 rgba($black, 0.35);
     -ms-box-shadow: 0 2px 5px 0 rgba($black, 0.35);
     -moz-box-shadow: 0 2px 5px 0 rgba($black, 0.35);
     -webkit-box-shadow: 0 2px 5px 0 rgba($black, 0.35);
     padding: 71px 0;
     .blocks {
-        & .blocks {
+        & .blocks { 
             cursor: pointer;
             box-shadow: 2px 2px 5px 0 rgba($black, 0.55);
             -ms-box-shadow: 2px 2px 5px 0 rgba($black, 0.55);
             -moz-box-shadow: 2px 2px 5px 0 rgba($black, 0.55);
             -webkit-box-shadow: 2px 2px 5px 0 rgba($black, 0.55);
-            &:hover{
-                max-height: 590px;
-//                margin-bottom: -5px;
+            &:hover {
+                border-bottom: 5px solid $green;
+//                max-height: 590px;
+                margin-bottom: -5px;
                 h3 {
-                    display: flex;
+                    display: block;
                     position: relative;
                     z-index: 1;
                     @media #{$small-only} {
@@ -35,7 +35,7 @@
                 }
                 p {
                     color: $white;
-                    display: flex;
+                    display: inline;
                     position: relative;
                     z-index: 1;
                     @media #{$small-only} {
@@ -46,7 +46,7 @@
                 a {
                     font-family: "Times New Roman";
                     font-style: italic;
-                    display: flex;
+                    display: block;
                     position: relative;
                     z-index: 1;
                     font-size: rem-calc(24);
@@ -70,80 +70,89 @@
                 padding: 0 15px;
             }
             &#block-1 {
-                height: 590px;
-//                max-width: 590px;
-                width: 590px;
+//                height: 590px;
+                max-width: 590px;
                 padding: 0;
-                margin-left: 10px;
+//                margin-left: 10px;
                 @media only screen and (min-width: 1025px) and (max-width: 1200px) {
                     width: 49%;
                     margin-left: 0.5%;
                 }
                 @media #{$medium-only} {
-                    width: 95%;
-                    max-width: 590px;
+//                    width: 95%;
+//                    max-width: 590px;
                     margin: 0 auto 21px;
                 }
                 @media #{$small-only} {
-                    width: 95%;
-                    height: 100%;
-                    min-height: 304px;
-                    max-height: 590px;
+//                    width: 95%;
+//                    height: 100%;
+//                    min-height: 304px;
+//                    max-height: 590px;
                     margin: 0 auto 21px;
-
                 }
             }
-            &#block-2 {
-                margin-left: 10px;
-            }
+//            &#block-2 {
+//                margin-left: 10px;
+//                @media only screen and (min-width: 1025px) and (max-width: 1200px) {
+//                    margin-left: 0;
+//                }
+//            }
             &#block-3 {
                 margin-left: 20px;
+                @media only screen and (min-width: 1025px) and (max-width: 1200px) {
+                    margin-left: 3%;
+                }
+                @media only screen and (min-width: 500px) and (max-width: 640px) {
+                    margin: 0 0 21px 2% !important;
+                }
             }
             &#block-2, &#block-3 {
-                height: 285px;
+//                height: 285px;
                 max-width: 285px;
                 margin-bottom: 21px;
                 &:hover {
-//                    margin-bottom: 16px;
+                    margin-bottom: 16px;
                 }
                 @media only screen and (min-width: 1025px) and (max-width: 1200px) {
                     width: 48%;
-                    margin-left: 3%;
                 }
                 @media #{$medium-only} {
-                    margin: 0 0 21px 0.5% !important;
-                      display: inline-block;
-                      width: 46%;
+//                    margin: 0 auto 21px;
+                    display: inline-block;
+                    width: 48%;
                 }
-                @media #{$small-only} {
-                    margin: 0 0 21px 0.5% !important;
+                @media only screen and (min-width: 500px) and (max-width: 640px) {
+                    width: 48%;
                     display: inline-block;
-                    width: 46%;
+                }
+                @media #{$small-only} {
+                    margin: 0 auto 21px;
+//                    width: 100%;
+//                    max-width: 285px;
                 }
             }
             &#block-4 {
-                height: 285px;
-                width: 590px;
-                margin-left: 10px;
+//                height: 285px;
+//                width: 590px;
+//                margin-left: 10px;
                 @media only screen and (min-width: 1025px) and (max-width: 1200px) {
-                    width: 78%;
-                    margin: 0 auto 21px 2%;
+                    width: 100%;
+                    margin-left: 0;
                 }
                 @media only screen and (min-width: 320px) and (max-width: 1024px) {
                     margin: 0 auto 21px;
-                    width: 100%;
-                    max-width: 590px;
-                    clear: both;
+//                    width: 100%;
+//                    max-width: 590px;
                 }
                 @media #{$small-only} {
-                    height: 100%;
-                    min-height: 140px;
-                    max-height: 285px;
+//                    height: 100%;
+//                    min-height: 140px;
+//                    max-height: 285px;
                 }
             }
             &.overlay {
                 &:hover {
-                    &:before{
+                    &:before {
                         position: absolute;
                         content: '';
                         top: 0;
@@ -151,8 +160,7 @@
                         width: 100%;
                         height: 100%;
                         display: block;
-                        border-bottom: 5px solid $green;
-                        background: rgba($black, 0.80);
+                        background: rgba($black, 0.80);    
                     }
                 }
             }
@@ -169,7 +177,7 @@
                 max-width: 590px;
             }
         }
-    }
+    }    
 }
 .page-inside {
     #content-wrapper {
@@ -187,6 +195,7 @@
         }
     }
 }
+    
 .edit-wrapper {
     position: relative;
     z-index: 1;
@@ -239,4 +248,4 @@
             box-shadow: none;
         }
     }
-}
+}
\ No newline at end of file
-- 
2.17.1