FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Fix landing page layout

Browse source
This commit is contained in:
silverpill 2022-05-12 18:32:04 +00:00
parent 13253a3f19
commit 28b5ac9215
1 changed files with 61 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
src/views/LandingPage.vue
View file

@ -1,52 +1,54 @@
<template> <template>
<div class="landing-page"> <div class="landing-page">
<div v-if="instance" class="instance-info"> <div class="instance-group">
<h1 class="instance-title">{{ instance.title }}</h1> <div v-if="instance" class="instance-info">
<div class="instance-description"> <h1 class="instance-title">{{ instance.title }}</h1>
{{ instance.short_description }} <div class="instance-description">
<br> {{ instance.short_description }}
<router-link :to="{name: 'about-public'}">Learn more <span class="arrow">&gt;&gt;</span></router-link> <br>
</div> <router-link :to="{name: 'about-public'}">Learn more <span class="arrow">&gt;&gt;</span></router-link>
<div class="login"> </div>
<button @click="login()">Sign In</button> <div class="login">
<div v-if="loginErrorMessage" class="error-message">{{ loginErrorMessage }}</div> <button @click="login()">Sign In</button>
</div> <div v-if="loginErrorMessage" class="error-message">{{ loginErrorMessage }}</div>
</div>
<form v-if="instance" class="registration-form">
<div v-if="isLoading" class="registration-form-loader">
<loader></loader>
</div>
<div class="form-title">Want to join?</div>
<div class="form-control">
<div class="input-group">
<input id="username" v-model="username" required placeholder="Username">
<div class="addon">@{{ instance.uri }}</div>
</div> </div>
<div class="form-message">Only letters, numbers and underscores are allowed.</div>
</div> </div>
<div class="form-control" v-if="!instance.registrations"> <form v-if="instance" class="registration-form">
<input <div v-if="isLoading" class="registration-form-loader">
id="invite-token" <loader></loader>
v-model="inviteCode" </div>
required <div class="form-title">Want to join?</div>
placeholder="Enter the invite code" <div class="form-control">
> <div class="input-group">
</div> <input id="username" v-model="username" required placeholder="Username">
<div class="wallet-required"> <div class="addon">@{{ instance.uri }}</div>
<img :src="require('@/assets/forkawesome/ethereum.svg')"> </div>
<a <div class="form-message">Only letters, numbers and underscores are allowed.</div>
href="https://ethereum.org/en/wallets/find-wallet/?filters=has_explore_dapps" </div>
target="_blank" <div class="form-control" v-if="!instance.registrations">
rel="noreferrer" <input
>Ethereum Wallet</a> is required id="invite-token"
</div> v-model="inviteCode"
<button required
type="submit" placeholder="Enter the invite code"
:disabled="!username" >
@click.prevent="register()" </div>
>Sign Up</button> <div class="wallet-required">
<div v-if="registrationErrorMessage" class="error-message">{{ registrationErrorMessage }}</div> <img :src="require('@/assets/forkawesome/ethereum.svg')">
</form> <a
href="https://ethereum.org/en/wallets/find-wallet/?filters=has_explore_dapps"
target="_blank"
rel="noreferrer"
>Ethereum Wallet</a> is required
</div>
<button
type="submit"
:disabled="!username"
@click.prevent="register()"
>Sign Up</button>
<div v-if="registrationErrorMessage" class="error-message">{{ registrationErrorMessage }}</div>
</form>
</div>
</div> </div>
</template> </template>
@ -179,19 +181,24 @@ button {
} }
.landing-page { .landing-page {
align-items: flex-start;
background-color: #000; background-color: #000;
background-image: url("../assets/startpage.png"); background-image: url("../assets/startpage.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
box-sizing: border-box; box-sizing: border-box;
color: $text-color; color: $text-color;
min-height: 100vh;
padding-top: 20vh;
}
.instance-group {
align-items: flex-start;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: $content-gap; gap: $content-gap;
justify-content: center; justify-content: space-between;
min-height: 100vh; margin: 0 auto;
padding-top: 20vh; max-width: $wide-content-width + $content-gap + $wide-sidebar-width;
} }
.instance-info { .instance-info {
@ -208,7 +215,7 @@ button {
} }
.instance-description { .instance-description {
font-size: 28px; font-size: 24px;
line-height: 1.75; line-height: 1.75;
a { a {
@ -373,9 +380,12 @@ button {
@media screen and (max-width: $screen-breakpoint-small) { @media screen and (max-width: $screen-breakpoint-small) {
.landing-page { .landing-page {
padding-top: $content-gap;
}
.instance-group {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
padding-top: $content-gap;
} }
.registration-form { .registration-form {