Slightly improving follow request popup design

This commit is contained in:
David Négrier 2021-12-24 14:36:38 +01:00
parent d6e8bd522f
commit 87bc7f8099

View file

@ -87,12 +87,9 @@ vim: ft=typescript
{#if followState === followStates.requesting} {#if followState === followStates.requesting}
<div class="interact-menu nes-container is-rounded"> <div class="interact-menu nes-container is-rounded">
<section class="interact-menu-title">
<h2>Interaction</h2>
</section>
{#if followRole === followRoles.follower} {#if followRole === followRoles.follower}
<section class="interact-menu-question"> <section class="interact-menu-title">
<p>Do you want to follow {name(followUsers[0])}?</p> <h2>Do you want to follow {name(followUsers[0])}?</h2>
</section> </section>
<section class="interact-menu-action"> <section class="interact-menu-action">
<button type="button" class="nes-btn is-success" on:click|preventDefault={acceptFollowRequest} <button type="button" class="nes-btn is-success" on:click|preventDefault={acceptFollowRequest}
@ -141,7 +138,10 @@ vim: ft=typescript
{:else if followUsers.length === 2} {:else if followUsers.length === 2}
<p>{name(followUsers[0])} and {name(followUsers[1])} are following you</p> <p>{name(followUsers[0])} and {name(followUsers[1])} are following you</p>
{:else} {:else}
<p>{name(followUsers[0])}, {name(followUsers[1])} and {name(followUsers[2])} are following you</p> <p>
{followUsers.slice(0, -1).map(name).join(", ")} and {name(followUsers[followUsers.length - 1])} are following
you
</p>
{/if} {/if}
</section> </section>
</div> </div>
@ -197,7 +197,6 @@ vim: ft=typescript
color: whitesmoke; color: whitesmoke;
position: relative; position: relative;
height: 19vh;
width: 60vw; width: 60vw;
top: 60vh; top: 60vh;
margin: auto; margin: auto;
@ -220,17 +219,11 @@ vim: ft=typescript
section.interact-menu-action { section.interact-menu-action {
display: grid; display: grid;
grid-template-columns: 50% 50%; grid-gap: 10%;
grid-template-columns: 45% 45%;
margin-bottom: 20px; margin-bottom: 20px;
margin-left: 5%;
button { margin-right: 5%;
display: inline-block;
margin: 4px;
padding: 0px;
border: medium solid black;
font-weight: bold;
height: 2.5em;
}
} }
} }