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

This commit is contained in:
aymm 2021-04-04 09:44:33 +02:00
parent 4bf3a3f552
commit 50750c6808
Signed by: phlaym
GPG Key ID: A06651BAB6777237
5 changed files with 86 additions and 7 deletions

View File

@ -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);
}

6
icons/plus.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 391 B

21
new_poll.php Normal file
View File

@ -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!');
}

View File

@ -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;

View File

@ -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 } ?>