From 5a14036714cd5c200e31e233e7e3043a4b417cb7 Mon Sep 17 00:00:00 2001 From: Ryan McLeod Date: Tue, 28 Oct 2014 19:09:16 -0700 Subject: [PATCH 1/9] Dynamic homepage with featured crops --- app/assets/stylesheets/application.css.scss | 10 + app/assets/stylesheets/guides.css.scss | 250 +++++++++--------- app/assets/stylesheets/home.css.scss | 49 ++++ app/controllers/home_controller.rb | 15 ++ app/views/guides/new.html.erb | 2 +- app/views/home/_featured_crop.html.erb | 15 ++ app/views/home/_featured_crops_grid.html.erb | 13 + .../home.html.erb => home/show.html.erb} | 3 + config/routes.rb | 4 +- 9 files changed, 236 insertions(+), 125 deletions(-) create mode 100644 app/controllers/home_controller.rb create mode 100644 app/views/home/_featured_crop.html.erb create mode 100644 app/views/home/_featured_crops_grid.html.erb rename app/views/{pages/home.html.erb => home/show.html.erb} (93%) diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 1ac085776..718403bc8 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -50,9 +50,18 @@ clear: both; } +.full-cover { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + // Apply this to a row that will vertically center a column .row.row-table { display: table; + table-layout: fixed; width: 100%; // Tables will only be as big as they need to without this } @@ -64,6 +73,7 @@ .columns.column-middle { display: table-cell; vertical-align: middle; + float: none; } @import 'font-awesome'; diff --git a/app/assets/stylesheets/guides.css.scss b/app/assets/stylesheets/guides.css.scss index 31da7723f..63678ef7e 100644 --- a/app/assets/stylesheets/guides.css.scss +++ b/app/assets/stylesheets/guides.css.scss @@ -13,70 +13,72 @@ */ -.empty{ - text-align: center; - padding-bottom: 1rem; - i{ - font-size: 1.5rem; +.guide { + .empty{ + text-align: center; + padding-bottom: 1rem; + i{ + font-size: 1.5rem; + } } -} - -.show-guide-app{ - position: relative; -} - -.canopy{ - height: 300px; - margin-bottom: 1rem; -} -.image-wrapper{ - /*background-image: url(leaf-grey-canopy.png);*/ - background-position: top; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - overflow: hidden; - height: 300px; - border-bottom: 1px solid rgb(51, 51, 51); - box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); -} + .show-guide-app{ + position: relative; + } -.image-wrapper img{ - position: absolute; - left: 0; - right: 0; - top: -9999px; - bottom: -9999px; - margin: auto 0; - width: 100%; -} + .canopy{ + height: 300px; + margin-bottom: 1rem; + } -.title{ - h2{ - font-weight: 100; - color: $secondary-color; - /*font-family: "Helvetica Neue";*/ - span{ - color: $of-green; - font-weight: 300; - } + .image-wrapper{ + /*background-image: url(leaf-grey-canopy.png);*/ + background-position: top; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + height: 300px; + border-bottom: 1px solid rgb(51, 51, 51); + box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); } - .edit-link{ + + .image-wrapper img{ position: absolute; - top: 1rem; + left: 0; right: 0; + top: -9999px; + bottom: -9999px; + margin: auto 0; + width: 100%; } -} -.actual-requirements{ - ul{ - list-style: none; + .title{ + h2{ + font-weight: 100; + color: $secondary-color; + /*font-family: "Helvetica Neue";*/ + span{ + color: $of-green; + font-weight: 300; + } + } + .edit-link{ + position: absolute; + top: 1rem; + right: 0; + } } - li{ + .actual-requirements{ + ul{ + list-style: none; + } + li{ + + } } } @@ -86,87 +88,91 @@ */ -.box{ - margin: 2rem 0; - padding-top: 1rem; -} +.new-guide { + .box{ + margin: 2rem inherit; + padding-top: 1rem; + } -.create-guide-steps{ - max-width: 640px; - margin-top: 2rem; - text-align: center; - font-size: .8rem; - color: #C69F60; + .create-guide-steps{ + max-width: 640px; + margin-top: 2rem; + text-align: center; + font-size: .8rem; + color: #C69F60; - .step{ - opacity: .6; - } + .step{ + opacity: .6; + } - .active{ - opacity: 1; + .active{ + opacity: 1; + } + + span{ + border-radius: 2rem; + font-size: .6rem; + width: 1.2rem; + text-align: center; + height: 1.2rem; + padding-top: .2rem; + vertical-align: middle; + display: inline-block; + // TODO: Use Compass to DRY + background-image: -o-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%); + background-image: -moz-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%); + background-image: -ms-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%); + background-image: linear-gradient(-179deg, #FFFFFF 0%, #EFF1F4 100%); + /* Sketch doesnt export pattern fills at this point */ + border: 1px solid rgba(0,0,0,0.10); + -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 1px 0px 1px #FFFFFF; + box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 1px 0px 1px #FFFFFF; + } } - span{ - border-radius: 2rem; - font-size: .6rem; - width: 1.2rem; - text-align: center; - height: 1.2rem; - padding-top: .2rem; - vertical-align: middle; + form.new-guide{ display: inline-block; - background-image: -o-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%); - background-image: -moz-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%); - background-image: -ms-linear-gradient(-89deg, #FFFFFF 0%, #EFF1F4 100%); - background-image: linear-gradient(-179deg, #FFFFFF 0%, #EFF1F4 100%); - /* Sketch doesnt export pattern fills at this point */ - border: 1px solid rgba(0,0,0,0.10); - -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 1px 0px 1px #FFFFFF; - box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.10), inset 0px 1px 0px 1px #FFFFFF; - } -} + width: 100%; + margin: 2rem 0; -form.new-guide{ - display: inline-block; - width: 100%; - margin: 2rem 0; + .button-wrapper{ + margin-top: 2rem; + } - .button-wrapper{ - margin-top: 2rem; - } + .block{ + height: 2rem; + display: block; + } - .block{ - height: 2rem; - display: block; + p{ + font-size: .9rem; + color: #171717; + line-height: 1.5rem; + margin-bottom: .5rem; + } + input.button.small.secondary.left{ + margin-left: .5rem; + } } + .crop-image{ + background: #fff; + width: 100%; + height: 124px; + border-radius: 2px; + border: 0px solid #979797; + -moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.20); + box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.20); + display: inline-block; + margin-bottom: 1rem; - p{ - font-size: .9rem; - color: #171717; - line-height: 1.5rem; - margin-bottom: .5rem; - } - input.button.small.secondary.left{ - margin-left: .5rem; - } -} -.crop-image{ - background: #fff; - width: 100%; - height: 124px; - border-radius: 2px; - border: 0px solid #979797; - -moz-box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.20); - box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.20); - display: inline-block; - margin-bottom: 1rem; - - img.no-image{ - transform: translate(-50%, -50%); - position: relative; - top: 50%; - left: 50%; + img.no-image{ + transform: translate(-50%, -50%); + position: relative; + top: 50%; + left: 50%; + } } } + @import "guides/_edit_guides.css.scss" diff --git a/app/assets/stylesheets/home.css.scss b/app/assets/stylesheets/home.css.scss index b5c9902ef..b03709c23 100644 --- a/app/assets/stylesheets/home.css.scss +++ b/app/assets/stylesheets/home.css.scss @@ -1,6 +1,7 @@ // Because
{{alert.msg}} diff --git a/app/views/home/_featured_crop.html.erb b/app/views/home/_featured_crop.html.erb new file mode 100644 index 000000000..83adf5478 --- /dev/null +++ b/app/views/home/_featured_crop.html.erb @@ -0,0 +1,15 @@ +
+ +
\ No newline at end of file diff --git a/app/views/home/_featured_crops_grid.html.erb b/app/views/home/_featured_crops_grid.html.erb new file mode 100644 index 000000000..bb06fe8cb --- /dev/null +++ b/app/views/home/_featured_crops_grid.html.erb @@ -0,0 +1,13 @@ + diff --git a/app/views/pages/home.html.erb b/app/views/home/show.html.erb similarity index 93% rename from app/views/pages/home.html.erb rename to app/views/home/show.html.erb index ac63484ba..ef9eb20c4 100644 --- a/app/views/pages/home.html.erb +++ b/app/views/home/show.html.erb @@ -48,6 +48,9 @@
- @@ -71,7 +71,7 @@