tommy/mobilizon
1
0
Fork 0
forked from potsda.mn/mobilizon
Code Pull requests Activity

Merge branch 'bug/fix-ui' into 'master'

Browse source 
Bug/fix ui

See merge request framasoft/mobilizon!237
This commit is contained in:
Thomas Citharel 2019-10-10 14:28:15 +02:00
parent 4b7abb0d6c 8d88aa1450
commit a20f2612bc
10 changed files with 195 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
js/src/components/Event/EventCard.vue
View file

@ -46,8 +46,9 @@ A simple card for an event
</div> </div>
<span class="organizer-place-wrapper"> <span class="organizer-place-wrapper">
<span v-if="actorDisplayName && actorDisplayName !== '@'">{{ $t('By {name}', { name: actorDisplayName }) }}</span> <span v-if="actorDisplayName && actorDisplayName !== '@'">{{ $t('By {name}', { name: actorDisplayName }) }}</span>
<span v-if="actorDisplayName && actorDisplayName !== '@'">-</span>
<span v-if="event.physicalAddress && (event.physicalAddress.locality || event.physicalAddress.description)"> <span v-if="event.physicalAddress && (event.physicalAddress.locality || event.physicalAddress.description)">
- {{ event.physicalAddress.locality || event.physicalAddress.description }} {{ event.physicalAddress.locality || event.physicalAddress.description }}
</span> </span>
</span> </span>
</div> </div>
@ -201,6 +202,11 @@ export default class EventCard extends Vue {
} }
span.organizer-place-wrapper { span.organizer-place-wrapper {
display: flex; display: flex;
padding: 0 0.5rem 0.3rem;
span {
padding-right: 0.25rem;
}
span:last-child { span:last-child {
flex: 1; flex: 1;

9
js/src/components/SearchField.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<b-input icon="magnify" type="search" rounded :placeholder="defaultPlaceHolder" v-model="searchText" @keyup.native.enter="enter" /> <b-input custom-class="searchField" icon="magnify" type="search" rounded :placeholder="defaultPlaceHolder" v-model="searchText" @keyup.native.enter="enter" />
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
@ -20,3 +20,10 @@ export default class SearchField extends Vue {
} }
} }
</script> </script>
<style lang="scss">
input.searchField {
box-shadow: none;
border-color: #b5b5b5;
}
</style>

12
js/src/variables.scss
View file

@ -5,11 +5,21 @@ $primary-invert: findColorInvert($primary);
$secondary: #FAB12D; $secondary: #FAB12D;
$secondary-invert: findColorInvert($secondary); $secondary-invert: findColorInvert($secondary);
$success: #78cc8a;
$success-invert: findColorInvert($success);
$info: #36bcd4;
$info-invert: findColorInvert($info);
$danger: #ff7061;
$danger-invert: findColorInvert($danger);
$colors: map-merge( $colors: map-merge(
$colors, $colors,
( (
"primary": ($primary, $primary-invert), "primary": ($primary, $primary-invert),
"secondary": ($secondary, $secondary-invert) "secondary": ($secondary, $secondary-invert),
"success": ($success, $success-invert),
"info": ($info, $info-invert),
"danger": ($danger, $danger-invert),
) )
); );

112
js/src/views/Account/Register.vue
View file

@ -1,70 +1,60 @@
<template> <template>
<div> <section class="container">
<section class="hero"> <div class="columns is-mobile is-centered">
<div class="hero-body"> <div class="column is-half-desktop">
<h1 class="title"> <h1 class="title">
{{ $t('Register an account on Mobilizon!') }} {{ $t('Register an account on Mobilizon!') }}
</h1> </h1>
</div> <form v-if="!validationSent">
</section> <b-field
<section> :label="$t('Username')"
<div class="container"> :type="errors.preferred_username ? 'is-danger' : null"
<div class="columns is-mobile"> :message="errors.preferred_username"
<div class="column"> >
<form v-if="!validationSent"> <b-field>
<b-field <b-input
:label="$t('Username')" aria-required="true"
:type="errors.preferred_username ? 'is-danger' : null" required
:message="errors.preferred_username" expanded
> v-model="person.preferredUsername"
<b-field> />
<b-input <p class="control">
aria-required="true" <span class="button is-static">@{{ host }}</span>
required </p>
expanded </b-field>
v-model="person.preferredUsername" </b-field>
/>
<p class="control">
<span class="button is-static">@{{ host }}</span>
</p>
</b-field>
</b-field>
<b-field :label="$t('Displayed name')"> <b-field :label="$t('Displayed name')">
<b-input v-model="person.name"/> <b-input v-model="person.name"/>
</b-field> </b-field>
<b-field :label="$t('Description')"> <b-field :label="$t('Description')">
<b-input type="textarea" v-model="person.summary"/> <b-input type="textarea" v-model="person.summary"/>
</b-field> </b-field>
<b-field grouped> <p class="control has-text-centered">
<div class="control"> <b-button type="is-primary" size="is-large" @click="submit()">
<button type="button" class="button is-primary" @click="submit()"> {{ $t('Create my profile') }}
{{ $t('Create my profile') }} </b-button>
</button> </p>
</div> </form>
</b-field>
</form>
<div v-if="validationSent && !userAlreadyActivated"> <div v-if="validationSent && !userAlreadyActivated">
<b-message title="Success" type="is-success"> <b-message title="Success" type="is-success" closable="false">
<h2 class="title"> <h2 class="title">
{{ $t('Your account is nearly ready, {username}', { username: person.preferredUsername }) }} {{ $t('Your account is nearly ready, {username}', { username: person.preferredUsername }) }}
</h2> </h2>
<p> <p>
{{ $t('A validation email was sent to {email}', { email }) }} {{ $t('A validation email was sent to {email}', { email }) }}
</p> </p>
<p> <p>
{{ $t('Before you can login, you need to click on the link inside it to validate your account') }} {{ $t('Before you can login, you need to click on the link inside it to validate your account') }}
</p> </p>
</b-message> </b-message>
</div>
</div>
</div> </div>
</div> </div>
</section> </div>
</div> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -88,7 +78,7 @@ export default class Register extends Vue {
validationSent: boolean = false; validationSent: boolean = false;
sendingValidation: boolean = false; sendingValidation: boolean = false;
async mounted() { async created() {
// Make sure no one goes to this page if we don't want to // Make sure no one goes to this page if we don't want to
if (!this.email) { if (!this.email) {
await this.$router.replace({ name: RouteName.PAGE_NOT_FOUND }); await this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
@ -134,7 +124,7 @@ export default class Register extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.avatar-enter-active { .avatar-enter-active {
transition: opacity 1s ease; transition: opacity 1s ease;
} }
@ -147,4 +137,8 @@ export default class Register extends Vue {
.avatar-leave { .avatar-leave {
display: none; display: none;
} }
.container .columns {
margin: 1rem auto 3rem;
}
</style> </style>

4
js/src/views/Event/Explore.vue
View file

@ -58,6 +58,10 @@ export default class Explore extends Vue {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
h1.title {
margin-top: 1.5rem;
}
h3.title { h3.title {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }

6
js/src/views/Home.vue
View file

@ -5,7 +5,7 @@
<div class="container"> <div class="container">
<h1 class="title">{{ $t('Gather ⋅ Organize ⋅ Mobilize') }}</h1> <h1 class="title">{{ $t('Gather ⋅ Organize ⋅ Mobilize') }}</h1>
<p class="subtitle">{{ $t('Join {instance}, a Mobilizon instance', { instance: config.name }) }} <p class="subtitle">{{ $t('Join {instance}, a Mobilizon instance', { instance: config.name }) }}
<p>{{ config.description }}</p> <p class="instance-description">{{ config.description }}</p>
<!-- We don't invite to find other instances yet --> <!-- We don't invite to find other instances yet -->
<!-- <p v-if="!config.registrationsOpen"> <!-- <p v-if="!config.registrationsOpen">
{{ $t("This instance isn't opened to registrations, but you can register on other instances.") }} {{ $t("This instance isn't opened to registrations, but you can register on other instances.") }}
@ -325,5 +325,9 @@ export default class Home extends Vue {
.column figure.image img { .column figure.image img {
max-width: 400px; max-width: 400px;
} }
.instance-description {
margin-bottom: 1rem;
}
} }
</style> </style>

29
js/src/views/User/Login.vue
View file

@ -1,18 +1,15 @@
<template> <template>
<div class="container"> <div class="container">
<section class="hero">
<h1 class="title">
{{ $t('Welcome back!') }}
</h1>
</section>
<b-message v-if="errorCode === LoginErrorCode.NEED_TO_LOGIN" title="Info" type="is-info"> <b-message v-if="errorCode === LoginErrorCode.NEED_TO_LOGIN" title="Info" type="is-info">
{{ $t('You need to login.') }} {{ $t('You need to login.') }}
</b-message> </b-message>
<section v-if="!currentUser.isLoggedIn"> <section v-if="!currentUser.isLoggedIn">
<div class="columns is-mobile is-centered"> <div class="columns is-mobile is-centered">
<div class="column is-half"> <div class="column is-half-desktop">
<h1 class="title">
{{ $t('Welcome back!') }}
</h1>
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message> <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
<form @submit="loginAction"> <form @submit="loginAction">
<b-field :label="$t('Email')"> <b-field :label="$t('Email')">
@ -29,27 +26,27 @@
/> />
</b-field> </b-field>
<div class="control has-text-centered"> <p class="control has-text-centered">
<button class="button is-primary is-large"> <button class="button is-primary is-large">
{{ $t('Login') }} {{ $t('Login') }}
</button> </button>
</div> </p>
<div class="control"> <p class="control">
<router-link <router-link
class="button is-text" class="button is-text"
:to="{ name: RouteName.SEND_PASSWORD_RESET, params: { email: credentials.email }}" :to="{ name: RouteName.SEND_PASSWORD_RESET, params: { email: credentials.email }}"
> >
{{ $t('Forgot your password ?') }} {{ $t('Forgot your password ?') }}
</router-link> </router-link>
</div> </p>
<div class="control" v-if="config && config.registrationsOpen"> <p class="control" v-if="config && config.registrationsOpen">
<router-link <router-link
class="button is-text" class="button is-text"
:to="{ name: RouteName.REGISTER, params: { default_email: credentials.email, default_password: credentials.password }}" :to="{ name: RouteName.REGISTER, params: { default_email: credentials.email, default_password: credentials.password }}"
> >
{{ $t('Register') }} {{ $t('Register') }}
</router-link> </router-link>
</div> </p>
</form> </form>
</div> </div>
</div> </div>
@ -166,3 +163,9 @@ export default class Login extends Vue {
} }
} }
</script> </script>
<style lang="scss" scoped>
.container .columns {
margin: 1rem auto 3rem;
}
</style>

62
js/src/views/User/Register.vue
View file

@ -11,18 +11,18 @@
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="content"> <div class="content">
<h3 class="title">{{ $t('Features') }}</h3> <h2 class="title">{{ $t('Features') }}</h2>
<ul> <ul>
<li>{{ $t('Create your communities and your events') }}</li> <li>{{ $t('Create your communities and your events') }}</li>
<li>{{ $t('Other stuff…') }}</li> <li>{{ $t('Other stuff…') }}</li>
</ul> </ul>
</div> </div>
<i18n path="Learn more on" tag="p"> <router-link :to="{ name: RouteName.ABOUT }">
<a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a> {{ $t('Learn more') }}
</i18n> </router-link>
<hr> <hr>
<div class="content"> <div class="content">
<h3 class="title">{{ $t('About this instance') }}</h3> <h2 class="title">{{ $t('About this instance') }}</h2>
<p> <p>
{{ $t("Your local administrator resumed it's policy:") }} {{ $t("Your local administrator resumed it's policy:") }}
</p> </p>
@ -67,30 +67,28 @@
/> />
</b-field> </b-field>
<b-field grouped> <p class="control has-text-centered">
<div class="control"> <button class="button is-primary is-large">
<button class="button is-primary"> {{ $t('Register') }}
{{ $t('Register') }} </button>
</button> </p>
</div> <p class="control">
<div class="control"> <router-link
<router-link class="button is-text"
class="button is-text" :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
:to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}" >
> {{ $t("Didn't receive the instructions ?") }}
{{ $t("Didn't receive the instructions ?") }} </router-link>
</router-link> </p>
</div> <p class="control">
<div class="control"> <router-link
<router-link class="button is-text"
class="button is-text" :to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
:to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}" :disabled="sendingValidation"
:disabled="sendingValidation" >
> {{ $t('Login') }}
{{ $t('Login') }} </router-link>
</router-link> </p>
</div>
</b-field>
</form> </form>
<div v-if="errors.length > 0"> <div v-if="errors.length > 0">
@ -167,7 +165,11 @@ export default class Register extends Vue {
display: none; display: none;
} }
h3.title { .container .columns {
margin: 1rem auto 3rem;
}
h2.title {
background: $secondary; background: $secondary;
display: inline; display: inline;
} }

48
js/src/views/User/ResendConfirmation.vue
View file

@ -1,24 +1,28 @@
<template> <template>
<section class="container"> <section class="container">
<div class="column"> <div class="columns is-mobile is-centered">
<h1 class="title"> <div class="column is-half-desktop">
{{ $t('Resend confirmation email') }} <h1 class="title">
</h1> {{ $t('Resend confirmation email') }}
<form v-if="!validationSent" @submit="resendConfirmationAction"> </h1>
<b-field label="Email"> <form v-if="!validationSent" @submit="resendConfirmationAction">
<b-input aria-required="true" required type="email" v-model="credentials.email"/> <b-field label="Email">
</b-field> <b-input aria-required="true" required type="email" v-model="credentials.email"/>
<button class="button is-primary"> </b-field>
{{ $t('Send confirmation email again') }} <p class="control has-text-centered">
</button> <b-button type="is-primary">
</form> {{ $t('Send me the confirmation email once again') }}
<div v-else> </b-button>
<b-message type="is-success" :closable="false" title="Success"> </p>
{{ $t('If an account with this email exists, we just sent another confirmation email to {email}', {email: credentials.email}) }} </form>
</b-message> <div v-else>
<b-message type="is-info"> <b-message type="is-success" :closable="false" title="Success">
{{ $t("Please check your spam folder if you didn't receive the email.") }} {{ $t('If an account with this email exists, we just sent another confirmation email to {email}', {email: credentials.email}) }}
</b-message> </b-message>
<b-message type="is-info">
{{ $t("Please check your spam folder if you didn't receive the email.") }}
</b-message>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -73,3 +77,9 @@ export default class ResendConfirmation extends Vue {
} }
} }
</script> </script>
<style lang="scss" scoped>
.container .columns {
margin: 1rem auto 3rem;
}
</style>

