Merge pull request #2498 from Matt-Yorkley/embedded_mobile

Fix embedded shopfront menu responsiveness

app/assets/stylesheets/darkswarm/embedded_shopfront.css.scss

@@ -1,27 +1,78 @@
 @import "typography";
 
+$large-menu-height: 4.6875rem;
+$medium-menu-height: 3rem;
+$gutter-width: 0.9375rem;
+
+nav.top-bar ul.left li.powered-by {
+  display: none;
+}
+
 body.embedded {
   nav.top-bar {
-    ul.left, ul.center, ul.right li.current_hub {
+    overflow: visible;
+    padding: 0 $gutter-width;
+
+    ul.left li.ofn-logo, ul.center, ul.right li.current_hub {
       display: none;
     }
 
+    ul.left {
+      float: left;
+      width: auto;
+
+      li {
+        line-height: $large-menu-height;
+        height: $large-menu-height;
+        vertical-align: top;
+      }
+
+      li.powered-by {
+        display: inline-block;
+        opacity: 0.6;
+
+        img {
+          height: 1.8em;
+          margin: 0px 0.4em 0.4em 0px;
+        }
+
+        span, a {
+          font-family: "Oswald", sans-serif;
+          font-size: 1rem;
+          font-weight: 300;
+          color: #555;
+          padding: 0 !important;
+        }
+
+        a:hover {
+          color: #000;
+        }
+      }
+    }
+
     ul.right {
       width: auto !important;
+
       li {
         float: left;
-        line-height: 4.6875rem;
-        height: 4.6875rem;
+        line-height: $large-menu-height;
+        height: $large-menu-height;
         vertical-align: top;
-      }
-      li.powered-by {
-        display: inline-block;
+
+        &.cart {
+
+          div.joyride-tip-guide { // Cart Dropdown
+            top: 75px;
+            overflow: visible;
+          }
+        }
       }
     }
 
     &.show-for-large-up {
       display: inherit !important;
     }
+
     &.show-for-medium-down {
       display: none !important;
     }
@@ -46,28 +97,68 @@ body.embedded {
   #group-page header {
     display: none;
   }
+
+  @media all and (max-width: 640px) {
+    nav.top-bar {
+      height: 3.4rem;
+      padding: 0.2rem $gutter-width;
+      line-height: $medium-menu-height;
+
+      ul.left li, ul.right li {
+        line-height: $medium-menu-height;
+
+        i, span {
+          line-height: $medium-menu-height;
+        }
+      }
+
+      ul.right li.cart div.joyride-tip-guide {
+        width: 95%;
+        top: 51px;
+
+        h5 {
+          margin-bottom: 0.6rem;
+        }
+
+        .joyride-content-wrapper {
+          line-height: 2rem;
+
+          table tr.product-cart {
+            padding: 0;
+
+            td{
+              padding: 0 12px;
+            }
+          }
+        }
+
+        .buttons {
+
+          .button {
+            padding: 0.4rem 0.6rem !important;
+          }
+        }
+      }
+    }
+  }
+
+  @media all and (max-width: 480px) {
+    ul.left li.powered-by span {
+      display: none;
+    }
+
+    ul.right {
+
+      li.cart {
+
+        div.joyride-tip-guide {
+          width: 95%;
+        }
+      }
+    }
+  }
 }
 
-nav.top-bar ul.right li.powered-by {
-  display: none;
-  margin-right: 0.4rem;
-  opacity: 0.6;
-
-  img {
-    height: 1.8em;
-    margin: 0px 0.4em 0.4em 0px;
-  }
-  span, a {
-    font-family: "Oswald", sans-serif;
-    font-size: 1rem;
-    font-weight: 300;
-    color: #555;
-    padding: 0 !important;
-  }
-  a:hover {
-    color: #000;
-  }
-}
 
 .powered-by-embedded {
    opacity: 0.6;

app/views/shared/menu/_large_menu.html.haml

@@ -4,6 +4,12 @@
       %li.ofn-logo
         %a{href: root_path}
           %img{src: ContentConfig.logo.url}
+      %li.powered-by
+        %img{src: '/favicon.ico'}
+        %span
+          = t 'powered_by'
+          %a{href: '/'}
+            = t 'title'
     %ul.center
       %li
         %a{href: main_app.shops_path}
@@ -54,12 +60,6 @@
               = t 'label_about'
 
     %ul.right
-      %li.powered-by
-        %img{src: '/favicon.ico'}
-        %span
-          = t 'powered_by'
-          %a{href: '/'}
-            = t 'title'
       - if OpenFoodNetwork::I18nConfig.selectable_locales.count > 1
         %li.language-switcher.has-dropdown
           %a{href: '#'}