From 87c401e3a89ca91d7bb3d20d4a34209e42efd7d2 Mon Sep 17 00:00:00 2001
From: aymm <max.nuding@icloud.com>
Date: Sun, 9 May 2021 20:51:05 +0200
Subject: [PATCH] Fixed #10 Added a mobile friendly design

---
 globals.php      |  2 +-
 styles/style.css | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/globals.php b/globals.php
index 8dfc87e..bca0775 100644
--- a/globals.php
+++ b/globals.php
@@ -23,7 +23,7 @@ function get_page_header(
     $user_avatar_url = $u->getAvatarUrl(30);
     $user_avatar_url_srcset = get_source_set($u, 30);
     $avatar = '<img src="' . $user_avatar_url . '" class="avatar" srcset="' . $user_avatar_url_srcset . '"/>';
-    $greeting = $avatar . 'Welcome, ' . ($u->name ?? '@'.$u->username);
+    $greeting = $avatar . '<span class="greeting">Welcome, ' . ($u->name ?? '@'.$u->username) . '</span>';
     $logout_link = '<a href="logout.php" class="logout">Logout</a>';
   } else {
     $newpoll_class = 'disabled';
diff --git a/styles/style.css b/styles/style.css
index a0f329e..38ed024 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -113,6 +113,17 @@ header .avatar {
   margin-right: 4px;
 }
 
+@media (max-width: 450px) {
+  .linklabel {
+    display: none;
+  }
+}
+@media (max-width: 380px) {
+  .greeting {
+    display: none;
+  }
+}
+
 /* Polls */
 .poll {
   display: inline-block;
@@ -270,6 +281,42 @@ datewrapper time {
   color: var(--main-text-color);
 }
 
+@media (max-width: 800px) {
+  #prompt {
+    grid-row: 2;
+  }
+  label[for=prompt] {
+    grid-row: 2;
+  }
+  .create-poll label[for=options] {
+    grid-row: 3;
+  }
+  .create-poll #options {
+    grid-row: 3;
+  }
+  .create-poll label[for=anonymous] {
+    grid-row: 4
+  }
+  .create-poll label[for=public] {
+    grid-row: 5
+  }
+  .create-poll label[for=max_options] {
+    grid-row: 6
+  }
+  .create-poll label[for=duration] {
+    grid-row: 7
+  }
+  #duration {
+    grid-row: 7;
+  }
+  .create-poll button[type=submit] {
+    grid-row: 8;
+  }
+  .create-poll .error {
+    grid-row: 1;
+  }
+}
+
 /* Footer */
 footer {
   display: flex;