phlaym/dragonpolls
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
globals.php
View File

@ -17,11 +17,13 @@ function get_page_header(
global $api; global $api;
$greeting = ''; $greeting = '';
$logout_link = ''; $logout_link = '';
$newpoll_class = '';
if ($api->isAuthenticated(false, true)) { if ($api->isAuthenticated(false, true)) {
$u = $api->getAuthorizedUser(); $u = $api->getAuthorizedUser();
$greeting = 'Welcome, ' . ($u->name ?? '@'.$u->username); $greeting = 'Welcome, ' . ($u->name ?? '@'.$u->username);
$logout_link = '<a href="logout.php" class="logout">Logout</a>'; $logout_link = '<a href="logout.php" class="logout">Logout</a>';
} else { } else {
$newpoll_class = 'disabled';
$greeting = '<a href="' . $api->getAuthURL() . '">Login with pnut</a>'; $greeting = '<a href="' . $api->getAuthURL() . '">Login with pnut</a>';
} }
$title = ''; $title = '';
@ -36,12 +38,16 @@ function get_page_header(
foreach ($scripts as $script) { foreach ($scripts as $script) {
$script_str .= '<script src="scripts/' . $script . '.js"></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">' return '<html><head><meta charset="utf-8"><title>'.$title.'</title><link rel="stylesheet" href="styles/style.css">'
. $script_str . $script_str
. '</head><body><header>' . '</head><body><header>'
. '<a href="index.php" class="homelink" title="Home"><div class="linkcontents">' . '<a href="index.php" class="homelink" title="Home"><div class="linkcontents">'
. file_get_contents(__DIR__.'/icons/home.svg') . file_get_contents(__DIR__.'/icons/home.svg')
. '<span class="linklabel">Home</span></div></a>' . '<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 . $greeting
. '<div class="spacer"></div>' . '<div class="spacer"></div>'
. $logout_link . $logout_link
@ -54,3 +60,12 @@ function redirect($to)
die('<html><meta http-equiv="refresh" content="0;url='.$to.'">' die('<html><meta http-equiv="refresh" content="0;url='.$to.'">'
.'<script>window.location.replace("'.$to.'");</script></html>'); .'<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>
Side by Side

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

27
styles/style.css
View File

@ -54,6 +54,16 @@ button:disabled {
display: none !important; display: none !important;
} }
.disabled {
cursor: not-allowed;
pointer-events: none;
color: var(--disabled-color) !important;
}
.disabled svg {
stroke: var(--disabled-color) !important;
}
/* Header */ /* Header */
header { header {
display: flex; display: flex;
@ -77,10 +87,14 @@ header {
align-items: center; align-items: center;
} }
.homelink { header a {
margin-right: 1em; margin-right: 1em;
} }
header .newpolllink svg {
stroke-width: 1em;
}
/* Polls */ /* Polls */
.poll { .poll {
display: inline-block; display: inline-block;
@ -117,7 +131,7 @@ datewrapper time {
grid-column: 2; grid-column: 2;
} }
.options { .options form {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-column-gap: 8px; grid-column-gap: 8px;
@ -126,13 +140,20 @@ datewrapper time {
.votes-remaining { .votes-remaining {
font-size: small; font-size: small;
} }
.poll .header .user .avatar {
width: 50px;
}
.option-responses .avatar {
width: 20px;
}
/* Success banner */
.banner-wrapper { .banner-wrapper {
cursor: pointer; cursor: pointer;
transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
box-sizing: border-box; box-sizing: border-box;
} }
/* Success banner */
.success-banner { .success-banner {
background-color: var(--green); background-color: var(--green);
padding: 8px; padding: 8px;

22
view_poll.php
View File

@ -8,8 +8,13 @@ use APnutI\Exceptions\NotSupportedPollException;
use APnutI\Exceptions\NotAuthorizedException; use APnutI\Exceptions\NotAuthorizedException;
use APnutI\Exceptions\PollAccessRestrictedException; use APnutI\Exceptions\PollAccessRestrictedException;
use APnutI\Entities\Poll; use APnutI\Entities\Poll;
use APnutI\Entities\User;
try {
echo get_page_header('Poll', true, ['poll']); 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) { if (empty($_GET['id']) || !is_numeric($_GET['id']) || $_GET['id'] <= 0) {
die('Invalid poll ID'); die('Invalid poll ID');
@ -34,9 +39,14 @@ try {
. '<form><input type="text" name="polltoken">' . '<form><input type="text" name="polltoken">'
. '<input type="hidden" name="id" value="'.$poll_id.'"><button type="submit">Access poll</button></form>' . '<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); jslog($poll);
$user_avatar_url = $poll->user->getAvatarUrl(50); $user_avatar_url = $poll->user->getAvatarUrl(50);
$user_avatar_url_srcset = get_source_set($poll->user, 50);
$username = '@' . $poll->user->username; $username = '@' . $poll->user->username;
$disabled = $poll->canVote() ? '' : 'disabled'; $disabled = $poll->canVote() ? '' : 'disabled';
$user_name = $poll->user->name ?? ''; $user_name = $poll->user->name ?? '';
@ -59,10 +69,10 @@ if (array_key_exists('success', $_GET) && $_GET['success'] == 1) { ?>
<div class="poll"> <div class="poll">
<div class="header"> <div class="header">
<div class="user"> <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"> <div class="usernames">
<b><?= $user_name.'<br>' ?></b> <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>
<div class="spacer"></div> <div class="spacer"></div>
<div class="datewrapper"> <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;"> <div class="option-responses" style="grid-row: <?= $row++ ?>;grid-column: 2;">
<?php foreach ($option->respondent_ids as $res_id) { <?php foreach ($option->respondent_ids as $res_id) {
$u = $api->getUser($res_id, $user_args); ?> $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 } ?> <?php } ?>
</div> </div>
<?php } ?> <?php } ?>