fix linter

src/pages/workouts/Feed.vue

@@ -47,104 +47,63 @@
   initWorkouts();
   </script>
   
-  <style>
+  
-  .image-container {
+<style>
-    cursor: pointer;
+.image-container {
-    height: 300px;
+  cursor: pointer;
-    width: 100%;
+  height: 300px;
-    background-repeat: no-repeat;
+  width: 100%;
-    background-size: auto;
+  background-position: 50% 50%;
-    background-position: center center;
+  background-repeat: no-repeat;
-    overflow: hidden;
+  background-size: cover;
-    position: relative;
-  }
-
-
-  .image-container img {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-  }
-  @media (min-width: 1300px) {
-  .image-container::before,
-  .image-container::after {
-      content: "";
-      position: absolute;
-      width: 24%; 
-      height: 300px;
-      background-image: inherit;
-      background-size: inherit;
-      filter: blur(10px); 
-  }
-
-  .image-container::before {
-      left: 0;
-  }
-
-  .image-container::after {
-      right: 0;
-   }
-   
-  .image-container::before {
-      left: 0;
-      background-position: left center;
-  }
-
-  .image-container:after {
-      right: 0;
-      background-position: right center;
-  }
 }
-  .news-feed {
+
-      display: flex;
+.news-feed {
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-  }
-  
-  .news-item {
-      display: flex;
-      flex-direction: column;
-      padding: 1rem;
-      border-radius: 10px;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-      transition: transform 0.2s ease-in-out;
-      width: 100%;
-  }
-  
-  .news-item-header {
-    cursor: pointer;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-  
+    align-items: center;
-  }
+    justify-content: center;
-  .news-item-icon {
+}
-    cursor: pointer;
+
-  }
+.news-item {
-  
+    display: flex;
-  
+    flex-direction: column;
-  .news-item h3 {
+    padding: 1rem;
-      font-weight: bold;
+    border-radius: 10px;
-      color: #3d3d3d;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-  }
+    transition: transform 0.2s ease-in-out;
-  
+    width: 100%;
-  .metadata {
+}
-    border-top: #9c9a9a 1px solid;
+
-  }
+.news-item-header {
-  
+  cursor: pointer;
-  .metadata li {
+  display: flex;
-      list-style: none;
+  justify-content: space-between;
-      display: inline-block;
+
-      margin-left: 1rem;
+}
-  }
+.news-item-icon {
-  
+  cursor: pointer;
-  .metadata span {
+}
-      font-size: 0.9em;
+
-      opacity: 0.7;
+
-  }
+.news-item h3 {
-  
+    font-weight: bold;
-  </style>
+    color: #3d3d3d;
-  
+}
+
+.metadata {
+  border-top: #9c9a9a 1px solid;
+}
+
+.metadata li {
+    list-style: none;
+    display: inline-block;
+    margin-left: 1rem;
+}
+
+.metadata span {
+    font-size: 0.9em;
+    opacity: 0.7;
+}
+
+</style>

src/pages/workouts/components/WorkoutListItem.vue

@@ -3,8 +3,13 @@
     <article class="news-item">
       <div class="news-item-header" v-on:click="openWorkout(item.id)">
         <h3>{{ item.name }}</h3>
-        <!-- @vue-ignore -->
+        <VaIcon v-if="deleteItem" 
-        <VaIcon v-if="deleteItem" name="delete_forever" size="22px" color="#bbc1c3" class="news-item-icon" @click="(event: any) => deleteItem?(item.id, event)"/>
+          name="delete_forever" 
+          size="22px" 
+          color="#bbc1c3" 
+          class="news-item-icon" 
+          @click="(event: any) => deleteItem ? deleteItem(item.id, event) : ''"
+        />
       </div>
         <ul class="metadata">
             <li v-if="item.workouted_at"><span>Дата:</span> {{ formatTime(item.workouted_at) }}</li>
@@ -58,9 +63,10 @@
   @media (min-width: 1300px) {
   .image-container::before,
   .image-container::after {
+      top:0;
       content: "";
       position: absolute;
-      width: 24%; 
+      width: 25%; 
       height: 300px;
       background-image: inherit;
       background-size: inherit;