Skip to content

Commit

Permalink
[PR] Map Popup Adjustment for Smaller Laptop Screens (#197)
Browse files Browse the repository at this point in the history 
* tentative popup edits

* small screen laptop adjustments added

* should account for possibility that $window_height value is equal to actual window.innerHeight

* made form-factor change more reactive to browser zoom levels

* worked on reducing empty space on horizontal map popups

* finally fixed spacing issue

---------

Co-authored-by: Milan Donhowe <milanaugust@gmail.com>
  • Loading branch information
@solderq35 @MilanDonhowe
solderq35 and MilanDonhowe authored Jun 9, 2023
1 parent 8c02a52 commit 623ef15
Show file tree
Hide file tree
Showing 4 changed files with 178 additions and 82 deletions.
88 changes: 44 additions & 44 deletions src/components/get_started/getStartedContent.vue
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
<template>
<el-container>
<el-main>
<el-row >
<getStartedBanner />
</el-row>
<el-row>
<mainDescription />
</el-row>
<el-row>
<h1 class="faq">Frequently Asked Questions (FAQ's):</h1>
</el-row>
<el-row>
<faq />
</el-row>
</el-main>
</el-container>
</template>

<script>
import getStartedBanner from '@/components/get_started/getStartedBanner'
import faq from '@/components/get_started/faq'
import mainDescription from '@/components/get_started/mainDescription'
export default {
name: 'getStartedContent',
components: {
getStartedBanner,
faq,
mainDescription
}
}
</script>

<style>
.el-row {
margin-bottom: 20px
}
.faq {
text-align: center;
font-weight: bold;
color: #D73F09
}
</style>
<template>
<el-container>
<el-main>
<el-row >
<getStartedBanner />
</el-row>
<el-row>
<mainDescription />
</el-row>
<el-row>
<h1 class="faq">Frequently Asked Questions (FAQ's):</h1>
</el-row>
<el-row>
<faq />
</el-row>
</el-main>
</el-container>
</template>

<script>
import getStartedBanner from '@/components/get_started/getStartedBanner'
import faq from '@/components/get_started/faq'
import mainDescription from '@/components/get_started/mainDescription'
export default {
name: 'getStartedContent',
components: {
getStartedBanner,
faq,
mainDescription
}
}
</script>

<style>
.el-row {
margin-bottom: 0px
}
.faq {
text-align: center;
font-weight: bold;
color: #D73F09
}
</style>
168 changes: 131 additions & 37 deletions src/components/map/sideView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,53 +2,96 @@
Filename: sideView.vue
Description: Despite the name this references the pop-up building modal window on the map
NOT the actually right-hand side view (that's handled directly in the map.vue component)
NOTE FOR LAPTOP SCREEN SIZES: Reference src/main.js for $window and $WINDOW_HEIGHT values
-->
<template>
<el-row class='stage'>
<el-row class='main'>
<el-row class="title">
<el-col :span='23'>{{ building.name }}</el-col>
<el-col :span='1' class='close-box'><i class="fas fa-times" @click="hide()"></i></el-col>
</el-row>
<el-row>
<el-col :span='24' v-loading='building ? false : true'>
<div class="media" ref='media'></div>
</el-col>
</el-row>
<el-row class="graphcontrol">
<el-col :span='24'>
<el-col :span='24' class='buttonContainer'>
<switchButtons :blocks='buildingBlocks' :forceUpdate='false' ref='switchbutton' />
<div class = "smaller-screen" v-if="isLaptopScreen">
<el-row class='stage-small'>
<el-row class='main-small'>
<el-row class="title">
<el-col :span='23'>{{ building.name }}</el-col>
<el-col :span='1' class='close-box'><i class="fas fa-times" @click="hide()"></i></el-col>
</el-row>
<el-row>
<el-col :span='24' v-loading='building ? false : true'>
<div class="media-small" ref='media'></div>
</el-col>
<el-row class='graphslide'>
<i class="left fas fa-angle-left" @click='prev()' ref="prevArrow"></i>
<i class="right fas fa-angle-right" @click='next()' ref="nextArrow"></i>
</el-row>
<el-row type='flex' class="graph" ref='scrollBox'>
<el-col class='inline' v-for='block in buildingBlocks' :key='block.id' :span='24' ref='slidingBox'>
<chartController :path='block.path' ref="chartController" class="chart" :styleC="{ 'display': 'inline-block', 'width': 'calc(100% - 20px)','height': '100%', 'margin-right': '10px', 'margin-left': '10px' }" :height='200' :invertColors='true'/>
</el-col>
</el-row>
<el-row class="buttons">
<el-col :span='12'>
<el-button class='bigButton' @click="$emit('startCompare', building.id)">Compare</el-button>
</el-row>
<el-row class="graphcontrol-small">
<el-col :span='24'>
<el-col :span='24' class='buttonContainer'>
<switchButtons :blocks='buildingBlocks' :forceUpdate='false' ref='switchbutton' />
</el-col>
<el-col :span='12'>
<el-button class='bigButton' @click='$router.push({path: `/building/${building.id}/${currentRange + 1}`})'>View Full Graph</el-button>
<el-row class='graphslide'>
<i class="left fas fa-angle-left" @click='prev()' ref="prevArrow"></i>
<i class="right fas fa-angle-right" @click='next()' ref="nextArrow"></i>
</el-row>
<el-row type='flex' class="graph" ref='scrollBox'>
<el-col class='inline' v-for='block in buildingBlocks' :key='block.id' :span='24' ref='slidingBox'>
<chartController :path='block.path' ref="chartController" class="chart" :styleC="{ 'display': 'inline-block', 'width': 'calc(100% - 20px)','height': '100%', 'margin-right': '10px', 'margin-left': '10px' }" :height='200' :invertColors='true'/>
</el-col>
</el-row>
<el-row class="bottomButtons">
<el-col :span='12'>
<el-button class='bigButton' @click="$emit('startCompare', building.id)">Compare</el-button>
</el-col>
<el-col :span='12'>
<el-button class='bigButton' @click='$router.push({path: `/building/${building.id}/${currentRange + 1}`})'>View Full Graph</el-button>
</el-col>
</el-row>
</el-col>
</el-row>
</el-row>
</el-row>
</div>
<div class = "bigger-screen" v-else>
<el-row class='stage'>
<el-row class='main'>
<el-row class="title">
<el-col :span='23'>{{ building.name }}</el-col>
<el-col :span='1' class='close-box'><i class="fas fa-times" @click="hide()"></i></el-col>
</el-row>
<el-row>
<el-col :span='24' v-loading='building ? false : true'>
<div class="media" ref='media'></div>
</el-col>
</el-row>
<el-row class="graphcontrol">
<el-col :span='24'>
<el-col :span='24' class='buttonContainer'>
<switchButtons :blocks='buildingBlocks' :forceUpdate='false' ref='switchbutton' />
</el-col>
</el-row>
</el-col>
<el-row class='graphslide'>
<i class="left fas fa-angle-left" @click='prev()' ref="prevArrow"></i>
<i class="right fas fa-angle-right" @click='next()' ref="nextArrow"></i>
</el-row>
<el-row type='flex' class="graph" ref='scrollBox'>
<el-col class='inline' v-for='block in buildingBlocks' :key='block.id' :span='24' ref='slidingBox'>
<chartController :path='block.path' ref="chartController" class="chart" :styleC="{ 'display': 'inline-block', 'width': 'calc(100% - 20px)','height': '100%', 'margin-right': '10px', 'margin-left': '10px' }" :height='200' :invertColors='true'/>
</el-col>
</el-row>
<el-row class="buttons">
<el-col :span='12'>
<el-button class='bigButton' @click="$emit('startCompare', building.id)">Compare</el-button>
</el-col>
<el-col :span='12'>
<el-button class='bigButton' @click='$router.push({path: `/building/${building.id}/${currentRange + 1}`})'>View Full Graph</el-button>
</el-col>
</el-row>
</el-col>
</el-row>
</el-row>
</el-row>
</el-row>
</div>
</template>

<script>
import chartController from '@/components/charts/chartController'
import switchButtons from '@/components/map/time_switch_buttons_big'
export default {
name: 'sideView',
props: [],
props: {},
components: {
chartController, switchButtons
},
Expand All @@ -58,12 +101,17 @@ export default {
title: '',
unit: 'day',
int: 1,
index: 0
index: 0,
windowHeight: window.innerHeight,
windowUpdate: () => { this.windowHeight = window.innerHeight }
}
},
computed: {
isLaptopScreen () {
return this.windowHeight <= this.$WINDOW_HEIGHT
},
currentRange: {
get () {
return this.$refs.switchbutton.currentRange
Expand All @@ -88,6 +136,12 @@ export default {
}
}
},
mounted () {
window.addEventListener('resize', this.windowUpdate)
},
beforeDestroy () {
window.removeEventListener('resize', this.windowUpdate)
},
methods: {
hide: function () {
this.$emit('hide')
Expand Down Expand Up @@ -153,7 +207,16 @@ export default {
width: 450px !important;
margin-left: -470px;
height: 85% !important;
}
.stage-small {
z-index: 401;
display: block;
position: absolute;
left: 100%;
bottom: 8%;
width: 900px !important; // hard-coded value, might not be correct
margin-left: -930px; // hard-coded value, might not be correct
height: 85% !important;
}
.main {
padding: 0;
Expand All @@ -162,6 +225,14 @@ export default {
background-color: rgb(26,26,26);
box-shadow: -1px 1px 6px rgba(0,0,0,0.6);
}
.main-small {
padding: 0;
border-radius: 5px;
overflow: hidden;
background-color: rgb(26,26,26);
box-shadow: -1px 1px 6px rgba(0,0,0,0.6);
height: 378px; // hard-coded value, might not be correct
}
.title {
padding: 0.3em;
padding-left: 0.8em;
Expand All @@ -172,6 +243,7 @@ export default {
color: #FFF;
font-family: 'StratumNo2';
border-bottom: solid 1px #fff;
text-align: center; // might as well center this for the big screen version too
}
.close-box {
cursor: pointer;
Expand All @@ -183,10 +255,26 @@ export default {
background-position: center;
border-bottom: solid 1px #fff;
}
.media-small {
height: 320px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
// deleted white border on bottom - might need to add back
width: 450px;
position: absolute;
top: 0px; // hard-coded value, might not be correct
}
.graphcontrol {
padding: 1.5em;
}
.graphcontrol-small {
padding: 0.5em;
width: 450px;
margin-left: 450px;
position: absolute;
top: 50px; // hard-coded value, might not be correct
}
.rangeButtonParent {
padding: 0.2em;
}
Expand Down Expand Up @@ -266,4 +354,10 @@ export default {
color: $--color-white;
border-color: $--color-white;
}
.buttonContainer {
height: 60px; // reduce padding above top buttons (week / 60 days /year)
}
.bottomButtons {
height: 25px; // might not be needed, div pokes out on inspect element otherwise, but doesn't affect button padding
}
</style>
1 change: 0 additions & 1 deletion src/components/map/time_switch_buttons_big.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,6 @@ export default {
dateStart = this.campaignDateStart
}
console.log(this.blocks)
for (let block of this.blocks) {
// if (!block.promise) continue
await block.promise
Expand Down
3 changes: 3 additions & 0 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,6 @@ var v = new Vue({
render: h => h(App)
})
window.vue = v
Vue.prototype.$WINDOW_HEIGHT = 1080
// 800+ height may be more accurate for final product, 700 for testing
// Vue.prototype.$WINDOW_HEIGHT = 800

0 comments on commit 623ef15

Please sign in to comment.