From 4832a8a394596597334ac2490e3d8cca6f45ada9 Mon Sep 17 00:00:00 2001
From: DewanaGustavus <76590469+DewanaGustavus@users.noreply.github.com>
Date: Mon, 9 Oct 2023 13:59:08 +0700
Subject: [PATCH] style: make image responsive
---
src/App/.htaccess | 4 ++--
src/App/components/cart/Cart.php | 2 +-
src/App/components/product/EditProduct.php | 3 +--
src/App/public/styles/Global.css | 7 +++++++
src/App/public/styles/cart/Cart.css | 12 ++++++++++++
src/App/public/styles/product/addProduct.css | 5 +++++
src/App/public/styles/product/product.css | 3 +--
src/App/public/styles/template/Navbar.css | 3 ++-
8 files changed, 31 insertions(+), 8 deletions(-)
diff --git a/src/App/.htaccess b/src/App/.htaccess
index 0900a07..078895f 100644
--- a/src/App/.htaccess
+++ b/src/App/.htaccess
@@ -3,5 +3,5 @@ RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)$ /index.php/$1 [QSA,L]
-php_value upload_max_filesize 10M
-php_value post_max_size 12M
\ No newline at end of file
+php_value upload_max_filesize 50M
+php_value post_max_size 62M
\ No newline at end of file
diff --git a/src/App/components/cart/Cart.php b/src/App/components/cart/Cart.php
index b143cc5..811bd29 100644
--- a/src/App/components/cart/Cart.php
+++ b/src/App/components/cart/Cart.php
@@ -35,7 +35,7 @@
"
<tr>
<td>
- <img src='{$imagePath}' alt='Product Image' style='width:400px;height:250px;'>
+ <img src='{$imagePath}' alt='Product Image'>
</td>
<td>{$itemDetail['name']}</td>
<td>Rp {$itemDetail['price']}</td>
diff --git a/src/App/components/product/EditProduct.php b/src/App/components/product/EditProduct.php
index 16ae05a..202587e 100644
--- a/src/App/components/product/EditProduct.php
+++ b/src/App/components/product/EditProduct.php
@@ -44,8 +44,7 @@
<label for="product_image">Gambar Produk:</label>
<div class="product-image">
- <img width='450' height='300'
- src= <?php echo "../../public/storage/image/". $this->data['productFile'][0][2] ?> alt="Product Image">
+ <img src= <?php echo "../../public/storage/image/". $this->data['productFile'][0][2] ?> alt="Product Image">
</div>
<input type="file" id="product_image" name="product_image" accept="image/*" title="Ganti Produk">
diff --git a/src/App/public/styles/Global.css b/src/App/public/styles/Global.css
index ffcdd2f..c62a5e0 100644
--- a/src/App/public/styles/Global.css
+++ b/src/App/public/styles/Global.css
@@ -32,3 +32,10 @@ table {
width: 100%;
border-collapse: collapse;
}
+
+@media screen and (max-width: 600px) {
+ img, video {
+ width: 350px;
+ height: auto;
+ }
+}
\ No newline at end of file
diff --git a/src/App/public/styles/cart/Cart.css b/src/App/public/styles/cart/Cart.css
index 35acd8c..d969fc7 100644
--- a/src/App/public/styles/cart/Cart.css
+++ b/src/App/public/styles/cart/Cart.css
@@ -1,4 +1,16 @@
.cart-actions button {
margin-top: 5px;
margin-bottom: 5px;
+}
+
+img, video {
+ width:400px;
+ max-height: 400px;
+}
+
+@media screen and (max-width: 600px) {
+ img, video {
+ width: 40px;
+ height: auto;
+ }
}
\ No newline at end of file
diff --git a/src/App/public/styles/product/addProduct.css b/src/App/public/styles/product/addProduct.css
index d923034..2a5e74b 100644
--- a/src/App/public/styles/product/addProduct.css
+++ b/src/App/public/styles/product/addProduct.css
@@ -26,3 +26,8 @@ input, select, textarea {
border: 1px solid #ccc;
border-radius: 4px;
}
+
+img, video {
+ width: 350px;
+ height: auto;
+}
\ No newline at end of file
diff --git a/src/App/public/styles/product/product.css b/src/App/public/styles/product/product.css
index 4ba79ac..2272de6 100644
--- a/src/App/public/styles/product/product.css
+++ b/src/App/public/styles/product/product.css
@@ -1,6 +1,5 @@
.product-container {
- display: flex;
justify-content: space-around;
align-items: center;
padding: 20px;
@@ -11,7 +10,7 @@
.product-image img, video{
max-width: 100%; /* Set the maximum width to 100% of the container */
- max-height: 300px; /* Set the maximum height (adjust as needed) */
+ max-height: 100px; /* Set the maximum height (adjust as needed) */
width: auto; /* Ensure the image scales proportionally */
height: auto;
}
diff --git a/src/App/public/styles/template/Navbar.css b/src/App/public/styles/template/Navbar.css
index 920fac4..bbfc31f 100644
--- a/src/App/public/styles/template/Navbar.css
+++ b/src/App/public/styles/template/Navbar.css
@@ -34,5 +34,6 @@
}
#site-menu ul li[aria-current] a {
- color: #64b5f6;
+ background-color: #64b5f6;
+ color: #424242;
}
--
GitLab