IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add header, footer, and centered selection dots

Browse Source
This commit is contained in:
Wolfgang Huß 2021-02-03 09:10:56 +01:00
parent 4457b733d9
commit 0aa3daf5c7
2 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
webapp/components/ComponentSlider/ComponentSlider.vue
View File

@ -1,19 +1,26 @@
<template>
<div class="Sliders">
<!-- <h2 class="subTitle">{{ $t('login.login') + ' XXX' }}</h2> -->
<slot :name="'header'" />
<ds-heading v-if="sliderData.sliders[sliderIndex].title" size="h3">
{{ sliderData.sliders[sliderIndex].title }}
</ds-heading>
<slot :name="sliderData.sliders[sliderIndex].name" />
<ds-flex>
<ds-flex-item>
<ds-flex-item :centered="true">
<div
v-for="(slider, index) in sliderData.sliders"
:key="slider.name"
class="selection-button"
:class="[
'Sliders__component-selection',
index < sliderIndex && '--confirmed',
]"
>
<base-button
:class="[
'Sliders__slider-selection',
]"
style="float: left"
:circle="true"
size="small"
@ -39,6 +46,8 @@
</base-button>
</ds-flex-item>
</ds-flex>
<slot :name="'footer'" />
</div>
</template>
@ -71,8 +80,9 @@ export default {
// padding: 0;
// list-style: none;
&__component-selection {
padding-right: 10px;
&__slider-selection {
// padding-top: 5px;
margin-right: 5px;
// text-align: center;
// height: 100%;

24
webapp/components/Registration/RegistrationSlider.vue
View File

@ -7,15 +7,15 @@
</a>
</template>
<h1 class="title">{{ $t('components.registration.signup.title', metadata) }}</h1>
<component-slider :sliderData="sliderData">
<template #header>
<ds-heading size="h2">
{{ $t('components.registration.signup.title', metadata) }}
</ds-heading>
</template>
<template #enter-invite>
<registration-item-enter-invite :sliderData="sliderData" :inviteCode="sliderData.collectedComponentData.inviteCode ? sliderData.collectedComponentData.inviteCode : ''" :email="sliderData.collectedComponentData.email ? sliderData.collectedComponentData.email : ''">
<ds-space margin-bottom="xxx-small" margin-top="large" centered>
<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
</ds-space>
</registration-item-enter-invite>
<registration-item-enter-invite :sliderData="sliderData" :inviteCode="sliderData.collectedComponentData.inviteCode ? sliderData.collectedComponentData.inviteCode : ''" :email="sliderData.collectedComponentData.email ? sliderData.collectedComponentData.email : ''" />
</template>
<!-- <template #enter-email> -->
@ -39,6 +39,12 @@
email="user@example.org"
/>
</template>
<template #footer>
<ds-space margin-bottom="xxx-small" margin-top="small" centered>
<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
</ds-space>
</template>
</component-slider>
<template #topMenu>
@ -81,6 +87,8 @@ export default {
sliders: [
{
name: 'enter-invite',
// title: this.$t('components.registration.create-user-account.title'),
title: 'Invitation', // Wolle
validated: false,
button: {
title: 'Next', // Wolle
@ -91,6 +99,7 @@ export default {
// {
// name: 'enter-email',
// validated: false,
// title: 'E-Mail', // Wolle
// button: {
// title: 'Next', // Wolle
// icon: :icon="(sliderIndex < sliderData.sliders.length - 1 && 'arrow-right') || (sliderIndex === sliderData.sliders.length - 1 && 'check')"
@ -99,6 +108,7 @@ export default {
// },
{
name: 'create-user-account',
title: this.$t('components.registration.create-user-account.title'),
validated: false,
button: {
title: this.$t('actions.save'), // Wolle