Browse Source

ajustes layout - pré submissao

Gustavo Zanatta 1 month ago
parent
commit
d3f7689c89

+ 12 - 0
src/components/dashboard/DashboardLastDoneSchedules.vue

@@ -21,6 +21,7 @@
             padding="1px 5px" size="sm"
             class="q-mt-xs full-width"
             :label="$t('dashboard_client.last_schedules.reschedule')"
+            @click="goToScheduling(item)"
           />
         </q-card-section>
       </q-card>
@@ -29,14 +30,25 @@
 </template>
 
 <script setup>
+import { useQuasar } from 'quasar';
+import SchedulingDialog from 'src/pages/search/components/SchedulingDialog.vue';
+
 defineProps({ data: { type: Array, default: () => [] } });
 
+const $q = useQuasar();
 const avatarColors = [
   { background: '#ffd5df', color: '#932e57' },
   { background: '#d7e8ff', color: '#2158a8' },
   { background: '#dfd',    color: '#2a7a3b' },
   { background: '#ffe5cc', color: '#8a4500' },
 ];
+
+const goToScheduling = (provider) => {
+  $q.dialog({
+    component: SchedulingDialog,
+    componentProps: { provider },
+  });
+};
 </script>
 
 <style scoped lang="scss">

+ 1 - 1
src/components/dashboard/DashboardSummaryInfos.vue

@@ -25,7 +25,7 @@
         <div class="summary-address font8 fontmedium text-text ellipsis col">
           {{ formatAddress(data.address) }}
         </div>
-        <q-icon name="mdi-chevron-down" color="secondary" size="18px" class="col-auto" />
+        <!-- <q-icon name="mdi-chevron-down" color="secondary" size="18px" class="col-auto" /> -->
       </div>
     </q-card-section>
   </q-card>

+ 6 - 6
src/components/login/LoginStepOnePanel.vue

@@ -1,7 +1,7 @@
 <template>
   <q-card-section class="full-width">
     <div class="text-text">
-      <span class="font14 fontbold">{{ $t('common.terms.email') }}</span>
+      <span class="font12 fontbold">{{ $t('common.terms.email') }}</span>
     </div>
     <q-input
       v-model="email"
@@ -9,7 +9,7 @@
       outlined
       rounded
       class="bg-surface q-mt-sm"
-      input-class="text-text"
+      input-class="text-text font12 fontregular"
       :placeholder="$t('common.terms.email')"
       hide-bottom-space
       :rules="!phone ? [inputRules.requiredHideMessage, inputRules.email] : []"
@@ -21,22 +21,22 @@
       <div class="col-5 q-my-auto">
         <q-separator class="q-my-sm bg-grey-4" />
       </div>
-      <span class="col text-center text-text">{{ $t('common.ui.misc.or') }}</span>
+      <span class="col text-center text-text font12">{{ $t('common.ui.misc.or') }}</span>
       <div class="col-5 q-my-auto">
         <q-separator class="q-my-sm bg-grey-4" />
       </div>
     </div>
 
     <div class="text-text">
-      <span class="font14 fontbold">{{ $t('common.terms.phone') }}</span>
-      <span class="">{{ ' (' + $t('common.terms.celular') + ')' }}</span>
+      <span class="font12 fontbold">{{ $t('common.terms.phone') }}</span>
+      <span class="font12 fontregular">{{ ' (' + $t('common.terms.celular') + ')' }}</span>
     </div>
     <q-input
       v-model="phone"
       no-error-icon
       class="bg-surface q-mt-sm"
       :placeholder="$t('common.terms.phone')"
-      input-class="text-text"
+      input-class="text-text font12 fontregular"
       hide-bottom-space
       :rules="!email ? [inputRules.requiredHideMessage, inputRules.email] : []"
       lazy-rules

+ 38 - 45
src/pages/dashboard/components/DashboardClientProposals.vue

@@ -5,31 +5,38 @@
     <div class="scroll-track q-pb-md q-px-md text-text">
 
       <q-card v-for="item in data" :key="item.id" class="proposal-card shadow-card" :flat="false">
