From 2effbcdad5d791969385a79176a38dadd9758b29 Mon Sep 17 00:00:00 2001 From: Brenda Wallace Date: Fri, 6 Dec 2019 18:04:18 +1300 Subject: [PATCH] fixed logo display on small screens --- app/assets/stylesheets/_homepage.scss | 1 - app/assets/stylesheets/_members.scss | 2 +- app/assets/stylesheets/_plantings.scss | 2 + app/assets/stylesheets/_predictions.scss | 2 +- app/assets/stylesheets/_variables.scss | 56 +++---- app/assets/stylesheets/application.scss | 1 + .../stylesheets/comfy/admin/cms/custom.sass | 1 - app/assets/stylesheets/mobile.scss | 88 ++++++++++ app/assets/stylesheets/overrides.scss | 151 +++++------------- app/views/layouts/_header.html.haml | 6 +- app/views/layouts/_menu.haml | 14 +- app/views/layouts/application.html.haml | 5 +- 12 files changed, 171 insertions(+), 158 deletions(-) delete mode 100644 app/assets/stylesheets/comfy/admin/cms/custom.sass create mode 100644 app/assets/stylesheets/mobile.scss diff --git a/app/assets/stylesheets/_homepage.scss b/app/assets/stylesheets/_homepage.scss index d33364c23..30df44779 100644 --- a/app/assets/stylesheets/_homepage.scss +++ b/app/assets/stylesheets/_homepage.scss @@ -1,4 +1,3 @@ - // stats shown on homepage. eg. "999 members..." .stats { font-weight: bold; diff --git a/app/assets/stylesheets/_members.scss b/app/assets/stylesheets/_members.scss index 188b4a317..84df767ca 100644 --- a/app/assets/stylesheets/_members.scss +++ b/app/assets/stylesheets/_members.scss @@ -11,7 +11,7 @@ } } -.member-thumbnail div ~ div { +.member-thumbnail div~div { padding-left: 1em; width: 15em; } diff --git a/app/assets/stylesheets/_plantings.scss b/app/assets/stylesheets/_plantings.scss index 897631e83..52e204082 100755 --- a/app/assets/stylesheets/_plantings.scss +++ b/app/assets/stylesheets/_plantings.scss @@ -4,9 +4,11 @@ font-size: 1em; position: absolute; top: 3em; + .badge-super-late { background-color: $red; } + .badge-harvest { background-color: $blue; } diff --git a/app/assets/stylesheets/_predictions.scss b/app/assets/stylesheets/_predictions.scss index 18d1ac623..26d37c977 100644 --- a/app/assets/stylesheets/_predictions.scss +++ b/app/assets/stylesheets/_predictions.scss @@ -8,7 +8,7 @@ text-align: center; strong { - font-align: center; + text-align: center; font-size: 3em; } diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss index f4fff5645..b39c7f297 100644 --- a/app/assets/stylesheets/_variables.scss +++ b/app/assets/stylesheets/_variables.scss @@ -15,37 +15,30 @@ $body-bg: $beige; $text-color: $brown; $link-color: $green; -$default-font: 'Raleway', "Fira Sans", Helvetica, Arial, sans-serif; +$default-font: 'Raleway', +"Fira Sans", +Helvetica, +Arial, +sans-serif; -$primary: ( - color: $green, - dark: darken($green, 20%), - light: lighten($green, 20%) -); -$secondary: ( - color: $blue, - dark: darken($blue, 20%), - light: lighten($blue, 20%) -); -$success: ( - color: $green, - dark: darken($green, 20%), - light: lighten($green, 20%) -); -$danger: ( - color: $red, - dark: darken($red, 20%), - light: lighten($red, 20%) -); -$dark: ( - color: $brown, - dark: darken($brown, 20%), - light: lighten($brown, 20%) -); +$primary: (color: $green, + dark: darken($green, 20%), + light: lighten($green, 20%)); +$secondary: (color: $blue, + dark: darken($blue, 20%), + light: lighten($blue, 20%)); +$success: (color: $green, + dark: darken($green, 20%), + light: lighten($green, 20%)); +$danger: (color: $red, + dark: darken($red, 20%), + light: lighten($red, 20%)); +$dark: (color: $brown, + dark: darken($brown, 20%), + light: lighten($brown, 20%)); -$grid-breakpoints: ( - // Extra small screen / phone +$grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone sm: 576px, @@ -54,8 +47,7 @@ $grid-breakpoints: ( // Large screen / desktop lg: 1200px, // Extra large screen / wide desktop - xl: 1800px -); + xl: 1800px); // Nav bar $navbar-default-bg: $brown; @@ -66,8 +58,8 @@ $navbar-default-link-hover-color: $beige; $navbar-default-link-active-color: darken($beige, 80%); $navbar-default-brand-color: lighten($green, 20%); -$highest-level: 1070; +$highest-level: 1070; $progress-height: 5em; $progress-bar-color: $green; -$progress-bg: $white; \ No newline at end of file +$progress-bg: $white; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index be50fd6a9..6c7d7ffe5 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -16,6 +16,7 @@ @import 'rails_bootstrap_forms'; @import 'overrides'; +@import 'mobile'; @import 'crops'; @import 'harvests'; diff --git a/app/assets/stylesheets/comfy/admin/cms/custom.sass b/app/assets/stylesheets/comfy/admin/cms/custom.sass deleted file mode 100644 index 328d897f1..000000000 --- a/app/assets/stylesheets/comfy/admin/cms/custom.sass +++ /dev/null @@ -1 +0,0 @@ -// custom CSS for admin area \ No newline at end of file diff --git a/app/assets/stylesheets/mobile.scss b/app/assets/stylesheets/mobile.scss new file mode 100644 index 000000000..c62904e37 --- /dev/null +++ b/app/assets/stylesheets/mobile.scss @@ -0,0 +1,88 @@ +// Overrides applying only to mobile view. This must be at the end of the overrides file. +// Extra small devices (portrait phones, less than 576px) +@include media-breakpoint-down(xs) { + + #maincontainer { + width: 100%; + } + + .navbar .nav>li { + display: block; + } + + .navbar .navbar-form { + padding-left: 0; + padding-right: 0; + + #navbar-search { + width: 100%; + } + } + + .navbar-brand { + margin-bottom: 1em; + + .site-name { + font-size: auto; + text-align: justify; + } + + .site-name:after { + content: ''; + display: inline-block; + width: 100%; + } + + } + + h1 { + font-size: 200%; + } + + h2 { + font-size: 130%; + } + + h3 { + font-size: 120%; + } + + .card-title { + margin-bottom: 0; + } + + .sidebar { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + .map { + height: 300px; + } + + + section .btn { + width: 100%; + } + + .index-cards { + .card { + margin: .2em; + width: 48%; + + // Shrink title to fit more on page + .card-title { + font-size: 1em; + } + + // Restrict height of image when on smaller screens + .img-card { + height: 100px; + object-fit: cover; + width: 100%; + } + + } + } +} diff --git a/app/assets/stylesheets/overrides.scss b/app/assets/stylesheets/overrides.scss index db0e529ad..50957d0a0 100755 --- a/app/assets/stylesheets/overrides.scss +++ b/app/assets/stylesheets/overrides.scss @@ -8,20 +8,44 @@ body { font-family: $default-font; } -.navbar-brand .site-name { - font-family: 'Modak', cursive; - font-size: 3em; - margin-top: 0.2em; +.navbar-brand { + .site-name { + font-family: 'Modak', cursive; + font-size: 3em; + margin: .3em; + } + + img { + height: 60px; + } +} + +#navbar-search { + padding-left: 1em; + + .input-group { + input { + background-color: $white; + color: $black; + } + + input::placeholder { + color: $navbar-default-link-color; + } + } +} + +.navbar .btn-signup, +.navbar .btn-signin { + background-color: $green; + color: $white; + margin: 3px; } .homepage-blurb .site-name { font-size: 5em; } -.navbar-nav .btn { - background-color: $green; - color: $white; -} .ellipsis { overflow: hidden; @@ -58,22 +82,11 @@ h3 { font-size: 120%; } -#navbar-search { - .input-group { - input { - background-color: $white; - color: $black; - } - - input::placeholder { - color: $navbar-default-link-color; - } - } -} section { margin: .5em 0 0; padding: 0 0 1em; + h2 { background-color: $green; box-shadow: 1px 1px 1px 1px darken($beige, 20%); @@ -112,8 +125,10 @@ section { border-top-right-radius: 5%; } } + .card-finished { background: darken($beige, 10%); + a { color: $brown; } @@ -168,6 +183,7 @@ section { .thumbnail { height: 100px; + img { border-radius: 5px; height: 75px; @@ -211,6 +227,7 @@ ul.associations { // footer footer { + #footer1, #footer2, #footer3 { @@ -244,7 +261,9 @@ footer { #maincontainer { max-width: 2500px; min-height: 80%; - padding: 1em; + padding-bottom: 1em; + padding-left: 1em; + padding-right: 1em; } // Autosuggest @@ -282,7 +301,7 @@ $state-success-bg: lighten($green, 50%); label.required:after { color: red; - content:" *"; + content: " *"; } .truncate { @@ -396,91 +415,3 @@ ul.thumbnail-buttons { .progress-fade:hover::before { background: none; } - -// Overrides applying only to mobile view. This must be at the end of the overrides file. -// Extra small devices (portrait phones, less than 576px) -@include media-breakpoint-down(xs) { - #maincontainer { - width: 100%; - padding: 10px; - } - - h1 { - font-size: 200%; - } - - h2 { - font-size: 130%; - } - - h3 { - font-size: 120%; - } - - .card-title { - margin-bottom: 0; - } - - .sidebar { - margin-left: 0; - border-left: none; - padding-left: 0; - } - - .map { - height: 300px; - } - - .navbar .nav > li { - display: block; - } - - .navbar .navbar-form { - padding-left: 0; - padding-right: 0; - - .navbar-search { - width: auto; - } - } - - .nav .btn { - background-color: $green; - width: 100%; - } - - .navbar-brand .site-name { - font-size: 1.4em; - text-align: justify; - } - - .navbar-brand .site-name:after { - content: ""; - display: inline-block; - width: 100%; - } - - section .btn { - width: 100%; - } - - .index-cards { - .card { - margin: .2em; - width: 48%; - - // Shrink title to fit more on page - .card-title { - font-size: 1em; - } - - // Restrict height of image when on smaller screens - .img-card { - height: 100px; - object-fit: cover; - width: 100%; - } - - } - } -} diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index e6b6af779..414dac23e 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -1,12 +1,10 @@ %nav.navbar.navbar-expand-lg.navbar-dark.bg-dark.justify-content-between .nav %a.navbar-brand{ href: root_path } - = image_tag("pear.png", size: "100x100", alt: 'Growstuff brand logo (drawing of a pear)') + = image_tag("pear.png", class: 'logo', alt: 'Growstuff brand logo (drawing of a pear)') %span.site-name Growstuff .nav - %button.navbar-toggler{"aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-target" => "#navbarSupportedContent", "data-toggle" => "collapse", type: "button"} + %button.navbar-toggler{ "aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-target" => "#navbarSupportedContent", "data-toggle" => "collapse", type: "button" } %i.fas.fa-ellipsis-v.navbar-toggler-icon - = render 'layouts/menu' - = render 'crops/search_bar' \ No newline at end of file diff --git a/app/views/layouts/_menu.haml b/app/views/layouts/_menu.haml index 21276f4c5..eea460e0d 100644 --- a/app/views/layouts/_menu.haml +++ b/app/views/layouts/_menu.haml @@ -1,10 +1,12 @@ #navbarSupportedContent.collapse.navbar-collapse %ul.navbar-nav.mr-auto - if signed_in? - = link_to timeline_index_path, method: :get, class: 'nav-link text-white' do - = image_tag 'icons/notification.svg', class: 'img img-icon' - = link_to member_gardens_path(member_slug: current_member.slug), class: 'nav-link text-white' do - = image_icon 'gardens' + %li.nav-item + = link_to timeline_index_path, method: :get, class: 'nav-link text-white' do + = image_tag 'icons/notification.svg', class: 'img img-icon' + %li.nav-item + = link_to member_gardens_path(member_slug: current_member.slug), class: 'nav-link text-white' do + = image_icon 'gardens' %li.nav-item.dropdown %a.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", href: "#", role: "button"} = image_tag "icons/gardener.svg", class: 'img img-icon' @@ -87,5 +89,5 @@ - if current_member.role?(:admin) = link_to t('.admin'), admin_path, class: 'dropdown-item' - else - %li.nav-item= link_to t('.sign_in'), new_member_session_path, id: 'navbar-signin', class: 'btn' - %li.nav-item= link_to t('.sign_up'), new_member_registration_path, id: 'navbar-signup', class: 'btn' + %li.nav-item= link_to t('.sign_in'), new_member_session_path, id: 'navbar-signin', class: 'btn btn-signin' + %li.nav-item= link_to t('.sign_up'), new_member_registration_path, id: 'navbar-signup', class: 'btn btn-signup' diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 2eb7fd8ba..aefd4c7eb 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -8,12 +8,13 @@ = render "layouts/header" -# anchor tag for accessibility link to skip the navigation menu %a{ name: 'skipnav' } - #maincontainer.container-fluid + + #maincontainer .row .col-md-8.col-12 - if content_for?(:breadcrumbs) %nav - %ol.breadcrumb{"aria-label" => "breadcrumb"} + %ol.breadcrumb{ "aria-label" => "breadcrumb" } %li.breadcrumb-item= link_to 'Home', root_path = yield(:breadcrumbs) - if content_for?(:buttonbar)