Skip to content

Commit

Permalink
Merge branch 'develop' into NuxtIn404
Browse files Browse the repository at this point in the history
  • Loading branch information
@Defelo
Defelo authored Oct 30, 2024
2 parents 102545b + 180a484 commit f3f6f02
Show file tree
Hide file tree
Showing 18 changed files with 239 additions and 207 deletions.
21 changes: 13 additions & 8 deletions components/Btn.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
<template>
<button :class="classes" @click="onclick" type="button">
<component v-if="icon" :is="icon" class="icon"></component>
<button :class="classes" @click="onclick" :disabled="disabled" type="button">
<component v-if="icon" :is="icon" class="icon" />
<slot></slot>
</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
props: {
full: { type: Boolean, default: false },
Expand All @@ -21,11 +19,12 @@ export default defineComponent({
iconRight: { type: Boolean, default: false },
bgColor: { type: String, default: "bg-accent" },
borderColor: { type: String, default: "border-accent" },
disabled: { type: Boolean, default: false },
},
emits: ["click"],
setup(props, { emit }) {
function onclick() {
emit("click", true);
if (!props.disabled) emit("click", true);
}
const textColor = computed(() => {
Expand All @@ -39,28 +38,34 @@ export default defineComponent({
sm: props.sm,
"flex-row-reverse": props.iconRight,
"text-center justify-center w-full": props.full,
disabled: props.disabled,
},
props.primary && !props.secondary && !props.tertiary
? `primary ${props.bgColor} text-primary hover:${props.bgColor} border ${props.borderColor} hover:ring-4 md:hover:ring-8 hover:ring-tertiary`
? `primary ${props.bgColor} text-primary enabled:hover:${props.bgColor} border ${props.borderColor} enabled:hover:ring-4 md:enabled:hover:ring-8 enabled:hover:ring-tertiary`
: "",
props.secondary
? `secondary bg-transparent text-heading hover:bg-transparent border ${props.borderColor} hover:ring-4 md:hover:ring-8 hover:ring-tertiary`
? `secondary bg-transparent text-heading enabled:hover:bg-transparent border ${props.borderColor} enabled:hover:ring-4 md:enabled:hover:ring-8 enabled:hover:ring-tertiary`
: "",
props.tertiary
? `tertiary bg-transparent text-heading hover:bg-transparent hover:scale-105 border border-transparent hover:ring-4 md:hover:ring-8 hover:ring-transparent`
? `tertiary bg-transparent text-heading enabled:hover:bg-transparent enabled:hover:scale-105 border border-transparent enabled:hover:ring-4 md:enabled:hover:ring-8 enabled:hover:ring-transparent`
: "",
];
});
return { classes, onclick };
},
});
</script>

