From 4e22290e885fb69e4e7362fe1bba3838d1cca251 Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Fri, 18 Oct 2024 18:18:55 +0200
Subject: [PATCH] icons right

---
 src/views/ListasView.vue | 196 ++++++++++++++-------------------------
 1 file changed, 68 insertions(+), 128 deletions(-)

diff --git a/src/views/ListasView.vue b/src/views/ListasView.vue
index 69e080c..024c286 100644
--- a/src/views/ListasView.vue
+++ b/src/views/ListasView.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="bg-emerald-700 flex flex-col gap-4 h-screen items-center justify-center"
-  >
+  <div class="bg-emerald-700 flex flex-col gap-4 h-screen items-center justify-center">
     <div id="fijo" class="absolute top-0 my-6 flex flex-col gap-4">
       <h1 class="text-2xl font-bold mb-2 text-gray-900 mx-10">
         Las listas de {{ storeUser.user.name }}
@@ -10,112 +8,76 @@
       <div class="relative mx-auto">
         <label for="newListaName" class="sr-only"> Nueva lista </label>
 
-        <input
-          type="text"
-          id="newListaName"
-          placeholder="Nueva Lista"
-          class="w-full rounded-md border-gray-200 py-2.5 pe-10 shadow-sm sm:text-sm"
-          v-model="newListaName"
-        />
+        <input type="text" id="newListaName" placeholder="Nueva Lista"
+          class="w-full rounded-md border-gray-200 py-2.5 pe-10 shadow-sm sm:text-sm" v-model="newListaName" />
 
         <span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
-          <button
-            type="button"
-            class="text-gray-600 hover:text-gray-700"
-            @click="createList"
-          >
+          <button type="button" class="text-gray-600 hover:text-gray-700" @click="createList">
             <span class="sr-only">Search</span>
 
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="size-6"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M12 4.5v15m7.5-7.5h-15"
-              />
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+              stroke="currentColor" class="size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
             </svg>
           </button>
         </span>
       </div>
     </div>
     <!-- Card 1 -->
-    <div
-      class="bg-emerald-700 overflow-auto w-full absolute my-6 flex flex-col top-40"
-    >
+    <div class="bg-emerald-700 overflow-auto w-full absolute my-6 flex flex-col top-40">
       <template v-for="lista in listas">
-        <router-link
-          :to="`/lista/${lista.id}`"
-          class="my-2 mx-auto rounded-md w-3/4 max-w-lg grid grid-cols-12 bg-emerald-100 shadow p-3 items-center hover:shadow-lg transition delay-150 duration-300 ease-in-out hover:scale-105 transform"
-        >
+        <div
+          class="my-2 mx-auto rounded-md max-w-lg min-w-5 grid grid-cols-6 bg-emerald-100 shadow p-3 items-center hover:shadow-lg transition delay-150 duration-300 ease-in-out hover:scale-105 transform">
           <!-- Title -->
-          <div class="col-span-11 xl:-ml-1">
-            <p class="text-indigo-500 hover:text-indigo-700 font-semibold">
-              { { lista.nombre } }
-            </p>
-          </div>
-
-          <!-- Description -->
-          <div class="md:col-start-1 col-span-5 xl:-ml-0">
-            <div class="text-sm text-gray-800 font-light">
-              {{ lista.descripcion }}
+          <router-link :to="`/lista/${lista.id}`">
+            <div class="col-span-11 xl:-ml-1">
+              <p class="text-indigo-500 hover:text-indigo-700 font-semibold">
+                {{ lista.nombre }}
+              </p>
             </div>
-            <div class="col">
-              <div class="grid grid-cols-12 gap-10">
-                <div>Editar</div>
-                <div>Eliminar</div>
+            <!-- Description -->
+            <div class="md:col-start-9 col-span-5 xl:-ml-0">
+              <div class="text-sm text-gray-800 font-light">
+                {{ lista.descripcion }}
               </div>
             </div>
-          </div>
+          </router-link><!-- Icons -->
+
+          <div class="grid grid-cols-12 gap-6">
+            <div class="col-start-10 grid">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="size-6" @click="editarLista">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+              </svg>
+            </div>
+            <div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="size-6" @click="borrarLista">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+              </svg>
+            </div>
+          </div>
+        </div>
 
-          <div class="text-sm text-gray-800 font-light"></div>
-        </router-link>
       </template>
     </div>
     <!-- Modal de nueva lista no puede estar vacía -->
     <TransitionRoot appear :show="isOpenModalEmptyList" as="template">
