diff --git a/Gemfile.lock b/Gemfile.lock index 4bd01fc..8b83bb1 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -307,8 +307,5 @@ DEPENDENCIES uglifier (>= 1.3.0) web-console (~> 2.0) -RUBY VERSION - ruby 2.3.0p0 - BUNDLED WITH 1.12.5 diff --git a/app/assets/images/christmas_logo.png b/app/assets/images/christmas_logo.png new file mode 100644 index 0000000..165f50c Binary files /dev/null and b/app/assets/images/christmas_logo.png differ diff --git a/app/assets/javascripts/users.coffee b/app/assets/javascripts/users.coffee new file mode 100644 index 0000000..24f83d1 --- /dev/null +++ b/app/assets/javascripts/users.coffee @@ -0,0 +1,3 @@ +# Place all the behaviors and hooks related to the matching controller here. +# All this logic will automatically be available in application.js. +# You can use CoffeeScript in this file: http://coffeescript.org/ diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index f659c42..1407622 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -13,3 +13,10 @@ */ @import "bootstrap-sprockets"; @import "bootstrap"; + +@import url(https://fonts.googleapis.com/css?family=Raleway|Quicksand); +@import "default_theme/partials/variables"; +@import "default_theme/partials/body"; +@import "default_theme/partials/typography"; +@import "default_theme/partials/cards"; +@import "default_theme/partials/inputs"; diff --git a/app/assets/stylesheets/default_theme/partials/_body.scss b/app/assets/stylesheets/default_theme/partials/_body.scss new file mode 100644 index 0000000..a9bb690 --- /dev/null +++ b/app/assets/stylesheets/default_theme/partials/_body.scss @@ -0,0 +1,4 @@ +body { + background-color: $background-color; + text-align: center; +} diff --git a/app/assets/stylesheets/default_theme/partials/_cards.scss b/app/assets/stylesheets/default_theme/partials/_cards.scss new file mode 100644 index 0000000..1dee456 --- /dev/null +++ b/app/assets/stylesheets/default_theme/partials/_cards.scss @@ -0,0 +1,37 @@ +.card { + background-color: #FFF; + margin: 20px auto; + padding: 30px; + border-radius: 10px; + &--body { + @extend .card !optional; + width: 800px; + box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); + } + &--recipient { + @extend .card !optional; + margin: 20px 18px; + display: inline-block; + width: $card-recipient-width; + background-color: #FFF; + box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16); + padding: 10px 0; + cursor: pointer; + &--details { + background-color: $input-background-color; + padding: 10px 0; + margin: 10px 0; + } + + &:hover { + box-shadow: 0px 0px 6px 0px $input-click-color; + } + &--selected { + background-color: $input-click-color; + } + } + &--container { + width: 840px; + margin: 0 auto; + } +} diff --git a/app/assets/stylesheets/default_theme/partials/_inputs.scss b/app/assets/stylesheets/default_theme/partials/_inputs.scss new file mode 100644 index 0000000..a4382a3 --- /dev/null +++ b/app/assets/stylesheets/default_theme/partials/_inputs.scss @@ -0,0 +1,81 @@ +input { + font-size: 18px; + font-family: $body-font-family; + width: 296px; + height: 48px; + padding: 0 10px; + margin: 14px; + &[type="password"] { + background-color: $input-background-color; + border: none; + text-align: center; + color: $soft-gray; + &:focus { + outline: none; + } + } + &[type="submit"] { + background-color: #EACC96; + color: #FFF; + border: none; + } + &[type="text"] { + background-color: $input-background-color; + border: none; + text-align: center; + color: $soft-gray; + &:focus { + outline: none; + } + & ~ span { + display: inline-block; + top: 35%; + font-family: $body-font-family; + font-size: 16px; + } + } + &[type="radio"] { + position: absolute; + visibility: hidden; + &:active { + box-shadow: none; + } + } +} + +label { + color: rgba(0,0,0,.45); + font-size: 18px; + font-family: $input-background-color; +} +.toggle { + width: 700px; + display: inline-block; + & > a { + border: none; + border-radius: 0; + padding: 20px; + background-color: $input-background-color; + cursor: pointer; + color: $soft-gray; + + &:hover:not(.checked), &:active:not(.checked), &:focus:not(.checked) { + background-color: darken($input-background-color, 20%) !important; + outline: none; + & ~ .checked { + background-color: $input-toggle-color; + } + } + + & ~ .checked { + background-color: $input-toggle-color; + box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); + cursor: default; + color: #FFF; + } + } +} + +.text--input--note { + position: relative; +} diff --git a/app/assets/stylesheets/default_theme/partials/_typography.scss b/app/assets/stylesheets/default_theme/partials/_typography.scss new file mode 100644 index 0000000..0a4f9aa --- /dev/null +++ b/app/assets/stylesheets/default_theme/partials/_typography.scss @@ -0,0 +1,22 @@ +h1 { + font-size: 38px; + font-family: $heading-font-family; +} + +h2 { + font-size: 26px; + font-family: $heading-font-family; + &.decorated { + @extend h2 !optional; + margin: 20px auto; + padding: 20px 0px; + width: 296px; + border-top: solid 1px $soft-gray; + border-bottom: solid 1px $soft-gray; + } +} + +p { + font-size: 18px; + font-family: $body-font-family; +} diff --git a/app/assets/stylesheets/default_theme/partials/_variables.scss b/app/assets/stylesheets/default_theme/partials/_variables.scss new file mode 100644 index 0000000..6a8a6e7 --- /dev/null +++ b/app/assets/stylesheets/default_theme/partials/_variables.scss @@ -0,0 +1,19 @@ +// Default Colors +$input-background-color: rgba(200,192,169, .2); +$body-background-color: rgb(255,255,255); +$input-click-color: rgb(234,204,150); +$background-color: #FBF4ED; +$input-toggle-color: rgba(200,192,169, .92); +$secondary-color: rgba(200,192,166, .45); +$thrird-color: rgba(200,192,166, .75); + +//Default Fonts +$body-font-family: 'Raleway', sans-serif; +$heading-font-family: 'Quicksand', sans-serif; + +//Font colors +$soft-gray: rgba( 0 , 0 , 0 , .45); + +$card-body-width: 800px; +$card-recipient-width: 240px; +$card-body-padding-sides: 40px; diff --git a/app/assets/stylesheets/users.scss b/app/assets/stylesheets/users.scss new file mode 100644 index 0000000..1efc835 --- /dev/null +++ b/app/assets/stylesheets/users.scss @@ -0,0 +1,3 @@ +// Place all the styles related to the users controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb new file mode 100644 index 0000000..4521274 --- /dev/null +++ b/app/controllers/users_controller.rb @@ -0,0 +1,5 @@ +class UsersController < ApplicationController + def styleguide + @user = User.new + end +end diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb new file mode 100644 index 0000000..2310a24 --- /dev/null +++ b/app/helpers/users_helper.rb @@ -0,0 +1,2 @@ +module UsersHelper +end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 7f5d6eb..25b1739 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -10,6 +10,8 @@