-        <div class="row no-wrap items-center">
-
-          <q-avatar :style="avatarColors[item.id % avatarColors.length]" class="q-mx-auto">
-            <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover;border-radius:50%;" />
-            <span v-else>{{ item.provider_name?.slice(0, 1) ?? '—' }}</span>
-          </q-avatar>
-
-          <div class="type customColor font10 fontbold">
-            {{ $t('dashboard_client.client_proposals.candidate') }} <span>{{
-              $t('dashboard_client.client_proposals.custom') }}</span>
+        <div class="row no-wrap">
+          <div class="column">
+            <q-avatar :style="avatarColors[item.id % avatarColors.length]" class="q-mx-auto">
+              <img v-if="item.provider_photo" :src="item.provider_photo" style="object-fit:cover;border-radius:50%;" />
+              <span v-else>{{ item.provider_name?.slice(0, 1) ?? '—' }}</span>
+            </q-avatar>
+            <q-space/>
+            <div class="customColor font8 fontbold">
+              <div>
+                {{ $t('dashboard_client.client_proposals.candidate') }} 
+              </div>
+              <div class="no-wrap">
+                {{ $t('dashboard_client.client_proposals.custom') }}
+              </div>
+            </div>
           </div>
 
           <div class="content">
 
-            <div class="row justify-between items-center text-text ">
+            <div class="row justify-between items-center text-text">
               <div>
-                <div class="font12 fontbold">
+                <div class="font12 fontmedium">
                   {{ item.provider_name }}
-                  <span class="">{{ $t('dashboard_client.client_proposals.age', { idade: item.idade }) }}</span>
+                  <span class="font9 fontregular">{{ $t('dashboard_client.client_proposals.age', { idade: item.idade }) }}</span>
                 </div>
-
-                <span class="font9 fontbold">
+                <span class="font10 fontmedium">
                   <q-icon name="star" size="12px" color="warning" class="font9 fontregular"/>
-                  {{ item.average_rating }}
+                  <span>
+                    {{ item.average_rating }}
+                  </span>
                 </span>
+
               </div>
             </div>
 
@@ -57,22 +64,27 @@
 
             <!-- PREÇO -->
             <div class="price text-text">
-              <span class="font16 fontbold">
+              <span class="font9 fontmedium distance">
+                <span class="fontbold font10">
+                  {{ $t('dashboard_client.client_proposals.distance') }}
+                </span>
+                <span class="font10 fontregular q-ml-sm">
+                  {{ (item.distance_km ?? '--') + ' km' }}
+                </span>
+              </span>
+              <span class="font14 fontbold">
                 {{ filterCurrency(chooseprice(item.period_type, item.daily_price_8h)) }}            
               </span>
 
-              <span class="col-6 font12 fontmedium">
+              <span class="col-6 font10 fontmedium">
                 {{ formatLabelByPeriodType(item.period_type) }}
               </span>
 
-              <span class="font9 fontmedium distance">
-                {{ $t('dashboard_client.client_proposals.distance') }} {{ (item.distance_km ?? '--') + ' km' }}
-              </span>
             </div>
 
             <div class="actions">
-              <q-btn label="recusar" size="sm" padding="1px 5px" flat class="btn-reject" @click="() => handleRefuseProposal(item.id)" />
-              <q-btn label="aceitar" size="sm" padding="1px 5px" class="btn-accept" @click="() => handleAcceptProposal(item.id)" />
+              <q-btn label="recusar" size="sm" padding="4px 12px" flat class="btn-reject" @click="() => handleRefuseProposal(item.id)" />
+              <q-btn label="aceitar" size="sm" padding="4px 12px" class="btn-accept" @click="() => handleAcceptProposal(item.id)" />
             </div>
 
           </div>
@@ -192,7 +204,6 @@ const handleAcceptProposal = async (proposalId) => {
   position: relative;
   min-width: 330px;
   max-width: 330px;
-  min-height: 115px;
   border-radius: 18px;
   padding: 12px;
   background: white;
@@ -200,14 +211,9 @@ const handleAcceptProposal = async (proposalId) => {
 }
 
 /* alinhar topo */
-.proposal-card .row:first-child {
-  align-items: flex-start !important;
-}
-
-.row.justify-between {
-  align-items: flex-start !important;
-  padding-right: 70px; // espaço pro preço
-}
+// .proposal-card .row:first-child {
+//   align-items: flex-start !important;
+// }
 
 .content {
   width: 100%;
@@ -236,19 +242,6 @@ const handleAcceptProposal = async (proposalId) => {
   align-items: flex-end;
 }
 
-
-
-.type {
-  position: absolute;
-  left: 12px;
-  top: 72px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  line-height: 1.1;
-}
-
-
 /* avatar alinhado */
 .q-avatar {
   margin-left: 0 !important;