-      <Dialog
-        as="div"
-        @close="isOpenModalEmptyList = false"
-        class="relative z-10"
-      >
-        <TransitionChild
-          as="template"
-          enter="duration-300 ease-out"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="duration-200 ease-in"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
+      <Dialog as="div" @close="isOpenModalEmptyList = false" class="relative z-10">
+        <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
+          leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
           <div class="fixed inset-0 bg-black/25" />
         </TransitionChild>
 
         <div class="fixed inset-0 overflow-y-auto">
-          <div
-            class="flex min-h-full items-center justify-center p-4 text-center"
-          >
-            <TransitionChild
-              as="template"
-              enter="duration-300 ease-out"
-              enter-from="opacity-0 scale-95"
-              enter-to="opacity-100 scale-100"
-              leave="duration-200 ease-in"
-              leave-from="opacity-100 scale-100"
-              leave-to="opacity-0 scale-95"
-            >
+          <div class="flex min-h-full items-center justify-center p-4 text-center">
+            <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
+              enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
+              leave-to="opacity-0 scale-95">
               <DialogPanel
-                class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all"
-              >
-                <DialogTitle
-                  as="h3"
-                  class="text-lg font-medium leading-6 text-red-600"
-                >
+                class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all">
+                <DialogTitle as="h3" class="text-lg font-medium leading-6 text-red-600">
                   Error
                 </DialogTitle>
                 <div class="mt-2">
@@ -125,11 +87,9 @@
                 </div>
 
                 <div class="mt-4">
-                  <button
-                    type="button"
+                  <button type="button"
                     class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                    @click="isOpenModalEmptyList = false"
-                  >
+                    @click="isOpenModalEmptyList = false">
                     Aceptar
                   </button>
                 </div>
@@ -142,63 +102,36 @@
     <!-- Modal de pedir descripción -->
     <TransitionRoot appear :show="isOpenModalDescription" as="template">
       <Dialog as="div" @close="cancelarLista" class="relative z-10">
-        <TransitionChild
-          as="template"
-          enter="duration-300 ease-out"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="duration-200 ease-in"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
+        <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0" enter-to="opacity-100"
+          leave="duration-200 ease-in" leave-from="opacity-100" leave-to="opacity-0">
           <div class="fixed inset-0 bg-black/25" />
         </TransitionChild>
 
         <div class="fixed inset-0 overflow-y-auto">
-          <div
-            class="flex min-h-full items-center justify-center p-4 text-center"
-          >
-            <TransitionChild
-              as="template"
-              enter="duration-300 ease-out"
-              enter-from="opacity-0 scale-95"
-              enter-to="opacity-100 scale-100"
-              leave="duration-200 ease-in"
-              leave-from="opacity-100 scale-100"
-              leave-to="opacity-0 scale-95"
-            >
+          <div class="flex min-h-full items-center justify-center p-4 text-center">
+            <TransitionChild as="template" enter="duration-300 ease-out" enter-from="opacity-0 scale-95"
+              enter-to="opacity-100 scale-100" leave="duration-200 ease-in" leave-from="opacity-100 scale-100"
+              leave-to="opacity-0 scale-95">
               <DialogPanel
-                class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all"
-              >
-                <DialogTitle
-                  as="h3"
-                  class="text-lg font-medium leading-6 text-gray-900"
-                >
+                class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all">
+                <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
                   Descripción de la lista
                 </DialogTitle>
                 <div class="mt-2">
                   <input
                     class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
-                    id="descripción"
-                    type="text"
-                    placeholder="Breve descripción"
-                    v-model="descripcion"
-                  />
+                    id="descripción" type="text" placeholder="Breve descripción" v-model="descripcion" />
                 </div>
 
                 <div class="mt-4 justify-between flex">
-                  <button
-                    type="button"
+                  <button type="button"
                     class="inline-flex justify-center rounded-md border border-transparent bg-red-100 px-4 py-2 text-sm font-medium text-red-900 hover:bg-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
-                    @click="cancelarLista"
-                  >
+                    @click="cancelarLista">
                     Cancelar
                   </button>
-                  <button
-                    type="button"
+                  <button type="button"
                     class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                    @click="guardarLista"
-                  >
+                    @click="guardarLista">
                     Aceptar
                   </button>
                 </div>
@@ -276,4 +209,11 @@ const cancelarLista = () => {
   descripcion.value = "";
   newListaName.value = "";
 };
+
+const editarLista = () => {
+  console.log('editar caca')
+}
+const borrarLista = () => {
+  console.log('borrar caca')
+}
 </script>