From 67d6717f5336c9e51d8aa72893021c0bf534e5d5 Mon Sep 17 00:00:00 2001
From: aymm <max.nuding@icloud.com>
Date: Sun, 16 May 2021 13:44:38 +0200
Subject: [PATCH] Improved poll grid

---
 index.php        | 10 ++++++----
 styles/style.css | 24 ++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/index.php b/index.php
index 1a62c75..3a01f0b 100644
--- a/index.php
+++ b/index.php
@@ -58,10 +58,12 @@ foreach ($polls as $poll) {
   <div class="poll" onclick="location.href='view_poll.php?id=<?= $poll->id ?>'">
     <div class="header">
       <div class="user">
-        <img src="<?= $user_avatar_url ?>" class="avatar" srcset="<?= $user_avatar_url_srcset ?>"/>
-        <div class="usernames">
-          <b><?= $user_name.'<br>' ?></b>
-          <span class="username"><?= $username ?></span>
+        <div class="usernamewrapper">
+          <img src="<?= $user_avatar_url ?>" class="avatar" srcset="<?= $user_avatar_url_srcset ?>"/>
+          <div class="usernames">
+            <b><?= $user_name.'<br>' ?></b>
+            <span class="username"><?= $username ?></span>
+          </div>
         </div>
         <div class="spacer"></div>
         <div class="datewrapper">
diff --git a/styles/style.css b/styles/style.css
index 2c9a00c..08c0a88 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -181,6 +181,11 @@ header .avatar {
   box-shadow: var(--default-shadow);
 }
 
+.poll .user .usernamewrapper {
+  display: flex;
+  align-items: center;
+}
+
 .datewrapper {
   display: grid;
   grid-column-gap: 8px;
@@ -215,6 +220,23 @@ datewrapper time {
   height: 20px;
 }
 
+@media (max-width: 450px) {
+  .poll-grid .poll .user {
+    flex-direction: column;
+    align-items: start;
+  }
+  .datewrapper {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 380px) {
+  .poll .user {
+    flex-direction: column;
+    align-items: start;
+  }
+}
+
 /* Success banner */
 .banner-wrapper {
   cursor: pointer;
@@ -372,6 +394,7 @@ footer .sourcecode svg {
 .poll-grid {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
 }
 
 .poll-grid .poll {
@@ -381,6 +404,7 @@ footer .sourcecode svg {
   margin: 8px;
   transition: all 0.2s;
   cursor: pointer;
+  width: 500px;
 }
 
 .poll-grid .poll:hover {