<style scoped>
button {
@apply h-fit rounded flex items-center text-center
uppercase tracking-widest transition-basic font-body;
}
button:disabled {
@apply opacity-50 cursor-not-allowed;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ STYLE */
/* .primary {
@apply bg-accent hover:bg-accent border border-accent focus:ring-8 focus:ring-tertiary;
Expand Down
54 changes: 28 additions & 26 deletions components/SectionTitle.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,35 @@
<p class="text-body-2 col-span-2 hidden md:block">{{ t(body) }}</p>
</header>

<header :class="{ 'text-center': center, 'max-w-xl': !full }" v-else>
<h1 v-if="size == 'xl'" class="mb-4 md:mb-6 text-display-2 leading-tight">
<strong class="text-subheading-1 mb-2 md:mb-4 block">
{{ t(subheading) }}
</strong>
{{ t(heading) }}
</h1>
<div v-else class="flex justify-center">
<header :class="{ 'text-center': center, 'max-w-xl': !full }">
<h1 v-if="size == 'xl'" class="mb-4 md:mb-6 text-display-2 leading-tight">
<strong class="text-subheading-1 mb-2 md:mb-4 block">
{{ t(subheading) }}
</strong>
{{ t(heading) }}
</h1>

<h1 v-else-if="size == 'lg'" class="mb-5 text-heading-1">
<strong class="text-subheading-1 mb-2 block">{{ t(subheading) }}</strong>
{{ t(heading) }}
</h1>

<h3 v-else-if="size == 'sm'" class="mb-2 text-heading-2">
<strong class="text-xs md:text-sm mb-2 text-accent block">
{{ t(subheading) }}
</strong>
{{ t(heading) }}
</h3>
<h2 v-else class="mb-box leading-normal text-heading-1">
<strong class="text-subheading-1 mb-1 xl:mb-2 block">
{{ t(subheading) }}
</strong>
{{ t(heading) }}
</h2>
<p>{{ t(body) }}</p>
</header>
<h1 v-else-if="size == 'lg'" class="mb-5 text-heading-1">
<strong class="text-subheading-1 mb-2 block">{{ t(subheading) }}</strong>
{{ t(heading) }}
</h1>

<h3 v-else-if="size == 'sm'" class="mb-2 text-heading-2">
<strong class="text-xs md:text-sm mb-2 text-accent block">
{{ t(subheading) }}
</strong>
{{ t(heading) }}
</h3>
<h2 v-else class="mb-box leading-normal text-heading-1">
<strong class="text-subheading-1 mb-1 xl:mb-2 block">
{{ t(subheading) }}
</strong>
{{ t(heading) }}
</h2>
<p>{{ t(body) }}</p>
</header>
</div>
</template>

<script lang="ts">
Expand Down
2 changes: 1 addition & 1 deletion components/Tooltip.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ function show() {
@mouseleave="hide"
ref="floatingRef"
:class="[
' absolute w-max max-w-[380px] text-sm top-0 left-0 z-50 bg-light text-subheading p-3 rounded-md cursor-default',
'absolute w-max max-w-[calc(100vw-50px)] sm:max-w-[380px] text-sm top-0 left-0 z-50 bg-light text-subheading p-3 rounded-md cursor-default',
isHidden && 'hidden',
]"
>
Expand Down
15 changes: 12 additions & 3 deletions components/course/Video.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
></iframe>

<video
ref="video"
v-else-if="activeLecture.type == 'mp4'"
:poster="course.image"
controls
Expand All @@ -19,7 +20,7 @@
allowfullscreen
controlsList="nodownload"
oncontextmenu="return false;"
:key="`video-${activeLecture.id}`"
:key="`video-${videoSRC}`"
>
<track kind="captions" />
<source ref="refSource" :src="videoSRC" type="video/mp4" />
Expand Down Expand Up @@ -53,6 +54,7 @@ export default defineComponent({
let videoInterval: any;
const refSource = ref<HTMLSourceElement | any>(null);
const video = ref<HTMLVideoElement | null>(null);
watch(
() => props.activeLecture,
Expand All @@ -71,15 +73,22 @@ export default defineComponent({
refSource.value.setAttribute("src", videoSRC.value);
videoInterval = setInterval(async () => {
await getLectureVideoSRC(courseID, newValue);
if (video.value) {
video.value.pause();
refSource.value.src = videoSRC.value;
video.value.load();
video.value.play();
};
// refSource.value.setAttribute('src', videoSRC.value);
refSource.value.src = videoSRC.value;
}, 40000);
}, 28800000); //8 hours
}
},
{ deep: true, immediate: true }
);
return { videoSRC, refSource };
return { videoSRC, refSource, video };
},
});
</script>
Expand Down
7 changes: 6 additions & 1 deletion components/course/VideoControls.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<article class="flex midXl:hidden gap-card items-center">
<div class="flex gap-2">
<ArrowLeftCircleIcon
v-if="!isFirstLecture"
@click="goToPrevLecture"
class="w-10 h-10 text-accent cursor-pointer"
/>
Expand All @@ -14,7 +15,7 @@
</article>
<!-- pr-[70px] -->
<article class="hidden midXl:flex gap-box items-center">
<Btn sm tertiary @click="goToPrevLecture" :icon="ArrowLeftIcon">
<Btn v-if="!isFirstLecture" sm tertiary @click="goToPrevLecture" :icon="ArrowLeftIcon">
{{ t("Buttons.Prev") }}
</Btn>
<Btn sm @click="goToNextLecture" :icon="ArrowRightIcon" icon-right>
Expand Down Expand Up @@ -44,6 +45,10 @@ const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const isFirstLecture = computed(() => lectures.value.findIndex(
(lecture) => lecture.id == activeLectureID.value
) <= 0);
const activeLectureID = computed(() => {
return props.activeLecture?.id ?? "";
});
Expand Down
8 changes: 5 additions & 3 deletions components/course/VideoMeta.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
>
<div class="flex flex-wrap items-center">
<NuxtLink :to="path" class="flex">
<span class="max-w-[200px] clamp"> {{ course?.title ?? "" }} </span>
<span class="max-w-max clamp"> {{ course?.title ?? "" }} </span>
<span>/</span>
</NuxtLink>

Expand Down Expand Up @@ -33,7 +33,7 @@
listOfCompletedCourses.find((lec) => lec == activeLecture.id)
"
>
<Btn i-if="user?.admin || canCreate" secondary sm @click="addTask">{{ t("Buttons.AddTask") }}</Btn>
<Btn i-if="user?.admin || canCreate" :icon="PlusCircleIcon" secondary sm @click="addTask">{{ t("Buttons.AddTask") }}</Btn>
</template>

<Btn
Expand Down Expand Up @@ -74,12 +74,13 @@
<script lang="ts">
import { useI18n } from "vue-i18n";
import { defineComponent, ref, computed, onMounted } from "vue";
import { CheckIcon, CheckBadgeIcon } from "@heroicons/vue/24/solid";
import { CheckIcon, CheckBadgeIcon, PlusCircleIcon } from "@heroicons/vue/24/solid";
export default defineComponent({
components: {
CheckIcon,
CheckBadgeIcon,
PlusCircleIcon,
},
props: {
course: { type: Object as PropType<any>, default: null },
Expand Down Expand Up @@ -207,6 +208,7 @@ export default defineComponent({
path,
listOfCompletedCourses,
CheckIcon,
PlusCircleIcon,
markLectureAsComplete,
activeLectureID,
courseID,
Expand Down
82 changes: 41 additions & 41 deletions components/input/ButtonToggle.vue
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,21 @@
<template>
<div
:class="[
!!mobileResponsive ? 'flex-col rounded-lg sm:flex-row sm:rounded-full' : 'rounded-full',
!!primary && !secondary ? 'bg-primary border border-accent' : '',
secondary ? 'border border-light' : '',
]"
class="flex gap-3 p-2 w-fit"
>
<section
@click="emitSelected(i)"
v-for="(button, i) of options"
:key="i"
>
<p
class="text-black text-xs sm:text-sm px-2 sm:px-6 md:px-8 cursor-pointer capitalize transition-all duration-300 font-semibold py-2 rounded-full"
<div :class="[
!!mobileResponsive ? 'flex-col rounded-lg sm:flex-row sm:rounded-full' : 'rounded-full',
!!primary && !secondary ? 'bg-primary border border-accent' : '',
secondary ? 'border border-light' : '',
]" class="flex gap-3 p-2 w-fit">
<section v-for="(button, i) of options" :key="i" @click="!button.disabled ? emitSelected(i) : null">
<p class="text-black text-xs sm:text-sm px-2 sm:px-6 md:px-8 cursor-pointer capitalize transition-all duration-300 font-semibold py-2 rounded-full"
:class="[
{
'px-2.5': smInMobile,
'px-4': !smInMobile,
},
selectedOption == i && primary && !!!secondary ? 'bg-accent' : 'text-white',
selectedOption == i && secondary ? 'bg-light ' : '',
!!mobileResponsive ? 'rounded-lg sm:flex-row sm:rounded-full' : 'rounded-full',
]"
>
selectedOption == i && primary && !secondary ? 'bg-accent' : 'text-white',
selectedOption == i && secondary ? 'bg-light' : '',
button.disabled ? 'opacity-50' : '',
mobileResponsive ? 'rounded-lg sm:flex-row sm:rounded-full' : 'rounded-full',
]">
{{ t(button.name) }}
</p>
</section>
Expand All @@ -34,35 +24,45 @@

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const props=defineProps({
modelValue: { type: Number, default: 0 },
buttonOptions: { type: Array as PropType<any>, default: [] },
primary: { type: Boolean, default: true },
secondary: { type: Boolean, default: false },
mobileResponsive: { type: Boolean, default: true },
smInMobile: { type: Boolean, default: false },
})
const props = defineProps({
modelValue: { type: Number, default: 0 },
buttonOptions: { type: Array as PropType<any>, default: [] },
primary: { type: Boolean, default: true },
secondary: { type: Boolean, default: false },
mobileResponsive: { type: Boolean, default: true },
smInMobile: { type: Boolean, default: false },
})
const emits=defineEmits(["update:modelValue"])
const { t } = useI18n();
const selectedOption = ref(0);
const emits = defineEmits(["update:modelValue"])
const { t } = useI18n();
const selectedOption = ref(0);
const options = computed(() => props.buttonOptions)
watch(
() => props.modelValue,
(newValue, oldValue) => {
selectedOption.value = newValue;
if (options.value[selectedOption.value]?.disabled) {
selectedOption.value = 0;
emits("update:modelValue", 0);
}
},
{ immediate: true }
);
function emitSelected(selected: any) {
selectedOption.value = selected;
emits("update:modelValue", selected);
}
</script>
watch(
() => options.value,
(newOptions) => {
if (newOptions[selectedOption.value]?.disabled) {
selectedOption.value = 0;
emits("update:modelValue", 0);
}
}
);
<style scoped></style>
function emitSelected(selected: any) {
selectedOption.value = selected;
emits("update:modelValue", selected);
}
</script>
2 changes: 0 additions & 2 deletions components/matching/List.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,3 @@ const props = defineProps({
const matchings = useMatchings();
</script>

<style scoped></style>
Loading

0 comments on commit f3f6f02

Please sign in to comment.