From c7c5af5a2acf53ffea1e94b6ab037d48cae09dfe Mon Sep 17 00:00:00 2001 From: Maxim Colls Date: Tue, 12 Jun 2018 14:03:47 +0300 Subject: [PATCH] Moved the language selector to the footer --- app/assets/stylesheets/_footer.scss | 86 ++++++++ app/assets/stylesheets/application.css.scss | 205 ++---------------- app/views/application/_footer.html.erb | 17 ++ app/views/application/_navbar.html.erb | 3 - .../menus/_language_switcher.html.erb | 34 ++- app/views/layouts/application.html.erb | 27 +-- 6 files changed, 134 insertions(+), 238 deletions(-) create mode 100644 app/assets/stylesheets/_footer.scss create mode 100644 app/views/application/_footer.html.erb diff --git a/app/assets/stylesheets/_footer.scss b/app/assets/stylesheets/_footer.scss new file mode 100644 index 000000000..676abebae --- /dev/null +++ b/app/assets/stylesheets/_footer.scss @@ -0,0 +1,86 @@ +.language-selector { + & { + display: inline-block; + + @media(max-width: $screen-sm-min) { + display: block; + position: relative; + } + } + + a.btn-default.dropdown-toggle { + & { + background-color: transparent; + border: 1px solid white; + } + + &:hover { + background-color: transparent; + } + } + + &.open > a.btn-default.dropdown-toggle { + & { + background-color: transparent; + color: white; + border-color: #ddd; + } + + &:hover { + background-color: transparent; + color: white; + border-color: #ddd; + } + } +} + +.footer { + padding: 8px 0; + line-height: 40px; + width: 100%; + background: rgba($palette-dark-turkey ,0.8); + + @media(max-width: $screen-sm-min) { + padding: 0; + } + + a { + margin: 0 1rem; + color: white; + font-weight: 500; + font-size: 16px; + + @media(max-width: $screen-sm-min) { + text-align: center; + font-size: 14px; + } + } +} + +.footer-left-col { + text-align: left; + + @media(max-width: $screen-sm-min) { + text-align: center; + } +} + +.footer-center-col { + text-align: center; +} + +.footer-right-col { + text-align: right; + + @media(max-width: $screen-sm-min) { + text-align: center; + } +} + +.landing-page, .login-page, .pages, .unlocks-page, .confirmations-page, .passwords-page { + .footer { + position: absolute; + bottom: 0; + left: 0; + } +} diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index fc80c8350..c135e8ef0 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -6,24 +6,15 @@ @import "bootstrap-sprockets"; @import "bootstrap-custom"; @import "to-categories-dropdown"; +@import "footer"; html { - font-size:62.5%; + font-size: 62.5%; } -.content -{ - min-height:500px; - margin-bottom: 40px; -} - -.language-selector{ - margin: 1.2rem 3rem 1.2rem 1rem; -} - -.language-selector a span { - display: block; - float: left; +.content { + min-height: 500px; + margin-bottom: 36px; } .actions-menu { @@ -35,11 +26,6 @@ html { } } -.actions-menu > .dropdown > .language b { - display: inline-block; - margin-left: 0.7rem; -} - .actions-menu > li > a { color: #101010; padding: 10px 16px; @@ -219,36 +205,6 @@ html { padding: 20px; } -.footer { - bottom: 0; - left: 0; - line-height: 40px; - padding: 0; - position: absolute; - vertical-align: middle; - width: 100%; - - p { - font-size: 1.6rem; - letter-spacing: 0.013rem; - margin: 0; - text-align: center; - } - - .row { - margin: 0; - } - - a { - color: $pages-anchor; - font-weight: 500; - margin-left: 1.5rem; - } - - a:hover { - color: $pages-anchor-hover; - } -} .row.exports { padding: 10px; @@ -273,7 +229,6 @@ table.users { background-color: $bg-color; font-family: 'Work Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: medium; - margin: 0 0 20px; } form { @@ -422,7 +377,11 @@ form .checkbox input[type="checkbox"] { z-index: -1; } -.navbar-block{ +.navbar .container-fluid { + padding: 0; +} + +.navbar-block { margin-top: 0.2rem; } @@ -448,79 +407,6 @@ form .checkbox input[type="checkbox"] { letter-spacing: 0.019rem; } -.language-selector{ - margin: 0.6rem 2rem 0 2rem; - width: 13.5rem; -} - -.dropdown{ - &.dropdown-language-selector{ - .dropdown-toggle{ - background: none; - border: 0.2rem solid $white; - border-radius: 0.3rem; - color: $white; - font-size: 1.6rem; - font-weight: 500; - min-width: 13.5rem; - text-align: left; - - .caret{ - display: block; - float: right; - margin-top: 1.1rem; - } - &:focus, - &:active{ - box-shadow: none; - outline: none; - } - } - &.open>.btn-default.dropdown-toggle{ - background: none; - border-color: $white; - border-bottom: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - color: $white; - - .caret{ - -ms-transform: rotate(180deg); - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - } - } - .dropdown-menu{ - background: $palette-turkey; - border: 0.2rem solid $white; - border-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; - box-shadow: none; - margin-top: 0; - min-width: 13.5rem; - li{ - a{ - color: $white; - font-size: 1.6rem; - font-weight: 500; - padding: 0.6rem 1.2rem; - &:hover{ - background: $palette-dark-turkey; - opacity: 0.8; - } - &:focus, - &:active{ - background: none; - box-shadow: none; - outline: none; - } - } - } - } - } -} - .landing-page, .login-page, .pages, .unlocks-page, .confirmations-page, .passwords-page { background: image-url('home_back.jpg') no-repeat center center fixed; background-size: cover; @@ -532,11 +418,11 @@ form .checkbox input[type="checkbox"] { } .vertical-align { - left: 50%; position: absolute; - top: 52%; + top: 48%; + left: 50%; transform: translate(-50%, -50%); - width: 82%; + width: 100%; } .container-inner { @@ -795,79 +681,14 @@ form .checkbox input[type="checkbox"] { } } -.footer-left-col, .footer-left-col p { - text-align: left; -} - -.footer-center, .footer-center-col p { - text-align: center; -} - -.footer-right-col, .footer-right-col p { - text-align: right; -} - @media(max-width:767px){ html{ font-size:55.5%; } - .footer-left-col, .footer-left-col p { - text-align: center; - } - - .footer-center-col, .footer-center-col p { - text-align: center; - } - - .footer-right-col, .footer-right-col p { - text-align: center; - } - .navbar-nav > li > a{ text-align: center; } - - .footer { - margin-top: 4rem; - position: static; - } - - .landing-page, .login-page, .pages, .unlocks-page, .confirmations-page, .passwords-page { - .language-selector{ - margin: 0 auto; - width: 13.5rem; - } - - .footer { - bottom: 1rem; - margin-top: 0; - } - - .footer a{ - margin-left: 0rem; - } - - .footer-right-col a{ - margin: 0 1rem; - } - } - - .landing-page, .unlocks-page, .confirmations-page, .passwords-page { - .footer { - position: absolute; - } - } - - .login-page { - .vertical-align{ - height: auto; - position: static; - top: 0; - transform: none; - width: 100%; - } - } } .errors { diff --git a/app/views/application/_footer.html.erb b/app/views/application/_footer.html.erb new file mode 100644 index 000000000..295b6ff40 --- /dev/null +++ b/app/views/application/_footer.html.erb @@ -0,0 +1,17 @@ +
+
+
+
+ <%= t('layouts.application.help') %> + <%= link_to t('application.terms_conditions'), tnc_path, data: { target: '#modal', toggle: 'modal' } %> +
+
+ <%= render 'application/menus/language_switcher' %> +
+
+ Twitter + Github +
+
+
+
diff --git a/app/views/application/_navbar.html.erb b/app/views/application/_navbar.html.erb index 3e7d13238..74364f5ba 100644 --- a/app/views/application/_navbar.html.erb +++ b/app/views/application/_navbar.html.erb @@ -30,9 +30,6 @@ <%= link_to t("layouts.application.about"), page_path("about") %> <% end %> - - - <%= render 'application/menus/language_switcher' %> diff --git a/app/views/application/menus/_language_switcher.html.erb b/app/views/application/menus/_language_switcher.html.erb index 2ec7adbd7..9c6b05ba4 100644 --- a/app/views/application/menus/_language_switcher.html.erb +++ b/app/views/application/menus/_language_switcher.html.erb @@ -1,19 +1,15 @@ -
  • -
    -
    - - <%= t("locales.#{locale}") %> - - -
      - <% I18n.available_locales.each do |locale| %> - <% if I18n.locale != locale %> -
    • - <%= link_to t("locales.#{locale}"), switch_lang_path(locale: locale) %> -
      • - <% end %> - <% end %> -
    -
    -
    -
    • +
    + + <%= t("locales.#{locale}") %> + + + +
    diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 5ad084979..0e02f748b 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -34,30 +34,9 @@
    -
    -
    -
    -
    -

    - <%= t('layouts.application.help') %> -

    -
    -
    -

    - <%= link_to t('application.terms_conditions'), - tnc_path, - data: { target: '#modal', toggle: 'modal' } %> -

    -
    -
    -

    - Twitter - Github -

    -
    -
    -
    -
    + + <%= render 'application/footer' %> +