Fix close-button responsive

asterjdm · May 12, 2024 · adef722 · adef722
1 parent 25432ab
commit adef722
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 20 deletions.
diff --git a/templates/index.html b/templates/index.html
@@ -136,16 +136,18 @@ <h1 class="standard-card-name">Mathieu Raetz</h1>
 
     <!-- Popups -->
     <div id="addPopup" class="standard-popup">
-        <button class="standard-button standard-popup-close add-popup" onclick="closePopup('addPopup')">
-            <img class="standard-popup-close-img" draggable="false" src="./images/close.svg" alt="close icon">
-        </button>
-        <div class="standard-popup-content add-popup">
-            <div class="select-image">
-                <input id="uploadPhoto" class="upload-photo" type="file">
-                <img id="previewImage" class="preview-image" src="./images/upload.png">
+        <div class="whole-section">
+            <button class="standard-button standard-popup-close add-popup" onclick="closePopup('addPopup')">
+                <img class="standard-popup-close-img" draggable="false" src="./images/close.svg" alt="close icon">
+            </button>   
+            <div class="standard-popup-content add-popup">
+                <div class="select-image">
+                    <input id="uploadPhoto" class="upload-photo" type="file">
+                    <img id="previewImage" class="preview-image" src="./images/upload.png">
+                </div>
+                <input class="standard-input insert-name" type="text" placeholder="Entrer un nom">
+                <button class="standard-button send-request">Envoyer</button>
             </div>
-            <input class="standard-input insert-name" type="text" placeholder="Entrer un nom">
-            <button class="standard-button send-request">Envoyer</button>
         </div>
     </div>
     <div id="commentPopup" class="standard-popup">

diff --git a/templates/styles/standard-assets/popup.css b/templates/styles/standard-assets/popup.css
@@ -24,6 +24,10 @@
     animation: fade-out 250ms ease-in-out;
 }
 
+.whole-section {
+    position: relative;
+}
+
 .standard-popup-content {
     border: var(--border-width) var(--border-style) var(--border-color);
     position: relative;
@@ -50,6 +54,23 @@
     height: 500px;
 }
 
+.standard-popup-close {
+    position: absolute;
+    top: -50px;
+    right: -50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 45px;
+    width: 45px;
+    z-index: 3;
+}
+
+.standard-popup-close-img {
+    width: 35px;
+    height: 35px;
+}
+
 .select-image {
     border: var(--border-width) var(--border-style) var(--border-color);
     position: relative;
@@ -132,21 +153,16 @@
 }
 
 @media screen and (max-width: 521px) {
-    .standard-popup {
-        width: 1000%;
-        height: 1000%;
-    }
-
-    .standard-popup-content.add-popup {
+    .standard-popup-content.add-popup, .standard-popup-content.comment-popup {
         width: 100dvw;
         height: 100dvh;
-        box-shadow: 0;
+        box-shadow: none;
+        transform: scale(1);
     }
 
-    .standard-popup-content.comment-popup {
-        width: 142.7dvw;
-        height: 142.7dvh;
-        box-shadow: none;
+    .standard-popup-close {
+        top: 20px;
+        right: 20px;
     }
 
     .select-image {