Responsive changes, homepage, header, footer

Not teste on IE, no other pages checked yet
thms · Sep 24, 2013 · 5cefb4f · 5cefb4f
1 parent 25ba0ce
commit 5cefb4f
Show file tree

Hide file tree

Showing 11 changed files with 1,821 additions and 126 deletions.
diff --git a/app/assets/javascripts/store/bootstrap.js b/app/assets/javascripts/store/bootstrap.js
diff --git a/app/assets/stylesheets/store/bootstrap.css b/app/assets/stylesheets/store/bootstrap.css
diff --git a/app/assets/stylesheets/store/media_queries.css.scss b/app/assets/stylesheets/store/media_queries.css.scss
@@ -33,30 +33,87 @@
 /* #Media Queries
 ================================================== */
 
+footer#footer {padding-top:20px;padding-bottom:10px;}
+footer#footer ul {margin:0;height:auto !important;}
+footer#footer ul li {padding-bottom:10px;}
+
+#search-box {margin-top:0px;position:absolute;right:0px;top:40px;}
+
+.home-promo {float:right;width:300px;height:350px;border-bottom:4px double #978F82;}
+.home-p1 {width:300px;height:144px;position:relative;margin-top:55px;}
+.home-p2 {background-repeat:no-repeat;position:relative;width:300px;height:146px;}
+.home-c1 {position:relative;float:left;width:310px;height:146px;margin-right:10px;border-bottom:4px double #978F82;}
+.home-c2 {position:relative;float:left;width:310px;height:146px;margin-right:10px;border-bottom:4px double #978F82;}
+.home-c3 {position:relative;float:left;width:300px;height:146px;border-bottom:4px double #978F82;}
+
+.home-gp {float:left;width:310px;height:146px;margin-right:10px;position:relative;}
+.home-dl {float:left;width:310px;height:146px;margin-right:10px;position:relative;}
+.home-nl {float:left;width:300px;height:146px;}
+
+/* Slider */
+.theme-default #slider {
+  margin:0 auto 0 auto;
+  width:630px; /* Make sure your images are the same size */
+  height:350px; /* Make sure your images are the same size */
+}
+.slider-wrapper {
+  margin:0;
+}
+#spree-slider {
+	float:left;width:630px;height:350px;border-bottom:4px double #978F82;
+}
+.theme-default .nivoSlider {
+	box-shadow:0 0 0 0 #4A4A4A;
+}
+
+.theme-default .nivo-controlNav {display:none;}
 
 /* Desktop only */
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 1025px) {
 	body {background:url(/assets/background.jpg) no-repeat;min-width:980px;background-size:100%;}
 	.container {
 		-moz-box-shadow: 0 0 16px 5px #444;
 		-webkit-box-shadow: 0 0 16px 5px #444;
 		box-shadow: 0 0 16px 5px #444;
+		width:980px;
 	}
-
+
+}
+
+/* adjust for iPad */
+@media only screen and (device-height: 1024px) and (orientation : landscape) {
+	footer#footer ul li {margin-right:25px;}
 }
+
   /* Smaller than standard 960 (devices and browsers) */
   @media only screen and (max-width: 959px) {
 
+	footer#footer > ul > li:last-child {
+		float:left;
+		margin-right:0px;
+	}
+	footer#footer li {width:200px;margin-right:0px;}
+	#content #spree-slider {width:100%;}
+	div#slider.nivoSlider {width:100%;}
+	div#slider.nivoSlider a img {scale:contain;}
+	.home-promo {width:100%;margin-top:12px;height:146px;}
+	.home-p1 {float:left;margin-top:0px;}
+	.home-p2 {float:right;}
+	.home-c1, .home-c2, .home-c3 {width:33%;height:116px;margin-right:0px;background-size:100%;}
+	.home-c2 {margin-left:4px;}
+	.home-c3 {float:right;}
+	.home-gp, .home-dl, .home-nl {width:100%;}
   }
 
   /* Tablet Portrait size to standard 960 (devices and browsers) */
   @media only screen and (min-width: 768px) and (max-width: 959px) {
     .container {
+
       padding-left: 10px;
       width: 758px;
     }
     footer#footer {
-      width: 748px;
+      width: 758px;
     }
     p[data-hook="use_billing"] {
       margin-top: -15px;
@@ -69,7 +126,21 @@
     html {
       -webkit-text-size-adjust: none;
     }
+	.theme-default #slider {height:auto !important;max-height:350px;}
+	#content #spree-slider {height:auto !important;}
+	.container {width:95%;}
+	.home-p1, .home-p2 {max-width:50%;background-size:contain;}
+	.home-p1 {float:left;}
+	.home-p2 {float:right;}
+    footer#footer {
+      width: 640px;
+    }
 
