paoda
/
polyglot
mirror of https://github.com/beatriceo/polyglot.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #7 from beatriceo/frontend-setup 

Frontend setup
This commit is contained in:
Beatrice Olivera 2018-08-28 12:38:41 +01:00 committed by GitHub
parent 4e1d0559ed b44963ee4c
commit d12fa2a46b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 71 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/application.scss
View File

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

116
app/assets/stylesheets/components/_navbar.scss
View File

@ -1,77 +1,59 @@
/* Main 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;
.polyglot-navbar {
display: flex;
align-items: center;
justify-content: space-between;
}
width: 100vw;
height: 3.5em;
background: $navbar-background;
/* Logo */
.navbar-wagon-brand img {
height: 50px;
}
.logo {
color: $primary;
margin-left: 1em;
/* User Avatar */
.navbar-wagon .avatar {
height: 35px;
width: 35px;
border-radius: 50%;
}
font-size: 2em;
font-weight: bold;
}
/* Right section */
.navbar-wagon-right {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Basic navbar item */
.navbar-wagon-item {
cursor: pointer;
padding: 0 20px;
}
.right-align {
height: 100%;
width: 16em;
margin-right: 5em;
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;
/* Navbar link */
.navbar-wagon-link {
color: #616668;
font-size: 14px;
}
.navbar-wagon-link:hover {
color: #da552f;
text-decoration: none;
}
&:first-child {
margin-right: 1em;
}
/* Dropdown menu */
.navbar-wagon-dropdown-menu {
margin-top: 15px;
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;
&.active {
border-bottom: 5px solid $primary;
color: white;
a {
color: white;
}
}
a {
color: #C4C4C4;
text-decoration: none;
}
}
}
}
.profile {
img {
width: 3.25em;
}
}
}

3
app/assets/stylesheets/config/_bootstrap_variables.scss
View File

@ -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;

6
app/assets/stylesheets/config/_colors.scss
View File

@ -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;

3
app/assets/stylesheets/config/_subtitles.scss Normal file
View File

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

63
app/views/shared/_navbar.html.erb
View File

@ -1,58 +1,15 @@
<div class="navbar-wagon">
<!-- Logo -->
<%= link_to root_path, class: "navbar-wagon-brand" do %>
<%= 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 class="polyglot-navbar">
<div class="logo">
Polyglot
</div>
<!-- Dropdown list appearing on mobile only -->
<div class="navbar-wagon-item hidden-md hidden-lg">
<div class="dropdown">
<i class="fa fa-bars dropdown-toggle" data-toggle="dropdown"></i>
<ul class="dropdown-menu dropdown-menu-right navbar-wagon-dropdown-menu">
<li><a href="#">Some mobile link</a></li>
<li><a href="#">Other one</a></li>
<li><a href="#">Other one</a></li>
</ul>
<div class="right-align">
<div class="links">
<div class="active"><%= link_to "Dashboard", "#" %></div>
<div><%= link_to "Settings", "#" %></div>
</div>
<div class="profile">
<%= image_tag "https://avatars2.githubusercontent.com/u/38472180?v=4", class: "img-circle"%>
</div>
</div>
</div>