From 66ea75d93c507bcf24f78254df520b6ee62eb174 Mon Sep 17 00:00:00 2001
From: JerichoFletcher <jericho.russel17@gmail.com>
Date: Fri, 6 Oct 2023 17:08:52 +0700
Subject: [PATCH] feat: responsive UI for film page
---
public/css/films.css | 17 +++++++++++++++--
public/css/global.css | 4 ++++
src/views/films/show.php | 4 ++--
src/views/films/update.php | 2 +-
4 files changed, 22 insertions(+), 5 deletions(-)
diff --git a/public/css/films.css b/public/css/films.css
index 66f4c2f..6f8456a 100644
--- a/public/css/films.css
+++ b/public/css/films.css
@@ -49,7 +49,6 @@
height: auto;
min-width: 180px;
min-height: 240px;
- margin-top: 30px;
}
.film-poster-col button {
@@ -152,4 +151,18 @@
width: 80vw;
height: auto;
max-width: 500px;
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 600px) {
+ .film-page-container {
+ flex-direction: column;
+ }
+
+ .film-poster-col {
+ width: 100%;
+ }
+
+ .film-details-col {
+ width: 100%;
+ }
+}
diff --git a/public/css/global.css b/public/css/global.css
index 6600a2d..7b0bbc7 100644
--- a/public/css/global.css
+++ b/public/css/global.css
@@ -502,6 +502,10 @@ a {
display: grid;
}
+.no-gap {
+ gap: 0;
+}
+
.form-logo {
width: 250px;
}
diff --git a/src/views/films/show.php b/src/views/films/show.php
index 696121a..931848d 100644
--- a/src/views/films/show.php
+++ b/src/views/films/show.php
@@ -53,7 +53,7 @@ function createReviewModal($filmId) {
<label class="form-error" id="rating-form-error"></label>
</div>
<div class="form-group">
- <label for="">Review</label>
+ <label for="review">Review</label>
<textarea id="review" name="review" rows="8"></textarea>
<label class="form-error" id="review-form-error"></label>
</div>
@@ -85,7 +85,7 @@ function reviewList($reviews){
$html = <<<"EOT"
<div class="review-container">
<div class="profile-picture">
- <img src="$profilePicturePath">
+ <img src="$profilePicturePath" alt="$name">
</div>
<div class="review-details">
<h6>
diff --git a/src/views/films/update.php b/src/views/films/update.php
index 7f23d64..e18fe80 100644
--- a/src/views/films/update.php
+++ b/src/views/films/update.php
@@ -122,7 +122,7 @@ function filmUpdateForm($data){
return $html;
}
?>
-<div class="base-container display-grid">
+<div class="base-container display-grid no-gap">
<h5 class="section-title"><?php echo isset($data['film']) ? 'Edit Film' : 'New Film'; ?></h5>
<div class="film-page-container">
<?php echo filmUpdateForm($data); ?>
--
GitLab