mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
introduce CardWithColumns component
This commit is contained in:
Alina Beck
parent
1eac8ed14d
commit
9c3378807c
@ -4,52 +4,56 @@
|
|||||||
<p>{{ $t('quotes.african.quote') }}</p>
|
<p>{{ $t('quotes.african.quote') }}</p>
|
||||||
<b>- {{ $t('quotes.african.author') }}</b>
|
<b>- {{ $t('quotes.african.author') }}</b>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<base-card>
|
<card-with-columns>
|
||||||
<client-only>
|
<template v-slot:left>
|
||||||
<locale-switch class="locale-switch" />
|
<locale-switch offset="5" />
|
||||||
</client-only>
|
<a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfo')" target="_blank">
|
||||||
<a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfo')" target="_blank" class="link">
|
<img class="image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
|
||||||
<img class="image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
|
</a>
|
||||||
</a>
|
</template>
|
||||||
<form :disabled="pending" @submit.prevent="onSubmit" class="form">
|
<template v-slot:right>
|
||||||
<h2 class="title">{{ $t('login.login') }}</h2>
|
<form :disabled="pending" @submit.prevent="onSubmit">
|
||||||
<ds-input
|
<h2 class="title">{{ $t('login.login') }}</h2>
|
||||||
v-model="form.email"
|
<ds-input
|
||||||
:disabled="pending"
|
v-model="form.email"
|
||||||
:placeholder="$t('login.email')"
|
:disabled="pending"
|
||||||
type="email"
|
:placeholder="$t('login.email')"
|
||||||
name="email"
|
type="email"
|
||||||
icon="envelope"
|
name="email"
|
||||||
/>
|
icon="envelope"
|
||||||
<ds-input
|
/>
|
||||||
v-model="form.password"
|
<ds-input
|
||||||
:disabled="pending"
|
v-model="form.password"
|
||||||
:placeholder="$t('login.password')"
|
:disabled="pending"
|
||||||
icon="lock"
|
:placeholder="$t('login.password')"
|
||||||
icon-right="question-circle"
|
icon="lock"
|
||||||
name="password"
|
icon-right="question-circle"
|
||||||
type="password"
|
name="password"
|
||||||
/>
|
type="password"
|
||||||
<nuxt-link to="/password-reset/request" class="password-link">
|
/>
|
||||||
{{ $t('login.forgotPassword') }}
|
<nuxt-link to="/password-reset/request" class="password-link">
|
||||||
</nuxt-link>
|
{{ $t('login.forgotPassword') }}
|
||||||
<base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
|
</nuxt-link>
|
||||||
{{ $t('login.login') }}
|
<base-button :loading="pending" filled name="submit" type="submit" icon="sign-in">
|
||||||
</base-button>
|
{{ $t('login.login') }}
|
||||||
<p class="signup-hint">
|
</base-button>
|
||||||
{{ $t('login.no-account') }}
|
<p class="signup-hint">
|
||||||
<nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
|
{{ $t('login.no-account') }}
|
||||||
</p>
|
<nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
|
||||||
</form>
|
</p>
|
||||||
</base-card>
|
</form>
|
||||||
|
</template>
|
||||||
|
</card-with-columns>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch.vue'
|
import CardWithColumns from '~/components/_new/generic/CardWithColumns/CardWithColumns'
|
||||||
|
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
CardWithColumns,
|
||||||
LocaleSwitch,
|
LocaleSwitch,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@ -85,47 +89,41 @@ export default {
|
|||||||
width: 80vw;
|
width: 80vw;
|
||||||
max-width: 620px;
|
max-width: 620px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
> .base-card {
|
.login-form > .card-with-columns {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
|
||||||
|
|
||||||
> .locale-switch {
|
> .column.--left {
|
||||||
position: absolute;
|
justify-content: center;
|
||||||
top: $space-small;
|
}
|
||||||
left: $space-small;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .link {
|
.v-popover {
|
||||||
flex-basis: 50%;
|
position: absolute;
|
||||||
display: flex;
|
top: $space-small;
|
||||||
justify-content: center;
|
left: $space-small;
|
||||||
align-items: center;
|
}
|
||||||
|
|
||||||
> .image {
|
.image {
|
||||||
width: 90%;
|
display: block;
|
||||||
max-width: 200px;
|
width: 90%;
|
||||||
}
|
max-width: 200px;
|
||||||
}
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
> .form {
|
.title {
|
||||||
flex-basis: 50%;
|
margin-bottom: $space-small;
|
||||||
|
}
|
||||||
|
|
||||||
> .title {
|
.password-link {
|
||||||
margin-bottom: $space-small;
|
display: block;
|
||||||
}
|
margin-bottom: $space-large;
|
||||||
|
}
|
||||||
|
|
||||||
> .password-link {
|
.base-button {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: $space-large;
|
width: 100%;
|
||||||
}
|
margin-bottom: $space-small;
|
||||||
|
|
||||||
> .base-button {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: $space-small;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -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>
|
||||||
|
`,
|
||||||
|
}))
|
||||||
@ -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>
|
||||||
@ -1,28 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<ds-container width="small">
|
<ds-container width="small" class="password-reset">
|
||||||
<ds-card>
|
<card-with-columns>
|
||||||
<ds-flex gutter="small">
|
<template v-slot:left>
|
||||||
<ds-flex-item :width="{ base: '100%', sm: '40%' }">
|
<locale-switch offset="5" />
|
||||||
<client-only>
|
<img alt="Human Connection" src="/icon.png" class="image" />
|
||||||
<locale-switch offset="5" />
|
</template>
|
||||||
</client-only>
|
<template v-slot:right>
|
||||||
<ds-space margin-top="small" margin-bottom="xxx-small" centered>
|
<nuxt-child />
|
||||||
<img alt="Human Connection" src="/icon.png" />
|
</template>
|
||||||
</ds-space>
|
</card-with-columns>
|
||||||
</ds-flex-item>
|
|
||||||
<ds-flex-item :width="{ base: '100%', sm: '60%' }" centered>
|
|
||||||
<nuxt-child />
|
|
||||||
</ds-flex-item>
|
|
||||||
</ds-flex>
|
|
||||||
</ds-card>
|
|
||||||
</ds-container>
|
</ds-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import CardWithColumns from '~/components/_new/generic/CardWithColumns/CardWithColumns'
|
||||||
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
CardWithColumns,
|
||||||
LocaleSwitch,
|
LocaleSwitch,
|
||||||
},
|
},
|
||||||
layout: 'no-header',
|
layout: 'no-header',
|
||||||
@ -33,10 +29,17 @@ export default {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
img {
|
.password-reset {
|
||||||
padding-left: 50px;
|
position: relative;
|
||||||
padding-right: 50px;
|
|
||||||
max-width: 200px;
|
.v-popover {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
width: 70%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user