mobile formulare style

This commit is contained in:
ogerly 2022-12-30 14:31:04 +01:00
parent 52c28410fd
commit 130cc2b624
11 changed files with 38 additions and 43 deletions

View File

@ -1,5 +1,6 @@
<template>
<div class="contribution-messages-formular">
<small class="pl-2 pt-3">{{ $t('form.reply') }}</small>
<div>
<b-form @submit.prevent="onSubmit" @reset="onReset">
<b-form-textarea
@ -8,12 +9,12 @@
:placeholder="$t('form.memo')"
rows="3"
></b-form-textarea>
<b-row class="mt-4 mb-6">
<b-row class="mt-4 mb-4">
<b-col>
<b-button type="reset" variant="danger">{{ $t('form.cancel') }}</b-button>
<b-button type="reset" variant="secondary">{{ $t('form.cancel') }}</b-button>
</b-col>
<b-col class="text-right">
<b-button type="submit" variant="primary" :disabled="disabled">
<b-button type="submit" variant="gradido" :disabled="disabled">
{{ $t('form.reply') }}
</b-button>
</b-col>

View File

@ -1,24 +1,21 @@
<template>
<div class="contribution-messages-list">
<b-container>
<div v-for="message in messages" v-bind:key="message.id">
<div>
<div v-for="message in messages" v-bind:key="message.id" class="mt-3">
<contribution-messages-list-item :message="message" />
</div>
</b-container>
<b-container>
</div>
<div>
<contribution-messages-formular
v-if="['PENDING', 'IN_PROGRESS'].includes(state)"
:contributionId="contributionId"
v-on="$listeners"
@update-state="updateState"
/>
</b-container>
</div>
<div
v-b-toggle="'collapse' + String(contributionId)"
class="text-center pointer h2 clearboth pt-1"
>
<b-button variant="outline-primary" block class="mt-4">
<div v-b-toggle="'collapse' + String(contributionId)" class="text-center pointer clearboth">
<b-button variant="outline-primary" block class="mb-3">
<b-icon icon="arrow-up-short"></b-icon>
{{ $t('form.close') }}
</b-button>
@ -57,9 +54,6 @@ export default {
}
</script>
<style scoped>
.temp-message {
margin-top: 50px;
}
.clearboth {
clear: both;
}

View File

@ -1,8 +1,8 @@
<template>
<div class="contribution-messages-list-item">
<div v-if="isNotModerator" class="is-not-moderator text-right">
<b-row>
<b-col>
<div v-if="isNotModerator" class="text-right pr-4 pr-lg-0">
<b-row class="mb-3">
<b-col cols="10">
<div class="font-weight-bold">{{ storeName.username }}</div>
<div class="small">{{ $d(new Date(message.createdAt), 'short') }}</div>
<parse-message v-bind="message"></parse-message>
@ -14,15 +14,15 @@
<!-- <span class="ml-2 mr-2">{{ storeName.username }}</span>
<span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span> -->
</div>
<div v-else class="is-moderator text-left">
<b-row>
<div v-else>
<b-row class="mb-3 bg-f5 p-2">
<b-col cols="2">
<avatar :username="moderationName.username" :initials="moderationName.initials"></avatar>
</b-col>
<b-col cols="auto">
<b-col cols="10">
<div class="font-weight-bold">
{{ moderationName.username }}
<small class="ml-2 text-success">{{ $t('community.moderator') }}</small>
<span class="ml-2 text-success small">{{ $t('community.moderator') }}</span>
</div>
<div class="small">{{ $d(new Date(message.createdAt), 'short') }}</div>
@ -70,17 +70,17 @@ export default {
</script>
<style>
.is-not-moderator {
float: right;
/* float: right; */
/* background-color: rgb(261, 204, 221); */
width: 75%;
/* width: 75%;
margin-top: 20px;
margin-bottom: 20px;
clear: both;
clear: both; */
}
.is-moderator {
clear: both;
/* clear: both; */
/* background-color: rgb(255, 255, 128); */
width: 75%;
margin-top: 20px;
/* width: 75%;
margin-top: 20px; */
}
</style>

View File

@ -1,5 +1,5 @@
<template>
<div class="mt-2">
<div class="mt-1">
<span v-for="({ type, text }, index) in parsedMessage" :key="index">
<b-link v-if="type === 'link'" :href="text" target="_blank">{{ text }}</b-link>
<span v-else-if="type === 'date'">

View File

@ -109,14 +109,14 @@
<span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
</b-col>
</validation-provider> -->
<b-row class="mt-3">
<b-row class="mt-5">
<b-col>
<b-button type="reset" variant="secondary" @click="reset" data-test="button-cancel">
{{ $t('form.cancel') }}
</b-button>
</b-col>
<b-col class="text-right">
<b-button type="submit" variant="primary" :disabled="disabled" data-test="button-submit">
<b-button type="submit" variant="gradido" :disabled="disabled" data-test="button-submit">
{{ form.id ? $t('form.change') : $t('contribution.submit') }}
</b-button>
</b-col>

View File

@ -164,7 +164,7 @@
</div>
</div> -->
<b-collapse :id="collapsId" class="mt-2" v-model="visible">
<b-card>
<contribution-messages-list
:messages="messages_get"
:state="state"
@ -172,7 +172,7 @@
@get-list-contribution-messages="getListContributionMessages"
@update-state="updateState"
/>
</b-card>
</b-collapse>
</div>
</div>

View File

@ -1,7 +1,7 @@
<template>
<b-row class="transaction-form">
<b-col xl="12" md="12">
<b-card class="appBoxShadow gradido-border-radius">
<b-col cols="12">
<b-card class="appBoxShadow gradido-border-radius" body-class="p-2">
<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)" @reset="onReset">
<b-form-radio-group v-model="radioSelected" class="container">
@ -94,7 +94,7 @@
</b-button>
</b-col>
<b-col class="text-right">
<b-button type="submit" variant="primary">
<b-button type="submit" variant="gradido">
{{ $t('form.check_now') }}
</b-button>
</b-col>

View File

@ -1,6 +1,6 @@
<template>
<div>
<b-sidebar id="sidebar-mobile" bg-variant="white" :backdrop="true">
<b-sidebar id="sidebar-mobile" bg-variant="f5" :backdrop="true">
<div class="px-3 py-2">
<sidebar @admin="$emit('admin')" @logout="$emit('logout')" />
</div>

View File

@ -18,7 +18,7 @@
</b-col>
</b-row>
<b-collapse class="pb-4 pt-5" v-model="visible">
<div class="word-break mb-4 text-center">
<div class="word-break mb-4 mt-lg-3 offset-3 offset-lg-2">
<div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
{{ memo }}
</div>

View File

@ -43,7 +43,7 @@
</b-col>
</b-row>
<b-collapse class="pb-4 pt-5" v-model="visible">
<div class="word-break mb-4 text-center">
<div class="word-break mb-4 mt-lg-3 offset-3 offset-lg-2">
<div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
{{ memo }}
</div>

View File

@ -41,10 +41,10 @@
<collapse-icon class="text-right" :visible="visible" />
</b-col>
</b-row>
<b-collapse class="pb-4 pt-5" v-model="visible">
<div class="word-break mb-4 text-center">
<b-collapse class="pb-4 pt-2" v-model="visible">
<div class="word-break mb-5 mt-lg-3 offset-3 offset-lg-2">
<div class="font-weight-bold pb-2">{{ $t('form.memo') }}</div>
{{ memo }}
<div class="">{{ memo }}</div>
</div>
<decay-information :typeId="typeId" :decay="decay" :amount="amount" :memo="memo" />
</b-collapse>