Merge pull request #288 from readingdancer/pull-up-from-the-bottom-on…

…-mobile Pull up from the bottom on mobile
code-for-chapel-hill · Nov 5, 2020 · 0642d24 · 0642d24
2 parents 92f9201 + f02f597
commit 0642d24
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 19 deletions.
diff --git a/covid-19-support/src/App.vue b/covid-19-support/src/App.vue
@@ -4,11 +4,11 @@
       <theme-header></theme-header>
     </app-header>
     <mobile-search-filters :need="need" @need-selected="needSelected" />
-    <mobile-map-list-toggle
+    <!-- <mobile-map-list-toggle
       :is-filter-open="isFilterOpen"
       :is-resource-selected="locationData.currentBusiness != null && showList !== true"
       @toggle="isFilterOpen = !isFilterOpen"
-    />
+    /> -->
     <about-us-modal />
     <div class="d-flex" id="wrapper" :class="{ toggled: isFilterOpen }" v-if="!!entries">
       <sidebar
@@ -58,7 +58,7 @@ import Highlights from './components/Highlights.vue'
 import ResourceMap from './components/ResourceMap.vue'
 import AboutUsModal from './components/AboutUs.vue'
 import MobileSearchFilters from './components/MobileSearchFilters'
-import MobileMapListToggle from './components/MobileMapListToggle'
+// import MobileMapListToggle from './components/MobileMapListToggle'
 import { latLng } from 'leaflet'
 import { haversineDistance, sortByDistance } from './utilities'
 
@@ -101,7 +101,7 @@ export default {
   },
   components: {
     MobileSearchFilters,
-    MobileMapListToggle,
+    // MobileMapListToggle,
     AboutUsModal,
     AppHeader,
     Highlights,

diff --git a/covid-19-support/src/components/BusinessDetails.vue b/covid-19-support/src/components/BusinessDetails.vue
@@ -9,6 +9,7 @@
     <b-list-group class="list-group-flush business-details">
       <b-list-group-item variant="sideNav" :class="infotype">
         <div>
+          <div class="mobile-expand"></div>
           <div class="title">
             <i :class="businessIcon(business.marker)"></i>
             <div class="busName">
@@ -191,13 +192,45 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.mobile-expand {
+  display: block;
+  border: solid 1px #999;
+  width: 50px;
+  margin: 0 auto;
+  margin-bottom: 5px;
+  top: -5px;
+  position: relative;
+
+  @include media-breakpoint-up(md) {
+    display: none;
+  }
+}
+
+#sidebar-wrapper.showExpandedDetails .mobile-expand {
+  display: none;
+}
+
 .business-details {
-  max-height: calc(100vh - 174px);
+  max-height: calc(100vh);
+  @include media-breakpoint-up(md) {
+    max-height: calc(100vh - 174px);
+  }
   overflow-y: auto;
   overflow-x: hidden;
 }
 
+#sidebar-wrapper.showExpandedDetails .business-details {
+  max-height: calc(100vh - 36px);
+  @include media-breakpoint-up(md) {
+    max-height: calc(100vh - 174px);
+  }
+}
+
 .back-to-list {
+  display: none;
+  @include media-breakpoint-up(sm) {
+    display: block;
+  }
   font-size: 0.8rem;
 
   i {

diff --git a/covid-19-support/src/components/ResultsList.vue b/covid-19-support/src/components/ResultsList.vue
@@ -100,6 +100,7 @@ export default {
 .resultList {
   overflow-y: overlay;
   max-height: calc(100vh - #{$mobile-search-filters-height + $mobile-nav-height});
+  max-height: calc(100vh - 37px);
   padding-bottom: $mobile-map-list-toggle-height;
 
   @include media-breakpoint-up(md) {

diff --git a/covid-19-support/src/components/Sidebar.vue b/covid-19-support/src/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border-right" id="sidebar-wrapper">
+  <div class="border-right" id="sidebar-wrapper" :class="expandedDetails()">
     <div class="tab bg-dialogs border-right border-top border-bottom" @click="$emit('toggle')">
       <i class="fas fa-caret-down" />
     </div>
@@ -22,13 +22,17 @@
         </info-panel>
       </div>
 
-      <business-details
-        :infotype="'green'"
-        :icon="'fa-tractor'"
-        :business="location.currentBusiness"
-        v-if="location.currentBusiness != null && showList !== true"
-        @close-details="$emit('close-details')"
-      ></business-details>
+      <div class="sh" @click="showListing()">Show List</div>
+
+      <div @click="toggleExpandingDetails()">
+        <business-details
+          :infotype="'green'"
+          :icon="'fa-tractor'"
+          :business="location.currentBusiness"
+          v-if="location.currentBusiness != null && showList !== true"
+          @close-details="$emit('close-details')"
+        ></business-details>
+      </div>
     </div>
 
     <results-list
@@ -61,11 +65,41 @@ export default {
     highlightFilteredMarkers: Array,
     location: { locValue: Number, locId: String, isSetByMap: Boolean, currentBusiness: Object },
     showList: Boolean
+  },
+  data() {
+    return {
+      showExpandedDetails: false
+    }
+  },
+  methods: {
+    toggleExpandingDetails() {
+      this.showExpandedDetails = !this.showExpandedDetails
+    },
+    showListing() {
+      this.showList = true
+      this.showExpandedDetails = true
+    },
+    expandedDetails() {
+      if (this.showExpandedDetails) return 'showExpandedDetails'
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.sh {
+  display: block;
+  position: absolute;
+  top: -35px;
+  right: 0;
+  z-index: 2000;
+  background: white;
+  padding: 2px 10px;
+  box-shadow: 0px 0px 4px #999;
+  @include media-breakpoint-up(md) {
+    display: none;
+  }
+}
 .custom-select {
   font-size: 0.8rem;
   cursor: pointer;
@@ -76,14 +110,23 @@ export default {
   transform: translateY(100%);
   z-index: 1035;
   max-height: 100vh;
-  width: 100%;
+  margin-left: 2.5%;
+  margin-right: 2.5%;
+  width: 95%;
   height: 100vh;
   background: theme-color('secondary');
+  z-index: 1037;
 
   @media (prefers-color-scheme: dark) {
     background: theme-color('secondaryDark');
   }
 
+  @include media-breakpoint-up(sm) {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+
   @include media-breakpoint-up(md) {
     height: auto;
     width: $tablet-sidebar-width;
@@ -94,8 +137,19 @@ export default {
     width: $desktop-sidebar-width;
   }
 }
-
 #wrapper.toggled #sidebar-wrapper {
+  transform: translateY(calc(100vh - 215px));
+
+  &.showExpandedDetails {
+    transform: translateY(-97px);
+    @include media-breakpoint-up(md) {
+      transform: translateX(0);
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    transform: translateX(0);
+  }
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 
   @media (prefers-color-scheme: dark) {

diff --git a/covid-19-support/src/scss/main.scss b/covid-19-support/src/scss/main.scss
@@ -79,7 +79,7 @@ h6,
 #sidebar-wrapper,
 #page-content-wrapper {
   margin-top: $mobile-search-filters-height;
-  padding-bottom: $mobile-nav-height;
+  // padding-bottom: $mobile-nav-height;
   box-sizing: border-box;
   width: 100%;
   height: calc(100% - 134px);
@@ -91,10 +91,10 @@ h6,
     margin-top: 0;
     height: 100%;
   }
-}
 
-#wrapper.toggled #sidebar-wrapper {
-  transform: translateX(0);
+  &.showExpandedDetails {
+    // margin-top:0;
+  }
 }
 
 #page-content-wrapper {