From d395543d197c14d8749801eacae903ee8c3a9e36 Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Sat, 14 Nov 2020 18:01:57 -0500 Subject: [PATCH 1/4] Fixed issue on desktop --- app/assets/stylesheets/manage.sass | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/manage.sass b/app/assets/stylesheets/manage.sass index 087c35ffa..04d5689f6 100644 --- a/app/assets/stylesheets/manage.sass +++ b/app/assets/stylesheets/manage.sass @@ -173,7 +173,8 @@ $grey-med: #999 .sidebar-mobile .sidebar-sticky - height: auto + height: 100vh + overflow: scroll /* From 8ce39f1f459f670c99e307a5efa1bd3a7fb7099c Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Sat, 14 Nov 2020 20:37:57 -0500 Subject: [PATCH 2/4] Map overflow scroll Signed-off-by: Peter Kos --- app/assets/stylesheets/manage.sass | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/stylesheets/manage.sass b/app/assets/stylesheets/manage.sass index 04d5689f6..76cbdaf1d 100644 --- a/app/assets/stylesheets/manage.sass +++ b/app/assets/stylesheets/manage.sass @@ -96,6 +96,8 @@ $grey-med: #999 #map text-align: center + overflow: scroll + width: 100% .dashboard-container-title border-bottom: 3px solid #e5e5e5 From 425f403a17fb1baa92bfc0a454e02a4fb96457cf Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Sat, 14 Nov 2020 20:40:37 -0500 Subject: [PATCH 3/4] Fix scroll issue Signed-off-by: Peter Kos --- app/assets/stylesheets/manage.sass | 3 +-- app/assets/stylesheets/manage/dashboard.css | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/manage.sass b/app/assets/stylesheets/manage.sass index 76cbdaf1d..f7ecdbcc1 100644 --- a/app/assets/stylesheets/manage.sass +++ b/app/assets/stylesheets/manage.sass @@ -173,9 +173,8 @@ $grey-med: #999 display: block !important bottom: auto - .sidebar-mobile .sidebar-sticky - height: 100vh + height: calc(100vh - 2.25rem) overflow: scroll diff --git a/app/assets/stylesheets/manage/dashboard.css b/app/assets/stylesheets/manage/dashboard.css index fa97c4e29..29d3412ec 100644 --- a/app/assets/stylesheets/manage/dashboard.css +++ b/app/assets/stylesheets/manage/dashboard.css @@ -12,14 +12,14 @@ body { bottom: 0; left: 0; z-index: 5; /* Behind the navbar */ - padding: 48px 0 0; /* Height of navbar */ + padding: 2.25rem 0 0; /* Height of navbar */ box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1); } .sidebar-sticky { position: relative; top: 0; - height: calc(100vh - 48px); + height: calc(100vh - 2.25rem); padding-top: 0.5rem; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ From 85cad6424f30f37c234384606d9c4b3372d9864b Mon Sep 17 00:00:00 2001 From: Peter Kos Date: Sat, 14 Nov 2020 21:41:53 -0500 Subject: [PATCH 4/4] Fixed toggle button; fits screen, sidebar width Sidebar width is better Toggle button fills height of navbar Signed-off-by: Peter Kos --- app/assets/stylesheets/manage.sass | 46 ++----------------- app/assets/stylesheets/manage/dashboard.css | 7 +-- .../layouts/manage/application.html.haml | 14 ++++-- 3 files changed, 14 insertions(+), 53 deletions(-) diff --git a/app/assets/stylesheets/manage.sass b/app/assets/stylesheets/manage.sass index f7ecdbcc1..3c016d68f 100644 --- a/app/assets/stylesheets/manage.sass +++ b/app/assets/stylesheets/manage.sass @@ -31,47 +31,6 @@ $grey-med: #999 .CodeMirror font-size: 12px -// .manage -// padding-left: 20px -// padding-right: 20px -// padding-top: 50px - -// .container-half, .container-full -// max-width: none -// @media (max-width: 600px) -// padding-left: 0 -// padding-right: 0 -// .container-half -// display: inline-block -// width: 49.6% // weird issue with percentaces -// vertical-align: top -// @media (max-width: 600px) -// width: 100% -// .container-full -// display: inline-block -// width: 100% -// vertical-align: top -// margin: 0 - -// #manageNav -// z-index: 1 -// width: 100% -// background: $black -// color: $white -// padding: 16px 20px 6px -// p, a -// margin: 0 5px 10px -// p -// color: $primary -// display: inline-block -// margin-top: 0 -// &:first-child -// margin-right: 10px -// a -// color: $white -// display: inline-block -// &:hover -// color: darken($grey-light, 5%) .center text-align: center @@ -166,8 +125,9 @@ $grey-med: #999 display: inherit .navbar-mobile-toggle--active - color: black !important - background: #eee + background: #eeeeee + .fa + color: black !important .sidebar-mobile display: block !important diff --git a/app/assets/stylesheets/manage/dashboard.css b/app/assets/stylesheets/manage/dashboard.css index 29d3412ec..b0245ee0d 100644 --- a/app/assets/stylesheets/manage/dashboard.css +++ b/app/assets/stylesheets/manage/dashboard.css @@ -1,6 +1,3 @@ -body { - font-size: 0.875rem; -} /* * Sidebar @@ -83,11 +80,11 @@ body { .navbar-brand { padding-top: 0.75rem; padding-bottom: 0.75rem; + text-overflow: ellipsis; + overflow: hidden; font-size: 1rem; background-color: rgba(0, 0, 0, 0.25); box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25); - text-overflow: ellipsis; - overflow: hidden; } .navbar .form-control { diff --git a/app/views/layouts/manage/application.html.haml b/app/views/layouts/manage/application.html.haml index 78db41d23..9e716f056 100644 --- a/app/views/layouts/manage/application.html.haml +++ b/app/views/layouts/manage/application.html.haml @@ -13,19 +13,23 @@ %body %nav.navbar.navbar-expand.navbar-dark.fixed-top.bg-dark.flex-nowrap.p-0.shadow - %a.navbar-brand.col-xs-6.col-sm-3.col-md-2.mr-0{href: manage_root_path} #{HackathonConfig['name']} Manager + + %span.navbar-mobile-toggle.m-0{onclick: 'toggleMobileNav()'} + .fa.fa-bars.m-3.mx-4.text-white.h-auto + + / TODO: move acc/signin inside the sidebar + %a.navbar-brand.px-3.mr-0{href: manage_root_path} #{HackathonConfig['name']} Manager + / %input.form-control.form-control-dark.w-100{"aria-label" => "Search", placeholder: "Search", type: "text"}/ %ul.navbar-nav.ml-auto.px-3 %li.nav-item.text-nowrap = link_to "Account", root_path, class: "nav-link" %li.nav-item.text-nowrap = link_to "Sign out", destroy_user_session_path, method: :delete, class: "nav-link" - %span.navbar-brand.navbar-mobile-toggle.mr-0.pl-3.pr-3{onclick: 'toggleMobileNav()'} - .fa.fa-bars.fa-fw.icon-space-r-half .container-fluid .row - %nav.col-md-2.d-none.d-md-block.bg-light.sidebar + %nav.col-md-3.d-none.d-md-block.bg-light.sidebar .sidebar-sticky %h6.sidebar-heading.d-flex.justify-content-between.align-items-center.px-3.mt-4.mb-1.text-muted %span @@ -131,7 +135,7 @@ = t(:title, scope: 'pages.manage.data-exports') .nav-item-description = t(:dataexports, scope: 'layouts.manage.navigation.descriptors') - %main.col-md-10.ml-sm-auto.px-4{role: "main"} + %main.col-md-9.ml-sm-auto.px-4{role: "main"} = render "layouts/manage/flashes" = yield %div.mb-4.text-center