From 75be941a9029be72b8d29c214651e55fac6c7dd4 Mon Sep 17 00:00:00 2001 From: Rich Bowman Date: Fri, 18 Apr 2014 18:37:06 -0400 Subject: [PATCH] Add some styling --- Gemfile | 7 +- Gemfile.lock | 13 ++ app/assets/stylesheets/_global.scss | 114 ++++++++++++++++++ app/assets/stylesheets/application.css | 13 -- app/assets/stylesheets/application.css.scss | 4 + app/assets/stylesheets/bitters/_bitters.scss | 16 +++ app/assets/stylesheets/bitters/_flashes.scss | 11 ++ app/assets/stylesheets/bitters/_forms.scss | 95 +++++++++++++++ .../stylesheets/bitters/_grid-settings.scss | 14 +++ app/assets/stylesheets/bitters/_lists.scss | 31 +++++ app/assets/stylesheets/bitters/_tables.scss | 22 ++++ .../stylesheets/bitters/_typography.scss | 104 ++++++++++++++++ .../stylesheets/bitters/_variables.scss | 44 +++++++ .../stylesheets/bitters/extends/_base.scss | 1 + .../stylesheets/bitters/extends/_button.scss | 7 ++ .../stylesheets/bitters/mixins/_base.scss | 1 + .../stylesheets/bitters/mixins/_flash.scss | 15 +++ app/models/proficiency.rb | 8 +- app/views/dashboards/show.html.erb | 10 +- app/views/layouts/application.html.erb | 34 ++++-- app/views/proficiencies/index.html.erb | 2 +- app/views/users/show.html.erb | 10 +- 22 files changed, 533 insertions(+), 43 deletions(-) create mode 100644 app/assets/stylesheets/_global.scss delete mode 100644 app/assets/stylesheets/application.css create mode 100644 app/assets/stylesheets/application.css.scss create mode 100644 app/assets/stylesheets/bitters/_bitters.scss create mode 100644 app/assets/stylesheets/bitters/_flashes.scss create mode 100644 app/assets/stylesheets/bitters/_forms.scss create mode 100644 app/assets/stylesheets/bitters/_grid-settings.scss create mode 100644 app/assets/stylesheets/bitters/_lists.scss create mode 100644 app/assets/stylesheets/bitters/_tables.scss create mode 100644 app/assets/stylesheets/bitters/_typography.scss create mode 100644 app/assets/stylesheets/bitters/_variables.scss create mode 100644 app/assets/stylesheets/bitters/extends/_base.scss create mode 100644 app/assets/stylesheets/bitters/extends/_button.scss create mode 100644 app/assets/stylesheets/bitters/mixins/_base.scss create mode 100644 app/assets/stylesheets/bitters/mixins/_flash.scss diff --git a/Gemfile b/Gemfile index 86244ac..cb2fa8d 100644 --- a/Gemfile +++ b/Gemfile @@ -8,14 +8,13 @@ gem 'jquery-rails' gem 'turbolinks' gem 'jbuilder', '~> 1.2' gem 'clearance' +gem 'bourbon' +gem 'neat' +gem 'bitters' group :doc do gem 'sdoc', require: false end -group :development do - gem 'quiet_assets' - gem 'pry-rails' -end group :development do gem 'quiet_assets' diff --git a/Gemfile.lock b/Gemfile.lock index 4003257..5cb367d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -27,6 +27,13 @@ GEM tzinfo (~> 0.3.37) arel (4.0.2) bcrypt (3.1.7) + bitters (0.9.3) + bourbon (>= 3.1) + sass (>= 3.2) + thor + bourbon (3.1.8) + sass (>= 3.2.0) + thor builder (3.1.4) clearance (1.2.1) bcrypt @@ -60,6 +67,9 @@ GEM mime-types (1.25.1) minitest (4.7.5) multi_json (1.9.2) + neat (1.5.0) + bourbon (>= 2.1) + sass (>= 3.2) pg (0.17.1) polyglot (0.3.4) pry (0.9.12.6) @@ -125,10 +135,13 @@ PLATFORMS ruby DEPENDENCIES + bitters + bourbon clearance coffee-rails (~> 4.0.0) jbuilder (~> 1.2) jquery-rails + neat pg pry-rails quiet_assets diff --git a/app/assets/stylesheets/_global.scss b/app/assets/stylesheets/_global.scss new file mode 100644 index 0000000..90a7974 --- /dev/null +++ b/app/assets/stylesheets/_global.scss @@ -0,0 +1,114 @@ +header.navigation { + background-color: #333333; + border-bottom: 1px solid #1a1a1a; + font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + height: 60px; + width: 100%; + z-index: 999; } + +header.navigation .menu-wrapper { + max-width: 68em; + margin-left: auto; + margin-right: auto; + position: relative; + z-index: 9999; } + +header.navigation .menu-wrapper:after { + content: ""; + display: table; + clear: both; } + +header.navigation .logo { + float: left; + max-height: 60px; + padding-left: 1em; + padding-right: 2em; } + +header.navigation .logo img { + max-height: 60px; + padding: .8em 0; } + +header.navigation .menu-button { + color: rgba(255, 255, 255, 0.7); + cursor: pointer; + display: block; + float: right; + font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + font-weight: 700; + line-height: 60px; + margin: 0; + padding-right: 1em; + text-transform: uppercase; } + +@media screen and (min-width: 53.75em) { + header.navigation .menu-button { + display: none; } } +header.navigation .menu-button:hover { + color: white; } + +@media screen and (min-width: 53.75em) { + header.navigation .nav { + float: left; } } +header.navigation ul#navigation-menu { + clear: both; + -webkit-transform-style: preserve-3d; + display: none; + margin: 0 auto; + overflow: hidden; + padding: 0; + width: 100%; + z-index: 9999; } + +@media screen and (min-width: 53.75em) { + header.navigation ul#navigation-menu { + display: inline; + margin: 0; + padding: 0; } } +header.navigation ul li { + background: #333333; + display: block; + line-height: 60px; + overflow: hidden; + padding-right: .8em; + text-align: right; + width: 100%; + z-index: 9999; } + +@media screen and (min-width: 53.75em) { + header.navigation ul li { + background: transparent; + display: inline; + line-height: 60px; + padding-right: 2em; + text-decoration: none; + width: auto; } } +header.navigation ul li a { + font-weight: 400; + color: rgba(255, 255, 255, 0.7); } + +header.navigation ul li a:hover { + color: white; } + +@media screen and (min-width: 53.75em) { + header.navigation .sign-up { + position: absolute; + top: 0px; + right: 0px; + padding-right: 1em; } + + header.navigation .sign-up a { + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + background: #477dca; + border-radius: 0.1875em; + color: white; + font-size: .8em; + font-weight: 800; + padding: .6em 1em; + text-transform: uppercase; } + + header.navigation .sign-up a:hover { + background: #6f99d5; } } + + diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index 3192ec8..0000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,13 +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 vendor/assets/stylesheets of plugins, if any, 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 top of the - * compiled file, but it's generally better to create a new file per style scope. - * - *= require_self - *= require_tree . - */ diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss new file mode 100644 index 0000000..8142418 --- /dev/null +++ b/app/assets/stylesheets/application.css.scss @@ -0,0 +1,4 @@ +@import "bourbon"; +@import "bitters/bitters"; +@import "neat"; +@import "global"; diff --git a/app/assets/stylesheets/bitters/_bitters.scss b/app/assets/stylesheets/bitters/_bitters.scss new file mode 100644 index 0000000..5daef1a --- /dev/null +++ b/app/assets/stylesheets/bitters/_bitters.scss @@ -0,0 +1,16 @@ +// Neat Settings -- uncomment if using Neat +/////////////////////////////////////////////////////////////////////////////// +@import "neat-helpers"; // or "neat/neat-helpers" when not in Rails +@import "grid-settings"; + + +// Bitters +/////////////////////////////////////////////////////////////////////////////// +@import "variables"; +@import "extends/base"; +@import "mixins/base"; +@import "typography"; +@import "forms"; +@import "tables"; +@import "lists"; +@import "flashes"; diff --git a/app/assets/stylesheets/bitters/_flashes.scss b/app/assets/stylesheets/bitters/_flashes.scss new file mode 100644 index 0000000..8714ae8 --- /dev/null +++ b/app/assets/stylesheets/bitters/_flashes.scss @@ -0,0 +1,11 @@ +%flash-error { + @include flash($error-color); +} + +%flash-notice { + @include flash($notice-color); +} + +%flash-success { + @include flash($success-color); +} diff --git a/app/assets/stylesheets/bitters/_forms.scss b/app/assets/stylesheets/bitters/_forms.scss new file mode 100644 index 0000000..db6c75d --- /dev/null +++ b/app/assets/stylesheets/bitters/_forms.scss @@ -0,0 +1,95 @@ +$form-border-color: $base-border-color; +$form-border-color-hover: darken($base-border-color, 10); +$form-border-color-focus: $base-accent-color; +$form-border-radius: $base-border-radius; +$form-box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.06); +$form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7); +$form-font-size: $base-font-size; +$form-font-family: $base-font-family; + +fieldset { + background: lighten($base-border-color, 10); + border: 1px solid $base-border-color; + margin: 0 0 ($base-line-height / 2) 0; + padding: $base-line-height; +} + +input, +label, +select { + display: block; + font-family: $form-font-family; + font-size: $form-font-size; +} + +label { + font-weight: bold; + margin-bottom: $base-line-height / 4; + + &.required:after { + content: "*"; + } + + abbr { + display: none; + } +} + +textarea, +#{$all-text-inputs}, +select[multiple=multiple] { + @include box-sizing(border-box); + @include transition(border-color); + background-color: white; + border-radius: $form-border-radius; + border: 1px solid $form-border-color; + box-shadow: $form-box-shadow; + font-family: $form-font-family; + font-size: $form-font-size; + margin-bottom: $base-line-height / 2; + padding: ($base-line-height / 3) ($base-line-height / 3); + width: 30%; + + &:hover { + border-color: $form-border-color-hover; + } + + &:focus { + border-color: $form-border-color-focus; + box-shadow: $form-box-shadow-focus; + outline: none; + } +} + +textarea { + resize: vertical; +} + +input[type="search"] { + @include appearance(none); +} + +input[type="checkbox"], input[type="radio"] { + display: inline; + margin-right: $base-line-height / 4; +} + +input[type="file"] { + width: 100%; +} + +select { + width: auto; + max-width: 100%; + margin-bottom: $base-line-height; +} + +button, +input[type="submit"] { + @extend %button; + @include appearance(none); + cursor: pointer; + user-select: none; + vertical-align: middle; + white-space: nowrap; +} diff --git a/app/assets/stylesheets/bitters/_grid-settings.scss b/app/assets/stylesheets/bitters/_grid-settings.scss new file mode 100644 index 0000000..7f9652c --- /dev/null +++ b/app/assets/stylesheets/bitters/_grid-settings.scss @@ -0,0 +1,14 @@ +// Neat Overrides +/////////////////////////////////////////////////////////////////////////////// +// $column: 90px; +// $gutter: 30px; +// $grid-columns: 12; +// $max-width: em(1088); + +// Neat Breakpoints +/////////////////////////////////////////////////////////////////////////////// +$medium-screen: em(640); +$large-screen: em(860); + +$medium-screen-up: new-breakpoint(min-width $medium-screen 4); +$large-screen-up: new-breakpoint(min-width $large-screen 8); diff --git a/app/assets/stylesheets/bitters/_lists.scss b/app/assets/stylesheets/bitters/_lists.scss new file mode 100644 index 0000000..370267a --- /dev/null +++ b/app/assets/stylesheets/bitters/_lists.scss @@ -0,0 +1,31 @@ +ul, ol { + margin: 0; + padding: 0; + list-style-type: none; + + &%default-ul { + list-style-type: disc; + margin-bottom: $base-line-height / 2; + padding-left: $base-line-height; + } + + &%default-ol { + list-style-type: decimal; + margin-bottom: $base-line-height / 2; + padding-left: $base-line-height; + } +} + +dl { + line-height: $base-line-height; + margin-bottom: $base-line-height / 2; + + dt { + font-weight: bold; + margin-top: $base-line-height / 2; + } + + dd { + margin: 0; + } +} diff --git a/app/assets/stylesheets/bitters/_tables.scss b/app/assets/stylesheets/bitters/_tables.scss new file mode 100644 index 0000000..31e78f4 --- /dev/null +++ b/app/assets/stylesheets/bitters/_tables.scss @@ -0,0 +1,22 @@ +table { + border-collapse: collapse; + margin: ($base-line-height / 2) 0; + table-layout: fixed; + width: 100%; +} + +th { + border-bottom: 1px solid darken($base-border-color, 15%); + font-weight: bold; + padding: ($base-line-height / 2) 0; + text-align: left; +} + +td { + border-bottom: 1px solid $base-border-color; + padding: ($base-line-height / 2) 0; +} + +tr, td, th { + vertical-align: middle; +} diff --git a/app/assets/stylesheets/bitters/_typography.scss b/app/assets/stylesheets/bitters/_typography.scss new file mode 100644 index 0000000..1749bed --- /dev/null +++ b/app/assets/stylesheets/bitters/_typography.scss @@ -0,0 +1,104 @@ +body { + color: $base-font-color; + font-family: $base-font-family; + font-size: $base-font-size; + -webkit-font-smoothing: antialiased; + line-height: $base-line-height; +} + +h1, h2, h3, h4, h5, h6 { + font-family: $header-font-family; + line-height: 1.25em; + margin: 0; + text-rendering: optimizeLegibility; // Fix the character spacing for headings +} + +h1 { + font-size: $base-font-size * 2.25; // 16 * 2.25 = 36px +} + +h2 { + font-size: $base-font-size * 2; // 16 * 2 = 32px +} + +h3 { + font-size: $base-font-size * 1.75; // 16 * 1.75 = 28px +} + +h4 { + font-size: $base-font-size * 1.5; // 16 * 1.5 = 24px +} + +h5 { + font-size: $base-font-size * 1.25; // 16 * 1.25 = 20px +} + +h6 { + font-size: $base-font-size; +} + +p { + margin: 0 0 ($base-line-height * .5); +} + +a { + color: #68228B; + text-decoration: none; + @include transition(color 0.1s linear); + + &:hover { + color: $hover-link-color; + } + + &:active, &:focus { + color: $hover-link-color; + outline: none; + } +} + +hr { + border-bottom: 1px solid $base-border-color; + border-left: none; + border-right: none; + border-top: none; + margin: $base-line-height 0; +} + +img { + margin: 0; + max-width: 100%; +} + +abbr, acronym { + border-bottom: 1px dotted $base-border-color; + cursor: help; +} + +address { + display: block; + margin: 0 0 ($base-line-height / 2); +} + +hgroup { + margin-bottom: $base-line-height / 2; +} + +del { + color: lighten($base-font-color, 15); +} + +blockquote { + border-left: 2px solid $base-border-color; + color: lighten($base-font-color, 15); + margin: $base-line-height 0; + padding-left: $base-line-height / 2; +} + +cite { + color: lighten($base-font-color, 25); + font-style: italic; + + &:before { + content: '\2014 \00A0'; + } +} diff --git a/app/assets/stylesheets/bitters/_variables.scss b/app/assets/stylesheets/bitters/_variables.scss new file mode 100644 index 0000000..e86112c --- /dev/null +++ b/app/assets/stylesheets/bitters/_variables.scss @@ -0,0 +1,44 @@ +// Typography +/////////////////////////////////////////////////////////////////////////////// +$sans-serif: $helvetica; +$serif: $georgia; + +$base-font-family: $sans-serif; +$header-font-family: $base-font-family; + +// Sizes +/////////////////////////////////////////////////////////////////////////////// +$base-font-size: 1em; +$base-line-height: $base-font-size * 1.5; +$base-border-radius: em(3); + +// Colors +/////////////////////////////////////////////////////////////////////////////// + +$blue: #477DCA; +$dark-gray: #333; +$medium-gray: #999; +$light-gray: #DDD; +$light-red: #FBE3E4; +$light-yellow: #FFF6BF; +$light-green: #E6EFC2; +$dark-orchid: #68228B; + +// Body Color +$base-body-color: white; + +// Font Colors +$base-font-color: $dark-gray; +$base-accent-color: $blue; + +// Text Link Colors +$base-link-color: $base-accent-color; +$hover-link-color: darken($base-accent-color, 15); + +// Border color +$base-border-color: $light-gray; + +// Flash Colors +$error-color: $light-red; +$notice-color: $light-yellow; +$success-color: $light-green; diff --git a/app/assets/stylesheets/bitters/extends/_base.scss b/app/assets/stylesheets/bitters/extends/_base.scss new file mode 100644 index 0000000..ac3b5de --- /dev/null +++ b/app/assets/stylesheets/bitters/extends/_base.scss @@ -0,0 +1 @@ +@import "button"; diff --git a/app/assets/stylesheets/bitters/extends/_button.scss b/app/assets/stylesheets/bitters/extends/_button.scss new file mode 100644 index 0000000..ba85fe3 --- /dev/null +++ b/app/assets/stylesheets/bitters/extends/_button.scss @@ -0,0 +1,7 @@ +%button { + @include button(simple, $dark_orchid); + -webkit-font-smoothing: antialiased; + font-size: $base-font-size; + font-weight: bold; + line-height: 1em; +} diff --git a/app/assets/stylesheets/bitters/mixins/_base.scss b/app/assets/stylesheets/bitters/mixins/_base.scss new file mode 100644 index 0000000..b134fef --- /dev/null +++ b/app/assets/stylesheets/bitters/mixins/_base.scss @@ -0,0 +1 @@ +@import "flash"; diff --git a/app/assets/stylesheets/bitters/mixins/_flash.scss b/app/assets/stylesheets/bitters/mixins/_flash.scss new file mode 100644 index 0000000..55afd61 --- /dev/null +++ b/app/assets/stylesheets/bitters/mixins/_flash.scss @@ -0,0 +1,15 @@ +@mixin flash($color) { + background: $color; + color: darken($color, 60); + font-weight: bold; + margin-bottom: $base-line-height / 2; + padding: $base-line-height / 2; + + a { + color: darken($color, 70); + + &:hover { + color: darken($color, 90); + } + } +} diff --git a/app/models/proficiency.rb b/app/models/proficiency.rb index 36d5b26..d5003c5 100644 --- a/app/models/proficiency.rb +++ b/app/models/proficiency.rb @@ -9,10 +9,10 @@ class Proficiency < ActiveRecord::Base uniqueness: { scope: :skill_id } LEVELS = { - "Familiar With" => "1", - "Level 2" => "2", - "Level 3" => "3", - "Level 4" => "4", + "Exposure to" => "1", + "Limited Experience" => "2", + "Intermediate Experience" => "3", + "Advanced Experience" => "4", "Wizard" => "5" } diff --git a/app/views/dashboards/show.html.erb b/app/views/dashboards/show.html.erb index 2f8e8e1..a3fa9cd 100644 --- a/app/views/dashboards/show.html.erb +++ b/app/views/dashboards/show.html.erb @@ -1,10 +1,2 @@

DASHBOARD!

-
- <%= link_to "View your Profile", current_user %> -
-
- <%= link_to "Update your Profile", edit_user_path(current_user) %> -
-
- <%= link_to "View your Projects", , projects_path(current_user) %> -
+ diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 71f3810..90117b7 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -7,6 +7,30 @@ <%= csrf_meta_tags %> + +
+
+ + +
+ +
+
+
+

<%= link_to 'upMinds', root_path %>

<%= form_for(:search, url: search_path, method: :get) do |form| %> @@ -15,16 +39,6 @@ <% end %> <% if signed_in? %> Signed in as: <%= current_user.email %> - <%= link_to 'Sign out', sign_out_path, method: :delete %> - <% else %> <%= link_to 'Sign in', sign_in_path %> <%end%> diff --git a/app/views/proficiencies/index.html.erb b/app/views/proficiencies/index.html.erb index 7e0ff79..36fc620 100644 --- a/app/views/proficiencies/index.html.erb +++ b/app/views/proficiencies/index.html.erb @@ -8,7 +8,7 @@ <% @proficiencies.each do |proficiency| %>
<%= render proficiency %> - <%= button_to "Update your Skill Proficiency", edit_user_proficiency_path(current_user, proficiency), method: :get %> + <%= button_to "Update your Skill Level", edit_user_proficiency_path(current_user, proficiency), method: :get %> <%= button_to "Delete Skill", [current_user, proficiency], method: :delete, confirm: "Are you sure you want to delete this skill?" %>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb index b4a5cc4..85317d9 100644 --- a/app/views/users/show.html.erb +++ b/app/views/users/show.html.erb @@ -59,15 +59,21 @@ $(function () { enabled: false }, title: { - text: 'Skills' + text: 'Skills', + color: '000000' }, xAxis: { categories: <%== @user.proficiencies.map(&:skill_name) %>, gridLineWidth: 0, labels: { - enabled: true + enabled: true, }, }, + plotOptions: { + series: { + color: '#68228B' + } + }, yAxis: { title: { text: ''