Преглед изворни кода

style: :lipstick: style (price suggest) ajustes visuais no price suggest

foram ajustadas as frases do price suggest + ajuste de layout para evitar quebra de linhas + ajuste fonte do summary infos

fase:prod | origin:escopo
Gustavo Zanatta пре 1 недеља
родитељ
комит
5e59a66ff4

+ 53 - 50
src/components/dashboard/DashboardPriceSuggest.vue

@@ -1,60 +1,56 @@
 <template>
 <template>
   <div class="q-mx-md q-mb-md">
   <div class="q-mx-md q-mb-md">
     <q-card
     <q-card
-      class="price-suggest-card bg-surface shadow-card card-border"
+      class="price-suggest-card bg-surface shadow-card"
       :flat="false"
       :flat="false"
     >
     >
-      <q-card-section class="q-pa-md">
-        <div class="row items-center justify-between q-mb-md">
-          <div class="column">
-            <span class="text-suggest-label font12">
-              {{ $t('provider.dashboard.price_suggest.region_label_1') }}
-            </span>
-
-            <span class="text-suggest-label font12 fontbold">
+      <q-card-section class="price-suggest-section">
+        <div class="row items-center justify-between no-wrap q-mb-sm">
+          <span class="text-suggest-label text-no-wrap">
+            {{ $t('provider.dashboard.price_suggest.region_label_1') }}
+            <span class="fontbold">
               {{ $t('provider.dashboard.price_suggest.region_label_2') }}
               {{ $t('provider.dashboard.price_suggest.region_label_2') }}
             </span>
             </span>
-          </div>
+          </span>
 
 
           <q-badge
           <q-badge
-            class="price-badge font12 fontbold q-px-md q-py-xs gradient-diarista-bg"
+            class="price-badge fontbold text-no-wrap gradient-diarista-bg"
             rounded
             rounded
           >
           >
             {{ formatCurrency(data?.average_price ?? 0) }}
             {{ formatCurrency(data?.average_price ?? 0) }}
           </q-badge>
           </q-badge>
         </div>
         </div>
 
 
-        <div class="row items-center justify-between">
-          <div class="column">
-            <span class="text-suggest-label font12 fontbold">
-              {{ $t('provider.dashboard.price_suggest.my_price_label') }}
+        <div class="row items-center justify-between no-wrap">
+          <span class="text-suggest-label text-no-wrap">
+            {{ $t('provider.dashboard.price_suggest.my_price_label_1') }}
+            <span class="fontbold">
+              {{ $t('provider.dashboard.price_suggest.my_price_label_2') }}
+            </span>
+          </span>
+
+          <div class="my-price-chip row items-center no-wrap q-ml-xs">
+            <span class="text-my-price fontmedium text-no-wrap">
+              {{
+                showMyPrice
+                  ? formatCurrency(data?.your_price ?? 0)
+                  : $t('common.price_masked')
+              }}
             </span>
             </span>
 
 
-            <q-chip
-              class="row items-center no-wrap bg-surface q-mt-xs"
-              color="text"
-              outline
-            >
-              <span class="text-my-price font10 fontsemibold q-mr-xs">
-                {{
-                  showMyPrice
-                    ? formatCurrency(data?.your_price ?? 0)
-                    : $t('common.price_masked')
-                }}
-              </span>
-
-              <q-btn
-                class="q-pa-none q-pl-sm"
-                color="grey-6"
-                flat
-                icon="mdi-eye-off-outline"
-                size="xs"
-                @click="showMyPrice = !showMyPrice"
-              />
-            </q-chip>
+            <q-btn
+              class="q-pa-none q-ml-xs"
+              color="grey-6"
+              dense
+              flat
+              :icon="showMyPrice ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
+              size="xs"
+              @click="showMyPrice = !showMyPrice"
+            />
           </div>
           </div>
 
 
           <q-btn
           <q-btn
+            class="q-ml-xs"
             color="primary"
             color="primary"
             flat
             flat
             no-caps
             no-caps
@@ -62,14 +58,15 @@
             size="xs"
             size="xs"
             @click="openServiceDataDialog"
             @click="openServiceDataDialog"
           >
           >
-            <div class="row items-center q-gutter-x-xs font10">
+            <div class="row items-center no-wrap alter-label">
               <span class="fontbold">
               <span class="fontbold">
                 {{ $t('common.alter') }}
                 {{ $t('common.alter') }}
               </span>
               </span>
 
 
               <q-icon
               <q-icon
+                class="q-ml-xs"
                 name="mdi-pencil-outline"
                 name="mdi-pencil-outline"
