From 2f96ee778d15550891cea502d7f0e79a6d904b28 Mon Sep 17 00:00:00 2001 From: Maxim Colls Date: Tue, 8 May 2018 18:55:53 +0100 Subject: [PATCH 1/4] Custumized boostrap and changed the primary color --- app/assets/stylesheets/_bootstrap-custom.scss | 57 +++++++++++++++++++ .../stylesheets/_bootstrap-overrides.scss | 1 + app/assets/stylesheets/_variables.scss | 27 +++++++++ app/assets/stylesheets/application.css.scss | 40 +++---------- 4 files changed, 93 insertions(+), 32 deletions(-) create mode 100644 app/assets/stylesheets/_bootstrap-custom.scss create mode 100644 app/assets/stylesheets/_bootstrap-overrides.scss create mode 100644 app/assets/stylesheets/_variables.scss diff --git a/app/assets/stylesheets/_bootstrap-custom.scss b/app/assets/stylesheets/_bootstrap-custom.scss new file mode 100644 index 000000000..a43f20dea --- /dev/null +++ b/app/assets/stylesheets/_bootstrap-custom.scss @@ -0,0 +1,57 @@ +/*! + * Bootstrap v3.3.7 (http://getbootstrap.com) + * Copyright 2011-2016 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +// Core variables and mixins +@import "bootstrap-overrides"; +@import "bootstrap/variables"; +@import "bootstrap/mixins"; + +// Reset and dependencies +@import "bootstrap/normalize"; +@import "bootstrap/print"; +@import "bootstrap/glyphicons"; + +// Core CSS +@import "bootstrap/scaffolding"; +@import "bootstrap/type"; +@import "bootstrap/code"; +@import "bootstrap/grid"; +@import "bootstrap/tables"; +@import "bootstrap/forms"; +@import "bootstrap/buttons"; + +// Components +@import "bootstrap/component-animations"; +@import "bootstrap/dropdowns"; +@import "bootstrap/button-groups"; +@import "bootstrap/input-groups"; +@import "bootstrap/navs"; +@import "bootstrap/navbar"; +// @import "bootstrap/breadcrumbs"; +@import "bootstrap/pagination"; +@import "bootstrap/pager"; +@import "bootstrap/labels"; +@import "bootstrap/badges"; +// @import "bootstrap/jumbotron"; +// @import "bootstrap/thumbnails"; +@import "bootstrap/alerts"; +// @import "bootstrap/progress-bars"; +@import "bootstrap/media"; +@import "bootstrap/list-group"; +@import "bootstrap/panels"; +@import "bootstrap/responsive-embed"; +// @import "bootstrap/wells"; +@import "bootstrap/close"; + +// Components w/ JavaScript +@import "bootstrap/modals"; +@import "bootstrap/tooltip"; +// @import "bootstrap/popovers"; +// @import "bootstrap/carousel"; + +// Utility classes +@import "bootstrap/utilities"; +@import "bootstrap/responsive-utilities"; diff --git a/app/assets/stylesheets/_bootstrap-overrides.scss b/app/assets/stylesheets/_bootstrap-overrides.scss new file mode 100644 index 000000000..4ab24d505 --- /dev/null +++ b/app/assets/stylesheets/_bootstrap-overrides.scss @@ -0,0 +1 @@ +$brand-primary: $palette-turkey; diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss new file mode 100644 index 000000000..e4758a205 --- /dev/null +++ b/app/assets/stylesheets/_variables.scss @@ -0,0 +1,27 @@ +// New palette +$palette-turkey: #2797af; +$palette-dark-turkey: #165e6d; +$palette-light-blue: #d9edf7; + +// Old colors +$bg-color: #f5f8fa; +$white: #ffffff; +$border: #e1e8ed; +$menu-disabled: #ddd; +$black: #000; +$form-input-glyph: #555; +$form-input-bg-color: #f5f5f5; +$form-input-button: #2a292a; +$form-input-button-hover: #3a393a; +$form-a-color: gray; +$form-a-hover-color: #333; +$form-login-gray-text: #9b9b9b; +$btn-landing: rgba(255, 255, 255, 0.7); +$btn-landing-hover: rgba(255, 255, 255, 0.9); +$pages-title: #4a4a4a; +$pages-text: #4a4a4a; +$pages-anchor: #4a4a4a; +$pages-anchor-hover: #8a8a8a; +$features-background: #f5f5f5; +$features-separator: #d8d8d8; + diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index bead08185..bc9baa871 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -2,33 +2,9 @@ *= require_self */ +@import "variables"; @import "bootstrap-sprockets"; -@import "bootstrap"; - -$bg-color: #f5f8fa; -$navs-bg-color: #1e1e1e; -$white: #ffffff; -$border: #e1e8ed; -$navs-hover-color: #aaa; -$menu-drop: #333; -$menu-drop-hover: #333; -$menu-disabled: #ddd; -$black: #000; -$form-input-glyph: #555; -$form-input-bg-color: #f5f5f5; -$form-input-button: #2a292a; -$form-input-button-hover: #3a393a; -$form-a-color: gray; -$form-a-hover-color: #333; -$form-login-gray-text: #9b9b9b; -$btn-landing: rgba(255, 255, 255, 0.7); -$btn-landing-hover: rgba(255, 255, 255, 0.9); -$pages-title: #4a4a4a; -$pages-text: #4a4a4a; -$pages-anchor: #4a4a4a; -$pages-anchor-hover: #8a8a8a; -$features-background: #f5f5f5; -$features-separator: #d8d8d8; +@import "bootstrap-custom"; html { font-size:62.5%; @@ -442,7 +418,7 @@ form .checkbox input[type="checkbox"] { } .navbar-static-top { - background-color: $navs-bg-color; + background-color: $palette-turkey; } .navbar-inverse { @@ -458,7 +434,7 @@ form .checkbox input[type="checkbox"] { } .navbar-inverse .navbar-brand a:hover, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { - color: $navs-hover-color; + color: $palette-light-blue; } .navbar-brand { @@ -510,7 +486,7 @@ form .checkbox input[type="checkbox"] { } } .dropdown-menu{ - background: $navs-bg-color; + background: $palette-turkey; border: 0.2rem solid $white; border-top: 0; border-top-left-radius: 0; @@ -525,7 +501,7 @@ form .checkbox input[type="checkbox"] { font-weight: 500; padding: 0.6rem 1.2rem; &:hover{ - background: $menu-drop-hover; + background: $palette-dark-turkey; opacity: 0.8; } &:focus, @@ -578,7 +554,7 @@ form .checkbox input[type="checkbox"] { .landing-page { background: image-url('home_back.jpg') no-repeat center center fixed; - background-color: $navs-bg-color; + background-color: $palette-turkey; background-size: cover; text-align: center; @@ -916,4 +892,4 @@ form .checkbox input[type="checkbox"] { padding: 1em; line-height: 1.6em; } -} \ No newline at end of file +} From 3543b30915f2cc49c21d2099662258175288f05a Mon Sep 17 00:00:00 2001 From: Maxim Colls Date: Tue, 8 May 2018 19:24:28 +0100 Subject: [PATCH 2/4] Removed bootstrap overriding hacks and used variables instead --- app/assets/stylesheets/_bootstrap-overrides.scss | 8 ++++++++ app/assets/stylesheets/application.css.scss | 12 ------------ 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/_bootstrap-overrides.scss b/app/assets/stylesheets/_bootstrap-overrides.scss index 4ab24d505..e87e79863 100644 --- a/app/assets/stylesheets/_bootstrap-overrides.scss +++ b/app/assets/stylesheets/_bootstrap-overrides.scss @@ -1 +1,9 @@ $brand-primary: $palette-turkey; + +$navbar-inverse-brand-hover-color: $palette-light-blue; +$navbar-inverse-brand-color: $white; + +$navbar-inverse-link-color: $white; +$navbar-inverse-link-active-color: $palette-light-blue; +$navbar-inverse-link-active-bg: $palette-turkey; +$navbar-inverse-link-hover-color: $palette-light-blue; diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index bc9baa871..59101a9b3 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -425,18 +425,6 @@ form .checkbox input[type="checkbox"] { border: 0; } -.navbar-inverse .navbar-brand { - color: $white; -} - -.navbar-inverse .navbar-nav > li > a { - color: $white; -} - -.navbar-inverse .navbar-brand a:hover, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus { - color: $palette-light-blue; -} - .navbar-brand { font-size: 2.4rem; font-weight: 600; From c1a04a60e95007727349ee9f029adeb3ac341894 Mon Sep 17 00:00:00 2001 From: Maxim Colls Date: Tue, 8 May 2018 19:27:53 +0100 Subject: [PATCH 3/4] Removed Tags menu item for non admin users --- app/views/application/_navbar.html.erb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/application/_navbar.html.erb b/app/views/application/_navbar.html.erb index f6520881d..27f7d759d 100644 --- a/app/views/application/_navbar.html.erb +++ b/app/views/application/_navbar.html.erb @@ -51,8 +51,8 @@ <%= render 'application/menus/user_list_link' %> <%= render 'application/menus/offers_dashboard_link' %> <%= render 'application/menus/inquiries_list_link' %> - <%= render 'application/menus/offers_by_tag_link' %> <% if current_user.manages? current_organization %> + <%= render 'application/menus/offers_by_tag_link' %> <%= render 'application/menus/organization_reports_menu' %> <%= render 'application/menus/organization_statistics_menu' %> <%= render 'application/menus/organization_listings_menu' %> @@ -63,4 +63,4 @@ -<% end %> \ No newline at end of file +<% end %> From c10b3fb7b974601e3d6b2e399be87629251d3922 Mon Sep 17 00:00:00 2001 From: Maxim Colls Date: Tue, 15 May 2018 22:41:37 +0100 Subject: [PATCH 4/4] Added a comment in custom bootstrap to explain why we have commented lines --- app/assets/stylesheets/_bootstrap-custom.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/stylesheets/_bootstrap-custom.scss b/app/assets/stylesheets/_bootstrap-custom.scss index a43f20dea..4d9e6df45 100644 --- a/app/assets/stylesheets/_bootstrap-custom.scss +++ b/app/assets/stylesheets/_bootstrap-custom.scss @@ -2,6 +2,9 @@ * Bootstrap v3.3.7 (http://getbootstrap.com) * Copyright 2011-2016 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * + * This file lists all the available Bootstrap modules, uncomment + * the modules you want to import */ // Core variables and mixins