Restyle navigation

nerves-hub · Jun 21, 2019 · 02728c7 · 02728c7
1 parent 3d39f8c
commit 02728c7
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 29 deletions.
diff --git a/apps/nerves_hub_www/assets/css/_navigation.scss b/apps/nerves_hub_www/assets/css/_navigation.scss
@@ -1,13 +1,54 @@
+@media (min-width: 480px) and (max-width: 1000px) {
+  .collapse {
+      display: none !important;
+  }
+}
+
+nav.navbar {
+  padding: 0;
+  min-height: 70px;
+
+}
+
 .navbar-nav {
   padding-left:50px;
-  padding-right:50px;
 }
 
-.navbar-brand img {
-  width: 62px;
-  height: 62px;
+.navbar-brand {
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+  margin-top: 4px;
+  margin-bottom: 4px;
   display: block;
-  margin: auto;
+  img {
+    margin: 2px;
+  }
+}
+
+.circle {
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  background-color: #FFF;
+  border-radius: 50%;
+  width: 58px;
+  height: 58px;
+}
+
+.nav-item button {
+  padding-top:0px;
+  padding-bottom:0px;
+}
+
+.navbar-toggler {
+  margin-right: 10px;
+}
+
+.nav-item.dropdown.switcher{
+  height: 70px;
+  padding-right: 18px;
+  border-right: 1px solid #555;
+  a {
+    margin-top: 14px;
+  }
 }
 
 .nav-item .dropdown-item.org {
@@ -18,16 +59,21 @@
   padding-left: 40px;
 }
 
-.logo-letter {
-  color: whitesmoke;
-  font-size: 24px;
+.dropdown-toggle.user-menu::after {
+  display:none;
 }
 
-.circle
-  {
-    border: 1px solid rgba(255, 255, 255, 0.5);
-    background-color: whitesmoke;
+.dropdown-toggle.user-menu {
+  border-left: 1px solid #555;
+  border-radius: 0px;
+  height: 70px;
+  img {
     border-radius: 50%;
-    width: 75px;
-    height: 75px;
+    border: 1px solid #FFF;
   }
+}
+
+.logo-letter {
+  color: whitesmoke;
+  font-size: 24px;
+}
diff --git a/apps/nerves_hub_www/lib/nerves_hub_www_web/controllers/org_controller.ex b/apps/nerves_hub_www/lib/nerves_hub_www_web/controllers/org_controller.ex
@@ -32,8 +32,6 @@ defmodule NervesHubWWWWeb.OrgController do
         %{assigns: %{current_org: %{id: _conn_id} = org, current_limit: limits}} = conn,
         _params
       ) do
-    IO.inspect(conn)
-
     render(
       conn,
       "edit.html",

diff --git a/apps/nerves_hub_www/lib/nerves_hub_www_web/templates/layout/_navigation.html.eex b/apps/nerves_hub_www/lib/nerves_hub_www_web/templates/layout/_navigation.html.eex
@@ -1,15 +1,10 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow">
+<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top shadow">
     <a class="logo navbar-brand circle d-inline-block align-top ml-3" href="<%= logo_href(@conn) %>">
       <img src="/images/logo.svg" />
     </a>
-
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarToggler">
     <%= if logged_in?(@conn) do %>
-      <div class="navbar-nav mr-auto">
-        <li class="nav-item dropdown">
+      <div class="navbar-nav mr-auto flex-grow">
+        <li class="nav-item dropdown switcher">
           <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             <%= @conn.assigns.current_org.name %><%= if product = product(@conn) do %> | <%= product.name %><% end %>
           </a>
@@ -24,12 +19,13 @@
             <a class="dropdown-item" href="<%= org_path(@conn, :new) %>">New organization</a>
           </div>
         </li>
+        <li class="divider"></li>
       </div>
-      <div class="navbar-nav mr-3">
+      <div class="navbar-nav">
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-            Settings
-          </a>
+          <button class="btn btn-default dropdown-toggle user-menu" type="button" id="menu1" data-toggle="dropdown">
+          <img src="<%= gravatar(@conn) %>">
+          </button>
           <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
             <%= if has_org_role?(@conn.assigns.current_org, @conn.assigns.user, :admin) do %>
               <a class="dropdown-item" href="<%= org_path(@conn, :edit, @conn.assigns.current_org)%>">Organization settings</a>
@@ -53,5 +49,4 @@
       <a class="btn btn-outline-success ml-3" href="<%= session_path(@conn, :new)%>">Login</a>
     </div>
   <% end %>
-  </div>
 </nav>
diff --git a/apps/nerves_hub_www/lib/nerves_hub_www_web/views/layout_view.ex b/apps/nerves_hub_www/lib/nerves_hub_www_web/views/layout_view.ex
@@ -6,6 +6,9 @@ defmodule NervesHubWWWWeb.LayoutView do
   alias NervesHubWebCore.Products
   alias NervesHubWebCore.Products.Product
 
+  @gravatar_url "https://secure.gravatar.com/avatar"
+  @gravatar_size 54
+
   def product(%{assigns: %{product: %Product{} = product}}) do
     product
   end
@@ -14,6 +17,11 @@ defmodule NervesHubWWWWeb.LayoutView do
     nil
   end
 
+  def gravatar(%{assigns: %{user: %{email: email}}}) do
+    hash = :crypto.hash(:md5, String.downcase(email)) |> Base.encode16(case: :lower)
+    "#{@gravatar_url}/#{hash}?s=#{@gravatar_size}"
+  end
+
   def user_orgs(%{assigns: %{user: %User{} = user}}) do
     Accounts.get_user_orgs_with_product_role(user, :read)
   end