[PR] Mobile Friendly Restyle (#237)

* commit here before prettier test * prettier seems to work * better navbar rough draft and prettier setup finished * maybe fix mobile margin right issues * mobile detect pls * viewport pls * see if condensing mobile detect works * do we need screen in media query * run lint again on this branch * more mobile testing * fix mobile mapcontainer css * linter * fix navbar and right position on mobile branch * poc concept for event bus * moved event bus components to separate components * poc show or hide div on click * poc show and hide div complete? * set default true and remove old file * mobile test fr * mobile margins test + add sequential format script * see if this fixes vertical dimensions on mobile * is this stage height better * should fix margins fr? * see if 100% height works * test mobile dimensions again * styling better maybe for margins * fix margins again * another margin test * fix open and close navbar on select * make this dialogue smaller * fix show and hide menu buttons on mobile * maybe fix margin issue * hide menu button popup again * reset menu button higher * fix nav menu width mobile * update vue version * hide map menu on mobile load * roll back vue version * test auto open local script + margin adjusts * test landscope iphone * landscape mode testing * test side menu * how wide is this * forget about landscape for now * try this viewport * 800 * how long can we go * maybe better placement * reduce popup width * see if bottom css does anything * em height sidemenu * closed menu height * can I get away with existing navbar * is this popup better on left * remove redundant code * maybe fix campaigns * see if this height is better * try 18 font * try to adjust padding on campaigns * try to fix campaign date labels * hopefully fix date padding * adjust building menu popup styling * adjust font size * fix iframes for mobile * adjust reset map button width * experimenting with font sizes * trying different popup sizes * change menu button left * 15px * reset map button width * navbar highlighting * logo cursor pointer * fix mobile contact page * mobile friendly building list menu * fix reponsiveness for building label filters * change variables to something that makes more sense * reset env dev
OSU-Sustainability-Office · Sep 8, 2023 · 1bf6a19 · 1bf6a19
1 parent 645c94d
commit 1bf6a19
Show file tree

Hide file tree

Showing 14 changed files with 266 additions and 163 deletions.
diff --git a/backend/tests/data_layer.spec.js b/backend/tests/data_layer.spec.js
@@ -1,8 +1,8 @@
 /*
-* Filename: data_layer.spec.js
-* Description: Unit tests for API endpoints associated with
-* the data_layer (or data_store) VueX module
-*/
+ * Filename: data_layer.spec.js
+ * Description: Unit tests for API endpoints associated with
+ * the data_layer (or data_store) VueX module
+ */
 
 // CORS testing utility requires
 const testConfig = require('./assertedData/test_config.json')
@@ -17,11 +17,11 @@ const MOCK_REQUEST_EVENT = {
  origin: `${client.scheme}://${client.host}`
  },
  queryStringParameters: {
- 'id': 9,
- 'point': 'accumulated_real',
- 'startDate': 1603854900,
- 'endDate': 1613618100,
- 'meterClass': 48
+ id: 9,
+ point: 'accumulated_real',
+ startDate: 1603854900,
+ endDate: 1613618100,
+ meterClass: 48
  }
 }
 
@@ -102,11 +102,10 @@ describe('Testing data_layer related API endpoints...', () => {
  expect(jsonData['data'].length).toBe(2)
  expect(jsonData['data'][0]['readings'].length).toBeGreaterThan(10)
  expect(jsonData['data'][1]['readings'].length).toBeGreaterThan(10)
-
  })
 
  // TODO maybe: fix solar meter upload test below
