From 462db5dba98a756f70fb532cc3f21d49e69cfbf4 Mon Sep 17 00:00:00 2001
From: Alexander Jason <alexanderjason526@gmail.com>
Date: Mon, 9 Oct 2023 22:41:28 +0700
Subject: [PATCH] feat: responsive
---
app/components/Navbar.php | 2 +-
app/public/styles/home/home.css | 54 +++++++++++++--------------
app/public/styles/template/navbar.css | 6 ++-
app/public/styles/user/auth.css | 9 +++--
4 files changed, 35 insertions(+), 36 deletions(-)
diff --git a/app/components/Navbar.php b/app/components/Navbar.php
index d21c9fa..935bcde 100644
--- a/app/components/Navbar.php
+++ b/app/components/Navbar.php
@@ -39,7 +39,7 @@
<?php endif;?>
<?php endif;?>
</ul>
- <form method="POST"
+ <form method="POST"
action="/../user/logout" >
<input class="section" type="submit" value="Log Out"> </input>
</form>
diff --git a/app/public/styles/home/home.css b/app/public/styles/home/home.css
index 686f3d0..138cf6d 100644
--- a/app/public/styles/home/home.css
+++ b/app/public/styles/home/home.css
@@ -30,35 +30,6 @@
gap: 0.25rem;
}
-
-/*
-select {
- outline: 0;
- background: #fff;
- color: var(--teal);
- border: 2px solid var(--teal);
- padding: 4px;
- border-radius: 4px;
-}
-
-.search {
- color: black;
- font-family: var(--poppins);
- font-weight: 500;
- background: transparent;
- border-radius: 2px solid var(--teal) !important;
-}
-
-.button {
- border-radius: 100px;
- background: var(--teal);
- padding: 1rem;
- display: flex;
-}
-
-
-*/
-
select,
.search {
outline: 0;
@@ -180,4 +151,29 @@ select,
background: #919EAB;
border-radius: 5.25px;
opacity: 0.50;
+}
+
+@media screen and (max-width: 768px) {
+ .book-container {
+ width: 40%;
+ }
+ .topbar-container{
+ flex-direction: column;
+ width: 40%;
+ }
+ .selection{
+ flex-direction: column;
+ align-items: center;
+ gap:0.5rem;
+ }
+ .profile-button{
+ display: none;
+ }
+ .booklist-container{
+ flex-direction: row;
+ }
+ .button-container{
+ flex-direction: column;
+ gap:0.25rem;
+ }
}
\ No newline at end of file
diff --git a/app/public/styles/template/navbar.css b/app/public/styles/template/navbar.css
index ca60eda..04b2a37 100644
--- a/app/public/styles/template/navbar.css
+++ b/app/public/styles/template/navbar.css
@@ -16,7 +16,7 @@
nav {
margin: 0;
font-family: var(--poppins);
- font-size: 1rem;
+ font-size: 1.5vw;
color: #212529;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
@@ -32,7 +32,9 @@ nav {
background: #118A7E;
transition: all 0.5s ease;
}
-
+input{
+ font-size: 1.5vw;
+}
.sidebar .top {
text-align: center;
line-height: auto;
diff --git a/app/public/styles/user/auth.css b/app/public/styles/user/auth.css
index 22a66b9..f492df9 100644
--- a/app/public/styles/user/auth.css
+++ b/app/public/styles/user/auth.css
@@ -89,7 +89,8 @@ p b{
text-align: center;
}
-/*
-#profile-pic {
- display: none;
-} */
+@media screen and (max-width: 768px) {
+ img {
+ max-width: 250px;
+ }
+}
--
GitLab