Fix: misc. layout fix on mobile

This commit is contained in:
Nelson Chan 2022-06-14 22:43:44 +08:00
parent 0bd1c42080
commit 62acd2edb1
4 changed files with 34 additions and 8 deletions

View File

@ -364,6 +364,12 @@ textarea.form-control {
height: calc(100% - 65px);
}
@media (max-width: 770px) {
&.scrollbar {
height: calc(100% - 40px);
}
}
.item {
display: block;
text-decoration: none;

View File

@ -69,10 +69,22 @@ export default {
};
},
computed: {
/**
* Improve the sticky appearance of the list by increasing its
* height as user scrolls down.
* Not used on mobile.
*/
boxStyle() {
return {
height: `calc(100vh - 160px + ${this.windowTop}px)`,
};
if (window.innerWidth > 550) {
return {
height: `calc(100vh - 160px + ${this.windowTop}px)`,
};
} else {
return {
height: "calc(100vh - 160px)",
};
}
},
sortedMonitorList() {

View File

@ -1,6 +1,6 @@
<template>
<transition name="slide-fade" appear>
<MonitorList />
<MonitorList :scrollbar="true" />
</transition>
</template>
@ -14,3 +14,11 @@ export default {
};
</script>
<style lang="scss" scoped>
@import "../assets/vars";
.shadow-box {
padding: 20px;
}
</style>

View File

@ -65,12 +65,12 @@ const routes = [
path: "/add",
component: EditMonitor,
},
{
path: "/list",
component: List,
},
],
},
{
path: "/list",
component: List,
},
{
path: "/settings",
component: Settings,