mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +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>
|
||||
<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">
|
||||
<img class="image" alt="Human Connection" src="/img/sign-up/humanconnection.svg" />
|
||||
</a>
|
||||
<form :disabled="pending" @submit.prevent="onSubmit" class="form">
|
||||
<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>
|
||||
</base-card>
|
||||
<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>
|
||||
</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>
|
||||
</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 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
.login-form > .card-with-columns {
|
||||
position: relative;
|
||||
|
||||
> .locale-switch {
|
||||
position: absolute;
|
||||
top: $space-small;
|
||||
left: $space-small;
|
||||
}
|
||||
> .column.--left {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
> .link {
|
||||
flex-basis: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.v-popover {
|
||||
position: absolute;
|
||||
top: $space-small;
|
||||
left: $space-small;
|
||||
}
|
||||
|
||||
> .image {
|
||||
width: 90%;
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
.image {
|
||||
display: block;
|
||||
width: 90%;
|
||||
max-width: 200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
> .form {
|
||||
flex-basis: 50%;
|
||||
.title {
|
||||
margin-bottom: $space-small;
|
||||
}
|
||||
|
||||
> .title {
|
||||
margin-bottom: $space-small;
|
||||
}
|
||||
.password-link {
|
||||
display: block;
|
||||
margin-bottom: $space-large;
|
||||
}
|
||||
|
||||
> .password-link {
|
||||
display: block;
|
||||
margin-bottom: $space-large;
|
||||
}
|
||||
|
||||
> .base-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $space-small;
|
||||
}
|
||||
}
|
||||
.base-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: $space-small;
|
||||
}
|
||||
}
|
||||
</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>
|
||||
<ds-container width="small">
|
||||
<ds-card>
|
||||
<ds-flex gutter="small">
|
||||
<ds-flex-item :width="{ base: '100%', sm: '40%' }">
|
||||
<client-only>
|
||||
<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>
|
||||
<nuxt-child />
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-card>
|
||||
<ds-container width="small" class="password-reset">
|
||||
<card-with-columns>
|
||||
<template v-slot:left>
|
||||
<locale-switch offset="5" />
|
||||
<img alt="Human Connection" src="/icon.png" class="image" />
|
||||
</template>
|
||||
<template v-slot:right>
|
||||
<nuxt-child />
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user