ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

replace CardWithColumns with new and improved BaseCard

Browse Source
This commit is contained in:
Alina Beck 2020-02-11 16:57:25 +01:00
parent 3c8c9d51e1
commit 60818c5902
7 changed files with 42 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
webapp/components/LoginForm/LoginForm.vue
View File

@ -40,7 +40,9 @@
<nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
</p>
</form>
<locale-switch offset="5" />
<template v-slot:topMenu>
<locale-switch offset="5" />
</template>
</base-card>
</section>
</template>
@ -85,16 +87,6 @@ export default {
width: 80vw;
max-width: 620px;
margin: auto;
}
.login-form > .base-card {
position: relative;
.v-popover {
position: absolute;
top: $space-small;
left: $space-small;
}
.base-button {
display: block;

16
webapp/components/_new/generic/BaseCard/BaseCard.story.js
View File

@ -41,6 +41,22 @@ storiesOf('Generic/BaseCard', module)
`,
}))
.add('with slot: topMenu', () => ({
components: { BaseCard },
template: `
<base-card style="width: 600px;">
<template v-slot:imageColumn>
<img class="image" src="/img/sign-up/humanconnection.svg" />
</template>
<h2 class="title">I am a card heading</h2>
<p>And I am a paragraph.</p>
<template v-slot:topMenu>
<base-button size="small">Menu</base-button>
</template>
</base-card>
`,
}))
.add('with highlight prop', () => ({
components: { BaseCard },
template: `

10
webapp/components/_new/generic/BaseCard/BaseCard.vue
View File

@ -17,6 +17,9 @@
</template>
<slot v-else />
<aside v-if="$slots.topMenu" class="top-menu">
<slot name="topMenu" />
</aside>
</article>
</template>
@ -48,6 +51,7 @@ export default {
<style lang="scss">
.base-card {
position: relative;
padding: $space-base;
border-radius: $border-radius-x-large;
overflow: hidden;
@ -107,5 +111,11 @@ export default {
> .content-column {
flex-basis: 50%;
}
> .top-menu {
position: absolute;
top: $space-small;
left: $space-small;
}
}
</style>

21
webapp/components/_new/generic/CardWithColumns/CardWithColumns.story.js
View File

@ -1,21 +0,0 @@
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>
`,
}))

26
webapp/components/_new/generic/CardWithColumns/CardWithColumns.vue
View File

@ -1,26 +0,0 @@
<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>

28
webapp/pages/password-reset.vue
View File

@ -1,24 +1,22 @@
<template>
<ds-container width="small" class="password-reset">
<card-with-columns>
<template v-slot:left>
<locale-switch offset="5" />
<base-card>
<template v-slot:imageColumn>
<img alt="Human Connection" src="/icon.png" class="image" />
</template>
<template v-slot:right>
<nuxt-child />
<nuxt-child />
<template v-slot:topMenu>
<locale-switch offset="5" />
</template>
</card-with-columns>
</base-card>
</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',
@ -29,17 +27,3 @@ export default {
},
}
</script>
<style lang="scss">
.password-reset {
position: relative;
.v-popover {
position: absolute;
}
.image {
width: 70%;
margin: auto;
}
}
</style>

16
webapp/pages/registration.vue
View File

@ -1,24 +1,22 @@
<template>
<ds-container width="medium">
<card-with-columns>
<template v-slot:left>
<base-card>
<template v-slot:imageColumn>
<img alt="Human Connection" src="/img/sign-up/nicetomeetyou.svg" />
</template>
<nuxt-child />
<template v-slot:topMenu>
<locale-switch offset="5" />
<img class="signup-image" alt="Human Connection" src="/img/sign-up/nicetomeetyou.svg" />
</template>
<template v-slot:right>
<nuxt-child />
</template>
</card-with-columns>
</base-card>
</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',