General responsive changes

SethSharp · SethSharp · commit 32427fa29d56 · 2022-09-14T15:34:23.000+10:00
diff --git a/resources/js/Components/LessonCard.vue b/resources/js/Components/LessonCard.vue
@@ -8,17 +8,17 @@ defineProps(["title", "description", "image"]);
             <h1 v-if="title">{{ title }}</h1>
             <h1 v-else="title">No lesson title given</h1>
         </div>
-        <div class="flex wrap w-full pb-8">
-            <div class="pl-6 pt-4 w-1/2">
-                <img
-                    class="border-black border-2 "
+        <div class="flex flex-wrap w-full p-3">
+            <div class="w-full md:w-1/2 grid place-items-center mb-4 md:mb-0 p-4 sm:p-0">
+                <img class="border-black border-2"
                     :src="image"
                     :alt="image"
                 />
             </div>
-            <div class="pt-8 w-1/2">
-                <p class="">
-                    {{description}}
+            <div class="w-full md:w-1/2">
+                <p class="px-6 text-center md:text-left">
+                    <!-- {{description}} -->
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris luctus ipsum quis sollicitudin tincidunt. Fusce feugiat nibh sit amet urna ultricies rutrum. Donec pellentesque libero vel turpis laoreet congue. Sed lobortis velit sit amet odio fringilla dapibus. Aliquam odio nisi, vehicula id hendrerit at, scelerisque non velit. Donec bibendum fermentum.
                 </p>
             </div>
         </div>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -21,7 +21,7 @@ const showingNavigationDropdown = ref(false);
                             <!-- Navigation Links -->
                             <div class="space-x-4 my-auto">
                                 <NavLink :href="route('dashboard')" :active="route().current('dashboard')">
-                                    Lessons
+                                    Dashboard
                                 </NavLink>
                                 <NavLink :href="route('achievements')" :active="route().current('achievements')">
                                     Achievements
@@ -74,7 +74,7 @@ const showingNavigationDropdown = ref(false);
                 <div class="hidden">
                     <div class="pt-2 pb-3 space-y-1">
                         <ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
-                            Lessons
+                            Dashboard
                         </ResponsiveNavLink>
                         <ResponsiveNavLink :href="route('dashboard')" :active="route().current('achievements')">
                             Achievements
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
@@ -33,12 +33,13 @@
 
 <template>
     <Head title="Dashboard" />
-
     <AuthenticatedLayout>
+        <div class="w-full flex flex-wrap justify-center ">
+            <h1 class="text-4xl w-3/4">
+                Lesson Select
+            </h1>
+        </div>
 
-        <!-- <div class=" w-full h-screen z-10 absolute">
-            <div class="bg-black w-3/4 h-4 z-20 mt-20"></div>
-        </div> -->
 
         <div class="w-full flex flex-wrap justify-center absolute pt-4 pb-4 z-20">
             <div class="w-3/4 justify-center">
@@ -47,7 +48,7 @@
                     :description="desc"
                     :image="img"
                 />
-                <div class="flex flex-wrap">
+                <div class="flex flex-wrap pt-4">
                     <div class="flex flex-wrap custom1:w-1/2 justify-center">
                         <LessonItem v-for="(lesson, index) in lessonData" :title="lesson.title" :unlocked="lesson.unlocked" :selected="lesson.selected" v-on:click="changeLessonCard(index)"/>
                     </div>
