From fa9bcbcab38e3442e83f59ffd29bdd2c2e3267f4 Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Wed, 30 May 2018 20:11:33 +0200 Subject: [PATCH] Design improvements --- app/assets/stylesheets/customisations.scss | 53 +++++++------ app/views/layouts/_topbar.slim | 88 +++++++++++----------- app/views/layouts/application.html.slim | 4 +- 3 files changed, 74 insertions(+), 71 deletions(-) diff --git a/app/assets/stylesheets/customisations.scss b/app/assets/stylesheets/customisations.scss index 36c720b..a035fb5 100644 --- a/app/assets/stylesheets/customisations.scss +++ b/app/assets/stylesheets/customisations.scss @@ -62,18 +62,19 @@ body } } -.top-bar-left .sitename +.top-bar-left .menu .menu-text { // Display the site name in a larger font font-size: 26px; padding: 8px 5px 3px 0; color: $dark-gray; + font-weight: normal; // Extra space around the Linux distribution's logo - img - { - padding: 0 5px; - } + // img + // { + // padding: 0 5px; + // } } @@ -99,28 +100,28 @@ body // ---------------------------------- -.top-bar-right .menu li a -{ - padding-top: 1.3rem; - padding-bottom: 1.3rem; -} +// .top-bar-right .menu li a +// { +// padding-top: 1.3rem; +// padding-bottom: 1.3rem; +// } -.top-bar -{ - // Draw a colored line below the navigation topbar - border-bottom: 5px solid $debian_color; - color: #8a8a8a; +// .top-bar +// { +// // Draw a colored line below the navigation topbar +// border-bottom: 5px solid $debian_color; +// color: #8a8a8a; - a - { - color: #8a8a8a; - } +// a +// { +// color: #8a8a8a; +// } - a.active - { - color: #fefefe; - } -} +// a.active +// { +// color: #fefefe; +// } +// } // ------- Footer - format as table cell to allow vertical centering /*@import "compass/layout/sticky-footer";*/ @@ -406,7 +407,9 @@ a.black */ .menu .menu-text { - font-size: 2.5rem; + font-size: 2rem; + font-weight: 100; +} // Nicer callouts // https://foundation.zurb.com/building-blocks/blocks/alert-callout-subtle.html diff --git a/app/views/layouts/_topbar.slim b/app/views/layouts/_topbar.slim index 1810df5..67665db 100644 --- a/app/views/layouts/_topbar.slim +++ b/app/views/layouts/_topbar.slim @@ -1,45 +1,45 @@ -.top-bar - .top-bar-left - ul.menu - li.menu-text - a href='/' - // TODO: Make the logo depend on the virtual host - img src="/images/logos/debian.svg" width="35" alt="Debian logo" - // TODO: Use proper distribution name - ' Debian Screenshots > +nav.top-bar + .top-bar-left + ul.menu + li.menu-text + a href='/' + // TODO: Make the logo depend on the virtual host + img src="/images/logos/debian.svg" width="35" alt="Debian logo" + // TODO: Use proper distribution name + ' Debian Screenshots > - .top-bar-right - ul.dropdown.menu data-dropdown-menu=true - li class=('active' if controller_name=='welcome' and action_name=='home') - a href="/" Home - li class=('active' if controller_name=='packages') - a href="/packages" Explore - //li.has-dropdown - //a href="#" Distributions - //ul.dropdown - //// TODO: Use proper distribution list - //li - //a href="#" Debian - //li - //a href="#" Ubuntu - li class=('active' if controller_name=='welcome' and action_name=='about') - a href="/about" About - // Add link if user has uploaded screenshots - - if @current_users_screenshots and @current_users_screenshots.any? - li class=('active' if controller_name=='my' and action_name=='uploads') - = link_to my_uploads_path - ' My uploads - span.badge.secondary - = @current_users_screenshots.count - // TODO: Check correct classes in Zurb/Foundation for top bar! - - if user_signed_in? and current_user.is_admin? - li - a href='#' Admin - / ul.menu.vertical - / li = link_to 'Moderate', moderate_path - / li = link_to 'Logs', logs_path - li class=('active' if controller_name=='my') - - if user_signed_in? - = link_to "My", my_profile_path - - else - = link_to 'Login', new_user_session_path + .top-bar-right + ul.dropdown.menu data-dropdown-menu=true + li class=('active' if controller_name=='welcome' and action_name=='home') + a href="/" Home + li class=('active' if controller_name=='packages') + a href="/packages" Explore + //li.has-dropdown + //a href="#" Distributions + //ul.dropdown + //// TODO: Use proper distribution list + //li + //a href="#" Debian + //li + //a href="#" Ubuntu + li class=('active' if controller_name=='welcome' and action_name=='about') + a href="/about" About + // Add link if user has uploaded screenshots + - if @current_users_screenshots and @current_users_screenshots.any? + li class=('active' if controller_name=='my' and action_name=='uploads') + = link_to my_uploads_path + ' My uploads + span.badge.secondary + = @current_users_screenshots.count + // TODO: Check correct classes in Zurb/Foundation for top bar! + - if user_signed_in? and current_user.is_admin? + li + a href='#' Admin + / ul.menu.vertical + / li = link_to 'Moderate', moderate_path + / li = link_to 'Logs', logs_path + li class=('active' if controller_name=='my') + - if user_signed_in? + = link_to "My", my_profile_path + - else + = link_to 'Login', new_user_session_path diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim index 8f652e7..4d6bb9f 100644 --- a/app/views/layouts/application.html.slim +++ b/app/views/layouts/application.html.slim @@ -13,8 +13,8 @@ html = csrf_meta_tags body - // TODO: move topbar somewhere else than packages - = render 'layouts/topbar' + .container + = render 'layouts/topbar' #content #messages.row = render 'layouts/messages'