Update the toolbox section

Give margin left to breadcrumbs and the headers
fix issue with figure margin.

diff --git a/Toolkit/Photos/css/gallery.css b/Toolkit/Photos/css/gallery.css
index c947848..7480028 100755 (executable)
--- a/Toolkit/Photos/css/gallery.css
+++ b/Toolkit/Photos/css/gallery.css
@@ -43,12 +43,13 @@ div.thumb {
     height: 0;
     visibility: hidden;
 }
-.gallery li {
+#toolbox ul#Gallery li {
     background: none repeat scroll 0 0 #F5F5F5;
     float: left;
     margin: 0 2% 26px 0;
     overflow: hidden;
     position: relative;
+    padding: 0;
     width: 23%
 }
 .gallery li img {
@@ -351,7 +352,7 @@ p.captionDescWrapper {
     margin-bottom: 5px;
 }
 @media only screen and (max-width: 40em) {
-    ul#gallery li {
+    ul#Gallery li {
         width: 45% !important;
     }
     ul.gallery li:nth-child(4n-1) {

diff --git a/Toolkit/Template/Image/Left.php b/Toolkit/Template/Image/Left.php
index 6494e50..9397a6a 100644 (file)
--- a/Toolkit/Template/Image/Left.php
+++ b/Toolkit/Template/Image/Left.php
@@ -31,32 +31,32 @@
  */
 class Toolkit_Template_Image_Left extends Toolkit_Template_Image_ImageAbstract
 {
-       //  {{{ getImage()
+    //  {{{ getImage()
 
     /**
      * Gets the image markup
      *
-        * @param string $size constant path to image size
+     * @param string $size constant path to image size
      *
      * @return string Html image element
      * @access public
      */
-       public function getImage($size)
-       {
-               $imageData = $this->_adapter->getImageSize($size . $this->_src);
+    public function getImage($size)
+    {
+        $imageData = $this->_adapter->getImageSize($size . $this->_src);
 
-               $html  = '<figure class="toolboxSectionImageFigure left small-12 medium-4 columns">';
-               $html .=        parent::getImage($size);
-               if (!empty($this->_caption)) {
-                       $html .=        '<figcaption>';
-                       $html .=                $this->_caption;
-                       $html .=        '</figcaption>';
-               }
-               $html .= '</figure>';
+        $html  = '<figure class="toolboxSectionImageFigure left small-12 medium-5 columns">';
+        $html .=    parent::getImage($size);
+        if (!empty($this->_caption)) {
+            $html .=    '<figcaption>';
+            $html .=        $this->_caption;
+            $html .=    '</figcaption>';
+        }
+        $html .= '</figure>';
 
-               return $html;
-       }
+        return $html;
+    }
 
-       //      }}}
+    //  }}}
 }
 ?>

diff --git a/Toolkit/Template/Image/Right.php b/Toolkit/Template/Image/Right.php
index 86974f4..046ebb0 100644 (file)
--- a/Toolkit/Template/Image/Right.php
+++ b/Toolkit/Template/Image/Right.php
@@ -31,32 +31,32 @@
  */
 class Toolkit_Template_Image_Right extends Toolkit_Template_Image_ImageAbstract
 {
-       //  {{{ getImage()
+    //  {{{ getImage()
 
     /**
      * Gets the image markup
      *
-        * @param string $size constant path to image size
+     * @param string $size constant path to image size
      *
      * @return string Html image element
      * @access public
      */
-       public function getImage($size)
-       {
-               $imageData = $this->_adapter->getImageSize($size . $this->_src);
+    public function getImage($size)
+    {
+        $imageData = $this->_adapter->getImageSize($size . $this->_src);
 
-               $html  = '<figure class="toolboxSectionFigureInner right small-12 medium-4 columns">';
-               $html .=        parent::getImage($size);
-               if (!empty($this->_caption)) {
-                       $html .=        '<figcaption>';
-                       $html .=                $this->_caption;
-                       $html .=        '</figcaption>';
-               }
-               $html .= '</figure>';
+        $html  = '<figure class="toolboxSectionFigureInner right small-12 medium-5 columns">';
+        $html .=    parent::getImage($size);
+        if (!empty($this->_caption)) {
+            $html .=    '<figcaption>';
+            $html .=        $this->_caption;
+            $html .=    '</figcaption>';
+        }
+        $html .= '</figure>';
 
-               return $html;
-       }
+        return $html;
+    }
 
-       //      }}}
+    //  }}}
 }
 ?>

diff --git a/Toolkit/Template/Page/Toolbox.php b/Toolkit/Template/Page/Toolbox.php
index e367ec7..1e49f67 100644 (file)
--- a/Toolkit/Template/Page/Toolbox.php
+++ b/Toolkit/Template/Page/Toolbox.php
@@ -328,12 +328,17 @@ class Toolkit_Template_Page_Toolbox implements Toolkit_Template_Page_IBody
             }
 
             $html  = '<div id="category" class="row">';
-            $html .= "<h1>{$page['title']}</h1>";
             if ($page['paragraph_links']) {
                 $html .= $this->getParagraphLinks();
             }
-            $html .= $this->getParagraphImage($page, $side);
-            $html .= '<div class="small-12 medium-8 columns">';
+            $html .= "<h1>{$page['title']}</h1>";
+            $image = $this->getParagraphImage($page, $side);
+            if ($image) {
+                $html .= $image;
+                $html .= '<div class="small-12 medium-7 columns">';
+            } else {
+                $html .= '<div class="small-12 columns">';
+            }
             $html .= $this->keywordReplacement->findAndReplace($page['description']);
             $html .= '</div>';
             $html .= '</div>';
@@ -397,10 +402,11 @@ class Toolkit_Template_Page_Toolbox implements Toolkit_Template_Page_IBody
             foreach ($paragraphs as $paragraph) {
                 if ($paragraph['active']) {
                     $html .= '<div class="listing row" id="sect-'.$paragraph['id'].'">';
-                    $html .= "<h2>{$paragraph['title']}</h2>";
                     $image = $this->getParagraphImage($paragraph, $side[$key]);
+                    $html .= "<h2>{$paragraph['title']}</h2>";
                     if ($image) {
-                        $html .= '<div class="small-12 medium-8 columns">';
+                        $html .= $image;
+                        $html .= '<div class="small-12 medium-7 columns">';
                     } else {
                         $html .= '<div class="small-12 columns">';
                     }

diff --git a/css/app.css b/css/app.css
index 3587bca..7f3eeae 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6128,6 +6128,21 @@ img {
   padding: 0 0 2px 20px;
   background: url(../assets/bullet.png) 0 4px no-repeat; }
 
+#toolbox h1 {
+  margin-left: 15px; }
+
+#toolbox h2 {
+  margin-left: 15px; }
+
+#toolbox h3 {
+  margin-left: 15px; }
+
+#toolbox h4 {
+  margin-left: 15px; }
+
+#toolbox #breadcrumbs {
+  margin-left: 15px; }
+
 .webform table {
   margin: 10px 0 0 0;
   clear: both; }