+	.home-gp, .home-dl, .home-nl {float:none;width:100%;}
+
+	#search-box {top:113px;right:auto;left:0px;}
+	ul#nav-bar li {display:block;}
+
     #order_details .steps-data div.columns, 
     #order_summary .steps-data div.columns {
       padding: 0;
@@ -88,9 +159,9 @@
         list-style: none !important;
       }
     }
-
+	nav#top-nav-bar {width:80px;}
     ul#nav-bar {
-      text-align: center;
+      text-align: right;
     }
 
     .steps-data div.columns {
@@ -122,29 +193,20 @@
     footer#footer {
       width: auto !important;
     }
-
+	#content {width:100%;}
     input, select {
       vertical-align: baseline !important;
     }
 
     figure#logo {
-      text-align: center;
+      text-align: left;
     }
 
     #link-to-login {
       display: block;
       text-align: center;
     }
 
-    #search-bar {
-      display: block;
-      text-align: center;
-
-      select {
-        margin-bottom: 10px;
-      }
-    }
-
     ul#products {
       margin-left: 0;
       margin-right: -20px;
@@ -188,6 +250,13 @@
   /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
   @media only screen and (max-width: 479px) {
 
+	#content {width:100%;}
+	.home-promo {height:auto !important;}
+	.home-p1, .home-p2 {float:none;width:100%;max-width:100%;background-position-x:center;text-align:left;}
+	.home-c1, .home-c2, .home-c3 {max-width:100%;width:100%;background-size:contain;background-position-x:center;}
+	.home-gp, .home-dl, .home-nl {text-align:left;}
+
+	footer#footer {width:auto !important;}
     .progress-steps li {
       padding: 0;
       margin: 0;
@@ -294,4 +363,6 @@
       text-align: center;
     }
 
-  }
+  }
+
+/* Experimental or in progress */
diff --git a/app/assets/stylesheets/store/menu.css.scss b/app/assets/stylesheets/store/menu.css.scss
@@ -0,0 +1,65 @@
+/* Sushi's header.css */
+
+
+header {
+  height: auto;
+}
+.navbar {padding-top:40px;}
+
+/* Media queries start here */
+@media screen and (max-width: 768px) {
+
+  #top-menu {
+    display: none;
+  }
+
+  #hierarchybreadcrumb {
+    display: block;
+    position: absolute;
+    right: 10px;
+    top: 67px;
+  }
+}
+
+@media screen and (max-width: 568px) {
+
+  ul#nav-bar {
+    text-align: left;
+  }
+
+  #hierarchybreadcrumb {
+    top: 73px;
+  }
+}
+
+@media screen and (max-width: 480px) and (max-width: 767px) {
+
+  ul#nav-bar {
+    text-align: left;
+  }
+
+  #hierarchybreadcrumb {
+    top: 73px;
+  }
+
+}
+
+@media only screen and (max-width: 479px) {
+  ul#nav-bar {
+    text-align: left;
+  }
+
+  #hierarchybreadcrumb {
+    top: 60px;
+  }
+
+  #keywords {
+    width: 150px;
+  }
+
+  div#minicart {
+    padding: 5px;
+    right: 5px;
+  }
+
+}
diff --git a/app/assets/stylesheets/store/reservebar.css.scss b/app/assets/stylesheets/store/reservebar.css.scss
@@ -17,7 +17,7 @@ $ff_base:        'CartoGothic', sans-serif;
 $ff_serif:       'MrsEaves', serif;
 
 
