Skip to content

Commit 1fc90ba

Browse files
SethSharpSethSharp
committed
Changes
1 parent 6f83683 commit 1fc90ba

File tree

7 files changed

+43
-58
lines changed

7 files changed

+43
-58
lines changed

‎public/images/tmpBackground_2.jfif‎

257 KB
Binary file not shown.

‎resources/js/Components/LessonCard.vue‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,25 @@
11
<script>
22
export default {
3-
props: ['title', 'description', 'image', 'pg'],
4-
data() {
5-
return {
6-
'progress': '10%',
7-
}
8-
}, created() {
9-
this.progress = this.pg;
10-
}
3+
props: ['title', 'description', 'image', 'progress'],
114
}
125
</script>
136

147
<template>
158
<div class="">
16-
<div class="bg-gray-800 opacity-90 p-4">
9+
<div class="dark:bg-gray-800 opacity-90 p-4">
1710
<h1 v-if="title" class="font-black text-orange-500">{{ title }}</h1>
1811
<h1 v-else="title" class="font-black">No lesson title given</h1>
1912
</div>
2013
<div class="flex flex-wrap w-full p-3 bg-gray-200 opacity-90">
21-
<div class="w-full md:w-1/2 grid place-items-center mb-4 md:mb-0 p-4 sm:p-0">
14+
<div class="w-full lg:w-1/2 grid place-items-center mb-4 md:mb-0 p-4 sm:p-0">
2215
<!-- <div class="w-3/4 h-full border-black border-2"> </div> -->
23-
<img class="border-black border-2 z-20"
16+
<img class="border-black border-2 z-20 aspect-video"
2417
:src="image"
2518
:alt="image"
2619
/>
2720
</div>
28-
<div class="w-full md:w-1/2 p-5">
29-
<p class=" text-center md:text-left">
21+
<div class="w-full lg:w-1/2 p-5">
22+
<p class=" text-center md:text-left p-4">
3023
<!-- {{description}} -->
3124
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.
3225
</p>
@@ -41,7 +34,12 @@
4134

4235
</div>
4336
<button class="bg-orange-500 text-white mt-2 px-4 py-2 rounded-lg">
44-
Play
37+
<p v-if="progress == '0%' || progress == '100%'">
38+
Play
39+
</p>
40+
<p v-else>
41+
Continue
42+
</p>
4543
</button>
4644
</div>
4745
</div>

‎resources/js/Components/Popup.vue‎

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,16 @@
11
<script>
22
</script>
33
<template>
4-
<!-- <div class="flex m-auto top-1/4 justify-center fixed">
5-
<div class="w-52 bg-gray-200 absolute z-30 rounded-md
6-
text-center py-4 px-4">
7-
<slot />
8-
</div>
9-
</div> -->
104

11-
<div id="alert-border-5" class="flex p-4 bg-gray-100 border-t-4 border-gray-500 dark:bg-gray-700" role="alert">
12-
<svg class="flex-shrink-0 w-5 h-5 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20"
13-
xmlns="http://www.w3.org/2000/svg">
14-
<path fill-rule="evenodd"
15-
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
16-
clip-rule="evenodd"></path>
17-
</svg>
5+
<div id="alert-border-5"
6+
class="flex p-4 bg-gray-100 border-t-4 border-gray-500 dark:bg-gray-700 opacity-80
7+
absolute z-30 w-3/4"
8+
role="alert">
9+
1810
<div class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-300">
1911
<slot/>
2012
</div>
21-
<button type="button"
22-
class="ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white"
23-
data-dismiss-target="#alert-border-5" aria-label="Close">
24-
<span class="sr-only">Dismiss</span>
25-
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
26-
xmlns="http://www.w3.org/2000/svg">
27-
<path fill-rule="evenodd"
28-
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
29-
clip-rule="evenodd"></path>
30-
</svg>
31-
</button>
13+
3214
</div>
3315

3416
</template>

‎resources/js/Layouts/AuthenticatedLayout.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ const showingNavigationDropdown = ref(false);
1111

1212
<template>
1313
<div>
14-
<div class="min-h-screen bg-gray-100">
15-
<nav class="bg-gray-900 border-b border-gray-100">
14+
<div class="min-h-screen bg-gray-500">
15+
<nav class="bg-gray-900">
1616
<!-- Primary Navigation Menu -->
1717
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1818
<div class="flex justify-between sm:justify-center h-16">

