Improved poll grid

v1.2.0
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

View File

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

View File

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