Add dropdown for chat and forum (TheOdinProject#855)

* Add section for forum to sidecar * Add styling for floating drop menu * Add js component for floating menu * Remove d none class declaration * Fix tooltip showing on main btn hover * Change const to var for floatingMenu * Refactor floating menu animation to pure css * Refactor bootstrapScripts * Change responsive media class to floating dropdown * Add community dropdown to navbar * Scope user hover dropdown with js dropdown class * Add community dropdown collapse to navbar modal * Rename collapse id from example to community * Add forum link * Refactor floating menu with bem methodology * Remove collapse for simple links
BideoWego · Jan 24, 2018 · 7c910c0 · 7c910c0
1 parent 44edce0
commit 7c910c0
Show file tree

Hide file tree

Showing 9 changed files with 115 additions and 33 deletions.
diff --git a/app/assets/javascripts/bootstrapScripts.js b/app/assets/javascripts/bootstrapScripts.js
@@ -1,6 +1,4 @@
-$(document).on('turbolinks:load', setup);
-
-function setup() {
+$(document).ready(function() {
   $('a[rel=popover]').popover();
-  $('.tooltip, a[rel=tooltip], [data-toggle=tooltip]').tooltip();
-}
+  $('.tooltip, a[rel=tooltip], [data-toggle="tooltip"]').tooltip();
+});
diff --git a/app/assets/javascripts/navbar.js b/app/assets/javascripts/navbar.js
@@ -3,7 +3,7 @@ document.addEventListener('turbolinks:load', function() {
   var navToggle = document.querySelector('.navbar-toggler')
   var modalClose = document.querySelector('.close')
 
-  var userDropdown = document.querySelector('.dropdown')
+  var userDropdown = document.querySelector('.js-dropdown')
 
   // Clears Logo text in modal
   if(navToggle && logoText) {

diff --git a/app/assets/stylesheets/components/gitter_floating.scss b/app/assets/stylesheets/components/gitter_floating.scss
@@ -1,21 +1,57 @@
-.chat-floating-btn {
-  background: $button-primary;
-  border-radius: 50%;
+.floating-dropdown {
   bottom: 20px;
-  box-shadow: 0 0 15px 2px rgba(0,0,0,0.2);
-  cursor: pointer;
-  padding: 1em;
   position: fixed;
-  right: 20px;
   z-index: 1000;
+  right: 20px;
 
-  &:hover {
-    box-shadow: 0 0 15px 6px rgba(0,0,0,0.2);
+  @media(max-width: 480px) {
+    display: none;
   }
 
-  .fa.fa-comments {
-    font-size: 2em;
-    color: $white;
+  .floating-dropdown__item {
+    background: $button-primary;
+    border-radius: 50%;
+    box-shadow: 0 0 15px 2px rgba(0,0,0,0.2);
+    padding: 1em;
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: 0 0 15px 6px rgba(0,0,0,0.2);
+    }
+
+    &.main-floating-btn {
+      position: relative;
+      z-index: 2;
+
+      .fa.fa-comments {
+        color: $white;
+        font-size: 2em;
+      }
+    }
+
+    &.floating-dropdown--hidden-item {
+      margin: 0 0 -50px 0;
+      opacity: 0;
+      transition: margin 1s ease-out, opacity 0.5s;
+      padding: 0.5em;
+      margin-right: 0.6em;
+      margin-left: 0.6em;
+      z-index: 1;
+      position: relative;
+
+      .fa {
+        color: $white;
+        font-size: 1.2em;
+      }
+    }
+  }
+}
+
+.floating-dropdown:hover {
+  .floating-dropdown--hidden-item {
+    margin: 0 9px 20px 9px;
+    opacity: 1;
+    transition: margin 1s, opacity 1s;
   }
 }
 
@@ -28,9 +64,3 @@
 .gitter-chat-embed-action-bar-item:active {
   filter: none;
 }
-
-@media(max-width: 480px) {
-  .chat-floating-btn {
-    display: none;
-  }
-}
diff --git a/app/assets/stylesheets/components/navbar.scss b/app/assets/stylesheets/components/navbar.scss
@@ -107,6 +107,10 @@
       border-bottom:2px solid $light-grey;
     }
 
+    .dropdown-menu-top {
+      margin-top: -30px;
+    }
+
     .menu-options li {
       vertical-align: top;
       font-family: $body-fonts;

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -9,6 +9,10 @@ def github_link(extension='')
     "https://github.com/TheOdinProject/#{extension}"
   end
 
+  def forum_link
+    'http://forum.theodinproject.com'
+  end
+
   def title(input=nil)
     if input
       content_for(:title) { input + ' | The Odin Project' }

diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
@@ -17,8 +17,22 @@
         <li class="nav-item <%= active_class(courses_path) %>">
           <%= link_to 'Curriculum', courses_path(ref: 'homenav'), class: 'nav-link' %>
         </li>
-        <li class="nav-item">
-          <%= link_to 'Chat', chat_link, class: 'nav-link gitter-chat-link', target: '_blank' %>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Community
+          </a>
+          <ul class="dropdown-menu dropdown-menu-right menu-options pb-0">
+            <li>
+              <%= link_to forum_link, class: "drop-down-link accent" do %>
+                <span class="drop-down-logo fa fa-users mt-2"></span>Forum
+              <% end %>
+            </li>
+            <li>
+              <%= link_to chat_link, class: 'drop-down-link accent' do %>
+                <span class="drop-down-logo fa fa-comment mt-2"></span>Chat
+              <% end %>
+            </li>
+          </ul>
         </li>
 
         <li class="divider nav-link">|</li>
@@ -30,8 +44,22 @@
         <li class="nav-item <%= active_class(courses_path) %>">
           <%= link_to 'Curriculum', courses_path(ref: 'homenav'), class: 'nav-link' %>
         </li>
-        <li class="nav-item">
-          <%= link_to 'Chat', chat_link, class: 'nav-link gitter-chat-link', target: '_blank' %>
+        <li class="nav-item dropdown">
+          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Community
+          </a>
+          <ul class="dropdown-menu dropdown-menu-right menu-options pb-0">
+            <li>
+              <%= link_to forum_link, class: "drop-down-link accent" do %>
+                <span class="drop-down-logo fa fa-users mt-2"></span>Forum
+              <% end %>
+            </li>
+            <li>
+              <%= link_to chat_link, class: 'drop-down-link accent' do %>
+                <span class="drop-down-logo fa fa-comment mt-2"></span>Chat
+              <% end %>
+            </li>
+          </ul>
         </li>
         <li class="nav-item <%= active_class(about_path) %>">
           <%= link_to 'About', about_path(ref: 'homenav'), class: 'nav-link' %>

diff --git a/app/views/shared/_navbar_modal.html.erb b/app/views/shared/_navbar_modal.html.erb
@@ -19,7 +19,9 @@
           <li class="nav-item <%= active_class(courses_path) %>">
             <%= link_to 'Curriculum', courses_path(ref: 'homenav'), class: 'nav-link' %>
           </li>
-
+          <li class="nav-item">
+            <%= link_to 'Forum', forum_link, class: 'nav-link' %>
+          </li>
           <li class="nav-item">
             <%= link_to 'Chat', chat_link, class: 'nav-link gitter-chat-link', target: '_blank' %>
           </li>
@@ -39,7 +41,13 @@
           </li>
 
           <li class="nav-item">
-            <%= link_to 'Chat', chat_link, class: 'nav-link gitter-chat-link', target: '_blank' %>
+            <a class="nav-link dropdown-toggle" data-toggle="collapse" href="#collapseCommunity" role="button" aria-expanded="false" aria-controls="collapseCommunity">
+              Community
+            </a>
+            <div class="collapse" id="collapseCommunity">
+              <%= link_to 'Forum', '#', class: 'nav-link' %>
+              <%= link_to 'Chat', chat_link, class: 'nav-link gitter-chat-link', target: '_blank' %>
+            </div>
           </li>
 
           <li class="nav-item <%= active_class(about_path) %>">

diff --git a/app/views/shared/_sidecar.html.erb b/app/views/shared/_sidecar.html.erb
@@ -1,5 +1,15 @@
-<div class="chat-floating-btn js-gitter-toggle-chat-button">
-  <i class="fa fa-comments" aria-hidden="true"></i>
+<div class="floating-dropdown">
+  <div class="floating-dropdown__item floating-dropdown--hidden-item js-gitter-toggle-chat-button text-center" data-toggle='tooltip' data-placement='left' title='Chat'>
+    <i class="fa fa-comment"></i>
+  </div>
+  <div class="floating-dropdown__item floating-dropdown--hidden-item text-center" data-toggle='tooltip' data-placement='left' title='Forum'>
+    <%= link_to forum_link do %>
+      <i class="fa fa-group" aria-hidden="true"></i>
+    <% end %>
+  </div>
+  <div class="floating-dropdown__item main-floating-btn">
+    <i class="fa fa-comments" aria-hidden="true"></i>
+  </div>
 </div>
 
 <script>

diff --git a/app/views/shared/_user_dropdown.html.erb b/app/views/shared/_user_dropdown.html.erb
@@ -1,4 +1,4 @@
-<div class="dropdown">
+<div class="dropdown js-dropdown">
   <button class="avatar" aria-label="User Menu" style="background-image:url(<%= avatar_path(current_user.avatar) %>)" data-toggle="dropdown"></button>
   <ul class="dropdown-menu menu-options">
     <li id="dash-active">