50
js/src/views/User/SendPasswordReset.vue
View file

@ -1,25 +1,29 @@
<template> <template>
<section class="container"> <section class="container">
<div class="column"> <div class="columns is-mobile is-centered">
<h1 class="title"> <div class="column is-half-desktop">
{{ $t('Password reset') }} <h1 class="title">
</h1> {{ $t('Password reset') }}
<b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message> </h1>
<form @submit="sendResetPasswordTokenAction" v-if="!validationSent"> <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
<b-field label="Email"> <form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
<b-input aria-required="true" required type="email" v-model="credentials.email"/> <b-field label="Email">
</b-field> <b-input aria-required="true" required type="email" v-model="credentials.email"/>
<button class="button is-primary"> </b-field>
{{ $t('Send email to reset my password') }} <p class="control has-text-centered">
</button> <b-button type="is-primary">
</form> {{ $t('Send me an email to reset my password') }}
<div v-else> </b-button>
<b-message type="is-success" :closable="false" title="Success"> </p>
{{ $t('We just sent an email to {email}', {email: credentials.email}) }} </form>
</b-message> <div v-else>
<b-message type="is-info"> <b-message type="is-success" :closable="false" title="Success">
{{ $t("Please check your spam folder if you didn't receive the email.") }} {{ $t('We just sent an email to {email}', {email: credentials.email}) }}
</b-message> </b-message>
<b-message type="is-info">
{{ $t("Please check your spam folder if you didn't receive the email.") }}
</b-message>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -85,3 +89,9 @@ export default class SendPasswordReset extends Vue {
} }
} }
</script> </script>
<style lang="scss" scoped>
.container .columns {
margin: 1rem auto 3rem;
}
</style>