From e93f12c22a50f6e1fb878b60bcdbeb93f8aa7e75 Mon Sep 17 00:00:00 2001 From: Jared Cosulich Date: Sun, 26 Feb 2017 14:49:40 -0500 Subject: [PATCH] index with bootstrap --- Gemfile | 3 +- Gemfile.lock | 21 ++---- app/assets/stylesheets/_variables.scss | 7 ++ app/assets/stylesheets/application.css | 15 ---- app/assets/stylesheets/application.scss | 3 + app/assets/stylesheets/scaffolds.scss | 95 +++++++------------------ app/views/layouts/_header.html.haml | 36 ++-------- app/views/layouts/application.html.haml | 14 +++- 8 files changed, 58 insertions(+), 136 deletions(-) create mode 100644 app/assets/stylesheets/_variables.scss delete mode 100644 app/assets/stylesheets/application.css create mode 100644 app/assets/stylesheets/application.scss diff --git a/Gemfile b/Gemfile index d8f91dc9..26cf25d9 100644 --- a/Gemfile +++ b/Gemfile @@ -40,8 +40,7 @@ gem 'jbuilder', '~> 2.5' gem 'haml' gem "therubyracer" -gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS -gem "twitter-bootstrap-rails" +gem 'bootstrap', '~> 4.0.0.alpha6' gem 'jquery-ui-rails' gem 'friendly_id', '~> 5.1.0' diff --git a/Gemfile.lock b/Gemfile.lock index 324659ea..529d2037 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -41,7 +41,12 @@ GEM addressable (2.5.0) public_suffix (~> 2.0, >= 2.0.2) arel (7.1.4) + autoprefixer-rails (6.7.5) + execjs bcrypt (3.1.11) + bootstrap (4.0.0.alpha6) + autoprefixer-rails (>= 6.0.3) + sass (>= 3.4.19) builder (3.2.3) byebug (9.0.6) capybara (2.8.1) @@ -59,7 +64,6 @@ GEM coffee-script-source execjs coffee-script-source (1.12.2) - commonjs (0.2.7) concurrent-ruby (1.0.4) database_cleaner (1.5.3) debug_inspector (0.0.2) @@ -92,13 +96,6 @@ GEM railties (>= 3.2.16) launchy (2.4.3) addressable (~> 2.3) - less (2.6.0) - commonjs (~> 0.2.7) - less-rails (2.7.1) - actionpack (>= 4.0) - less (~> 2.6.0) - sprockets (> 2, < 4) - tilt libv8 (3.16.14.17) listen (3.0.8) rb-fsevent (~> 0.9, >= 0.9.4) @@ -216,11 +213,6 @@ GEM turbolinks (5.0.1) turbolinks-source (~> 5) turbolinks-source (5.0.0) - twitter-bootstrap-rails (3.2.2) - actionpack (>= 3.1) - execjs (>= 2.2.2, >= 2.2) - less-rails (>= 2.5.0) - railties (>= 3.1) tzinfo (1.2.2) thread_safe (~> 0.1) uglifier (3.0.4) @@ -242,6 +234,7 @@ PLATFORMS ruby DEPENDENCIES + bootstrap (~> 4.0.0.alpha6) byebug capybara coffee-rails (~> 4.2) @@ -253,7 +246,6 @@ DEPENDENCIES jquery-rails jquery-ui-rails launchy - less-rails listen (~> 3.0.5) newrelic_rpm omniauth @@ -270,7 +262,6 @@ DEPENDENCIES spring-watcher-listen (~> 2.0.0) therubyracer turbolinks (~> 5) - twitter-bootstrap-rails tzinfo-data uglifier (>= 1.3.0) web-console diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss new file mode 100644 index 00000000..461d39d6 --- /dev/null +++ b/app/assets/stylesheets/_variables.scss @@ -0,0 +1,7 @@ +$primary-color: #9e9e9e; // grey +$darkgrey: #212121; +$lightgrey: #e0e0e0; +$lightgreen: #C8E6C9; // lightgreen +$lightred: #FFCDD2; // lightred +$lightyellow: #fcf5e2; // lightyellow +$orange: #ffab40; // orange diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index 0ebd7fe8..00000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,15 +0,0 @@ -/* - * This is a manifest file that'll be compiled into application.css, which will include all the files - * listed below. - * - * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, - * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. - * - * You're free to add application-wide styles to this file and they'll appear at the bottom of the - * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS - * files in this directory. Styles in this file should be added after the last require_* statement. - * It is generally better to create a new file per style scope. - * - *= require_tree . - *= require_self - */ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss new file mode 100644 index 00000000..b709ee86 --- /dev/null +++ b/app/assets/stylesheets/application.scss @@ -0,0 +1,3 @@ +@import "bootstrap"; +@import "scaffolds"; +@import "recipients"; diff --git a/app/assets/stylesheets/scaffolds.scss b/app/assets/stylesheets/scaffolds.scss index 4ce42667..3508b887 100644 --- a/app/assets/stylesheets/scaffolds.scss +++ b/app/assets/stylesheets/scaffolds.scss @@ -1,89 +1,46 @@ +@import 'variables'; + body { - background-color: #fff; color: #333; - font-family: verdana, arial, helvetica, sans-serif; - font-size: 13px; - line-height: 18px; - margin: 33px; -} - -p, ol, ul, td { - font-family: verdana, arial, helvetica, sans-serif; - font-size: 13px; + font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 18px; margin: 33px; } -pre { - background-color: #eee; - padding: 10px; - font-size: 11px; -} - -a { - color: #000; - - &:visited { - color: #666; +.notice, .alert, .subscription, .highlight { + margin-top: 12px; + padding: 24px; + text-align: center; + border-radius: 12px; + a, a:hover, a:visited { + text-decoration: underline; } - - &:hover { - color: #fff; - background-color: #000; - } -} - -th { - padding-bottom: 5px; -} - -td { - padding-bottom: 7px; - padding-left: 5px; - padding-right: 5px; } -div { - &.field, &.actions { - margin-bottom: 10px; - } +.notice { + background-color: $lightgreen; } -#notice { - color: green; +.alert { + background-color: $lightred; } -.field_with_errors { - padding: 2px; - background-color: red; - display: table; +.highlight { + background-color: $lightyellow; } -#error_explanation { - width: 450px; - border: 2px solid red; - padding: 7px; - padding-bottom: 0; - margin-bottom: 20px; - background-color: #f0f0f0; - - h2 { - text-align: left; - font-weight: bold; - padding: 5px 5px 5px 15px; - font-size: 12px; - margin: -7px; - margin-bottom: 0; - background-color: #c00; - color: #fff; - } +header { + border-bottom: 1px solid $primary-color; + margin-bottom: 30px; - ul li { - font-size: 12px; - list-style: square; + a, a:hover, a:visited { + color: $darkgrey; } } -label { - display: block; +footer { + height: 90px; + border-top: 1px solid #ccc; + padding-top: 12px; + clear: both; } diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index b2209df7..ac2b15f0 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -1,38 +1,10 @@ %header.row - .title.col.s9.m11.l8 - .hide-on-small-only - %h5= link_to('Thoughtful
Recommendations.com'.html_safe, root_path) - .hide-on-med-and-up - %h6= link_to('Thoughtful
Recommendations.com'.html_safe, root_path) + .title.col-sm-8 + %h2= link_to('EdContext'.html_safe, root_path) - .navigation.col.hide-on-med-and-down.l4.right-align + .navigation.col-sm-4.text-right - if current_user - - unless @limited_header - - if current_user.profile.blank? - = link_to 'Create Profile', new_profile_path, class: 'btn btn-small grey waves-effect waves-light ' - - else - = link_to 'My Profile', direct_profile_path(current_user.profile), class: 'btn btn-small grey waves-effect waves-light ' - = link_to 'My Bucketlist', bucketlist_path, class: 'btn btn-small grey waves-effect waves-light ' - = link_to 'Sign Out', destroy_user_session_path, rel: "nofollow", method: :delete, class: 'btn btn-small grey waves-effect waves-light ' - else = link_to 'Login', new_user_session_path, class: 'btn btn-small grey waves-effect waves-light ' - = link_to 'Contribute / Sign Up', contribute_profile_recommendation_path, class: 'btn btn-small grey waves-effect waves-light ' - - .col.s3.m1.hide-on-large-only.right-align - = link_to ''.html_safe, '#', data: {activates: 'mobile-nav'}, class: 'button-collapse' - #mobile-nav.side-nav - %ul - - if current_user - - unless @limited_header - - if current_user.profile.present? - %li= link_to 'My Profile', direct_profile_path(current_user.profile) - %li= link_to 'My Bucketlist', bucketlist_path - %li= link_to 'Add Something', new_profile_recommendation_path - - else - %li= link_to 'Create Profile', new_profile_path - - %li= link_to 'Sign Out', destroy_user_session_path, rel: "nofollow", method: :delete - - else - %li= link_to 'Login', new_user_session_path - %li= link_to 'Contribute / Sign Up', contribute_profile_recommendation_path + = link_to 'Register', new_user_registration_path, class: 'btn btn-small grey waves-effect waves-light ' diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index eee28d59..586eb286 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -5,8 +5,16 @@ %title Edcontext = csrf_meta_tags = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' + = stylesheet_link_tag 'https://fonts.googleapis.com/css?family=Roboto:300' = javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %body - %p.notice= notice - %p.alert= alert - = yield + .container + = render partial: 'layouts/header' + + - if notice.present? + %p.notice= notice + + - if alert.present? + %p.alert= alert + + = yield