From 5a49b0fd9af3f8bc77a0424657e7376f32a679d9 Mon Sep 17 00:00:00 2001 From: Ethan Fraenkel Date: Tue, 28 Aug 2018 11:05:06 +0200 Subject: [PATCH 1/4] Completed basic colour setup --- app/assets/stylesheets/application.scss | 1 + app/assets/stylesheets/config/_colors.scss | 6 ++++++ app/assets/stylesheets/config/_subtitles.scss | 3 +++ 3 files changed, 10 insertions(+) create mode 100644 app/assets/stylesheets/config/_subtitles.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 6168e3f..f2e3761 100755 --- a/app/assets/stylesheets/application.scss +++ b/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"; diff --git a/app/assets/stylesheets/config/_colors.scss b/app/assets/stylesheets/config/_colors.scss index b5066cd..40bd4cc 100644 --- a/app/assets/stylesheets/config/_colors.scss +++ b/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; diff --git a/app/assets/stylesheets/config/_subtitles.scss b/app/assets/stylesheets/config/_subtitles.scss new file mode 100644 index 0000000..4dc0374 --- /dev/null +++ b/app/assets/stylesheets/config/_subtitles.scss @@ -0,0 +1,3 @@ +$subtitle-background: #000000; +$subtitle-text: #FFFFFF; +$subtitle-font: "Comic Sans MS" From 3108fcbd1546b23e7d5f23dca2e457069331fdd9 Mon Sep 17 00:00:00 2001 From: Ethan Fraenkel Date: Tue, 28 Aug 2018 11:06:28 +0200 Subject: [PATCH 2/4] Added ';' --- app/assets/stylesheets/application.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index f2e3761..2b5cfc4 100755 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -2,7 +2,7 @@ @import "config/fonts"; @import "config/colors"; @import "config/bootstrap_variables"; -@import "config/subtitles" +@import "config/subtitles"; // External libraries @import "bootstrap-sprockets"; From 644b6cb411919ef64a06d1849f5d5c7a635f29b1 Mon Sep 17 00:00:00 2001 From: Ethan Fraenkel Date: Tue, 28 Aug 2018 12:18:23 +0200 Subject: [PATCH 3/4] Basic Navbar working --- .../stylesheets/components/_navbar.scss | 116 ++++++++---------- app/views/shared/_navbar.html.erb | 63 ++-------- 2 files changed, 59 insertions(+), 120 deletions(-) diff --git a/app/assets/stylesheets/components/_navbar.scss b/app/assets/stylesheets/components/_navbar.scss index 36b94c4..4a53bc0 100644 --- a/app/assets/stylesheets/components/_navbar.scss +++ b/app/assets/stylesheets/components/_navbar.scss @@ -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; + } + } } diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb index f1a6324..d8081b7 100644 --- a/app/views/shared/_navbar.html.erb +++ b/app/views/shared/_navbar.html.erb @@ -1,58 +1,15 @@ -
- - <%= link_to root_path, class: "navbar-wagon-brand" do %> - <%= image_tag "logo.png", height: 50 %> - <% end %> - - -