@@ -6146,7 +6161,10 @@ img {
   float: left;
   margin: 12px 15px 15px 2px; }
 
-.imageright img, .imageleft img, figure img {
+#toolbox figure {
+  margin: 0; }
+
+.imageright img, .imageleft img, #toolbox figure > img {
   display: block;
   width: 100%;
   border: 10px solid #355675;
@@ -6225,7 +6243,12 @@ iframe {
   overflow: hidden;
   clear: both;
   font-size: 14px;
-  padding: 0 30px; }
+  padding: 0;
+  margin: 0; }
+
+#toolbox {
+  margin: 0;
+  padding: 0; }
 
 /* Page */
 #wrapper {
@@ -6247,7 +6270,9 @@ iframe {
 #content {
   display: block;
   width: 100%;
-  padding: 10px 30px; }
+  /*padding: 10px 30px;*/
+  padding: 0;
+  margin: 0; }
 
 #leftcol {
   /*float: left;*/

diff --git a/scss/_structure.scss b/scss/_structure.scss
index 9d45bb3..c9b07e5 100755 (executable)
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -80,6 +80,15 @@ img {
     padding: 0 0 2px 20px;
     background: url(../assets/bullet.png) 0 4px no-repeat;
 }
+@for $i from 1 through 4 {
+    #toolbox h#{$i} {
+        margin-left: 15px;
+    }
+}
+#toolbox #breadcrumbs {
+    margin-left: 15px;
+}
+
 .webform table {
     margin: 10px 0 0 0;
     clear: both;
@@ -98,7 +107,10 @@ img {
     float: left;
     margin: 12px 15px 15px 2px;
 }
-.imageright img, .imageleft img, figure img {
+#toolbox figure {
+    margin: 0;
+}
+.imageright img, .imageleft img, #toolbox figure > img {
     display: block;
     width: 100%;
     border: 10px solid #355675;
@@ -148,7 +160,12 @@ iframe {
     overflow: hidden;
     clear: both;
     font-size: 14px;
-    padding: 0 30px;
+    padding: 0;
+    margin: 0;
+}
+#toolbox {
+    margin: 0;
+    padding: 0;
 }
 /* Page */
 #wrapper {
