From 29d68d8b9b574533fc1a8644db9a4ff24525e5b2 Mon Sep 17 00:00:00 2001
From: roberts <robert.stertz1@hs-augsburg.de>
Date: Fri, 5 May 2023 12:14:33 +0200
Subject: [PATCH] added styling for the exercise list

---
 src/components/ExerciseList.vue | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/ExerciseList.vue b/src/components/ExerciseList.vue
index 1e27e86..9d565d4 100644
--- a/src/components/ExerciseList.vue
+++ b/src/components/ExerciseList.vue
@@ -1,23 +1,24 @@
 <template>
     <input type="text" v-model="input" placeholder="Search..." />
-      <div v-for="exercise in filterExercises()" :key="exercise.name">
-        <button>{{ exercise.name }}</button>
-      </div>
+    <div class="exerciseList">
+      <li class="exerciseItem" v-for="exercise in filterExercises()" :key="exercise.name">
+        <button class="button">{{ exercise.name }}</button>
+      </li>
+    </div>
 </template>
 
 <script setup>
 
   import { usePostStore } from '@/stores/store.js'
   import { onMounted, ref } from 'vue';
+  
+  const muscle = defineProps({
+      muscle: String
+  })
 
   const json = usePostStore()
   const exercises = ref([])
 
-const muscle = defineProps({
-    muscle: String
-})
-
-console.log(muscle.muscle)
 
 onMounted(async () => {
       await json.fetchMuscleExercise()
@@ -50,4 +51,15 @@ onMounted(async () => {
     });
   };
 
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.exerciseList{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1px;
+    margin-top: 0.5rem;
+}
+
+</style>
\ No newline at end of file