Commit 653cf77

speasley <s@stephenpeasley.com>
2016-07-10 23:31:33
[WIP] F6 nav
1 parent 3cb734e
Changed files (1)
app
app/views/layouts/application.html.erb
@@ -14,61 +14,116 @@
     <%= csrf_meta_tags %>
   </head>
   <body class="<%= controller_name %> <%= action_name %>">
-    <%= render partial: 'layouts/flash' %>
-    <!-- Navigation -->
-    <div class="title-bar" data-responsive-toggle="site-menu" data-hide-for="medium">
-      <button class="menu-icon" type="button" data-toggle></button>
-      <div class="title-bar-title">t(".menu")</div>
-    </div>
-    <div class="top-bar" id="site-menu">
-      <div class="top-bar-left">
-        <ul class="dropdown menu" data-dropdown-menu>
-          <li class="menu-text"><%= link_to t(".title"), dashboard_path %></li>
-        </ul>
-      </div>
-      <div class="top-bar-right">
-        <ul class="dropdown menu" data-dropdown-menu>
-          <% if feature_enabled?(:gym) %>
-          <li> <%= search_form %> </li>
-          <li><%= link_to t(".gyms"), gyms_path %></li>
-          <% end %>
-          <li>
-            <a href="#"><%= gravatar_for(current_user, size: 16) %> <%= current_user.username %></a>
-            <ul class="menu vertical">
-              <li><%= link_to t(".nav.user.workouts"), workouts_path %></li>
-              <li><%= link_to t(".nav.user.profile_edit"), edit_profile_path(current_user) %></li>
-              <li><%= link_to t(".nav.user.profile_view"), profile_path(current_user) %></li>
-              <li><%= link_to t(".nav.user.log_out"), session_path('me'), method: :delete %></li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-    </div>
-  <!-- End Navigation -->
-  <!-- START CONTENT -->
-  <div class="row loading-indicator hide">
-    <div class="columns text-center">
-      <p><i class="fa fa-spinner fa-pulse"></i> <%= t('.loading') %></p>
-    </div>
-  </div>
-  <%= yield %>
-  <!-- END CONTENT -->
-  <!-- Footer -->
-  <footer class="row">
-    <div class="columns"><hr />
-      <div class="row">
-        <div class="columns">
-          <p><%= t("footer.copyright") %></p>
+    <div class="off-canvas-wrapper">
+      <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
+
+        <!-- off-canvas title bar for 'small' screen -->
+        <div class="title-bar" data-responsive-toggle="widemenu" data-hide-for="medium">
+          <div class="title-bar-left">
+            <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
+            <span class="title-bar-title">Foundation</span>
+          </div>
+          <div class="title-bar-right">
+            <span class="title-bar-title">Login</span>
+            <button class="menu-icon" type="button" data-open="offCanvasRight"></button>
+          </div>
         </div>
-        <div class="columns">
-          <ul class="inline-list right">
-            <li><a href="https://twitter.com/Stronglifters/">Twitter</a></li>
-            <li><a href="https://github.com/stronglifters">Github</a></li>
+
+        <!-- off-canvas left menu -->
+        <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
+          <ul class="vertical dropdown menu" data-dropdown-menu>
+            <li><a href="left_item_1">Left item 1</a></li>
+            <li><a href="left_item_2">Left item 2</a></li>
+            <li><a href="left_item_3">Left item 3</a></li>
           </ul>
         </div>
+
+        <!-- off-canvas right menu -->
+        <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
+          <ul class="vertical dropdown menu" data-dropdown-menu>
+            <li><a href="right_item_1">Right item 1</a></li>
+            <li><a href="right_item_2">Right item 2</a></li>
+            <li><a href="right_item_3">Right item 3</a></li>
+          </ul>
+        </div>
+
+        <!-- "wider" top-bar menu for 'medium' and up -->
+        <div id="widemenu" class="top-bar">
+          <div class="top-bar-left">
+            <ul class="dropdown menu" data-dropdown-menu>
+              <li class="menu-text">Foundation</li>
+              <li class="has-submenu">
+                <a href="#">Item 1</a>
+                <ul class="menu submenu vertical" data-submenu>
+                  <li><a href="left_wide_11">Left wide 1</a></li>
+                  <li><a href="left_wide_12">Left wide 2</a></li>
+                  <li><a href="left_wide_13">Left wide 3</a></li>
+                </ul>
+              </li>
+              <li class="has-submenu">
+                <a href="#">Item 2</a>
+                <ul class="menu submenu vertical" data-submenu>
+                  <li><a href="left_wide_21">Left wide 1</a></li>
+                  <li><a href="left_wide_22">Left wide 2</a></li>
+                  <li><a href="left_wide_23">Left wide 3</a></li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+          <div class="top-bar-right">
+            <ul class="menu">
+              <li><input type="search" placeholder="Search"></li>
+              <li><button class="button">Search</button></li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- original content goes in this container -->
+        <div class="off-canvas-content" data-off-canvas-content>
+          <!-- start main content -->
+          <div class="row column">
+            <%= render partial: 'layouts/flash' %>
+            <% yield %>
+            <p>Content</p>
+            <p>Content</p>
+            <p>Content</p>
+            <ul>
+              <%= link_to t(".title"), dashboard_path %>
+              <% if feature_enabled?(:gym) %>
+              <li> <%= search_form %> </li>
+              <li><%= link_to t(".gyms"), gyms_path %></li>
+              <% end %>
+              <li>
+                <a href="#"><%= gravatar_for(current_user, size: 16) %> <%= current_user.username %></a>
+                <ul>
+                  <li><%= link_to t(".nav.user.workouts"), workouts_path %></li>
+                  <li><%= link_to t(".nav.user.profile_edit"), edit_profile_path(current_user) %></li>
+                  <li><%= link_to t(".nav.user.profile_view"), profile_path(current_user) %></li>
+                  <li><%= link_to t(".nav.user.log_out"), session_path('me'), method: :delete %></li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+          <footer class="row">
+            <div class="columns"><hr />
+              <div class="row">
+                <div class="columns">
+                  <p><%= t("footer.copyright") %></p>
+                </div>
+                <div class="columns">
+                  <ul class="inline-list right">
+                    <li><a href="https://twitter.com/Stronglifters/">Twitter</a></li>
+                    <li><a href="https://github.com/stronglifters">Github</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </footer>
+          <!-- end main content -->
+        </div>
+
+      <!-- close wrapper, no more content after this -->
       </div>
     </div>
-  </footer>
-  <!-- End Footer -->
   </body>
-</html>
+</html>
\ No newline at end of file