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

Bug/fix ui See merge request framasoft/mobilizon!237
2019-10-10 14:28:15 +02:00 · 2019-10-10 14:28:15 +02:00 · a20f2612bc
parent 4b7abb0d6c 8d88aa1450
commit a20f2612bc
10 changed files with 195 additions and 145 deletions
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@ -46,8 +46,9 @@ A simple card for an event
      </div>
      <span class="organizer-place-wrapper">
        <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)">
-          - {{ event.physicalAddress.locality || event.physicalAddress.description }}
+          {{ event.physicalAddress.locality || event.physicalAddress.description }}
        </span>
      </span>
    </div>
@ -201,6 +202,11 @@ export default class EventCard extends Vue {
      }
      span.organizer-place-wrapper {
        display: flex;
+        padding: 0 0.5rem 0.3rem;
+
+        span {
+          padding-right: 0.25rem;
+        }

        span:last-child {
          flex: 1;
--- a/js/src/components/SearchField.vue
+++ b/js/src/components/SearchField.vue
@ -1,5 +1,5 @@
 <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>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
@ -20,3 +20,10 @@ export default class SearchField extends Vue {
  }
 }
 </script>
+
+<style lang="scss">
+    input.searchField {
+        box-shadow: none;
+        border-color: #b5b5b5;
+    }
+</style>
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@ -5,11 +5,21 @@ $primary-invert: findColorInvert($primary);
 $secondary: #FAB12D;
 $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,
    (
        "primary": ($primary, $primary-invert),
-        "secondary": ($secondary, $secondary-invert)
+        "secondary": ($secondary, $secondary-invert),
+        "success": ($success, $success-invert),
+        "info": ($info, $info-invert),
+        "danger": ($danger, $danger-invert),
    )
 );

--- a/js/src/views/Account/Register.vue
+++ b/js/src/views/Account/Register.vue
@ -1,16 +1,10 @@
 <template>
-  <div>
-    <section class="hero">
-      <div class="hero-body">
+  <section class="container">
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half-desktop">
        <h1 class="title">
          {{ $t('Register an account on Mobilizon!') }}
        </h1>
-      </div>
-    </section>
-    <section>
-      <div class="container">
-        <div class="columns is-mobile">
-          <div class="column">
        <form v-if="!validationSent">
          <b-field
            :label="$t('Username')"
@ -38,17 +32,15 @@
            <b-input type="textarea" v-model="person.summary"/>
          </b-field>

-              <b-field grouped>
-                <div class="control">
-                  <button type="button" class="button is-primary" @click="submit()">
+          <p class="control has-text-centered">
+            <b-button type="is-primary" size="is-large" @click="submit()">
               {{ $t('Create my profile') }}
-                  </button>
-                </div>
-              </b-field>
+            </b-button>
+          </p>
        </form>

        <div v-if="validationSent && !userAlreadyActivated">
-              <b-message title="Success" type="is-success">
+          <b-message title="Success" type="is-success" closable="false">
            <h2 class="title">
              {{ $t('Your account is nearly ready, {username}', { username: person.preferredUsername }) }}
            </h2>
@ -62,9 +54,7 @@
        </div>
      </div>
    </div>
-      </div>
  </section>
-  </div>
 </template>

 <script lang="ts">
