adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Update mobile layout adjustments
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m53s
Details

Browse Source
This commit is contained in:
Adam French
2026-03-09 13:06:17 +00:00
parent 1578a05762
commit 77e2c272cb
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
nginx/vue/src/views/home/Home.vue
View File

@@ -24,7 +24,7 @@ import Consumption from "./Consumption.vue";
<template> <template>
<main class="halftone justify-center flex flex-row w-full h-full"> <main class="halftone justify-center flex flex-row w-full h-full">
<div class="h-fit flex flex-row"> <div class="outerWrap h-fit flex flex-row">
<div <div
class="sidebar flex-1 flex flex-col m-10 w-60 gap-2 place-content-between" class="sidebar flex-1 flex flex-col m-10 w-60 gap-2 place-content-between"
> >
@@ -87,24 +87,37 @@ import Consumption from "./Consumption.vue";
.homeGrid { .homeGrid {
display: grid; display: grid;
grid-gap: 5px; gap: 5px;
grid-template-columns: repeat(10, 1fr); grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
} }
@media (max-width: 850px) { @media (max-width: 1200px) {
.homeGrid { .outerWrap {
width: 100%;
display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch;
}
.homeGrid {
order: -1;
width: 100%;
margin-inline: 0;
box-sizing: border-box;
}
.sidebar {
width: 100%;
margin: 5px 10px;
flex-direction: column;
align-items: center;
gap: 8px;
} }
} }
@media (max-width: 1200px) { @media (max-width: 850px) {
.tr, .homeGrid {
.br, display: flex;
.sidebar { flex-direction: column;
display: none;
} }
} }