<%= notice %>

<%= alert %>

+ <%= image_tag asset_url("christmas_logo.png"), alt: "Logo", class: "header--logo" %> +

Very Long Organization Name

<%= yield %> diff --git a/app/views/users/styleguide.html.erb b/app/views/users/styleguide.html.erb new file mode 100644 index 0000000..03ea42e --- /dev/null +++ b/app/views/users/styleguide.html.erb @@ -0,0 +1,103 @@ +
+

Signup to Share Happiness

+

Signup to Share Happiness

+

+ Welcome Mary! +
+ If you're feeling kind and want to sign up for this campaign, please create a password. +

+ + <%= form_for @user, url: 'signup' do |f| %> + <%= label_tag :password %> +
+ <%= password_field_tag :password %> +
+ <%= label_tag :password_confirmation %> +
+ <%= password_field_tag :password_confirmation %> +
+ <%= f.submit %> + <% end %> + +
+ Boy + Girl +
+
+ 0-5 + 6-11 + 12-15 + 16-18 + Adult +
+
+ + (optional) +
+
+
+
+
+ John +
+
+ Male +
+
+ 17 +
+

+ Hoping to get: +
+ lalala +

+
+
+
+ John +
+
+ Male +
+
+ 17 +
+

+ Hoping to get: +
+ lalala +

+
+
+
+ John +
+
+ Male +
+
+ 17 +
+

+ Hoping to get: +
+ lalala +

+
+
+
+ John +
+
+ Male +
+
+ 17 +
+

+ Hoping to get: +
+ lalala +

+
+
diff --git a/config/routes.rb b/config/routes.rb index 4a7ea28..f9ba3eb 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -8,6 +8,8 @@ # You can have the root of your site routed with "root" root 'pages#home' + get 'users/styleguide' => 'users#styleguide', as: :signup + # Example of regular route: # get 'products/:id' => 'catalog#view' diff --git a/spec/controllers/users_controller_spec.rb b/spec/controllers/users_controller_spec.rb new file mode 100644 index 0000000..e2c3d3b --- /dev/null +++ b/spec/controllers/users_controller_spec.rb @@ -0,0 +1,5 @@ +require 'rails_helper' + +RSpec.describe UsersController, type: :controller do + +end diff --git a/spec/helpers/users_helper_spec.rb b/spec/helpers/users_helper_spec.rb new file mode 100644 index 0000000..b2e3444 --- /dev/null +++ b/spec/helpers/users_helper_spec.rb @@ -0,0 +1,15 @@ +require 'rails_helper' + +# Specs in this file have access to a helper object that includes +# the UsersHelper. For example: +# +# describe UsersHelper do +# describe "string concat" do +# it "concats two strings with spaces" do +# expect(helper.concat_strings("this","that")).to eq("this that") +# end +# end +# end +RSpec.describe UsersHelper, type: :helper do + pending "add some examples to (or delete) #{__FILE__}" +end