commit caf808e3c1f25dcafa58ffcb7bf2ef4540053b9a
parent ed6cf9a3bbf2f6607d304ac4db9db7c662a8f5bb
Author: Brennen T. Mazur <brennen@madis.cool>
Date: Fri, 31 Mar 2023 11:22:00 -0600
add responsive styles appwide
Diffstat:
2 files changed, 61 insertions(+), 16 deletions(-)
diff --git a/app/static/css/main.css b/app/static/css/main.css
@@ -40,11 +40,12 @@ header {
grid-template-columns: min-content auto min-content;
grid-template-areas: "logo navi logout";
align-self:center;
- #logo {
+}
+header #logo {
grid-area:logo;
align-self:center;
}
- #navi {
+header #navi {
grid-area:navi;
justify-content:center;
height:100%;
@@ -56,12 +57,12 @@ header {
place-self:center;
}
- #logout {
+header #logout {
grid-area:logout;
justify-self:end;
align-self:center;
}
-}
+/*}*/
#doc {
position:fixed;
@@ -108,6 +109,15 @@ header {
border-color:var(--accent);
padding:1rem;
}
+/*agreements here is actually for the tables in the admin pages. initially used for the Hours by Employee widget(/admin/employee_report/index.html) */
+.agreements table tr:nth-child(even) {
+ background-color:var(--maincolor);
+}
+.agreements table,.hours-grid tr,.hours-grid td{
+ border:1px;
+ border-color:var(--accent);
+ padding:1rem;
+}
/********** (In)Active Users PAGE **********/
.activeusers-grid {
grid-auto-columns:auto;
@@ -133,6 +143,7 @@ header {
}
/********** WIDGETS **********/
.permissions, .reportswidget, .activeusers, .agreements, .fleet, .punchclock {
+ height:max-content;
display: grid;
align-items: center;
justify-items: center;
@@ -140,6 +151,28 @@ header {
background-color: var(--widgetbg);
border-radius:.5em;
}
+@media (min-width: 415px) {
+ .punchclock {
+ height:-webkit-fill-available;
+ width:-webkit-fill-available;
+ }
+ .permissions, .reportswidget, .activeusers, .agreements, .fleet {
+ height:-webkit-fill-available;
+ width:-webkit-fill-available;
+ min-height:40vh;
+ }
+}
+@media (max-width: 414px) {
+ body {
+ background-color:#000;
+ }
+ .punchclock {
+ padding: 5em 8em;
+ }
+ .permissions, .reportswidget, .activeusers, .agreements, .fleet {
+ padding: 2em 5em 3em 5em;
+ }
+}
/***####### FLEET WIDGET #######***/
.safetychecks{
display:block;
@@ -163,21 +196,31 @@ header {
display: grid;
grid-gap:1em;
margin:1em;
+ place-items:center;
}
-.base-grid {
- grid-template-columns: repeat(2, 1fr);
- grid-auto-columns: minmax(100px, 600px);
-}
-.admin-grid {
- grid-template-columns:repeat(5,1fr);
- grid-auto-rows: auto;
-}
+@media (min-width:720px){
+ .base-grid {
+ grid-template-columns: repeat(2, 1fr);
+ grid-auto-columns: minmax(100px, 600px);
+ }
+ .admin-grid {
+ grid-template-columns:repeat(5,1fr);
+ grid-auto-rows: auto;
+ }
-.agreements {
- grid-row:1/4;
- grid-column:1/ span 4;
+ .agreements,.admin-content {
+ grid-row:1/4;
+ grid-column:1/ span 4;
+ }
+}
+@media (max-width:720px){
+ .base-grid {
+ }
+ .admin-grid {
+ }
+ .agreements,.admin-content {
+ }
}
-
/********** Progress display **********/
.agreements a {
width:100%;
@@ -205,6 +248,7 @@ header {
/********** Footer **********/
footer {
+ margin-top:4em;
text-align:center;
}
footer img {
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -8,6 +8,7 @@
<title>{{ ORGNAME }}</title>
{% endif %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body onload="startTime()">
<!-- BEGIN NAVIGATION BAR -->