-body {min-width:980px;}
+body {}
 .container {width:980px;height:auto;min-height:600px;margin:0 auto;padding:4px 16px 16px 16px;
 	position:relative;background-color:white;
 }
@@ -38,83 +38,16 @@ nav#top-nav-bar #link-to-cart {padding-left: 24px;background: url("cart-small.pn
 
 /* top-menu */
 div#top-menu {border-bottom:4px double $dark_grey;height:22px;position:absolute;top:108px;;z-index:100;margin-bottom:12px;clear:both;width:100%;}
-div#top-menu ul {list-style:none;margin-left:0;margin-right:0;top:22px;}
-div#top-menu > ul > li {float:left;padding-right:12px;font-size:16px;}
-div#top-menu > ul > li > a, div#top-menu > ul > li > span {text-transform:uppercase;letter-spacing:2px;font-family:$ff_serif;font-size:18px;} 
-div#top-menu > ul > li > ul {visibility:hidden;position:absolute;left:0px;padding:12px;font-size:12px;width:956px;}
-div#top-menu > ul > li > ul {
-	background-color:white;
-	-moz-box-shadow: 0px 4px 6px 1px rgba(100,100,100,0.5);
-	-webkit-box-shadow: 0px 4px 6px 1px rgba(100,100,100,0.5);
-	box-shadow: 0px 4px 6px 1px rgba(100,100,100,0.5);
-	border:4px double $dark-grey;
-
-	-webkit-column-count: 5;
-	-moz-column-count: 5;
-	column-count: 5;
-	-webkit-column-gap: 20px;
-	-moz-column-gap: 20px;
-	column-gap: 20px;
-
-}
-div#top-menu > ul > li > ul > li {
-	-webkit-column-break-inside: avoid;
-	-moz-column-break-inside: avoid;
-	column-break-inside: avoid;
-}
-
-/* special treatment for champagne - try and make the spacing even , rather than create columns */
-div#top-menu > ul > li.type\/champagne > ul {
-	-webkit-column-count: 0;
-	-moz-column-count: 0;
-	column-count: 0;
-}
-div#top-menu > ul > li.type\/champagne > ul > li {
-	float:left;
-	/* margin-right:122px; */
-	margin-right:81px;
-}
-@media only screen and (max-device-width: 1024px)  {
-div#top-menu > ul > li.type\/champagne > ul > li {margin-right:79px;}
-}
-html.ie div#top-menu > ul > li.type\/champagne > ul > li {margin-right:77px;}
-
-div#top-menu > ul > li.type\/champagne > ul > li:last-child {
-	float:right;
-	margin-right:0px;
-}
-html.ie div#top-menu > ul > li.type\/champagne > ul > li:last-child {margin-right:0px;}
-
-/* end of champagne treatment */
-
-/* add spacer in between top level list to make spacing equal */
-div#top-menu > ul > li {padding-right:0px;height:22px;margin-right:70px;}
-/* adjust for iPad */
-@media only screen and (max-device-width: 1024px)  {
-	div#top-menu > ul > li {padding-right:0px;height:22px;margin-right:65px;}
-}
-div#top-menu > ul > li:last-child {float:right;}
-
-div#top-menu ul ul ul {visibility:hidden;}
-/* Mouse over first level:*/
-div#top-menu ul li:hover ul {visibility:visible;}
-div#top-menu > ul > li > ul > li > a {color:$red;font-family:$ff_serif;font-size:20px;line-height:1.2em;}
-div#top-menu > ul > li > ul > li > ul > li > a {font-weight:bold;}
-#menu-closer {position:absolute;right:-8px;top:26px;font-size:14px;padding:4px;border-style:double;border-width:0 4px 4px 4px;border-color:black;background:white}
 
 
 /* Breadcrumbs */
 #breadcrumbs li a {font-family:$ff_serif;text-transform:uppercase;font-size:14px;}
 
 /* Footer */
