Merge pull request #7 from beatriceo/frontend-setup

Frontend setup

app/assets/stylesheets/application.scss

@@ -2,6 +2,7 @@
 @import "config/fonts";
 @import "config/colors";
 @import "config/bootstrap_variables";
+@import "config/subtitles";
 
 // External libraries
 @import "bootstrap-sprockets";

app/assets/stylesheets/components/_navbar.scss

@@ -1,77 +1,59 @@
-/* Main navbar */
+.polyglot-navbar {
-.navbar-wagon {
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.07),0 1px 0 0 rgba(0,0,0,0.03);
-  background: white;
-  transition: all 0.3s ease;
-  height: 70px;
-  padding: 0px 30px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  width: 100vw;
+  height: 3.5em;
+  background: $navbar-background;
+
+  .logo {
+    color: $primary;
+    margin-left: 1em;
+
+    font-size: 2em;
+    font-weight: bold;
   }
 
-/* Logo */
-.navbar-wagon-brand img {
-  height: 50px;
-}
 
-/* User Avatar */
+  .right-align {
-.navbar-wagon .avatar {
+    height: 100%;
-  height: 35px;
+    width: 16em;
-  width: 35px;
+    margin-right: 5em;
-  border-radius: 50%;
-}
-
-/* Right section */
-.navbar-wagon-right {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    .links {
+      display: flex;
+      height: inherit;
+      div {
+        height: inherit;
+        display: flex;
+        align-items: center;
+        border-bottom: 5px solid transparent;
+
+        &:first-child {
+          margin-right: 1em;
         }
 
-/* Basic navbar item */
+        &.active {
-.navbar-wagon-item {
+          border-bottom: 5px solid $primary;
-  cursor: pointer;
+          color: white;
-  padding: 0 20px;
-}
 
-/* Navbar link */
+           a {
-.navbar-wagon-link {
+            color: white;
-  color: #616668;
-  font-size: 14px;
            }
-.navbar-wagon-link:hover {
+        }
-  color: #da552f;
+        a {
+          color: #C4C4C4;
           text-decoration: none;
         }
+      }
+    }
+  }
 
-/* Dropdown menu */
+  .profile {
-.navbar-wagon-dropdown-menu {
+    img {
-  margin-top: 15px;
+      width: 3.25em;
-  box-shadow: 1px 1px 4px #E6E6E6;
-  border-color: #E6E6E6;
     }
-.navbar-wagon-dropdown-menu li > a {
-  transition: color 0.3s ease;
-  font-weight: lighter !important;
-  color: #999999 !important;
-  font-size: 15px !important;
-  line-height: 22px !important;
-  padding: 10px 20px;
   }
-.navbar-wagon-dropdown-menu li > a:hover {
-  background: transparent !important;
-  color: black !important;
-}
-.navbar-wagon-dropdown-menu:before {
-  content: ' ';
-  height: 10px;
-  width: 10px;
-  position: absolute;
-  right: 10px;
-  top: -6px;
-  background-color: white;
-  transform: rotate(45deg);
-  border-left: 1px solid #E6E6E6;
-  border-top: 1px solid #E6E6E6;
 }

app/assets/stylesheets/config/_bootstrap_variables.scss

@@ -11,11 +11,12 @@ $font-size-base: 18px;
 
 // Colors
 $gray-base:       $gray;
-$brand-primary:   $blue;
+$brand-primary:   $primary;
 $brand-success:   $green;
 $brand-info:      $yellow;
 $brand-danger:    $red;
 $brand-warning:   $orange;
+$brand-secondary: $secondary;
 
 // Buttons & inputs' radius
 $border-radius-base:  2px;

app/assets/stylesheets/config/_colors.scss

@@ -8,3 +8,9 @@ $orange: #E67E22;
 $green: #32B796;
 $gray: #000000;
 $light-gray: #F4F4F4;
+
+$primary: #F55E4F;
+$secondary: #5ED17E;
+$background: #33333D;
+$card-backround: #464650;
+$navbar-background: #1F1F29;

app/assets/stylesheets/config/_subtitles.scss

@@ -0,0 +1,3 @@
+$subtitle-background: #000000;
+$subtitle-text: #FFFFFF;
+$subtitle-font: "Comic Sans MS"

app/views/shared/_navbar.html.erb

@@ -1,58 +1,15 @@
-<div class="navbar-wagon">
+<div class="polyglot-navbar">
-  <!-- Logo -->
+  <div class="logo">
-  <%= link_to root_path, class: "navbar-wagon-brand" do %>
+      Polyglot
-    <%= image_tag "logo.png", height: 50 %>
-  <% end %>
-
-  <!-- Right Navigation -->
-  <div class="navbar-wagon-right hidden-xs hidden-sm">
-
-    <% if user_signed_in? %>
-
-      <!-- Links when logged in -->
-      <%= link_to "Host", "#", class: "navbar-wagon-item navbar-wagon-link" %>
-      <%= link_to "Trips", "#", class: "navbar-wagon-item navbar-wagon-link" %>
-      <%= link_to "Messages", "#", class: "navbar-wagon-item navbar-wagon-link" %>
-
-      <!-- Avatar with dropdown menu -->
-      <div class="navbar-wagon-item">
-        <div class="dropdown">
-          <%= image_tag "http://kitt.lewagon.com/placeholder/users/ssaunier", class: "avatar dropdown-toggle", id: "navbar-wagon-menu", "data-toggle" => "dropdown" %>
-          <ul class="dropdown-menu dropdown-menu-right navbar-wagon-dropdown-menu">
-            <li>
-              <%= link_to "#" do %>
-                <i class="fa fa-user"></i> <%= t(".profile", default: "Profile") %>
-              <% end %>
-            </li>
-            <li>
-              <%= link_to "#" do %>
-                <i class="fa fa-cog"></i>  <%= t(".settings", default: "Settings") %>
-              <% end %>
-            </li>
-            <li>
-              <%= link_to destroy_user_session_path, method: :delete do %>
-                <i class="fa fa-sign-out"></i>  <%= t(".sign_out", default: "Log out") %>
-              <% end %>
-            </li>
-          </ul>
-        </div>
-      </div>
-    <% else %>
-      <!-- Login link (when logged out) -->
-      <%= link_to t(".sign_in", default: "Login"), new_user_session_path, class: "navbar-wagon-item navbar-wagon-link" %>
-    <% end %>
   </div>
 
-  <!-- Dropdown list appearing on mobile only -->
+  <div class="right-align">
-  <div class="navbar-wagon-item hidden-md hidden-lg">
+    <div class="links">
-    <div class="dropdown">
+      <div class="active"><%= link_to "Dashboard", "#" %></div>
-      <i class="fa fa-bars dropdown-toggle" data-toggle="dropdown"></i>
+      <div><%= link_to "Settings", "#" %></div>
-      <ul class="dropdown-menu dropdown-menu-right navbar-wagon-dropdown-menu">
+    </div>
-        <li><a href="#">Some mobile link</a></li>
+    <div class="profile">
-        <li><a href="#">Other one</a></li>
+      <%= image_tag "https://avatars2.githubusercontent.com/u/38472180?v=4", class: "img-circle"%>
-        <li><a href="#">Other one</a></li>
-      </ul>
     </div>
   </div>
 </div>
-