-                size="xs"
+                size="14px"
               />
               />
             </div>
             </div>
           </q-btn>
           </q-btn>
@@ -107,32 +104,38 @@ const openServiceDataDialog = () => {
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
 .price-suggest-card {
 .price-suggest-card {
-  border-radius: 12px;
-}
-.text-suggest-label {
-  color: #3a3a4a;
-}
-.price-badge {
   border-radius: 20px;
   border-radius: 20px;
 }
 }
-.text-my-price {
-  color: #3a3a4a;
-}
 
 
-.price-suggest-card {
-  border-radius: 12px;
+.price-suggest-section {
+  padding: 14px 16px;
 }
 }
 
 
 .text-suggest-label {
 .text-suggest-label {
   color: #3a3a4a;
   color: #3a3a4a;
+  font-size: clamp(10px, 3.2vw, 13px);
   line-height: 1.2;
   line-height: 1.2;
 }
 }
 
 
 .price-badge {
 .price-badge {
   border-radius: 20px;
   border-radius: 20px;
+  font-size: clamp(10px, 3.2vw, 13px);
+  padding: 4px 12px;
+}
+
+.my-price-chip {
+  border: 1px solid #b9b9c3;
+  border-radius: 20px;
+  padding: 2px 8px 2px 10px;
 }
 }
 
 
 .text-my-price {
 .text-my-price {
   color: #3a3a4a;
   color: #3a3a4a;
+  font-size: clamp(9px, 2.9vw, 12px);
+  letter-spacing: 0.5px;
+}
+
+.alter-label {
+  font-size: clamp(10px, 3.1vw, 13px);
 }
 }
 </style>
 </style>

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

@@ -52,7 +52,7 @@
         :class="expanded ? 'items-start' : 'items-center no-wrap'"
         :class="expanded ? 'items-start' : 'items-center no-wrap'"
       >
       >
         <div
         <div
-          class="text-text col font8 fontmedium"
+          class="text-text col font12 fontmedium"
           :class="{ ellipsis: !expanded }"
           :class="{ ellipsis: !expanded }"
         >
         >
           {{ formatAddress(data.address) }}
           {{ formatAddress(data.address) }}

+ 4 - 4
src/i18n/locales/en.json

@@ -277,10 +277,10 @@
         "my_schedules": "My schedules"
         "my_schedules": "My schedules"
       },
       },
       "price_suggest": {
       "price_suggest": {
-        "region_label": "Average daily rate in your area",
-        "region_label_1": "Suggested daily rate",
-        "region_label_2": "in the region",
-        "my_price_label": "My daily rate (8-hour rate)"
+        "region_label_1": "Average price of",
+        "region_label_2": "daily rates in the region:",
+        "my_price_label_1": "Value of",
+        "my_price_label_2": "my daily rate:"
       },
       },
       "today_services": {
       "today_services": {
         "finished_label": "Service with",
         "finished_label": "Service with",

+ 4 - 4
src/i18n/locales/es.json

@@ -277,10 +277,10 @@
         "my_schedules": "Mis citas"
         "my_schedules": "Mis citas"
       },
       },
       "price_suggest": {
       "price_suggest": {
-        "region_label": "Precio promedio de las tarifas diarias en tu zona",
-        "region_label_1": "Precio de jornada sugerido",
-        "region_label_2": "en la región",
-        "my_price_label": "Mi tarifa diaria (jornada de 8 horas)"
+        "region_label_1": "Precio promedio de",
+        "region_label_2": "jornadas en la región:",
+        "my_price_label_1": "Valor de",
+        "my_price_label_2": "mi jornada:"
       },
       },
       "today_services": {
       "today_services": {
         "finished_label": "Servicio con",
         "finished_label": "Servicio con",

+ 4 - 4
src/i18n/locales/pt.json

@@ -277,10 +277,10 @@
         "my_schedules": "Minhas diárias"
         "my_schedules": "Minhas diárias"
       },
       },
       "price_suggest": {
       "price_suggest": {
-        "region_label": "Preço médio de diárias na sua região",
-        "region_label_1": "Preço de diária sugerido",
-        "region_label_2": "na região",
-        "my_price_label": "Minha diária (valor de 8h)"
+        "region_label_1": "Preço médio de",
+        "region_label_2": "diárias na região:",
+        "my_price_label_1": "Valor da",
+        "my_price_label_2": "minha diária:"
       },
       },
       "today_services": {
       "today_services": {
         "finished_label": "Serviço com",
         "finished_label": "Serviço com",