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

Improved poll grid

Browse Source
This commit is contained in:
aymm 2021-05-16 13:44:38 +02:00
parent 80f7f921ce
commit 67d6717f53
Signed by: phlaym
GPG Key ID: A06651BAB6777237
2 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.php
View File

@ -58,10 +58,12 @@ foreach ($polls as $poll) {
<div class="poll" onclick="location.href='view_poll.php?id=<?= $poll->id ?>'"> <div class="poll" onclick="location.href='view_poll.php?id=<?= $poll->id ?>'">
<div class="header"> <div class="header">
<div class="user"> <div class="user">
<img src="<?= $user_avatar_url ?>" class="avatar" srcset="<?= $user_avatar_url_srcset ?>"/> <div class="usernamewrapper">
<div class="usernames"> <img src="<?= $user_avatar_url ?>" class="avatar" srcset="<?= $user_avatar_url_srcset ?>"/>
<b><?= $user_name.'<br>' ?></b> <div class="usernames">
<span class="username"><?= $username ?></span> <b><?= $user_name.'<br>' ?></b>
<span class="username"><?= $username ?></span>
</div>
</div> </div>
<div class="spacer"></div> <div class="spacer"></div>
<div class="datewrapper"> <div class="datewrapper">

24
styles/style.css
View File

@ -181,6 +181,11 @@ header .avatar {
box-shadow: var(--default-shadow); box-shadow: var(--default-shadow);
} }
.poll .user .usernamewrapper {
display: flex;
align-items: center;
}
.datewrapper { .datewrapper {
display: grid; display: grid;
grid-column-gap: 8px; grid-column-gap: 8px;
@ -215,6 +220,23 @@ datewrapper time {
height: 20px; 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 */ /* Success banner */
.banner-wrapper { .banner-wrapper {
cursor: pointer; cursor: pointer;
@ -372,6 +394,7 @@ footer .sourcecode svg {
.poll-grid { .poll-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center;
} }
.poll-grid .poll { .poll-grid .poll {
@ -381,6 +404,7 @@ footer .sourcecode svg {
margin: 8px; margin: 8px;
transition: all 0.2s; transition: all 0.2s;
cursor: pointer; cursor: pointer;
width: 500px;
} }
.poll-grid .poll:hover { .poll-grid .poll:hover {