Added support for higher pixel density avatars, added link to create new polls

2021-04-04 09:44:33 +02:00 · 2021-04-04 09:44:33 +02:00 · 50750c6808
parent 4bf3a3f552
commit 50750c6808
5 changed files with 86 additions and 7 deletions
--- a/globals.php
+++ b/globals.php
@ -17,11 +17,13 @@ function get_page_header(
  global $api;
  $greeting = '';
  $logout_link = '';
+  $newpoll_class = '';
  if ($api->isAuthenticated(false, true)) {
    $u = $api->getAuthorizedUser();
    $greeting = 'Welcome, ' . ($u->name ?? '@'.$u->username);
    $logout_link = '<a href="logout.php" class="logout">Logout</a>';
  } else {
+    $newpoll_class = 'disabled';
    $greeting = '<a href="' . $api->getAuthURL() . '">Login with pnut</a>';
  }
  $title = '';
@ -36,12 +38,16 @@ function get_page_header(
  foreach ($scripts as $script) {
    $script_str .= '<script src="scripts/' . $script . '.js"></script>';
  }
+
  return '<html><head><meta charset="utf-8"><title>'.$title.'</title><link rel="stylesheet" href="styles/style.css">'
  . $script_str
  . '</head><body><header>'
  . '<a href="index.php" class="homelink" title="Home"><div class="linkcontents">'
  . file_get_contents(__DIR__.'/icons/home.svg')
  . '<span class="linklabel">Home</span></div></a>'
+  . '<a href="new_poll.php" class="newpolllink '.$newpoll_class.'" title="New Poll"><div class="linkcontents">'
+  . file_get_contents(__DIR__.'/icons/plus.svg') //TODO
+  . '<span class="linklabel">New Poll</span></div></a>'
  . $greeting
  . '<div class="spacer"></div>'
  . $logout_link
@ -54,3 +60,12 @@ function redirect($to)
  die('<html><meta http-equiv="refresh" content="0;url='.$to.'">'
    .'<script>window.location.replace("'.$to.'");</script></html>');
 }
+
+function get_source_set($user, int $base_size, int $max_scale = 3): string
+{
+  $srcset_entries = [$user->getAvatarUrl($base_size)];
+  for ($s = 2; $s <= $max_scale; $s++) {
+    $srcset_entries[] = $user->getAvatarUrl($base_size * $s) . ' ' . $s . 'x';
+  }
+  return implode(', ', $srcset_entries);
+}
--- a/icons/plus.svg
+++ b/icons/plus.svg
@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200" viewBox="0 0 200 200" xml:space="preserve">
+<!--<g transform="matrix(0.94 0 0 1.17 100.25 100.5)"  > !-->
+<line style="stroke-linecap: round;"  x1="100" y1="20" x2="100" y2="180" />
+<line style="stroke-linecap: round;"  x1="20" y1="100" x2="180" y2="100" />
+</g>
+</svg>
--- a/new_poll.php
+++ b/new_poll.php
@ -0,0 +1,21 @@
+<?php
+
+require_once __DIR__ .'/bootstrap.php';
+
+use APnutI\Exceptions\NotFoundException;
+use APnutI\Exceptions\HttpPnutForbiddenException;
+use APnutI\Exceptions\NotSupportedPollException;
+use APnutI\Exceptions\NotAuthorizedException;
+use APnutI\Exceptions\PollAccessRestrictedException;
+use APnutI\Entities\Poll;
+use APnutI\Entities\User;
+
+try {
+  echo get_page_header('New Poll', true, ['poll']);
+} catch (\Exception $e) {
+  die('Something went wrong :( "'.$e->getMessage().'"');
+}
+
+if (!$api->isAuthenticated(false, true)) {
+  die('You need to be logged in to create a new poll!');
+}
--- a/styles/style.css
+++ b/styles/style.css
@ -54,6 +54,16 @@ button:disabled {
  display: none !important;
 }

+.disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: var(--disabled-color) !important;
+}
+
+.disabled svg {
+  stroke: var(--disabled-color) !important;
+}
+
 /* Header */
 header {
  display: flex;
@ -77,10 +87,14 @@ header {
  align-items: center;
 }

-.homelink {
+header a {
  margin-right: 1em;
 }

+header .newpolllink svg {
+  stroke-width: 1em;
+}
+
 /* Polls */
 .poll {
  display: inline-block;
@ -117,7 +131,7 @@ datewrapper time {
  grid-column: 2;
 }

-.options {
+.options form {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 8px;
@ -126,13 +140,20 @@ datewrapper time {
 .votes-remaining {
  font-size: small;
 }
+.poll .header .user .avatar {
+  width: 50px;
+}
+.option-responses .avatar {
+  width: 20px;
+}

+/* Success banner */
 .banner-wrapper {
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  box-sizing: border-box;
 }
-/* Success banner */
+
 .success-banner {
  background-color: var(--green);
  padding: 8px;
--- a/view_poll.php
+++ b/view_poll.php
@ -8,8 +8,13 @@ use APnutI\Exceptions\NotSupportedPollException;
 use APnutI\Exceptions\NotAuthorizedException;
 use APnutI\Exceptions\PollAccessRestrictedException;
 use APnutI\Entities\Poll;
+use APnutI\Entities\User;

-echo get_page_header('Poll', true, ['poll']);
+try {
+  echo get_page_header('Poll', true, ['poll']);
+} catch (\Exception $e) {
+  die('Something went wrong :( "'.$e->getMessage().'"');
+}

 if (empty($_GET['id']) || !is_numeric($_GET['id']) || $_GET['id'] <= 0) {
  die('Invalid poll ID');
@ -34,9 +39,14 @@ try {
      . '<form><input type="text" name="polltoken">'
      . '<input type="hidden" name="id" value="'.$poll_id.'"><button type="submit">Access poll</button></form>'
  );
+} catch (\Exception $e) {
+  die('Something went wrong :( "'.$e->getMessage().'"');
 }
 jslog($poll);
+
 $user_avatar_url = $poll->user->getAvatarUrl(50);
+$user_avatar_url_srcset = get_source_set($poll->user, 50);
+
 $username = '@' . $poll->user->username;
 $disabled = $poll->canVote() ? '' : 'disabled';
 $user_name = $poll->user->name ?? '';
@ -59,10 +69,10 @@ if (array_key_exists('success', $_GET) && $_GET['success'] == 1) { ?>
 <div class="poll">
  <div class="header">
    <div class="user">
-      <img src="<?= $user_avatar_url ?>" class="avatar"/>
+      <img src="<?= $user_avatar_url ?>" class="avatar" srcset="<?= $user_avatar_url_srcset ?>"/>
      <div class="usernames">
        <b><?= $user_name.'<br>' ?></b>
-        <span class="username"><a href="http://pnut.io/<?= $username ?>"><?= $username ?></a></span>
+        <span class="username"><?= User::getProfileLinkForUsername($username) ?></span>
      </div>
      <div class="spacer"></div>
      <div class="datewrapper">
@ -103,7 +113,13 @@ if (array_key_exists('success', $_GET) && $_GET['success'] == 1) { ?>
        <div class="option-responses" style="grid-row: <?= $row++ ?>;grid-column: 2;">
        <?php foreach ($option->respondent_ids as $res_id) {
          $u = $api->getUser($res_id, $user_args); ?>
-          <img src="<?= $u->getAvatarUrl(20) ?>" class="avatar" title="@<?= $u->username ?>">
+          <a href="https://pnut.io/@<?= $u->username ?>">
+            <img
+              src="<?= $u->getAvatarUrl(20) ?>"
+              srcset="<?= get_source_set($u, 20) ?>"
+              class="avatar"
+              title="@<?= $u->username ?>">
+          </a>
        <?php } ?>
        </div>
    <?php } ?>