Use default avatar on signup page

This commit is contained in:
jaina heartles 2022-12-10 02:23:40 -08:00
parent 0777ea83bb
commit bbbaa3f8b0
2 changed files with 56 additions and 31 deletions

View file

@ -10,14 +10,17 @@
<div>
<div>You are about to accept an invite from:</div>
<div class="user-mini">
<div>
{=#if $invite.creator.display_name |$name|=}
{$name}
{= #else =}
{$invite.creator.username}
{= /if =}
<img class="avatar" src="{$invite.creator.avatar_url}" />
<div class="details">
<div class="display_name">
{=#if $invite.creator.display_name |$name|=}
{$name}
{= #else =}
{$invite.creator.username}
{= /if =}
</div>
<div class="handle">@{$invite.creator.username}@{$invite.creator.host}</div>
</div>
<div>@{$invite.creator.username}@{$invite.creator.host}</div>
</div>
{#if @isTag($invite.kind, community_owner) =}
<div>This act will make your new account the owner of { %community.name }</div>

View file

@ -43,56 +43,78 @@ nav > ul > li.title > a {
main {
padding: 1em;
overflow: scroll;
}
.user-mini {
display: flex;
margin: 0.5em 0px;
}
.user-mini .avatar {
max-width: 3em;
}
.user-mini .details {
margin: 5px;
}
.user-mini .handle {
font-size: small;
}
form {
display: flex;
flex-direction: column;
max-width: 400px;
}
.textinput {
display: inline-block;
padding: 6px;
border: solid 1px black;
border-radius: 8px;
/* max-width: 300px;*/
}
form {
padding: 1em;
}
form > * {
margin: 5px 0px;
}
form[action*=login] .textinput {
form .textinput {
display: flex;
padding: 6px;
border: solid 1px black;
border-radius: 8px;
outline: solid 2px transparent;
transition: outline 0.2s;
}
form[action*=login] .textinput input {
form .textinput input {
flex-grow: 1;
flex-basis: 3em;
width: 10px;
appearance: none;
border: none;
}
form[action*=login] .textinput:focus-within {
form .textinput input:focus-visible{
outline: none;
}
form .textinput:focus-within {
outline: solid 2px var(--theme-color);
}
form[action*=login] .textinput span.prefix,
form[action*=login] .textinput span.suffix {
form .textinput span.prefix {
user-select: none;
flex-basis: 1.5em;
text-align: center;
}
.textinput > input {
appearance: none;
border: none;
}
.textinput > input:focus-visible{
outline: none;
form .textinput span.suffix {
user-select: none;
flex-basis: 3em;
flex-grow: 1;
max-width: min-content;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.form-helpinfo {
@media (max-width: 360px) {
form .textinput span.suffix {
display: none;
}
}
form .form-helpinfo {
font-size: small;
}