From 3c8c9d51e1541de04d4c02229977eaa9a9d23735 Mon Sep 17 00:00:00 2001
From: Alina Beck <alina.beck@mail.com>
Date: Tue, 11 Feb 2020 16:34:35 +0100
Subject: [PATCH] re-refactor LoginForm, ContributionForm and TeaserImage

---
 .../ContributionForm/ContributionForm.vue     |  5 +-
 webapp/components/LoginForm/LoginForm.vue     | 95 +++++++------------
 webapp/components/TeaserImage/TeaserImage.vue |  3 +-
 .../_new/generic/BaseCard/BaseCard.vue        |  6 +-
 4 files changed, 45 insertions(+), 64 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index f782beae2..b1706990c 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -10,7 +10,7 @@
       <base-card>
         <template v-slot:heroImage>
           <img
-            v-if="contribution"
+            v-if="showHeroImage"
             :src="contribution.image | proxyApiUrl"
             :class="['image', form.blurImage && '--blur-image']"
           />
@@ -172,6 +172,9 @@ export default {
     contentLength() {
       return this.$filters.removeHtml(this.form.content).length
     },
+    showHeroImage() {
+      return this.contribution && this.contribution.image && !this.form.teaserImage
+    },
   },
   methods: {
     submit() {
diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 1e3444543..df3eb039f 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -4,56 +4,52 @@
       <p>{{ $t('quotes.african.quote') }}</p>
       <b>- {{ $t('quotes.african.author') }}</b>
     </blockquote>
-    <card-with-columns>
-      <template v-slot:left>
-        <locale-switch offset="5" />
+    <base-card>
+      <template v-slot:imageColumn>
         <a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfo')" target="_blank">
           <img class="image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
         </a>
       </template>
-      <template v-slot:right>
-        <form :disabled="pending" @submit.prevent="onSubmit">
-          <h2 class="title">{{ $t('login.login') }}</h2>
-          <ds-input
-            v-model="form.email"
-            :disabled="pending"
-            :placeholder="$t('login.email')"
-            type="email"
-            name="email"
-            icon="envelope"
-          />
-          <ds-input
-            v-model="form.password"
-            :disabled="pending"
-            :placeholder="$t('login.password')"
-            icon="lock"
-            icon-right="question-circle"
-            name="password"
-            type="password"
-          />
-          <nuxt-link to="/password-reset/request" class="password-link">
-            {{ $t('login.forgotPassword') }}
-          </nuxt-link>
-          <base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
-            {{ $t('login.login') }}
-          </base-button>
-          <p class="signup-hint">
-            {{ $t('login.no-account') }}
-            <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
-          </p>
-        </form>
-      </template>
-    </card-with-columns>
+      <h2 class="title">{{ $t('login.login') }}</h2>
+      <form :disabled="pending" @submit.prevent="onSubmit">
+        <ds-input
+          v-model="form.email"
+          :disabled="pending"
+          :placeholder="$t('login.email')"
+          type="email"
+          name="email"
+          icon="envelope"
+        />
+        <ds-input
+          v-model="form.password"
+          :disabled="pending"
+          :placeholder="$t('login.password')"
+          icon="lock"
+          icon-right="question-circle"
+          name="password"
+          type="password"
+        />
+        <nuxt-link to="/password-reset/request">
+          {{ $t('login.forgotPassword') }}
+        </nuxt-link>
+        <base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
+          {{ $t('login.login') }}
+        </base-button>
+        <p>
+          {{ $t('login.no-account') }}
+          <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
+        </p>
+      </form>
+      <locale-switch offset="5" />
+    </base-card>
   </section>
 </template>
 
 <script>
-import CardWithColumns from '~/components/_new/generic/CardWithColumns/CardWithColumns'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 
 export default {
   components: {
-    CardWithColumns,
     LocaleSwitch,
   },
   data() {
@@ -91,38 +87,19 @@ export default {
   margin: auto;
 }
 
-.login-form > .card-with-columns {
+.login-form > .base-card {
   position: relative;
 
-  > .column.--left {
-    justify-content: center;
-  }
-
   .v-popover {
     position: absolute;
     top: $space-small;
     left: $space-small;
   }
 
-  .image {
-    display: block;
-    width: 90%;
-    max-width: 200px;
-    margin: auto;
-  }
-
-  .title {
-    margin-bottom: $space-small;
-  }
-
-  .password-link {
-    display: block;
-    margin-bottom: $space-large;
-  }
-
   .base-button {
     display: block;
     width: 100%;
+    margin-top: $space-large;
     margin-bottom: $space-small;
   }
 }
diff --git a/webapp/components/TeaserImage/TeaserImage.vue b/webapp/components/TeaserImage/TeaserImage.vue
index 6c346ffc8..47a4d04d7 100644
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@@ -136,7 +136,8 @@ export default {
 
   > .crop-overlay {
     width: 100%;
-    height: 400px;
+    height: 100%;
+    min-height: 400px;
     font-size: $font-size-base;
 
     > .img {
diff --git a/webapp/components/_new/generic/BaseCard/BaseCard.vue b/webapp/components/_new/generic/BaseCard/BaseCard.vue
index ebfe97c7c..e53631b79 100644
--- a/webapp/components/_new/generic/BaseCard/BaseCard.vue
+++ b/webapp/components/_new/generic/BaseCard/BaseCard.vue
@@ -41,8 +41,8 @@ export default {
       if (this.wideContent) classNames += ' --wide-content'
 
       return classNames
-    }
-  }
+    },
+  },
 }
 </script>
 
@@ -98,7 +98,7 @@ export default {
     align-items: center;
     padding-right: $space-base;
 
-    > .image {
+    .image {
       width: 100%;
       max-width: 200px;
     }