@@ -170,7 +187,9 @@ iframe {
 #content {
     display: block;
     width: 100%;
-    padding: 10px 30px;
+    /*padding: 10px 30px;*/
+    padding: 0;
+    margin: 0;
 }
 #leftcol {
     /*float: left;*/

diff --git a/templates/template.html b/templates/template.html
index 6e519e9..1420413 100755 (executable)
--- a/templates/template.html
+++ b/templates/template.html
@@ -32,7 +32,7 @@
                 <li><a href="http://www.tripadvisor.com/Hotel_Review-g42281-d283641-Reviews-Trout_Creek_Condominiums_Vacation_Rentals-Harbor_Springs_Michigan.html" id="ta"></a></li>
                 <li><a href="http://www.facebook.com/pages/d41d8cd9/#/pages/Harbor-Springs-MI/Trout-Creek-Condominium-Resort/68823519594?ref=ts" id="fb" title="Find Us on Facebook">Find Us on Facebook</a></li>
                 <li><a href="https://twitter.com/TroutCreek" id="tw" title="Follow us on Twitter">Follow us on Twitter</a></li>
-                
+
                 <li><div id="phone">800-748-0245</div></li>
                 <li><a href="{baseURLDefined:h}sign-up-for-enews-304/" id="enews">Sign Up for Enews</a></li>
                 <li><a href="{baseURLDefined:h}contact-us-32/" id="contact_us">Contact Us</a></li>
@@ -47,7 +47,7 @@
                 <li><a href="{baseURLDefined:h}golf-packages-405/">Golf Packages</a></li>
             </ul>
         </header>
-        
+
         <nav class="tab-bar show-for-medium-down">
             <section class="middle tab-bar-section">Trout Creek</section>
             <section class="right-small">
@@ -61,64 +61,64 @@
             <div id="reservation_wrapper" class="row">
                 <flexy:include src="reservation.html">
             </div><!--/#reservation_wrapper-->
