introduce CardWithColumns component

webapp/components/LoginForm/LoginForm.vue

@@ -4,14 +4,15 @@
       <p>{{ $t('quotes.african.quote') }}</p>
       <b>- {{ $t('quotes.african.author') }}</b>
     </blockquote>
-    <base-card>
-      <client-only>
-        <locale-switch class="locale-switch" />
-      </client-only>
-      <a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfo')" target="_blank" class="link">
+    <card-with-columns>
+      <template v-slot:left>
+        <locale-switch offset="5" />
+        <a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfo')" target="_blank">
           <img class="image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
         </a>
-      <form :disabled="pending" @submit.prevent="onSubmit" class="form">
+      </template>
+      <template v-slot:right>
+        <form :disabled="pending" @submit.prevent="onSubmit">
           <h2 class="title">{{ $t('login.login') }}</h2>
           <ds-input
             v-model="form.email"
@@ -41,15 +42,18 @@
             <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
           </p>
         </form>
-    </base-card>
+      </template>
+    </card-with-columns>
   </section>
 </template>
 
 <script>
-import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch.vue'
+import CardWithColumns from '~/components/_new/generic/CardWithColumns/CardWithColumns'
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 
 export default {
   components: {
+    CardWithColumns,
     LocaleSwitch,
   },
   data() {
@@ -85,47 +89,41 @@ export default {
   width: 80vw;
   max-width: 620px;
   margin: auto;
+}
 
-  > .base-card {
+.login-form > .card-with-columns {
   position: relative;
-    display: flex;
 
-    > .locale-switch {
+  > .column.--left {
+    justify-content: center;
+  }
+
+  .v-popover {
     position: absolute;
     top: $space-small;
     left: $space-small;
   }
 
-    > .link {
-      flex-basis: 50%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      > .image {
+  .image {
+    display: block;
     width: 90%;
     max-width: 200px;
-      }
+    margin: auto;
   }
 
-    > .form {
-      flex-basis: 50%;
-
-      > .title {
+  .title {
     margin-bottom: $space-small;
   }
 
-      > .password-link {
+  .password-link {
     display: block;
     margin-bottom: $space-large;
   }
 
-      > .base-button {
+  .base-button {
     display: block;
     width: 100%;
     margin-bottom: $space-small;
   }
 }
-  }
-}
 </style>

webapp/components/_new/generic/CardWithColumns/CardWithColumns.story.js

@@ -0,0 +1,21 @@
+import { storiesOf } from '@storybook/vue'
+import helpers from '~/storybook/helpers'
+import CardWithColumns from './CardWithColumns.vue'
+
+storiesOf('Generic/CardWithColumns', module)
+  .addDecorator(helpers.layout)
+
+  .add('default', () => ({
+    components: { CardWithColumns },
+    template: `
+      <card-with-columns>
+        <template v-slot:left>
+          <img src="/img/sign-up/humanconnection.svg" style="width: 80%; margin: auto;" />
+        </template>
+        <template v-slot:right>
+          <h2 style="margin-bottom: 12px">I am in the right column</h2>
+          <p>And so is this paragraph.</p>
+        </template>
+      </card-with-columns>
+    `,
+  }))

webapp/components/_new/generic/CardWithColumns/CardWithColumns.vue

@@ -0,0 +1,26 @@
+<template>
+  <base-card class="card-with-columns">
+    <section class="column --left">
+      <slot name="left" />
+    </section>
+    <section class="column --right">
+      <slot name="right" />
+    </section>
+  </base-card>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss">
+.card-with-columns {
+  display: flex;
+
+  > .column {
+    flex-basis: 50%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

webapp/pages/password-reset.vue

@@ -1,28 +1,24 @@
 <template>
-  <ds-container width="small">
-    <ds-card>
-      <ds-flex gutter="small">
-        <ds-flex-item :width="{ base: '100%', sm: '40%' }">
-          <client-only>
+  <ds-container width="small" class="password-reset">
+    <card-with-columns>
+      <template v-slot:left>
         <locale-switch offset="5" />
-          </client-only>
-          <ds-space margin-top="small" margin-bottom="xxx-small" centered>
-            <img alt="Human Connection" src="/icon.png" />
-          </ds-space>
-        </ds-flex-item>
-        <ds-flex-item :width="{ base: '100%', sm: '60%' }" centered>
+        <img alt="Human Connection" src="/icon.png" class="image" />
+      </template>
+      <template v-slot:right>
         <nuxt-child />
-        </ds-flex-item>
-      </ds-flex>
-    </ds-card>
+      </template>
+    </card-with-columns>
   </ds-container>
 </template>
 
 <script>
+import CardWithColumns from '~/components/_new/generic/CardWithColumns/CardWithColumns'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 
 export default {
   components: {
+    CardWithColumns,
     LocaleSwitch,
   },
   layout: 'no-header',
@@ -33,10 +29,17 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped>
-img {
-  padding-left: 50px;
-  padding-right: 50px;
-  max-width: 200px;
+<style lang="scss">
+.password-reset {
+  position: relative;
+
+  .v-popover {
+    position: absolute;
+  }
+
+  .image {
+    width: 70%;
+    margin: auto;
+  }
 }
 </style>