-/*
+ /*
  const meter_id = 'M' + '007c9349-72ba-450c-aa1f-4e5a77b68f79'.replace(/-/g, 'M')
  it('mock solar data upload...', async () => {
  process.env.ACQUISUITE_PASS = 'test_pwd'

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
  <meta charset="utf-8" />
- <meta name="viewport" content="width=1028px,initial-scale=1.0" />
+ <meta name="viewport" content="width=600px,initial-scale=0" />
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-74257268-2"></script>
  <script>

diff --git a/src/App.vue b/src/App.vue
@@ -49,7 +49,7 @@ export default {
  if ( !document.cookie.split( ';' ).some( cookieString => cookieString.includes( 'firstTimer' ) ) ) {
  this.$msgbox( {
  title: 'First Timer?',
- message: 'Take a look at the "Get Started" tab to learn more and for FAQ\'s!',
+ message: 'Take a look at the "FAQ" tab for some info on how to get started!',
  showCancelButton: true,
  confirmButtonText: 'OK',
  cancelButtonText: 'Never Show This Message Again',
@@ -90,6 +90,9 @@ export default {
  font-weight: bold;
  font-style: normal;
 }
+.el-message-box {
+ width: 350px !important;
+}
 body {
  font-family: 'Open Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
@@ -139,6 +142,13 @@ body {
 <style scoped lang="scss">
 @import '@/assets/style-variables.scss';
 
+/* Media query for mobile devices */
+@media only screen and (max-width: 600px) {
+ body {
+ max-width: 100%;
+ overflow-x: hidden; /* Hide horizontal scrollbar */
+ }
+}
 .app {
  padding: 0;
  margin: 0;

diff --git a/src/components/building_list/building_list.vue b/src/components/building_list/building_list.vue
@@ -211,6 +211,16 @@ export default {
  font-size: 16px;
 }
 
+@media only screen and (max-width: 600px) {
+ .tab_label {
+ font-size: 14px;
+ }
+ /*-- for reducing el-tabs padding: https://www.jianshu.com/p/9db8679de026 --*/
+ ::v-deep .el-tabs__item {
+ padding: 0 10px;
+ }
+}
+
 /*--- Flex Box ---*/
 .card_flex {
  flex-wrap: wrap !important;

diff --git a/src/components/campaigns/campaign_building_list.vue b/src/components/campaigns/campaign_building_list.vue
@@ -237,4 +237,10 @@ $clippath: polygon(2.5% 0%, 0% 100%, 97.5% 100%, 100% 0%);
 .innerTrophy.selected {
  color: $--color-white;
 }
+
+@media only screen and (max-width: 600px) {
+ .buildingCol {
+ font-size: 18px;
+ }
+}
 </style>
diff --git a/src/components/campaigns/campaign_list_block.vue b/src/components/campaigns/campaign_list_block.vue
@@ -6,8 +6,8 @@
  </el-col>
  </el-row>
  <el-row class="popped">
- <el-col :span="18" class="standings"> </el-col>
- <el-col :span="6" class="dates"> {{ camp.dateStart | trunc }} - {{ camp.dateEnd | trunc }} </el-col>
+ <el-col :span="4" class="standings"> </el-col>
+ <el-col :span="20" class="dates"> {{ camp.dateStart | trunc }} - {{ camp.dateEnd | trunc }} </el-col>
  </el-row>
  </div>
 </template>

diff --git a/src/components/campaigns/main_campaign_view.vue b/src/components/campaigns/main_campaign_view.vue
@@ -20,10 +20,12 @@
  <el-col :span="16" class="otherSide">
  <div class="chartArea">
  <el-row class="title">
- <el-col :span="12">
+ <el-col :span="30">
  {{ currentTitle }}
  </el-col>
- <el-col :span="12" class="timeSwitchButtons">
+ </el-row>
+ <el-row class="timeframe-labels">
+ <el-col :span="30" class="timeSwitchButtons">
  <switchButtons
  :blocks="blocks"
  :campaign="true"
@@ -199,6 +201,14 @@ export default {
  padding: 0;
 }
 .title {
+ font-size: 34px;
+ color: $--color-white;
+ font-family: 'StratumNo2';
+ text-align: left;
+ padding-left: 1em;
+ padding-bottom: 1em;
+}
+.timeframe-labels {
  font-size: 34px;
  color: $--color-white;
  font-family: 'StratumNo2';
@@ -227,7 +237,7 @@ export default {
  padding-right: 1em;
  padding-bottom: 1em;
  // min-height: calc(100vh - #{$--nav-height} - 200px);
- height: calc(400px + 5em);
+ height: calc(450px + 5em);
 }
 .timeSwitchButtons {
  text-align: right;
@@ -236,4 +246,16 @@ export default {
  top: -0.5em;
  font-size: 12px !important;
 }
+
+@media only screen and (max-width: 600px) {
+ .buildingContainer {
+ padding-right: 0em;
+ }
+ .otherSide {
+ padding-left: 0em;
+ }
+ .title {
+ padding-left: 2em;
+ }
+}
 </style>
diff --git a/src/components/charts/chartController.vue b/src/components/charts/chartController.vue
@@ -167,7 +167,7 @@ export default {
  if ( this.$route.path.startsWith( '/map' ) ) {
  return 'scaled-iframe'
  } else {
- return ''
+ return 'building-iframe'
  }
  },
  promise: {
@@ -353,4 +353,14 @@ export default {
  transform: scale(0.4);
  transform-origin: top left;
 }
+.building-iframe {
+ height: 600px;
+ width: 1000px;
+}
+@media only screen and (max-width: 600px) {
+ .building-iframe {
+ height: 600px;
+ width: 600px;
+ }
+}
 </style>
diff --git a/src/components/extras/contact.vue b/src/components/extras/contact.vue
@@ -48,4 +48,9 @@ export default {
  width: 50%;
  padding: 10px;
 }
+@media only screen and (max-width: 600px) {
+ .center {
+ width: 80%;
+ }
+}
 </style>
diff --git a/src/components/leftBuildingMenu.vue b/src/components/leftBuildingMenu.vue
@@ -0,0 +1,51 @@
+<template>
+ <div>
+ <button @click="toggleFlag" class="toggleButton">{{ buttonText }}</button>
+ </div>
+</template>
+
+<script>
+import { EventBus } from '../event-bus'
+
+export default {
+ name: 'leftBuildingMenu',
+ data () {
+ return {
+ flag: true,
+ flag2: false
+ }
+ },
+ computed: {
+ isSmallScreen () {
+ return window.innerWidth < 844 // Adjust this threshold as needed
+ },
+ buttonText () {
+ return this.isSmallScreen
+ ? this.flag2
+ ? 'Hide Building Menu'
+ : 'Show Building Menu'
+ : this.flag
+ ? 'Hide Building Menu'
+ : 'Show Building Menu'
+ }
+ },
+ methods: {
+ toggleFlag: function () {
+ if ( this.isSmallScreen ) {
+ this.flag2 = !this.flag2
+ EventBus.$emit( 'inputData', this.flag2 )
+ } else {
+ this.flag = !this.flag
+ EventBus.$emit( 'inputData', this.flag )
+ }
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+.toggleButton {
+ cursor: pointer;
+ font-size: 15px;
+}
+</style>