more mobile testing

OSU-Sustainability-Office · Aug 10, 2023 · 20057dd · 20057dd
1 parent ed94965
commit 20057dd
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 126 deletions.
diff --git a/src/components/map/map.vue b/src/components/map/map.vue
@@ -1,7 +1,13 @@
 <template>
  <el-row class="stage">
  <el-col :span="24">
- <el-menu class="sideMenu" mode="vertical" backgroundColor="#1A1A1A" @select="handleSelect">
+ <el-menu
+ class="sideMenu"
+ mode="vertical"
+ backgroundColor="#1A1A1A"
+ @select="handleSelect"
+ :style="{ marginTop: marginTop + 'px' }"
+ >
  <div class="colorByTitle">Group By:</div>
  <switchButtons :titles="['Category', 'Energy Trend']" v-model="grouping" />
  <el-menu-item-group v-if="grouping === 'Category'">
@@ -495,20 +501,20 @@ $sideMenu-width: 250px;
  z-index: 2000;
  width: $sideMenu-width;
  padding-top: 1em;
- // margin-top: 10em;
+ margin-top: 0em;
 }
 
 @media only screen and (max-width: 768px) {
  .sideMenu {
  background-color: $--color-black;
- height: calc(100% - 1em);
+ height: calc(70% - 1em);
  position: absolute;
- top: 0;
- left: 0;
+ left: calc(100% - #{$sideMenu-width});
  z-index: 2000;
  width: $sideMenu-width;
  padding-top: 1em;
- margin-top: 10em;
+ top: 180px;
+ bottom: 0px;
  }
 }
 
@@ -521,7 +527,7 @@ $sideMenu-width: 250px;
  background-color: blue;
  position: absolute;
  top: 0;
- left: 250px;
+ left: 0px;
  height: 100%;
  width: calc(100% - #{$sideMenu-width});
 }

diff --git a/src/components/navBar.vue b/src/components/navBar.vue
@@ -1,145 +1,125 @@
-<!--
- Filename: navBar.vue
- Info: Navgiation bar component
--->
 <template>
- <el-row class="sus-nav">
- <el-col :xs="9" :sm="7" :md="5" :lg="4" :xl="3">
- <svgLogo width="auto" alt="" class="sus-nav-image" @click="$router.push({ path: '/map' })" />
- </el-col>
- <el-col :xs="13" :sm="15" :md="15" :lg="18" :xl="20">
- <el-menu
- :default-active="activeIndex"
- mode="horizontal"
- backgroundColor="rgba(0,0,0,0)"
- class="sus-nav-menu"
- text-color="#FFFFFF"
- active-text-color="#1A1A1A"
- :router="true"
+ <div>
+ <div class="nav-menu">
+ <i
+ class="fas fa-bars"
+ @click="
+ showMenu()
+ changeMarginTop()
+ "
  >
- <el-menu-item index="map" :route="{ path: '/map' }" ref="mapItem">Map</el-menu-item>
- <el-menu-item index="buildings" :route="{ path: '/buildings' }" ref="buildingItem">Building List</el-menu-item>
- <el-menu-item index="campaigns" :route="{ path: '/campaigns' }" ref="buildingItem">Campaigns</el-menu-item>
- <!--<el-menu-item v-if='onid' index="dashboard" :route='{path: "/dashboard"}' ref='dashboardItem'>My Dashboard</el-menu-item> -->
- <el-menu-item index="getStarted" :route="{ path: '/getstarted' }" ref="getStartedItem"
- >Get Started</el-menu-item
- >
- <el-menu-item index="getStarted" :route="{ path: '/contact' }" ref="getStartedItem">Contact Us</el-menu-item>
- </el-menu>
- </el-col>
- <!--
- <el-col :xs="2" :sm="2" :md="4" :lg="2" :xl="1">
- <a class='sus-nav-sign' v-if='onid && $route.path !== "/"' :href='logoutLink'>Sign Out</a>
- <a class='sus-nav-sign' v-if='!onid && $route.path !== "/"' :href='loginLink'>Sign In</a>
- </el-col>
- -->
- </el-row>
+ </i>
+ <div class="nav-content" :class="this.showMobileMenu ? 'open-menu' : 'closed-menu'">
+ <div class="logo"><svgLogo width="160px" alt="" @click="$router.push({ path: '/map' })" /></div>
+ <ul class="nav-items">
+ <li class="navLi"><a href="/#/map" class="navLink" rel="noreferrer"> Map </a></li>
+ <li class="navLi"><a href="/#/buildings" class="navLink" rel="noreferrer"> Building List </a></li>
+ <li class="navLi"><a href="/#/campaigns" class="navLink" rel="noreferrer"> Campaigns </a></li>
+ <li class="navLi"><a href="/#/getstarted" class="navLink" rel="noreferrer"> Get Started </a></li>
+ <li class="navLi"><a href="/#/contact" class="navLink" rel="noreferrer"> Contact </a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
 </template>
+
 <script>
 import svgLogo from '../../public/images/logo.svg'
 
 export default {
- name: 'navigbar',
  components: {
  svgLogo
  },
  data () {
  return {
- loginLink:
- 'https://api.sustainability.oregonstate.edu/v2/auth/login?returnURI=' +
- process.env.VUE_APP_HOST_ADDRESS +
- '/#/map',
- logoutLink: 'https://api.sustainability.oregonstate.edu/v2/auth/logout',
- activeIndex: ''
+ showMobileMenu: false
  }
  },
- computed: {
- onid: {
- get () {
- return this.$store.getters['user/onid']
- }
- }
- },
- mounted () {
- this.activeIndex = this.$route.path.split( '/' )[1]
- },
- watch: {
- '$route.path': function ( path ) {
- this.activeIndex = path.split( '/' )[1]
- const buttons = [this.$refs.mapItem, this.$refs.buildingItem, this.$refs.dashboardItem, this.$refs.getStartedItem]
- for ( let item of buttons ) {
- if ( !item ) {
- continue
- }
- if ( this.activeIndex !== item.index ) {
- item.$el.classList.remove( 'is-active' )
- } else {
- item.$el.classList.add( 'is-active' )
- }
- }
+ methods: {
+ showMenu () {
+ this.showMobileMenu = !this.showMobileMenu
  }
  }
 }
 </script>
-<style scoped lang="scss">
-.sus-nav {
- background-color: $--color-primary !important;
- border-bottom: solid 1px $--color-white;
- height: $--nav-height !important;
- z-index: 2000;
- padding-left: 2em;
- padding-right: 2em;
- overflow: hidden;
-}
-.sus-nav-image {
- padding-top: 1px;
- padding-bottom: 1px;
- height: $--nav-height - 2px;
- cursor: pointer;
-}
-.sus-nav-menu {
- height: $--nav-height !important;
- border: none !important;
-}
-.sus-nav-menu > * {
- padding-top: 5px;
- height: $--nav-height - 2px !important;
- color: $--color-white;
- border: none;
+
+<style lang="scss" scoped>
+.nav-menu {
+ background-color: white;
 }
-.el-menu-item {
- color: $--color-white !important;
- border: none !important;
- height: 100% !important;
+.nav-content {
+ display: flex;
+ justify-content: left;
+ padding: 5px 20px;
+ align-items: left;
+ padding-top: 10px;
+ left: 10px;
+ background-color: $--color-primary !important;
 }
-.sus-nav-menu > *:not(.is-active):hover {
- color: $--color-black !important;
- background-color: rgba(0, 0, 0, 0) !important;
+.nav-items {
+ display: flex;
+ justify-content: center;
+ align-items: left;
+ list-style: none;
+ margin: 0;
+ padding-top: 18px;
+ li {
+ padding: 0 10px;
+ }
 }
-.sus-nav-menu > *.is-active {
- border-bottom: none !important;
- background-color: rgba(0, 0, 0, 0.3) !important;
- color: $--color-white !important;
+i {
+ display: none;
 }
-.sus-nav-menu > *:not(.is-active):hover:after {
- content: '\a0';
- display: block;
- padding: 0 2px;
- line-height: 1px;
- border-bottom: 3px solid #000;
+.navLi {
+ padding-top: 10px;
 }
-.sus-nav-sign {
- color: #ffffff !important;
- height: $--nav-height !important;
- line-height: $--nav-height !important;
- text-decoration: none;
- cursor: pointer;
- transition: color 0.2s ease;
- font-size: 1.1em;
- text-overflow: ellipsis;
+.navLink {
+ color: white;
+ margin-top: 10px;
+ font-size: 16px;
 }
-.sus-nav-sign:hover {
- color: #000000 !important;
- text-decoration: none;
+
+// Mobile version - hidden hamburger menu
+@media screen and (max-width: 768px) {
+ .nav-menu {
+ padding-left: -200;
+ padding-bottom: -20;
+ top: -20px;
+ position: absolute;
+ width: 100%;
+ background-color: $--color-primary !important;
+ }
+ .open-menu {
+ opacity: 1;
+ height: 180px;
+ }
+ .closed-menu {
+ opacity: 0;
+ height: 0;
+ padding: 0;
+ }
+ .nav-content {
+ flex-direction: column;
+ z-index: 500;
+ position: relative;
+ padding: 27px 30px;
+ transition: all 0.2s ease-out;
+ left: 20px;
+ margin-right: 300px;
+ align-items: start;
+ top: -50px;
+ }
+ .nav-items {
+ flex-direction: column;
+ align-items: left;
+ padding-top: 0px;
+ }
+ i {
+ display: block;
+ text-align: left;
+ padding-left: 10px;
+
+ padding-top: 23px;
+ }
 }
 </style>