From 7cb0002b37730d53ba39db81b83d2fd3fccc002f Mon Sep 17 00:00:00 2001 From: Brenda Wallace Date: Tue, 21 May 2019 14:04:11 +1200 Subject: [PATCH] Convert to scss --- .gitignore | 3 + app/assets/stylesheets/application.sass | 25 - app/assets/stylesheets/application.scss | 23 + app/assets/stylesheets/crops.sass | 13 - app/assets/stylesheets/crops.scss | 16 + app/assets/stylesheets/harvests.sass | 7 - app/assets/stylesheets/harvests.scss | 10 + app/assets/stylesheets/homepage.sass | 37 -- app/assets/stylesheets/homepage.scss | 44 ++ app/assets/stylesheets/leaflet_overrides.sass | 10 - app/assets/stylesheets/leaflet_overrides.scss | 13 + app/assets/stylesheets/members.sass | 22 - app/assets/stylesheets/members.scss | 28 + app/assets/stylesheets/overrides.sass | 409 -------------- app/assets/stylesheets/overrides.scss | 499 ++++++++++++++++++ app/assets/stylesheets/photos.sass | 27 - app/assets/stylesheets/photos.scss | 32 ++ app/assets/stylesheets/plantings.sass | 72 --- app/assets/stylesheets/plantings.scss | 109 ++++ app/assets/stylesheets/predictions.sass | 14 - app/assets/stylesheets/predictions.scss | 21 + app/assets/stylesheets/seeds.sass | 7 - app/assets/stylesheets/seeds.scss | 10 + app/assets/stylesheets/variables.sass | 57 -- app/assets/stylesheets/variables.scss | 57 ++ 25 files changed, 865 insertions(+), 700 deletions(-) delete mode 100644 app/assets/stylesheets/application.sass create mode 100644 app/assets/stylesheets/application.scss delete mode 100644 app/assets/stylesheets/crops.sass create mode 100644 app/assets/stylesheets/crops.scss delete mode 100644 app/assets/stylesheets/harvests.sass create mode 100644 app/assets/stylesheets/harvests.scss delete mode 100644 app/assets/stylesheets/homepage.sass create mode 100644 app/assets/stylesheets/homepage.scss delete mode 100644 app/assets/stylesheets/leaflet_overrides.sass create mode 100644 app/assets/stylesheets/leaflet_overrides.scss delete mode 100644 app/assets/stylesheets/members.sass create mode 100644 app/assets/stylesheets/members.scss delete mode 100644 app/assets/stylesheets/overrides.sass create mode 100644 app/assets/stylesheets/overrides.scss delete mode 100644 app/assets/stylesheets/photos.sass create mode 100644 app/assets/stylesheets/photos.scss delete mode 100644 app/assets/stylesheets/plantings.sass create mode 100644 app/assets/stylesheets/plantings.scss delete mode 100644 app/assets/stylesheets/predictions.sass create mode 100644 app/assets/stylesheets/predictions.scss delete mode 100644 app/assets/stylesheets/seeds.sass create mode 100644 app/assets/stylesheets/seeds.scss delete mode 100644 app/assets/stylesheets/variables.sass create mode 100644 app/assets/stylesheets/variables.scss diff --git a/.gitignore b/.gitignore index dfd273d9d..0cb26bd3b 100644 --- a/.gitignore +++ b/.gitignore @@ -28,3 +28,6 @@ config/database.yml cc-test-reporter elasticsearch-*.deb elasticsearch-*.deb.sha512 + +app/assets/images/*.svg +app/assets/images/icons/*.svg diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass deleted file mode 100644 index cba18af5c..000000000 --- a/app/assets/stylesheets/application.sass +++ /dev/null @@ -1,25 +0,0 @@ -@import 'material' -@import 'variables' -@import 'overrides' - - -@import 'jquery-ui/autocomplete' -@import 'bootstrap-datepicker' -@import 'leaflet' -@import 'leaflet.markercluster' - -@import 'predictions' -@import 'plantings' -@import 'members' -@import 'harvests' -@import 'seeds' -@import 'crops' - -@import 'homepage' -@import 'photos' - -// Font Awesome -@import 'font-awesome-sprockets' -@import 'font-awesome' -@import 'material_icons' - diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss new file mode 100644 index 000000000..4031e6db5 --- /dev/null +++ b/app/assets/stylesheets/application.scss @@ -0,0 +1,23 @@ +@import "material"; +@import "variables"; +@import "overrides"; + +@import "jquery-ui/autocomplete"; +@import "bootstrap-datepicker"; +@import "leaflet"; +@import "leaflet.markercluster"; + +@import "predictions"; +@import "plantings"; +@import "members"; +@import "harvests"; +@import "seeds"; +@import "crops"; + +@import "homepage"; +@import "photos"; + +// Font Awesome +@import "font-awesome-sprockets"; +@import "font-awesome"; +@import "material_icons"; diff --git a/app/assets/stylesheets/crops.sass b/app/assets/stylesheets/crops.sass deleted file mode 100644 index b5cc39b5e..000000000 --- a/app/assets/stylesheets/crops.sass +++ /dev/null @@ -1,13 +0,0 @@ -.planting - .crop-card - width: 100px - min-height: 300px - margin: 0.1em - height: 100% - - - .img-thumbnail - width: 100% - -.crop-photos - margin-left: 3em \ No newline at end of file diff --git a/app/assets/stylesheets/crops.scss b/app/assets/stylesheets/crops.scss new file mode 100644 index 000000000..646f1e4d7 --- /dev/null +++ b/app/assets/stylesheets/crops.scss @@ -0,0 +1,16 @@ +.planting { + .crop-card { + width: 100px; + min-height: 300px; + margin: 0.1em; + height: 100%; + } + + .img-thumbnail { + width: 100%; + } +} + +.crop-photos { + margin-left: 3em; +} diff --git a/app/assets/stylesheets/harvests.sass b/app/assets/stylesheets/harvests.sass deleted file mode 100644 index a4a6281c5..000000000 --- a/app/assets/stylesheets/harvests.sass +++ /dev/null @@ -1,7 +0,0 @@ -.harvest-cards - display: flex - flex: none - flex-wrap: wrap - .card - max-width: 200px - margin: 1em \ No newline at end of file diff --git a/app/assets/stylesheets/harvests.scss b/app/assets/stylesheets/harvests.scss new file mode 100644 index 000000000..e69a6e68b --- /dev/null +++ b/app/assets/stylesheets/harvests.scss @@ -0,0 +1,10 @@ +.harvest-cards { + display: flex; + flex: none; + flex-wrap: wrap; + + .card { + max-width: 200px; + margin: 1em; + } +} diff --git a/app/assets/stylesheets/homepage.sass b/app/assets/stylesheets/homepage.sass deleted file mode 100644 index 9c2b3a0c9..000000000 --- a/app/assets/stylesheets/homepage.sass +++ /dev/null @@ -1,37 +0,0 @@ -// let's condense the hero unit a little -.jumbotron - //padding-top: 30px - //padding-bottom: 30px - -// info under the main heading on homepage -.jumbotron .info - // padding-top: 15px - -// signup widget on homepage -.jumbotron .signup - background-color: lighten($green, 40%) - border: 1px solid lighten($green, 20%) - border-radius: 6px - line-height: 200% - padding: 15px - text-align: center - -.homepage-cards,.homepage-thumbnails - display: flex - flex: none - flex-wrap: wrap - margin: 0.5em - left: -0.5em - .card - width: 200px - min-height: 100px - margin: 0.5em - padding: 0 - left: -0.5em - - %h3.crop-name - font-size: 2.0em - - .thumbnail - margin: 0.5em - diff --git a/app/assets/stylesheets/homepage.scss b/app/assets/stylesheets/homepage.scss new file mode 100644 index 000000000..b75f13ee0 --- /dev/null +++ b/app/assets/stylesheets/homepage.scss @@ -0,0 +1,44 @@ +// let's condense the hero unit a little +.jumbotron { + //padding-top: 30px + //padding-bottom: 30px +} + +// info under the main heading on homepage +.jumbotron .info { + // padding-top: 15px +} + +// signup widget on homepage +.jumbotron .signup { + background-color: lighten($green, 40%); + border: 1px solid lighten($green, 20%); + border-radius: 6px; + line-height: 200%; + padding: 15px; + text-align: center; +} + +.homepage-cards, .homepage-thumbnails { + display: flex; + flex: none; + flex-wrap: wrap; + margin: 0.5em; + left: -0.5em; + + .card { + width: 200px; + min-height: 100px; + margin: 0.5em; + padding: 0; + left: -0.5em; + + %h3.crop-name { + font-size: 2em; + } + } + + .thumbnail { + margin: 0.5em; + } +} diff --git a/app/assets/stylesheets/leaflet_overrides.sass b/app/assets/stylesheets/leaflet_overrides.sass deleted file mode 100644 index 78a7dac7e..000000000 --- a/app/assets/stylesheets/leaflet_overrides.sass +++ /dev/null @@ -1,10 +0,0 @@ -.leaflet-popup-content-wrapper, -.leaflet-popup-tip - border: none - -.thumbnail - background: #fff !important - border: solid 1px whitesmoke - -.thumbnail .crop-thumbnail .cropinfo - padding-top: 14px diff --git a/app/assets/stylesheets/leaflet_overrides.scss b/app/assets/stylesheets/leaflet_overrides.scss new file mode 100644 index 000000000..aa69bb297 --- /dev/null +++ b/app/assets/stylesheets/leaflet_overrides.scss @@ -0,0 +1,13 @@ +.leaflet-popup-content-wrapper, +.leaflet-popup-tip { + border: none; +} + +.thumbnail { + background: #fff !important; + border: solid 1px whitesmoke; +} + +.thumbnail .crop-thumbnail .cropinfo { + padding-top: 14px; +} diff --git a/app/assets/stylesheets/members.sass b/app/assets/stylesheets/members.sass deleted file mode 100644 index 43da58188..000000000 --- a/app/assets/stylesheets/members.sass +++ /dev/null @@ -1,22 +0,0 @@ -.member-cards - display: flex - flex: none - flex-wrap: wrap - .card - max-width: 200px - margin: 1em - -.member-thumbnail - padding: .25em - margin: 1em - border-radius: 12px - height: 200px - - div - width: 5em - display: inline-block - vertical-align: top - -.member-thumbnail div~div - padding-left: 1em - width: 15em diff --git a/app/assets/stylesheets/members.scss b/app/assets/stylesheets/members.scss new file mode 100644 index 000000000..433d8ab0a --- /dev/null +++ b/app/assets/stylesheets/members.scss @@ -0,0 +1,28 @@ +.member-cards { + display: flex; + flex: none; + flex-wrap: wrap; + + .card { + max-width: 200px; + margin: 1em; + } +} + +.member-thumbnail { + padding: 0.25em; + margin: 1em; + border-radius: 12px; + height: 200px; + + div { + width: 5em; + display: inline-block; + vertical-align: top; + } +} + +.member-thumbnail div ~ div { + padding-left: 1em; + width: 15em; +} diff --git a/app/assets/stylesheets/overrides.sass b/app/assets/stylesheets/overrides.sass deleted file mode 100644 index 07bf5371d..000000000 --- a/app/assets/stylesheets/overrides.sass +++ /dev/null @@ -1,409 +0,0 @@ -//@import "bootstrap-sprockets" -//@import "bootstrap" -// this padding needs to be done before the responsive stuff is imported -body - background-color: $beige - font-family: $font-family-sans-serif - // padding-top: $navbar-height - -// Font Awesome -@import "font-awesome-sprockets" -@import "font-awesome" - -section - padding-top: 1em - margin: 0 -a - color: $green -a:hover - color: $white - background-color: $green - -span.badge - background-color: $brown - a - color: $white - -.list-inline > li.first - padding-left: 0px - -.activity-list - list-style-type: none - padding: 0 - -h2 - font-size: 150% - -h3 - font-size: 120% - -.main - padding-right: 1em - -// .navbar .navbar-form -// padding-top: 0 -// padding-bottom: 0 -// margin-right: 0 -// margin-left: 15px -// border: 0 -// -webkit-box-shadow: none -// box-shadow: none - -.img-square - object-fit: cover - height: 150px - width: 150px - -.img-card - object-fit: cover - height: 150px - width: 100% - -.img-responsive - max-width: 100% - - -.avatar - border-radius: 50% - z-index: 2 - position: relative - -.profile-sidebar - margin-top: -5rem - -.profile-activity - background: white - padding: 2em - margin-top: 2em - -.sidebar - border-left: 1px solid darken($beige, 10%) - margin-left: -1px - padding-left: 1em - -// this is used for eg. crops and members index pages -.six-across:nth-child(6n+1) - margin-left: 0px - -.three-across:nth-child(3n+1) - margin-left: 0px - clear: both - -// let's condense the hero unit a little -.jumbotron - background-color: darken($beige, 10%) - text-color: $white - padding-top: 30px - padding-bottom: 30px - -// info under the main heading on homepage -.jumbotron .info - //padding-top: 15px - padding: 0.5em - text-align: center - -// signup widget on homepage -.jumbotron .signup - background-color: lighten($green, 40%) - border: 1px solid lighten($green, 20%) - border-radius: 6px - line-height: 200% - padding: 15px - text-align: center - -// stats shown on homepage. eg. "999 members..." -p.stats - font-weight: bold - -.card-row - display: grid - grid-template-columns: 50% 50% - grid-gap: 25px - grid-row-gap: 5px - - -.progress - border-radius: 0 - .progress-bar-text - text-align: center - -.layout-actions - -#placesmap, #cropmap - height: 500px - -#membermap - height: 250px - z-index: 0 - -.location-not-set - height: 250px - width: 100% - background-image: image-url('location-not-set.en.png') - background-repeat: no-repeat - background-position: center - -.member-location - font-size: small - font-style: italic - - -.member-location a - color: $brown - -.associations - list-style-type: none - -.photo-thumbnail - padding: 0 - position: relative - - img - width: 100% - - .text - display: none - color: #000 - position: absolute - bottom: 0 - background: rgba(0, 0, 0, 0.8) - width: 100% - margin: 0 - - p - padding: 5px - margin: 0 - color: #fff - - &:hover - .text - display: block - -// .thumbnail -// // border: 1px solid lighten($green, 20%) -// text-align: center -// margin-bottom: 1.5em -// max-width: 160px -// //max-height: 220px -// //height: 180px - -// .seed-thumbnail -// height: 220px -// .seedinfo -// .seed-name -// font-size: 120% -// overflow: hidden - - -// .member-thumbnail -// text-align: left -// img -// height: 85px -// width: 85px -// max-width: 85px - -// .crop-thumbnail -// .cropinfo -// margin-top: 0.5em -// display: inline-block -// max-width: 100% -// white-space: nowrap -// line-height: 1em -// padding-bottom: 2px - -// .cropname -// overflow: hidden -// text-overflow: ellipsis -// font-size: 120% - - -// .scientificname -// font-size: small -// font-style: italic -// overflow: hidden -// text-overflow: ellipsis -// font-size: 70% - -// .plantingcount -// font-size: small -// .planting-lifespan -// font-size: 70% - -// .crop-name a -// padding-top: 2px - -// .scientific-name small -// margin-bottom: -2px - -li.crop-hierarchy - list-style-type: disc - -.navbar-brand - margin: 0px - padding: 0px - -.navbar-bottom - margin: 40px 0px 0px 0px !important - -.post-actions - margin-bottom: 1rem - -// footer -footer - #footer1, #footer2, #footer3 - text-align: left - padding-top: 1em - padding-bottom: 2em - ul - list-style-type: none - list-style-position: outside - padding-left: 0px - margin-left: 0px - - a - color: $navbar-default-link-color - text-decoration: none - - a:hover - color: $navbar-default-link-hover-color - - a:active - color: $navbar-default-link-active-color - - //.navbar-bottom.navbar - // border-radius: 0 - -// ensure footer is pushed to bottom of browser window - -#maincontainer - min-height: 80% - //padding: 50px - -#global-actions - padding-top: 10px - -html, body - height: 100% - -.member-image - border-radius: 50% - -// Autosuggest -.ui-autocomplete - background: white - //z-index: $zindex-tooltip - -.alert - a - font-weight: 800 - - -/* override "info" alert boxes to be green, not blue, on Growstuff */ -$state-info-text: darken($green, 10%) -$state-info-bg: lighten($green, 50%) - -/* and set "success" to be the same, as it was just very slightly - * different because the default bootstrap green is slightly different - * from ours */ -$state-success-text: darken($green, 10%) -$state-success-bg: lighten($green, 50%) - -.hide - display: none - -#add-sci_name-row, #remove-sci_name-row, #add-alt_name-row, #remove-alt_name-row - display: none - -.panel-footer - height: 6em - -.panel - .dl-horizontal - text-overflow: ellipsis - overflow: hidden - -.form-group.required .control-label:before - content: "* " - color: red - -.margin-bottom - margin-bottom: 1em - -.red - color: red - -.truncate - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - -ul.plantings - list-style-type: none - -ul.thumbnail-buttons - list-style-type: none - text-align: right - - -.hover-wrapper .text - position: absolute - visibility: hidden - -.hover-wrapper:hover .text - visibility: visible - -.homepage-listing - padding-bottom: 6px - -.container - max-width: 1500px - -@include media-breakpoint-up(md) - .planting-thumbnail - dl.planting-attributes - width: 100% - - dt - text-align: left - width: 120px - dd - padding-left: 120px - margin-left: auto - - //.navbar .navbar-form - // width: 250px - -.form-page - text-align: center - .form-card - max-width: 500px - text-align: center - display: inline-block - padding: 1em - -// Overrides applying only to mobile view. This must be at the end of the overrides file. -@include media-breakpoint-up(sm) - .sidebar - margin-left: 0 - border-left: none - padding-left: 0 - - #map - height: 300px - - .navbar .nav > li - display: block - - .navbar .navbar-form - //width: 185px - padding-left: 0 - padding-right: 0 - .navbar-search - width: auto - - //.homepage - // .thumbnail - // height: 180px - - #maincontainer - padding: 10px diff --git a/app/assets/stylesheets/overrides.scss b/app/assets/stylesheets/overrides.scss new file mode 100644 index 000000000..85169ce10 --- /dev/null +++ b/app/assets/stylesheets/overrides.scss @@ -0,0 +1,499 @@ +//@import "bootstrap-sprockets" +//@import "bootstrap" +// this padding needs to be done before the responsive stuff is imported +body { + background-color: $beige; + font-family: $font-family-sans-serif; + + // padding-top: $navbar-height +} + +// Font Awesome +@import "font-awesome-sprockets"; +@import "font-awesome"; + +section { + padding-top: 1em; + margin: 0; +} + +a { + color: $green; +} + +a:hover { + color: $white; + background-color: $green; +} + +span.badge { + background-color: $brown; + + a { + color: $white; + } +} + +.list-inline > li.first { + padding-left: 0px; +} + +.activity-list { + list-style-type: none; + padding: 0; +} + +h2 { + font-size: 150%; +} + +h3 { + font-size: 120%; +} + +.main { + padding-right: 1em; +} + +// .navbar .navbar-form +// padding-top: 0 +// padding-bottom: 0 +// margin-right: 0 +// margin-left: 15px +// border: 0 +// -webkit-box-shadow: none +// box-shadow: none + +.img-square { + object-fit: cover; + height: 150px; + width: 150px; +} + +.img-card { + object-fit: cover; + height: 150px; + width: 100%; +} + +.img-responsive { + max-width: 100%; +} + +.avatar { + border-radius: 50%; + z-index: 2; + position: relative; +} + +.profile-sidebar { + margin-top: -5rem; +} + +.profile-activity { + background: white; + padding: 2em; + margin-top: 2em; +} + +.sidebar { + border-left: 1px solid darken($beige, 10%); + margin-left: -1px; + padding-left: 1em; +} + +// this is used for eg. crops and members index pages +.six-across:nth-child(6n+1) { + margin-left: 0px; +} + +.three-across:nth-child(3n+1) { + margin-left: 0px; + clear: both; +} + +// let's condense the hero unit a little +.jumbotron { + background-color: darken($beige, 10%); + text-color: $white; + padding-top: 30px; + padding-bottom: 30px; +} + +// info under the main heading on homepage +.jumbotron .info { + //padding-top: 15px + padding: 0.5em; + text-align: center; +} + +// signup widget on homepage +.jumbotron .signup { + background-color: lighten($green, 40%); + border: 1px solid lighten($green, 20%); + border-radius: 6px; + line-height: 200%; + padding: 15px; + text-align: center; +} + +// stats shown on homepage. eg. "999 members..." +p.stats { + font-weight: bold; +} + +.card-row { + display: grid; + grid-template-columns: 50% 50%; + grid-gap: 25px; + grid-row-gap: 5px; +} + +.progress { + border-radius: 0; + + .progress-bar-text { + text-align: center; + } +} + +.layout-actions {} + +#placesmap, #cropmap { + height: 500px; +} + +#membermap { + height: 250px; + z-index: 0; +} + +.location-not-set { + height: 250px; + width: 100%; + background-image: image-url("location-not-set.en.png"); + background-repeat: no-repeat; + background-position: center; +} + +.member-location { + font-size: small; + font-style: italic; +} + +.member-location a { + color: $brown; +} + +.associations { + list-style-type: none; +} + +.photo-thumbnail { + padding: 0; + position: relative; + + img { + width: 100%; + } + + .text { + display: none; + color: #000; + position: absolute; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + width: 100%; + margin: 0; + } + + p { + padding: 5px; + margin: 0; + color: #fff; + } + + &:hover { + .text { + display: block; + } + } +} + +// .thumbnail +// // border: 1px solid lighten($green, 20%) +// text-align: center +// margin-bottom: 1.5em +// max-width: 160px +// //max-height: 220px +// //height: 180px + +// .seed-thumbnail +// height: 220px +// .seedinfo +// .seed-name +// font-size: 120% +// overflow: hidden + +// .member-thumbnail +// text-align: left +// img +// height: 85px +// width: 85px +// max-width: 85px + +// .crop-thumbnail +// .cropinfo +// margin-top: 0.5em +// display: inline-block +// max-width: 100% +// white-space: nowrap +// line-height: 1em +// padding-bottom: 2px + +// .cropname +// overflow: hidden +// text-overflow: ellipsis +// font-size: 120% + +// .scientificname +// font-size: small +// font-style: italic +// overflow: hidden +// text-overflow: ellipsis +// font-size: 70% + +// .plantingcount +// font-size: small +// .planting-lifespan +// font-size: 70% + +// .crop-name a +// padding-top: 2px + +// .scientific-name small +// margin-bottom: -2px + +li.crop-hierarchy { + list-style-type: disc; +} + +.navbar-brand { + margin: 0px; + padding: 0px; +} + +.navbar-bottom { + margin: 40px 0px 0px 0px !important; +} + +.post-actions { + margin-bottom: 1rem; +} + +// footer +footer { + #footer1, #footer2, #footer3 { + text-align: left; + padding-top: 1em; + padding-bottom: 2em; + + ul { + list-style-type: none; + list-style-position: outside; + padding-left: 0px; + margin-left: 0px; + } + + a { + color: $navbar-default-link-color; + text-decoration: none; + } + + a:hover { + color: $navbar-default-link-hover-color; + } + + a:active { + color: $navbar-default-link-active-color; + } + } + + //.navbar-bottom.navbar + // border-radius: 0 +} + +// ensure footer is pushed to bottom of browser window + +#maincontainer { + min-height: 80%; + + //padding: 50px +} + +#global-actions { + padding-top: 10px; +} + +html, body { + height: 100%; +} + +.member-image { + border-radius: 50%; +} + +// Autosuggest +.ui-autocomplete { + background: white; + + //z-index: $zindex-tooltip +} + +.alert { + a { + font-weight: 800; + } +} + +/* override "info" alert boxes to be green, not blue, on Growstuff */ +$state-info-text: darken($green, 10%); +$state-info-bg: lighten($green, 50%); + +/* and set "success" to be the same, as it was just very slightly + * different because the default bootstrap green is slightly different + * from ours */ +$state-success-text: darken($green, 10%); +$state-success-bg: lighten($green, 50%); + +.hide { + display: none; +} + +#add-sci_name-row, #remove-sci_name-row, #add-alt_name-row, #remove-alt_name-row { + display: none; +} + +.panel-footer { + height: 6em; +} + +.panel { + .dl-horizontal { + text-overflow: ellipsis; + overflow: hidden; + } +} + +.form-group.required .control-label:before { + content: "* "; + color: red; +} + +.margin-bottom { + margin-bottom: 1em; +} + +.red { + color: red; +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +ul.plantings { + list-style-type: none; +} + +ul.thumbnail-buttons { + list-style-type: none; + text-align: right; +} + +.hover-wrapper .text { + position: absolute; + visibility: hidden; +} + +.hover-wrapper:hover .text { + visibility: visible; +} + +.homepage-listing { + padding-bottom: 6px; +} + +.container { + max-width: 1500px; +} + +@include media-breakpoint-up(md) { + .planting-thumbnail { + dl.planting-attributes { + width: 100%; + + dt { + text-align: left; + width: 120px; + } + + dd { + padding-left: 120px; + margin-left: auto; + } + } + } + + //.navbar .navbar-form + // width: 250px +} + + +.form-page { + text-align: center; + + .form-card { + max-width: 500px; + text-align: center; + display: inline-block; + padding: 1em; + } +} + +// Overrides applying only to mobile view. This must be at the end of the overrides file. +@include media-breakpoint-up(sm) { + .sidebar { + margin-left: 0; + border-left: none; + padding-left: 0; + } + + #map { + height: 300px; + } + + .navbar .nav > li { + display: block; + } + + .navbar .navbar-form { + //width: 185px + padding-left: 0; + padding-right: 0; + + .navbar-search { + width: auto; + } + } + + //.homepage + // .thumbnail + // height: 180px + + #maincontainer { + padding: 10px; + } +} diff --git a/app/assets/stylesheets/photos.sass b/app/assets/stylesheets/photos.sass deleted file mode 100644 index 93f697c58..000000000 --- a/app/assets/stylesheets/photos.sass +++ /dev/null @@ -1,27 +0,0 @@ -.photo-grid - background: #DDD - -.photo-grid-item - //background: #e6e5e4 - //border: 2px solid #b6b5b4 - //height: 100px - - -/* clear fix */ -.photo-grid:after - content: '' - display: block - clear: both - -/* ---- .photo-grid-item ---- */ - -.photo-grid-sizer, -.photo-grid-item - //width: 33.333% - -.photo-grid-item - float: left - -.photo-grid-item img - display: block - max-width: 100% diff --git a/app/assets/stylesheets/photos.scss b/app/assets/stylesheets/photos.scss new file mode 100644 index 000000000..c6f2d896a --- /dev/null +++ b/app/assets/stylesheets/photos.scss @@ -0,0 +1,32 @@ +.photo-grid { + background: #DDD; +} + +.photo-grid-item { + //background: #e6e5e4 + //border: 2px solid #b6b5b4 + //height: 100px +} + +/* clear fix */ +.photo-grid:after { + content: ""; + display: block; + clear: both; +} + +/* ---- .photo-grid-item ---- */ + +.photo-grid-sizer, +.photo-grid-item { + //width: 33.333% +} + +.photo-grid-item { + float: left; +} + +.photo-grid-item img { + display: block; + max-width: 100%; +} diff --git a/app/assets/stylesheets/plantings.sass b/app/assets/stylesheets/plantings.sass deleted file mode 100644 index e19e0c5b7..000000000 --- a/app/assets/stylesheets/plantings.sass +++ /dev/null @@ -1,72 +0,0 @@ -.planting - padding: 0.5em - .planting-badges - font-size: 100% - position: absolute - top: 3em - .badge-super-late - background-color: $red - .badge-harvest - background-color: $blue - .planting-super-late - .planting-late - background-color: $beige - - .planting-thumbnail - width: 150px - padding: 0em - margin-bottom: 0.5em - margin-top: 0.5em - - .badge - font-size: 100% - .planting-full-badges - .badge - font-size: 200% - - .planting-name - position: relative - text-align: center - top: 0em - .planting-quick-actions - position: absolute - //Mine - top: 0px - left: 130px - //Upstream - //left: 142px - //top: 6px - - .planting-thumbnail-photo - height: 150px - - dl.planting-attributes - dt - text-align: left - dd - margin-left: auto - -.planting-facts - display: flex - flex: none - flex-wrap: wrap - margin: 0.5em - .fact - text-align: center - height: 160px - width: 160px - border: 1px solid lighten($green, 20%) - border-radius: 5% - background: $white - padding: 1em - margin: 0.5em - left: -0.5em - strong - font-size: 3em - font-align: center - h3 - padding-top: 1em - span - display: block - img - height: 50% diff --git a/app/assets/stylesheets/plantings.scss b/app/assets/stylesheets/plantings.scss new file mode 100644 index 000000000..cf06c1bb9 --- /dev/null +++ b/app/assets/stylesheets/plantings.scss @@ -0,0 +1,109 @@ +.planting { + padding: 0.5em; + + .planting-badges { + font-size: 100%; + position: absolute; + top: 3em; + + .badge-super-late { + background-color: $red; + } + + .badge-harvest { + background-color: $blue; + } + + .planting-super-late {} + + .planting-late { + background-color: $beige; + } + } + + .planting-thumbnail { + width: 150px; + padding: 0em; + margin-bottom: 0.5em; + margin-top: 0.5em; + + .badge { + font-size: 100%; + } + } + + .planting-full-badges { + .badge { + font-size: 200%; + } + } + + .planting-name { + position: relative; + text-align: center; + top: 0em; + } + + .planting-quick-actions { + position: absolute; + + //Mine + top: 0px; + left: 130px; + + //Upstream + //left: 142px + //top: 6px + + } + + .planting-thumbnail-photo { + height: 150px; + } + + dl.planting-attributes { + dt { + text-align: left; + } + + dd { + margin-left: auto; + } + } +} + +.planting-facts { + display: flex; + flex: none; + flex-wrap: wrap; + margin: 0.5em; + + .fact { + text-align: center; + height: 160px; + width: 160px; + border: 1px solid lighten($green, 20%); + border-radius: 5%; + background: $white; + padding: 1em; + margin: 0.5em; + left: -0.5em; + + strong { + font-size: 3em; + font-align: center; + } + + h3 { + padding-top: 1em; + } + + span { + display: block; + } + + img { + height: 50%; + } + } +} diff --git a/app/assets/stylesheets/predictions.sass b/app/assets/stylesheets/predictions.sass deleted file mode 100644 index 0cea3bdf2..000000000 --- a/app/assets/stylesheets/predictions.sass +++ /dev/null @@ -1,14 +0,0 @@ -.predictions - .predictions-card - text-align: center - max-width: 200px - border: 1px solid lighten($green, 20%) - border-radius: 5% - background: $white - margin: 1em - strong - font-size: 4em - font-align: center - h3 - span - display: block diff --git a/app/assets/stylesheets/predictions.scss b/app/assets/stylesheets/predictions.scss new file mode 100644 index 000000000..c1d9860a8 --- /dev/null +++ b/app/assets/stylesheets/predictions.scss @@ -0,0 +1,21 @@ +.predictions { + .predictions-card { + text-align: center; + max-width: 200px; + border: 1px solid lighten($green, 20%); + border-radius: 5%; + background: $white; + margin: 1em; + + strong { + font-size: 4em; + font-align: center; + } + + h3 {} + + span { + display: block; + } + } +} diff --git a/app/assets/stylesheets/seeds.sass b/app/assets/stylesheets/seeds.sass deleted file mode 100644 index 987324aac..000000000 --- a/app/assets/stylesheets/seeds.sass +++ /dev/null @@ -1,7 +0,0 @@ -.seed-cards - display: flex - flex: none - flex-wrap: wrap - .card - max-width: 200px - margin: 1em \ No newline at end of file diff --git a/app/assets/stylesheets/seeds.scss b/app/assets/stylesheets/seeds.scss new file mode 100644 index 000000000..f9c02e8ef --- /dev/null +++ b/app/assets/stylesheets/seeds.scss @@ -0,0 +1,10 @@ +.seed-cards { + display: flex; + flex: none; + flex-wrap: wrap; + + .card { + max-width: 200px; + margin: 1em; + } +} diff --git a/app/assets/stylesheets/variables.sass b/app/assets/stylesheets/variables.sass deleted file mode 100644 index 6b03469bd..000000000 --- a/app/assets/stylesheets/variables.sass +++ /dev/null @@ -1,57 +0,0 @@ -// Use this file to override Twitter Bootstrap variables or define own variables. - -// Import original variables so they can be used in overrides -@import 'bootstrap/variables.scss' -//$screen-md-min: 1028px - -// Base colours -$beige: #f3f1ee -$brown: #413f3b - -$green: #5f8e43 -$blue: #2f4365 -$red: #ff4d43 -$orange: #ffa500 -$yellow: #b2935c -$white: #ffffff - -$body-bg: $beige -$text-color: $brown -$link-color: $green -$graph-hover: $orange - -$brand-primary: $green - -$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif -$font-family-serif: Georgia, "Times New Roman", Times, serif -$font-family-mono: Monaco, Menlo, Consolas, "Courier New", monospace - -$font-size-base: 14px -$font-family-base: $font-family-sans-serif -$line-height-base: 1.5 -$alt-font-family: $font-family-serif - -$headings-font-family: $font-family-sans-serif -$headings-font-weight: bold // instead of browser default, bold -$headings-color: inherit // empty to use BS default, $textColor - -// Hero unit -$jumbotron-bg: darken($body-bg, 10%) - -// Nav bar -$navbar-default-bg: $brown -$navbar-default-bg-highlight: $brown -$navbar-default-color: $beige -$navbar-default-link-color: darken($beige, 20%) -$navbar-default-link-hover-color: $beige -$navbar-default-link-active-color: darken($beige,80%) -$navbar-default-brand-color: lighten($green, 20%) - -// Top nav collapse threshold -//$grid-float-breakpoint: $screen-md-min - -$dropdown-bg: lighten($beige, 10%) -$dropdown-link-color: $brown -$dropdown-link-hover-color: $brown -$dropdown-link-hover-bg: lighten($green, 50%) - diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss new file mode 100644 index 000000000..2994e991b --- /dev/null +++ b/app/assets/stylesheets/variables.scss @@ -0,0 +1,57 @@ +// Use this file to override Twitter Bootstrap variables or define own variables. + +// Import original variables so they can be used in overrides +@import "bootstrap/variables.scss"; + +//$screen-md-min: 1028px + +// Base colours +$beige: #f3f1ee; +$brown: #413f3b; + +$green: #5f8e43; +$blue: #2f4365; +$red: #ff4d43; +$orange: #ffa500; +$yellow: #b2935c; +$white: #ffffff; + +$body-bg: $beige; +$text-color: $brown; +$link-color: $green; +$graph-hover: $orange; + +$brand-primary: $green; + +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-serif: Georgia, "Times New Roman", Times, serif; +$font-family-mono: Monaco, Menlo, Consolas, "Courier New", monospace; + +$font-size-base: 14px; +$font-family-base: $font-family-sans-serif; +$line-height-base: 1.5; +$alt-font-family: $font-family-serif; + +$headings-font-family: $font-family-sans-serif; +$headings-font-weight: bold; +$headings-color: inherit; + +// Hero unit +$jumbotron-bg: darken($body-bg, 10%); + +// Nav bar +$navbar-default-bg: $brown; +$navbar-default-bg-highlight: $brown; +$navbar-default-color: $beige; +$navbar-default-link-color: darken($beige, 20%); +$navbar-default-link-hover-color: $beige; +$navbar-default-link-active-color: darken($beige, 80%); +$navbar-default-brand-color: lighten($green, 20%); + +// Top nav collapse threshold +//$grid-float-breakpoint: $screen-md-min + +$dropdown-bg: lighten($beige, 10%); +$dropdown-link-color: $brown; +$dropdown-link-hover-color: $brown; +$dropdown-link-hover-bg: lighten($green, 50%);