Skip to content

Commit

Permalink
[PR] Single Column Popup (#245)
Browse files Browse the repository at this point in the history 
* single column popup

* try 90

* remove redundant stuff

* format

* reset env dev

* why did I add an s
  • Loading branch information
@solderq35
solderq35 authored Sep 2, 2023
1 parent eeaf4dd commit 784198e
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 160 deletions.
212 changes: 55 additions & 157 deletions src/components/map/sideView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,129 +2,66 @@
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>
<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>
<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-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 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>
</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-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-row class="graphcontrol">
<el-col :span="24">
<el-col :span="24" class="buttonContainer">
<switchButtons :blocks="buildingBlocks" :forceUpdate="false" ref="switchbutton" />
<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 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 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>
</div>
</el-row>
</template>

<script>
Expand Down Expand Up @@ -152,10 +89,6 @@ export default {
}
},
computed: {
isLaptopScreen () {
return this.windowHeight <= this.$WINDOW_HEIGHT
},
currentRange: {
get () {
return this.$refs.switchbutton.currentRange
Expand Down Expand Up @@ -252,37 +185,19 @@ export default {
z-index: 401;
display: block;
position: absolute;
left: 100%;
bottom: 8%;
left: 90%;
bottom: 13%;
width: 450px !important;
margin-left: -470px;
height: 85% !important;
}
.stage-small {
z-index: 401;
display: block;
position: absolute;
left: 100%;
bottom: 0%;
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;
border-radius: 5px;
overflow: hidden;
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: 390px; // hard-coded value, might not be correct
}
.title {
padding: 0.3em;
padding-left: 0.8em;
Expand All @@ -305,26 +220,9 @@ 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: 55px; // hard-coded value, might not be correct
}
.rangeButtonParent {
padding: 0.2em;
}
Expand Down
3 changes: 0 additions & 3 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,3 @@ 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 784198e

Please sign in to comment.