@ -88,7 +78,7 @@ export default class Register extends Vue {
  validationSent: boolean = false;
  sendingValidation: boolean = false;

-  async mounted() {
+  async created() {
    // Make sure no one goes to this page if we don't want to
    if (!this.email) {
      await this.$router.replace({ name: RouteName.PAGE_NOT_FOUND });
@ -134,7 +124,7 @@ export default class Register extends Vue {
 }
 </script>

-<style lang="scss">
+<style lang="scss" scoped>
 .avatar-enter-active {
  transition: opacity 1s ease;
 }
@ -147,4 +137,8 @@ export default class Register extends Vue {
 .avatar-leave {
  display: none;
 }
+
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
 </style>
--- a/js/src/views/Event/Explore.vue
+++ b/js/src/views/Event/Explore.vue
@ -58,6 +58,10 @@ export default class Explore extends Vue {
 </script>

 <style scoped lang="scss">
+  h1.title {
+    margin-top: 1.5rem;
+  }
+
  h3.title {
    margin-bottom: 1.5rem;
  }
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@ -5,7 +5,7 @@
          <div class="container">
            <h1 class="title">{{ $t('Gather ⋅ Organize ⋅ Mobilize') }}</h1>
            <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 -->
            <!-- <p v-if="!config.registrationsOpen">
              {{ $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 {
      max-width: 400px;
    }
+
+    .instance-description {
+      margin-bottom: 1rem;
+    }
  }
 </style>
--- a/js/src/views/User/Login.vue
+++ b/js/src/views/User/Login.vue
@ -1,18 +1,15 @@
 <template>
  <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">
      {{ $t('You need to login.') }}
    </b-message>

    <section v-if="!currentUser.isLoggedIn">
      <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>
          <form @submit="loginAction">
            <b-field :label="$t('Email')">
@ -29,27 +26,27 @@
              />
            </b-field>

-            <div class="control has-text-centered">
+            <p class="control has-text-centered">
              <button class="button is-primary is-large">
                {{ $t('Login') }}
              </button>
-            </div>
-            <div class="control">
+            </p>
+            <p class="control">
              <router-link
                class="button is-text"
                :to="{ name: RouteName.SEND_PASSWORD_RESET, params: { email: credentials.email }}"
              >
                {{ $t('Forgot your password ?') }}
              </router-link>
-            </div>
-            <div class="control" v-if="config && config.registrationsOpen">
+            </p>
+            <p class="control" v-if="config && config.registrationsOpen">
              <router-link
                class="button is-text"
                :to="{ name: RouteName.REGISTER, params: { default_email: credentials.email, default_password: credentials.password }}"
              >
                {{ $t('Register') }}
              </router-link>
-            </div>
+            </p>
          </form>
        </div>
      </div>
@ -166,3 +163,9 @@ export default class Login extends Vue {
  }
 }
 </script>
+
+<style lang="scss" scoped>
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+</style>
--- a/js/src/views/User/Register.vue
+++ b/js/src/views/User/Register.vue
@ -11,18 +11,18 @@
      <div class="columns">
        <div class="column">
          <div class="content">
-            <h3 class="title">{{ $t('Features') }}</h3>
+            <h2 class="title">{{ $t('Features') }}</h2>
            <ul>
              <li>{{ $t('Create your communities and your events') }}</li>
              <li>{{ $t('Other stuff…') }}</li>
            </ul>
          </div>
-          <i18n path="Learn more on" tag="p">
-            <a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
-          </i18n>
+          <router-link :to="{ name: RouteName.ABOUT }">
+            {{ $t('Learn more') }}
+          </router-link>
          <hr>
          <div class="content">
-            <h3 class="title">{{ $t('About this instance') }}</h3>
+            <h2 class="title">{{ $t('About this instance') }}</h2>
            <p>
              {{ $t("Your local administrator resumed it's policy:") }}
            </p>
@ -67,21 +67,20 @@
              />
            </b-field>

-            <b-field grouped>
-              <div class="control">
-                <button class="button is-primary">
+            <p class="control has-text-centered">
+              <button class="button is-primary is-large">
                {{ $t('Register') }}
              </button>
-              </div>
-              <div class="control">
+            </p>
+            <p class="control">
              <router-link
                class="button is-text"
                :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
              >
                {{ $t("Didn't receive the instructions ?") }}
              </router-link>
-              </div>
-              <div class="control">
+            </p>
+            <p class="control">
              <router-link
                class="button is-text"
                :to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
@ -89,8 +88,7 @@
              >
                {{ $t('Login') }}
              </router-link>
-              </div>
-            </b-field>
+            </p>
          </form>

          <div v-if="errors.length > 0">
@ -167,7 +165,11 @@ export default class Register extends Vue {
  display: none;
 }

-  h3.title {
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+
+  h2.title {
    background: $secondary;
    display: inline;
  }
--- a/js/src/views/User/ResendConfirmation.vue
+++ b/js/src/views/User/ResendConfirmation.vue
@ -1,6 +1,7 @@
 <template>
  <section class="container">
-    <div class="column">
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half-desktop">
        <h1 class="title">
          {{ $t('Resend confirmation email') }}
        </h1>
@ -8,9 +9,11 @@
          <b-field label="Email">
            <b-input aria-required="true" required type="email" v-model="credentials.email"/>
          </b-field>
-        <button class="button is-primary">
-          {{ $t('Send confirmation email again') }}
-        </button>
+          <p class="control has-text-centered">
+            <b-button type="is-primary">
+            {{ $t('Send me the confirmation email once again') }}
+            </b-button>
+          </p>
        </form>
        <div v-else>
          <b-message type="is-success" :closable="false" title="Success">
@ -21,6 +24,7 @@
          </b-message>
        </div>
      </div>
+    </div>
  </section>
 </template>

@ -73,3 +77,9 @@ export default class ResendConfirmation extends Vue {
  }
 }
 </script>
+
+<style lang="scss" scoped>
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+</style>
--- a/js/src/views/User/SendPasswordReset.vue
+++ b/js/src/views/User/SendPasswordReset.vue
@ -1,6 +1,7 @@
 <template>
  <section class="container">
-    <div class="column">
+    <div class="columns is-mobile is-centered">
+      <div class="column is-half-desktop">
        <h1 class="title">
          {{ $t('Password reset') }}
        </h1>
@ -9,9 +10,11 @@
          <b-field label="Email">
            <b-input aria-required="true" required type="email" v-model="credentials.email"/>
          </b-field>
-        <button class="button is-primary">
-          {{ $t('Send email to reset my password') }}
-        </button>
+          <p class="control has-text-centered">
+              <b-button type="is-primary">
+              {{ $t('Send me an email to reset my password') }}
+            </b-button>
+          </p>
        </form>
        <div v-else>
          <b-message type="is-success" :closable="false" title="Success">
@ -22,6 +25,7 @@
          </b-message>
        </div>
      </div>
+    </div>
  </section>
 </template>

@ -85,3 +89,9 @@ export default class SendPasswordReset extends Vue {
  }
 }
 </script>
+
+<style lang="scss" scoped>
+  .container .columns {
+    margin: 1rem auto 3rem;
+  }
+</style>