‎resources/js/Pages/Dashboard.vue‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@
2424
this.changeLessonCard(i-1);
2525
}, methods: {
2626
changeLessonCard: function(index) {
27-
if (!this.lessonData[index].unlocked) return;
27+
if (!this.lessonData[index].unlocked) {
28+
this.lessonLocked();
29+
return;}
2830
this.lessonData[this.prevSelected].selected=false;
2931
this.prevSelected = index;
3032
this.lessonData[index].selected=true;
@@ -43,12 +45,8 @@
4345
<template>
4446
<AuthenticatedLayout>
4547

46-
<Popup v-if="popUp" >
47-
This level is locked
48-
</Popup>
49-
50-
<div class="w-full h-screen absolute">
51-
<img :src="lesson.src" class="blur-md"/>
48+
<div class="h-full w-full absolute">
49+
<img :src="lesson.src" class="blur-md w-full"/>
5250
</div>
5351

5452
<div class="w-full flex flex-wrap justify-center relative mt-8">
@@ -63,22 +61,24 @@
6361
:title="lesson.title"
6462
:description="lesson.desc"
6563
:image="lesson.src"
66-
:pg="lesson.progress"
64+
:progress="lesson.progress"
6765
/>
66+
<!-- <Popup v-if="popUp">
67+
This level is locked
68+
</Popup> -->
6869
<div class="flex flex-wrap pt-4">
6970

70-
<div class="flex flex-wrap custom1:w-1/2 justify-center"
71-
@click="lessonLocked()"
72-
>
71+
<div class="flex flex-wrap custom1:w-1/2 justify-center">
7372
<LessonItem v-for="(lesson, index) in lessonData"
7473
:unlocked="lesson.unlocked"
7574
:selected="lesson.selected"
7675
v-on:click="changeLessonCard(index)"
7776
/>
7877
</div>
78+
7979
<div class="custom1:w-1/2 bg-gray-200 opacity-50">
80-
<h1 class="mt-8 ml-12 font-semibold text-3xl"> Placeholder </h1>
81-
<p class="ml-12 pr-4">
80+
<h1 class="mt-4 pl-2 sm:mt-8 sm:px-6 font-semibold text-3xl"> Placeholder </h1>
81+
<p class="pb-2 px-6">
8282
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
8383
Mauris luctus ipsum quis sollicitudin tincidunt.
8484
Fusce feugiat nibh sit amet urna ultricies rutrum.

‎routes/web.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@
2626

2727
Route::get('/dashboard', function () {
2828
$data = [
29-
['title'=>'Lesson - 1', 'desc'=>'Lesson 1 desc', 'src'=>'/images/tmpBackground.jpg', 'selected'=>false, 'unlocked'=>true, 'progress' => '100%'],
29+
['title'=>'Lesson - 1', 'desc'=>'Lesson 1 desc', 'src'=>'/images/tmpBackground_2.jfif', 'selected'=>false, 'unlocked'=>true, 'progress' => '100%'],
3030
['title'=>'Lesson - 2', 'desc'=>'Lesson 2 desc', 'src'=>'/images/tmpBackground.jpg', 'selected'=>false, 'unlocked'=>true, 'progress' => '90%'],
31-
['title'=>'Lesson - 3', 'desc'=>'Lesson 3 desc', 'src'=>'/images/tmpBackground.jpg', 'selected'=>false, 'unlocked'=>false, 'progress' => '0%'],
31+
['title'=>'Lesson - 3', 'desc'=>'Lesson 3 desc', 'src'=>'/images/tmpBackground.jpg', 'selected'=>false, 'unlocked'=>true, 'progress' => '0%'],
3232
['title'=>'Lesson - 4', 'desc'=>'Lesson 4 desc', 'src'=>'/images/tmpBackground.jpg', 'selected'=>false, 'unlocked'=>false, 'progress' => '0%'],
3333
['title'=>'Lesson - 5', 'desc'=>'Lesson 5 desc', 'src'=>'/images/tmpBackground.jpg', 'selected'=>false, 'unlocked'=>false, 'progress' => '0%'],
3434
['title'=>'Lesson - 6', 'desc'=>'Lesson 6 desc', 'src'=>'/images/tmpBackground.jpg', 'selected'=>false, 'unlocked'=>false, 'progress' => '0%']

‎tailwind.config.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ module.exports = {
2020
},
2121
animation: {
2222
lockedLvl: "spin 0.5s",
23-
pulse: "pulse 4s infinite"
23+
pulse: "pulse 4s infinite",
24+
opacity: "opac 1s ease-in-out",
2425
},
2526
keyframes: (theme) => ({
2627
spin: {
@@ -34,11 +35,15 @@ module.exports = {
3435
opacity: "1",
3536
},
3637
"50%": {
37-
opacity: ".5",
38+
opacity: ".7",
3839
},
3940
"100%": {
4041
opacity: "1",
41-
}
42+
},
43+
},
44+
opac: {
45+
"0%": { opacity: "1" },
46+
"100%": { opacity: ".5" },
4247
},
4348
}),
4449
},

0 commit comments

Comments
 (0)