edit profile andcoop

2025-09-12 21:12:28 +02:00
parent 365fcf7303
commit 8a111a6c69
8 changed files with 94 additions and 103 deletions
--- a/components/CompanyForm.vue
+++ b/components/CompanyForm.vue
@@ -7,11 +7,11 @@
      :ok-variant="modalColor"> {{ modalText }}
  </BModal>
  <form class="form" @submit.prevent="submitCompany">
-    <FormHeader title="general" />
-    <p class="help-text">
-      Estos son los datos básicos de la cooperativa. Procura completar el mayor
-      número de campos posible.
-    </p>
+    <FormHeader 
+      class="f-header"
+      title="General" 
+      subtitle="Estos son los datos básicos de la cooperativa. Procura completar el mayor
+      número de campos posible." />
    <fieldset class="fieldset fieldset-general">
      <div class="cont">
        <FormInput 
@@ -81,13 +81,13 @@
        />
      </div>
      <div class="cont-col">
-        <label for="imagen">Logo</label>
+        <label for="imagen" class="label">Logo</label>
        <ClientOnly>
          <FormInputImage :image-url="form.logo" @change="handleImage($event)" />
        </ClientOnly>
      </div>
      <div class="cont-col">
-        <label for="tags-basic">Palabras clave</label>
+        <label for="tags-basic" class="label">Palabras clave</label>
        <BFormTags
          v-model="form.tags"
          placeholder="Añade palabras clave"
@@ -95,19 +95,20 @@
        />
      </div>
      <div class="cont-col">
-        <label for="">Descripción</label>
+        <label for="" class="label">Descripción</label>
        <textarea v-model="form.description" class="textarea" type="text" />
      </div>
    </fieldset>

-    <FormHeader title="tienda online" />
-    <p class="help-text">
-      Indica si la cooperativa dispone de tienda online. En caso afirmativo,
+    <FormHeader 
+      class="f-header"
+      title="Tienda Online"
+      subtitle="Indica si la cooperativa dispone de tienda online. En caso afirmativo,
      indica su url y la plataforma utilizada en el seleccionable. Si utilizas
      WooCommerce, puedes indicar su API para sincronizar automáticamente todos
      los productos.
-      <a href="#">Sigue estos pasos para obtener la API.</a>
-    </p>
+      <a href='#'>Sigue estos pasos para obtener la API.</a>"
+      />
    <fieldset class="fieldset">
      <div class="cont">
        <div>
@@ -130,7 +131,7 @@
        >
      </div>
      <div class="cont-col">
-        <label for="select-shop">Plataforma</label>
+        <label for="select-shop" class="label">Plataforma</label>
        <BFormSelect id="select-shop" v-model="form.platform"  name="" >
          <option selected disabled value="">Plataforma</option>
          <option
@@ -163,11 +164,11 @@
      </div>
    </fieldset>

-    <FormHeader title="localización" />
-    <p class="help-text">
-      La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
-      que estén cerca de tu posición.
-    </p>
+    <FormHeader 
+      class="f-header"
+      title="Localización"
+      subtitle="La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
+      que estén cerca de tu posición." />
    <fieldset class="fieldset">
    <!-- TODO: Arreglar este componente: -->
      <!-- <GoogleAddress :value="form.address" @added-data="getPlace" /> -->
@@ -183,20 +184,20 @@
      </div>
    </fieldset>

-    <FormHeader title="términos y condiciones" />
-    <p class="help-text help-text-terms">
-      En estos textos podrás indicar las condiciones de venta o condiciones de
+    <FormHeader 
+      class="f-header"
+      title="Términos y Condiciones" 
+      subtitle="En estos textos podrás indicar las condiciones de venta o condiciones de
      envío de la cooperativa. Si no tienes claro qué texto añadir, puedes hacer
-      <a @click="loadText">click aquí para cargar un texto predefinido</a>
+      <a @click='loadText'>click aquí para cargar un texto predefinido</a>
      que podrás editar. Ten en cuenta que al clicar se borrará el contenido de
-      ambos campos.
-    </p>
+      ambos campos.."/>

    <fieldset class="fieldset">
      <div class="cont-col">
-        <label for="">Condiciones de venta</label>
+        <label for="" class="label">Condiciones de venta</label>
        <textarea v-model="form.sale_terms" class="textarea" type="text" />
-        <label for="">Condiciones de envío</label>
+        <label for="" class="label">Condiciones de envío</label>
        <textarea v-model="form.shipping_terms" class="textarea" type="text" />
        <FormInput
          v-model="form.shipping_cost"