-footer#footer {background-color:none;padding:0px;font-size:18px;height:58px;border:double;border-width:4px 0;}
+footer#footer {background-color:none;padding:0px;font-size:18px;border:double;border-width:4px 0;}
 footer#footer ul {list-style:none;margin:23px 0;height:14px;}
 footer#footer ul li {float:left;text-transform:uppercase;font-family:$ff_serif;margin-right:33px;}
 html.ie9 footer#footer ul li {float:left;text-transform:uppercase;font-family:$ff_serif;margin-right:31px;}
-/* adjust for iPad */
-@media only screen and (max-device-width: 1024px)  {
-	footer#footer ul li {margin-right:31px;}
-}
 
 footer#footer > ul > li:last-child {float:right;margin-right:0px;}
 
@@ -154,7 +87,7 @@ table#product-properties {margin-top:24px;border:none;}
 table#product-properties tr.odd, table#product-properties tr.even {background:none;}
 
 /* silder */
-div#slider .nivo-caption {right:0;height:250px;width:50%;color:#333;background:none;left:315px;}
+div#slider .nivo-caption {right:0;height:250px;width:50%;color:#333;background:none;left:50%;}
 div#slider .nivo-controlNav {right:0;bottom:0;left:auto;}
 
 /* Search box - needs to have same zINdex as menu to allow autosuggest to be on top of the menu */

diff --git a/app/assets/stylesheets/store/spree_reservebar_theme.css b/app/assets/stylesheets/store/spree_reservebar_theme.css
@@ -2,5 +2,7 @@
 	*= require store/screen
 	*= require store/reservebar
 	*= require store/media_queries
+	*= require store/menu
+	*= require store/bootstrap
 	
 */
diff --git a/app/helpers/spree/base_helper_decorator.rb b/app/helpers/spree/base_helper_decorator.rb
@@ -12,8 +12,35 @@ def reverse_taxons_tree(root_taxon, current_taxon, max_level = 1)
     end
   end
 
-  # First level main menu, only called once, then uses standard taxon tree for the inner items
   def menu_taxons_tree(root_taxon, current_taxon, max_level = 1, extra_items = nil)
+    return '' if max_level < 1 || root_taxon.children.empty?
+    content_tag :ul, :class => 'nav navbar-nav' do
+      root_taxon.children.map do |taxon|
+        content_tag :li, :class => 'dropdown' do
+          link_to(taxon.name, '#', :class => "dropdown-toggle", 'data-toggle' => "dropdown") +
+          taxons_tree_responsive(taxon, current_taxon, max_level - 1)
+        end
+      end.join("\n").html_safe
+    end
+  end
+
+  def taxons_tree_responsive(root_taxon, current_taxon, max_level = 1)
+    return '' if max_level < 1 || root_taxon.children.empty?
+    content_tag :ul, :class => 'dropdown-menu' do
+      root_taxon.children.map do |taxon|
+        css_class = taxon.children.empty? ? '': 'dropdown-submenu'
+        content_tag :li, :class => css_class do
+          link_to(taxon.name, seo_url(taxon)) +
+          taxons_tree_responsive(taxon, current_taxon, max_level - 1)
+        end
+      end.join("\n").html_safe
+    end
+  end
+
+
+  # First level main menu, only called once, then uses standard taxon tree for the inner items
+  # This is deprecated, implemented the old version of Woody's design
+  def menu_taxons_tree_old(root_taxon, current_taxon, max_level = 1, extra_items = nil)
     return '' if max_level < 1 || root_taxon.children.empty?
     content_tag :ul, :class => 'taxons-list' do
       menu = root_taxon.children.map do |taxon|