mobile formulare style

frontend/src/components/ContributionMessages/ContributionMessagesFormular.vue

@@ -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>

frontend/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -1,24 +1,21 @@
 <template>
   <div class="contribution-messages-list">
-    <b-container>
+    <div>
-      <div v-for="message in messages" v-bind:key="message.id">
+      <div v-for="message in messages" v-bind:key="message.id" class="mt-3">
         <contribution-messages-list-item :message="message" />
       </div>
-    </b-container>
+    </div>
-    <b-container>
+    <div>
       <contribution-messages-formular
         v-if="['PENDING', 'IN_PROGRESS'].includes(state)"
         :contributionId="contributionId"
         v-on="$listeners"
         @update-state="updateState"
       />
-    </b-container>
+    </div>
 
-    <div
+    <div v-b-toggle="'collapse' + String(contributionId)" class="text-center pointer clearboth">
-      v-b-toggle="'collapse' + String(contributionId)"
+      <b-button variant="outline-primary" block class="mb-3">
-      class="text-center pointer h2 clearboth pt-1"
-    >
-      <b-button variant="outline-primary" block class="mt-4">
         <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;
 }

frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="contribution-messages-list-item">
-    <div v-if="isNotModerator" class="is-not-moderator text-right">
+    <div v-if="isNotModerator" class="text-right pr-4 pr-lg-0">
-      <b-row>
+      <b-row class="mb-3">
-        <b-col>
+        <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">
+    <div v-else>
-      <b-row>
+      <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%;
+  /* width: 75%;
-  margin-top: 20px;
+  margin-top: 20px; */
 }
 </style>

frontend/src/components/ContributionMessages/ParseMessage.vue

@@ -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'">

frontend/src/components/Contributions/ContributionForm.vue

@@ -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>

frontend/src/components/Contributions/ContributionListItem.vue

@@ -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>

frontend/src/components/GddSend/TransactionForm.vue

@@ -1,7 +1,7 @@
 <template>
   <b-row class="transaction-form">
-    <b-col xl="12" md="12">
+    <b-col cols="12">
-      <b-card class="appBoxShadow gradido-border-radius">
+      <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>

frontend/src/components/MobileSidebar/MobileSidebar.vue

@@ -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>

frontend/src/components/Transactions/TransactionCreation.vue

@@ -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>

frontend/src/components/Transactions/TransactionReceive.vue

@@ -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>

frontend/src/components/Transactions/TransactionSend.vue

@@ -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">
+    <b-collapse class="pb-4 pt-2" v-model="visible">
-      <div class="word-break mb-4 text-center">
+      <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>