From 0087017cba9eaa52f5486302f9e6f39fe80e601e Mon Sep 17 00:00:00 2001 From: Jeremy Rudman Date: Sat, 23 Jan 2021 18:36:37 -0500 Subject: [PATCH 1/3] hide map on mobile and added button to show it --- .../javascripts/manage/lib/dashboardMap.js | 11 +++++++++++ app/assets/stylesheets/manage.sass | 18 ++++++++++++++++-- app/views/manage/dashboard/index.html.haml | 2 ++ 3 files changed, 29 insertions(+), 2 deletions(-) create mode 100644 app/assets/javascripts/manage/lib/dashboardMap.js diff --git a/app/assets/javascripts/manage/lib/dashboardMap.js b/app/assets/javascripts/manage/lib/dashboardMap.js new file mode 100644 index 000000000..63f9de715 --- /dev/null +++ b/app/assets/javascripts/manage/lib/dashboardMap.js @@ -0,0 +1,11 @@ +document.addEventListener('turbolinks:load', function () { + $('.map-button').click(function (){ + const map = $('#map'); + if(map.is(":visible")){ + map.hide(); + } + else{ + map.show(); + } + }) +}); diff --git a/app/assets/stylesheets/manage.sass b/app/assets/stylesheets/manage.sass index 970171e2d..246ccf926 100644 --- a/app/assets/stylesheets/manage.sass +++ b/app/assets/stylesheets/manage.sass @@ -57,6 +57,13 @@ $grey-med: #999 text-align: center overflow: auto width: 100% + @media (max-width: 768px) + display: none + +.map-button + display: none + @media (max-width: 768px) + display: block .dashboard-container-title border-bottom: 3px solid #e5e5e5 @@ -69,21 +76,25 @@ $grey-med: #999 vertical-align: top position: absolute z-index: 1 - background: rgba(#ffffff,0.86) + background: rgba(#ffffff, 0.86) margin-left: 33px padding: 0 6% height: 136px + h3 color: $black font-weight: 500 margin: 1.2em 0 0 + p font-size: 14px margin: 0.5em 0 1.2em + &.double-metrics h3 margin-top: 0.45em font-size: 21px + p font-size: 13px margin-top: 0.3em @@ -92,6 +103,7 @@ $grey-med: #999 list-style: none margin: 0 0 10px padding: 0 + li margin: 0 padding: 2px @@ -111,7 +123,8 @@ $grey-med: #999 height: calc(100% + 20px) .editor-toolbar.fullscreen - z-index: 1031 // in front of the navbar + z-index: 1031 +// in front of the navbar /* * Mobile nav @@ -126,6 +139,7 @@ $grey-med: #999 .navbar-mobile-toggle--active background: #eeeeee + .fa color: black !important diff --git a/app/views/manage/dashboard/index.html.haml b/app/views/manage/dashboard/index.html.haml index c0642f5e3..615ca596e 100644 --- a/app/views/manage/dashboard/index.html.haml +++ b/app/views/manage/dashboard/index.html.haml @@ -11,6 +11,8 @@ = render "layouts/manage/page_title", title: t(:title, scope: 'pages.manage.dashboard') +%button.btn.btn-secondary.w-100.map-button Show Map + .row .col #map From 96a86f487c059dcebcbdaca4c4a1e85550b31f78 Mon Sep 17 00:00:00 2001 From: Jeremy Rudman Date: Sat, 23 Jan 2021 18:51:20 -0500 Subject: [PATCH 2/3] map button text now changes when map is open --- app/assets/javascripts/manage/lib/dashboardMap.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/manage/lib/dashboardMap.js b/app/assets/javascripts/manage/lib/dashboardMap.js index 63f9de715..c84ebfc2b 100644 --- a/app/assets/javascripts/manage/lib/dashboardMap.js +++ b/app/assets/javascripts/manage/lib/dashboardMap.js @@ -1,11 +1,13 @@ document.addEventListener('turbolinks:load', function () { $('.map-button').click(function (){ const map = $('#map'); - if(map.is(":visible")){ + if(map.is(':visible')){ map.hide(); + $(this).html('Show Map'); } else{ map.show(); + $(this).html('Hide Map'); } }) }); From 736f699fd51352657becadbfbb43f006ffb37466 Mon Sep 17 00:00:00 2001 From: Jeremy Rudman Date: Sat, 23 Jan 2021 23:39:04 -0500 Subject: [PATCH 3/3] fix houndci errors --- app/assets/javascripts/manage/lib/dashboardMap.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/manage/lib/dashboardMap.js b/app/assets/javascripts/manage/lib/dashboardMap.js index c84ebfc2b..0debe2451 100644 --- a/app/assets/javascripts/manage/lib/dashboardMap.js +++ b/app/assets/javascripts/manage/lib/dashboardMap.js @@ -1,6 +1,6 @@ document.addEventListener('turbolinks:load', function () { $('.map-button').click(function (){ - const map = $('#map'); + var map = $('#map'); if(map.is(':visible')){ map.hide(); $(this).html('Show Map'); @@ -9,5 +9,5 @@ document.addEventListener('turbolinks:load', function () { map.show(); $(this).html('Hide Map'); } - }) + }); });