From 132e1f52e4e5d3ead913e09b630e1295ad7cf346 Mon Sep 17 00:00:00 2001
From: creme332 <65414576+creme332@users.noreply.github.com>
Date: Thu, 18 Jan 2024 12:53:27 +0400
Subject: [PATCH] fix bug: opened cart is not centered on login page

---
 public/styles/views/Login.css | 26 +++++++-------------
 src/views/Login.php           | 45 ++++++++++++++++++++++-------------
 2 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/public/styles/views/Login.css b/public/styles/views/Login.css
index 5b91cec..b856d19 100644
--- a/public/styles/views/Login.css
+++ b/public/styles/views/Login.css
@@ -7,13 +7,12 @@ body > main {
   padding: 1rem 0;
 }
 
-article {
+#login-form {
   padding: 0;
   overflow: hidden;
-  transform: translateX(-100%);
 }
 
-article div {
+#login-form div {
   padding: 1rem;
 }
 
@@ -22,7 +21,7 @@ article div {
     padding: 1.25rem 0;
   }
 
-  article div {
+  #login-form div {
     padding: 1.25rem;
   }
 }
@@ -32,7 +31,7 @@ article div {
     padding: 1.5rem 0;
   }
 
-  article div {
+  #login-form div {
     padding: 1.5rem;
   }
 }
@@ -42,7 +41,7 @@ article div {
     padding: 1.75rem 0;
   }
 
-  article div {
+  #login-form div {
     padding: 1.75rem;
   }
 }
@@ -52,29 +51,22 @@ article div {
     padding: 2rem 0;
   }
 
-  article div {
+  #login-form div {
     padding: 2rem;
   }
 }
 
-/* Nav */
-summary[role="link"].secondary:is([aria-current], :hover, :active, :focus) {
-  background-color: transparent;
-  /*noinspection CssUnresolvedCustomProperty*/
-  color: var(--secondary-hover); /* defined in picocss */
-}
-
 /* Hero Image */
-article div:nth-of-type(2) {
+#login-form div:nth-of-type(2) {
   display: none;
   background-color: #374956;
-  background-image: url("https://images.unsplash.com/photo-1702234893452-52302797f873?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0MHx8fGVufDB8fHx8fA%3D%3D");
+  background-image: url("../../assets/img/login-milkshake.avif");
   background-position: center;
   background-size: cover;
 }
 
 @media (min-width: 992px) {
-  .grid > div:nth-of-type(2) {
+  #login-form > div:nth-of-type(2) {
     display: block;
   }
 }
diff --git a/src/views/Login.php b/src/views/Login.php
index 527ab85..da4fd1c 100644
--- a/src/views/Login.php
+++ b/src/views/Login.php
@@ -4,27 +4,36 @@
  * @var string $defaultName Default name in registration form
  * @var string $defaultPassword Default password in registration form
  */
+
 ?>
 
 <main class="container">
-    <article class="grid" data-aos="fade-left" data-aos-easing="linear" data-aos-duration="500">
+    <article id="login-form" class="grid" data-aos="fade-left" data-aos-easing="linear" data-aos-duration="500">
         <div>
             <h1>Sign in</h1>
             <form method="post">
                 <input type="text" name="name" placeholder="Name" aria-label="Name" autocomplete="nickname"
-                       value="<?php echo $defaultName; ?>" required/>
+                       value="<?php
+                       echo $defaultName; ?>" required/>
 
-                <?php if (!empty($errors['name'])) : ?>
-                    <small class="warning"><?php echo $errors['name'] ?></small>
-                <?php endif; ?>
+                <?php
+                if (!empty($errors['name'])) : ?>
+                    <small class="warning"><?php
+                        echo $errors['name'] ?></small>
+                <?php
+                endif; ?>
 
 
                 <input type="password" name="password" placeholder="Password" aria-label="Password"
-                       autocomplete="current-password" value="<?php echo $defaultPassword; ?>" required/>
+                       autocomplete="current-password" value="<?php
+                echo $defaultPassword; ?>" required/>
 
-                <?php if (!empty($errors['password'])) : ?>
-                    <small class="warning"><?php echo $errors['password'] ?></small>
-                <?php endif; ?>
+                <?php
+                if (!empty($errors['password'])) : ?>
+                    <small class="warning"><?php
+                        echo $errors['password'] ?></small>
+                <?php
+                endif; ?>
 
                 <fieldset>
                     <label for="remember">
@@ -33,11 +42,13 @@
                     </label>
                 </fieldset>
                 <button name="login_submit" type="submit" class="contrast">Login</button>
-                <?php if (!empty($errors['other'])) : ?>
-                    <small class="warning"><?php echo $errors['other'] ?></small>
-                <?php endif; ?>
-
-                <div><small>Don't have an account yet? <a href="<?= ROOT ?>/register">Register</a></small></div>
+                <?php
+                if (!empty($errors['other'])) : ?>
+                    <small class="warning"><?php
+                        echo $errors['other'] ?></small>
+                <?php
+                endif; ?>
+                <small>Don't have an account yet? <a href="<?= ROOT ?>/register">Register</a></small>
             </form>
         </div>
         <div></div>
@@ -45,7 +56,7 @@
 </main>
 
 <script>
-    document.addEventListener('DOMContentLoaded', function () {
-        AOS.init();
-    });
+  document.addEventListener("DOMContentLoaded", function() {
+    AOS.init();
+  });
 </script>
\ No newline at end of file