-        <div class="row collapse">
-            <div id="leftcol" flexy:if="sideNav" class="show-for-large-up large-3 columns">
-                <div id="subnav">{sideNav:h}</div>
-                <div id="action2">
-                    <h2>Quick Links</h2>
-                    <ul>
-                        <li><a href="{baseURLDefined:h}golf-packages-405/">Golf Packages</a></li>
-                        <li><a href="{baseURLDefined:h}sign-up-for-enews-304/">Sign Up for Enews</a></li>
-                        <li><a href="{baseURLDefined:h}lodging-specials-4/">Lodging Specials</a></li>
-                    </ul>
-                </div><!--/#action2-->
-            </div><!--/#leftcol-->
-        {if:sideNav}
-        <div id="maincol" class="small-12 large-9 columns">
-        {else:}
-        <div id="maincol" class="row">
-        {end:}
-            <div id="action_wrapper" flexy:if="isHomePage">
-                <ul id="actionlinks">
-                    <li><a id="golf_packages" href="{baseURLDefined:h}golf-packages-405/">Golf Packages</a></li>
-                    <li><a id="enews_signup" href="{baseURLDefined:h}sign-up-for-enews-304/">Sign Up for Enews</a></li>
-                    <li><a id="lodging_specials" href="{baseURLDefined:h}lodging-specials-4/">Lodging Specials</a></li>
-                </ul>
-            </div>
-            <div id="home_video_wrapper" flexy:if="isHomePage">
-                <h2><a href="{baseURLDefined:h}videos-433/">Watch Our Videos</a></h2>
-                {if:video}{video:h}{end:}
-            </div><!--/#home_video_wrapper-->
-            <div id="content">
-                <div id="toolbox">
-                    {toolboxContent:h}
-                </div><!--/#toolbox-->
-                <div id="hHlines" flexy:if="hasHeadlines">
-                    <ul>
-                        <li flexy:foreach="headlines,v" class="hHlinesItem">
-                            {if:v[external]}
-                            <a href="{v[href]:h}" class="hHlinesHeaderLink" target="_blank">
-                            {else:}
-                            <a href="{v[href]:h}" class="hHlinesHeaderLink">
-                            {end:}
-                            {v[header]:h}
-                            </a>
-                            {if:v[img]}
-                                {if:v[external]}
-                                <a href="{v[href]:h}" class="hHlinesImageLink" target="_blank">
-                                {else:}
-                                <a href="{v[href]:h}" class="hHlinesImageLink" target="_blank">
-                                {end:}
-                                <img src="{v[img]:h}" alt="Home page headline image">
-                                </a>
-                            {end:}
-                            <div>{v[descr]:h}<span class="hHlinesMore"><a href="{v[href]:h}" class="hHlinesMoreLink"><span class="nobreak">More Info >></span></a></span></div>
-                        </li><!-- /.hHlinesItem -->
-                    </ul>
-                </div><!-- /#hHlines -->
-            </div><!--/#content-->
-        </div><!--/#maincol-->
-        </div><!--/# foundation row-->
+            <div class="row"> <!-- class:row -->
+                <div id="leftcol" flexy:if="sideNav" class="show-for-large-up large-3 columns">
+                    <div id="subnav">{sideNav:h}</div>
+                    <div id="action2">
+                        <h2>Quick Links</h2>
+                        <ul>
+                            <li><a href="{baseURLDefined:h}golf-packages-405/">Golf Packages</a></li>
+                            <li><a href="{baseURLDefined:h}sign-up-for-enews-304/">Sign Up for Enews</a></li>
+                            <li><a href="{baseURLDefined:h}lodging-specials-4/">Lodging Specials</a></li>
+                        </ul>
+                    </div><!--/#action2-->
+                </div><!--/#leftcol-->
+                {if:sideNav}
+                <div id="maincol" class="small-12 large-9 columns">
+                {else:}
+                <div id="maincol" class="row">
+                {end:}
+                    <div id="action_wrapper" flexy:if="isHomePage">
+                        <ul id="actionlinks">
+                            <li><a id="golf_packages" href="{baseURLDefined:h}golf-packages-405/">Golf Packages</a></li>
+                            <li><a id="enews_signup" href="{baseURLDefined:h}sign-up-for-enews-304/">Sign Up for Enews</a></li>
+                            <li><a id="lodging_specials" href="{baseURLDefined:h}lodging-specials-4/">Lodging Specials</a></li>
+                        </ul>
+                    </div>
+                    <div id="home_video_wrapper" flexy:if="isHomePage">
+                        <h2><a href="{baseURLDefined:h}videos-433/">Watch Our Videos</a></h2>
+                        {if:video}{video:h}{end:}
+                    </div><!--/#home_video_wrapper-->
+                    <div id="content">
+                        <div id="toolbox">
+                            {toolboxContent:h}
+                        </div><!--/#toolbox-->
+                        <div id="hHlines" flexy:if="hasHeadlines">
+                            <ul>
+                                <li flexy:foreach="headlines,v" class="hHlinesItem">
+                                    {if:v[external]}
+                                    <a href="{v[href]:h}" class="hHlinesHeaderLink" target="_blank">
+                                    {else:}
+                                    <a href="{v[href]:h}" class="hHlinesHeaderLink">
+                                    {end:}
+                                    {v[header]:h}
+                                    </a>
+                                    {if:v[img]}
+                                        {if:v[external]}
+                                        <a href="{v[href]:h}" class="hHlinesImageLink" target="_blank">
+                                        {else:}
+                                        <a href="{v[href]:h}" class="hHlinesImageLink" target="_blank">
+                                        {end:}
+                                        <img src="{v[img]:h}" alt="Home page headline image">
+                                        </a>
+                                    {end:}
+                                    <div>{v[descr]:h}<span class="hHlinesMore"><a href="{v[href]:h}" class="hHlinesMoreLink"><span class="nobreak">More Info >></span></a></span></div>
+                                </li><!-- /.hHlinesItem -->
+                            </ul>
+                        </div><!-- /#hHlines -->
+                    </div><!--/#content-->
+                </div><!--/#maincol-->
+            </div><!--/# class:row -->
         <div id="footer" class="row">
             <a href="http://www.michigan.org/property/trout-creek-condominum-resort-harbor-springs/" id="puremi"><img src="{mediaBaseURL:h}assets/puremi_logo.jpg"></a>
             <div id="address1">Trout Creek Condominium Resort 4749 S. Pleasantview | Harbor Springs, MI 49740</div>