Update Profile.vue

src/views/Profile.vue

@@ -53,28 +53,23 @@ async function createForm() {
       <h1 class="profile-title">Управление формами</h1>
       <button @click="createForm">Создать</button>
       <div class="profile-cards">
-        <div v-for="(form, index) in userForms" v-if="userForms.length > 0">
+        <div class="profile-card" v-for="(form, index) in userForms" v-if="userForms.length > 0">
-          <div class="profile-card">
+          <div class="profile-card-title">
-            <div class="profile-card-title">{{ form.data.name }}</div>
+            <code class="profile-card-num">001</code>
+            {{ form.data.name }}
+          </div>
           <div class="profile-card-buttons">
             <button
               class="profile-card-btn profile-card-btn--view"
               @click="$router.push('/form/view/' + form.id)"
             >
-                <div class="profile-card-btn-inner"><PhEye :size="24" /></div>
+              <div class="profile-card-btn-inner"><PhEye :size="26" /></div>
-              </button>
-              <button
-                class="profile-card-btn profile-card-btn--update"
-                @click="$router.push('/form/edit/' + form.id)"
-              >
-                <div class="profile-card-btn-inner"><PhPencil :size="24" /></div>
             </button>
             <button class="profile-card-btn profile-card-btn--delete" @click="deleteForm(index)">
-                <div class="profile-card-btn-inner"><PhTrash :size="24" /></div>
+              <div class="profile-card-btn-inner"><PhTrash :size="26" /></div>
             </button>
           </div>
         </div>
-        </div>
         <div v-else>
           <h1>Формы не найдены.</h1>
         </div>
@@ -89,64 +84,144 @@ async function createForm() {
 
   &-cards {
     margin-top: 30px;
-    display: grid;
+    display: flex;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+    flex-direction: column;
-    gap: 25px;
   }
 
   &-card {
-    border: 1px solid var(--color-main-border);
+    width: 100%;
-    background: var(--color-secondary-background);
+    display: flex;
-    transition: 0.25s ease;
+    justify-content: space-between;
-    padding: 15px;
+    align-items: center;
-    border-radius: 0.5rem;
+    padding: 10px 10px;
+    border: 1px solid transparent;
+    border-bottom: 2px solid var(--color-secondary-border);
+    border-top: 2px solid transparent;
+    transition: 0.4s ease;
+    cursor: pointer;
 
-    &-title {
+    &:hover {
-      font-weight: 400;
+      ////border: 1px solid var(--color-main-border);
+      background: var(--color-main-border);
+      ////border-radius: 0.5rem;
+      //transform: scale(1.03);
+      //border-bottom: 2px solid var(--color-third-border) !important;
+      //border-top: 2px solid var(--color-third-border);
+    }
+
+    &:hover &-num {
+      color: var(--color-text);
+    }
+
+    &:last-child {
+      border-bottom: 2px solid transparent;
     }
 
     &-buttons {
-      margin-top: 25px;
+      display: flex;
-      display: grid;
+      align-items: center;
-      grid-template-columns: 1fr 1fr 1fr;
+      gap: 0 10px;
-      gap: 15px;
     }
 
     &-btn {
+      height: 30px;
+      width: 30px;
       display: flex;
       justify-content: center;
       align-items: center;
-      height: 45px;
-      border-radius: 0.5rem;
       transition:  0.25s ease;
 
-      &--view {
-        background: #d6e1ff;
-        border: 1px solid #a7beff;
 
       &:hover {
-          background: #ccd9ff;
+        opacity: 0.7;
-        }
-      }
-
-      &--update {
-        background: #fff7cc;
-        border: 1px solid #f6e17a;
-
-        &:hover {
-          background: #fff4b2;
-        }
       }
 
       &--delete {
-        background: #ffd8d8;
+        color: var(--color-red);
-        border: 1px solid #ffb1b1;
+      }
 
-        &:hover {
-          background: #ffcece;
     }
+
+    &-title {
+      display: flex;
+      font-weight: 400;
+      align-items: center;
+      gap: 0 15px;
     }
+
+    &-num {
+      font-size: 0.88em;
+      font-weight: 400;
+      padding-right: 15px;
+      transition: 0.4s ease;
+      border-right: 1px solid var(--color-subtext);
+      color: var(--color-subtext);
     }
   }
 }
+//.profile {
+//  margin: 40px 0;
+//
+//  &-cards {
+//    margin-top: 30px;
+//    display: grid;
+//    grid-template-columns: 1fr 1fr 1fr 1fr;
+//    gap: 25px;
+//  }
+//
+//  &-card {
+//    border: 1px solid var(--color-main-border);
+//    background: var(--color-secondary-background);
+//    transition: 0.25s ease;
+//    padding: 15px;
+//    border-radius: 0.5rem;
+//
+//    &-title {
+//      font-weight: 400;
+//    }
+//
+//    &-buttons {
+//      margin-top: 25px;
+//      display: grid;
+//      grid-template-columns: 1fr 1fr 1fr;
+//      gap: 15px;
+//    }
+//
+//    &-btn {
+//      display: flex;
+//      justify-content: center;
+//      align-items: center;
+//      height: 45px;
+//      border-radius: 0.5rem;
+//      transition: 0.25s ease;
+//
+//      &--view {
+//        background: #d6e1ff;
+//        border: 1px solid #a7beff;
+//
+//        &:hover {
+//          background: #ccd9ff;
+//        }
+//      }
+//
+//      &--update {
+//        background: #fff7cc;
+//        border: 1px solid #f6e17a;
+//
+//        &:hover {
+//          background: #fff4b2;
+//        }
+//      }
+//
+//      &--delete {
+//        background: #ffd8d8;
+//        border: 1px solid #ffb1b1;
+//
+//        &:hover {
+//          background: #ffcece;
+//        }
+//      }
+//    }
+//  }
+//}
 </style>