@@ -359,6 +360,9 @@ export default {

 <style lang="scss" scoped>
 .form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
  @include desktop {
    width: 40%;
  }
@@ -368,16 +372,18 @@ export default {
  @include mobile {
    width: 90%;
  }
-
+  .f-header {
+    margin-bottom: 1rem;
+  }
  .imagenInput {
    font-size: $s;
  }

  label, .label {
-    text-align: left;
-    color: $color-navy;
-    font-weight: $bold;
-    font-size: $xs;
+    color: $color-primary;
+    font-weight: $medium;
+    font-size: $s;
+    display: block;
  }

  .textarea {
@@ -391,6 +397,7 @@ export default {
  }
 }
 .fieldset {
+  width: 100%;
  margin-bottom: 70px;
  align-items: left;
 }
--- a/components/FormHeader.vue
+++ b/components/FormHeader.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="header">
    <h2 class="title">{{ title }}</h2>
-    <p v-html="subtitle" class="subtitle"></p>
+    <p v-if="subtitle" v-html="subtitle" class="subtitle"></p>
    <div class="title-lines"></div>
  </div>
 </template>
--- a/components/FormInput.vue
+++ b/components/FormInput.vue
@@ -62,7 +62,7 @@ export default {
  // width: 100%; //Utilizar este width para controlar el ancho desde el elemento padre
  width: 45%;
  @include mobile {
-    width: 80%;
+    width: 100%;
  }
  // @include desktop {
  //   width: 25%;
@@ -75,7 +75,7 @@ input {
  border-radius: 4px;
  padding: 10px 5px;
  display: block;
-  margin-bottom: 10px;
+  margin: 8px 0 16px 0;
  font-weight: $regular;
  outline: none;
 }
@@ -83,8 +83,8 @@ input {
 label {
  text-align: left;
  color: $color-primary;
-  font-weight: $bold;
-  font-size: $xs;
+  font-weight: $medium;
+  font-size: $s;
  display: block;
 }
 </style>
--- a/components/NavBarEditar.vue
+++ b/components/NavBarEditar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="navsearch_container container-fluid">
+  <div class="navsearch_container">
    <NuxtLink to="/editar/perfil">Mi perfil</NuxtLink>
    <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/cooperativa"
      >Productora</NuxtLink
@@ -63,24 +63,23 @@ export default {

 <style lang="scss" scoped>
 .navsearch_container {
-  border-bottom: 3px solid $color-grey-nav;
+  border-bottom: 1px solid $color-consumo-base;
  text-align: center;
  padding: 20px 20px;
+  display: flex;
+  justify-content: center;
+  gap: 2rem;

  a {
    font-size: $m;
-    font-weight: $bold;
-    color: $color-navy;
+    color: $color-primary;
    text-decoration: none;
+    text-transform: uppercase;
  }
-  a:nth-child(1):after,
-  a:nth-child(2):after,
-  a:nth-child(3):after,
-  a:nth-child(4):after {
-    color: $color-navy;
-    content: '\22EE';
-    margin: 0.5rem;
+  a:focus {
+    font-weight: $bold;
  }
+  
  @include mobile {
    display: none;
  }
--- a/layouts/editar.vue
+++ b/layouts/editar.vue
@@ -1,10 +1,12 @@
 <template>
  <div>
    <NavBar />
-    <NavBarEditar v-if="isManager" />
-    <NavBarEditarUser v-else/>
-    <NuxtPage />
-    <CookieUsageNotification />
+    <div class="container-fluid">
+      <NavBarEditar v-if="isManager" />
+      <NavBarEditarUser v-else/>
+      <NuxtPage />
+      <CookieUsageNotification />
+    </div>
    <Footer />
  </div>
 </template>
@@ -25,3 +27,22 @@ export default {
  }
 }
 </script>
+
+<style lang="scss" scoped>
+.container-fluid {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient($color-consumo-base-light, $color-bg-light);
+  border-radius: 1rem;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  gap: 3rem;
+  color: $color-primary;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
+}
+</style>
--- a/pages/editar/cooperativa/index.vue
+++ b/pages/editar/cooperativa/index.vue
@@ -24,30 +24,24 @@ export default {
 </script>

 <style lang="scss" scoped>
-.container {
-  margin-top: 40px;
-  margin-bottom: 80px;
-}
 .edit-coop {
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 .title {
-  color: $color-navy;
-  font-size: $xxl;
-  margin-bottom: 50px;
-  text-align: left;
+  color: $color-primary;
+  font-size: $h2;
+  margin-bottom: 40px;
+  text-align: center;
+  width: 100%;
+  @include mobile {
+    width: 80%;
+    margin-top: 70px;
+  }
  @include desktop {
    width: 40%;
  }
-  @include tablet {
-    width: 60%;
-  }
-  @include mobile {
-    width: 90%;
-    margin-top: 70px;
-  }
 }

 .form-container {
--- a/pages/editar/perfil/contrasena.vue
+++ b/pages/editar/perfil/contrasena.vue
@@ -1,5 +1,5 @@
 <template>
-  <BContainer class="container-fluid">
+  <BContainer class="container">
    <BRow align-h="center" class="change-password">
      <BCol class="change-password">
        <form class="form"  autocomplete="off" @submit.prevent="submitUser">
@@ -92,22 +92,6 @@ export default {
 </script>

 <style lang="scss" scoped>
-.container-fluid {
-  margin: 5rem 0 5rem 0;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: linear-gradient($color-consumo-base-light, $color-bg-light);
-  border-radius: 1rem;
-  padding: 2rem;
-  gap: 3rem;
-  color: $color-primary;
-
-  @include mobile {
-    margin-top: 7rem;
-  }
-}

 .change-password {
  display: flex;
@@ -142,6 +126,9 @@ export default {
    font-weight: $bold;
    font-size: $xs;
  }
+  .submit-btn {
+    margin-top: 1rem;
+  }
 }
 .error {
  color: crimson;
--- a/pages/editar/perfil/index.vue
+++ b/pages/editar/perfil/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <BContainer class="container-fluid">
+  <BContainer class="container">
    <BRow align-h="start" class="edit-profile">
      <BCol class="edit-profile">
        <form class="form" @submit.prevent="submitUser">
@@ -108,23 +108,6 @@ export default {
 </script>

 <style lang="scss" scoped> 
-.container-fluid {
-  margin: 5rem 0 5rem 0;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: linear-gradient($color-consumo-base-light, $color-bg-light);
-  border-radius: 1rem;
-  padding: 2rem;
-  gap: 3rem;
-  color: $color-primary;
-
-  @include mobile {
-    margin-top: 7rem;
-  }
-}
-
 .edit-profile {
  display: flex;
  flex-direction: column;