Skip to content

Commit 2fe06f9

Browse files
aminnausinaminnausin
committed
feat: fonts and header hierarchy
1 parent 7768dc8 commit 2fe06f9

12 files changed

Lines changed: 74 additions & 69 deletions

File tree

‎resources/css/app.css‎

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
6+
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
7+
58
@layer utilities {
69
input[type='number']::-webkit-inner-spin-button,
710
input[type='number']::-webkit-outer-spin-button {
@@ -15,22 +18,13 @@
1518
}
1619

1720
@layer base {
18-
/* input:-webkit-autofill,
19-
input:-webkit-autofill:enabled,
20-
input:-webkit-autofill:hover,
21-
input:-webkit-autofill:focus,
22-
textarea:-webkit-autofill,
23-
textarea:-webkit-autofill:enabled,
24-
textarea:-webkit-autofill:hover,
25-
textarea:-webkit-autofill:focus select:-webkit-autofill,
26-
select:-webkit-autofill:enabled,
27-
select:-webkit-autofill:hover,
28-
select:-webkit-autofill:focus {
29-
-webkit-text-fill-color: #fff;
30-
-webkit-box-shadow: 0 0 0px 1000px #837354c7 inset;
31-
box-shadow: 0 0 0px 1000px #8a8274c7 inset;
32-
background-color: #645c4cc7;
33-
} */
21+
@font-face {
22+
font-family: 'Roboto';
23+
font-style: normal;
24+
font-weight: 400;
25+
font-display: swap;
26+
src: url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
27+
}
3428

3529
[v-cloak] {
3630
display: none;
@@ -42,9 +36,7 @@
4236
}
4337
}
4438

45-
/* Custom scrollbar width */
46-
47-
/* Scrollbar track */
39+
/* Custom scrollbar track width */
4840

4941
@supports selector(::-webkit-scrollbar) {
5042
.scrollbar-minimal::-webkit-scrollbar {
@@ -83,10 +75,10 @@
8375

8476
.slider {
8577
--thumb-size: 2;
86-
--thumb-rounded: 9999px; /* rounded-full */
87-
--track-color: rgba(255, 255, 255, 0.3); /* white with 30% opacity */
88-
--track-rounded: 9999px; /* rounded-full */
89-
--progress-color: #111827; /* gray-900 */
78+
--thumb-rounded: 9999px;
79+
--track-color: rgba(255, 255, 255, 0.3);
80+
--track-rounded: 9999px;
81+
--progress-color: #111827;
9082
}
9183

9284
.slider.timeline {

‎resources/js/components/cards/FolderCard.vue‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const contextMenuItems = computed(() => {
5151
<template #trigger>
5252
<RouterLink
5353
:to="`/${data.path}`"
54-
class="text-left relative flex flex-col sm:flex-row flex-wrap rounded-lg sm:p-3 dark:bg-primary-dark-800/70 bg-primary-800 dark:hover:bg-primary-dark-600 hover:bg-gray-200 dark:text-white shadow w-full group cursor-pointer divide-gray-300 dark:divide-gray-400"
54+
class="text-left relative flex flex-col sm:flex-row flex-wrap rounded-lg sm:p-3 dark:bg-primary-dark-800/70 bg-primary-800 dark:hover:bg-primary-dark-600 hover:bg-gray-200 text-neutral-500 dark:text-neutral-400 shadow w-full group cursor-pointer divide-gray-300 dark:divide-gray-400"
5555
@contextmenu="
5656
(e: any) => {
5757
setContextMenu(e, { items: contextMenuItems });
@@ -65,7 +65,7 @@ const contextMenuItems = computed(() => {
6565
/>
6666
<span class="w-full flex-1 text-left relative flex flex-col gap-4 lg:gap-2 sm:flex-row flex-wrap p-3 sm:p-0">
6767
<section class="flex justify-between gap-4 w-full items-center">
68-
<h2 class="w-full truncate" :title="props.data.series?.title ?? props.data.name">{{ props.data.series?.title ?? props.data.name }}</h2>
68+
<h3 class="w-full truncate dark:text-white" :title="props.data.series?.title ?? props.data.name">{{ props.data.series?.title ?? props.data.name }}</h3>
6969
<div class="flex justify-end gap-1">
7070
<ButtonCorner
7171
:positionClasses="'w-7 h-7'"
@@ -92,16 +92,13 @@ const contextMenuItems = computed(() => {
9292
</div>
9393
</section>
9494
<section class="flex flex-col sm:flex-row sm:justify-between w-full flex-wrap gap-2 text-sm">
95-
<h3
96-
class="text-neutral-500 w-full text-wrap truncate sm:text-nowrap flex-1"
97-
:title="`${props.data.file_count} Episode${props.data.file_count !== 1 ? 's' : ''}`"
98-
>
95+
<h4 class="w-full text-wrap truncate sm:text-nowrap flex-1" :title="`${props.data.file_count} Episode${props.data.file_count !== 1 ? 's' : ''}`">
9996
{{ props.data.file_count }} Episode{{ props.data.file_count !== 1 ? 's' : '' }}
100-
</h3>
101-
<h3 class="truncate text-nowrap sm:text-right text-neutral-500 w-fit lg:hidden xl:block">
97+
</h4>
98+
<h4 class="truncate text-nowrap sm:text-right w-fit lg:hidden xl:block">
10299
<!-- some other folder statistic or data like number of seasons or if its popular or something -->
103100
{{ props.data.total_size ? formatFileSize(props.data.total_size) : '' }}
104-
</h3>
101+
</h4>
105102
</section>
106103
</span>
107104
<section
@@ -113,7 +110,7 @@ const contextMenuItems = computed(() => {
113110
v-for="(tag, index) in props.data.series.folder_tags"
114111
v-bind:key="index"
115112
:label="tag.name"
116-
:colour="'bg-neutral-200 leading-none text-neutral-500 shadow dark:bg-neutral-900 hover:bg-violet-600 hover:text-neutral-50 hover:dark:bg-violet-600/90 !max-h-[22px]'"
113+
:colour="'bg-neutral-200 leading-none shadow dark:bg-neutral-900 hover:bg-violet-600 hover:text-neutral-50 hover:dark:bg-violet-600/90 !max-h-[22px]'"
117114
/>
118115
</section>
119116
</RouterLink>

‎resources/js/components/cards/RecordCard.vue‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@ watch(
3737
<template>
3838
<RouterLink
3939
:to="videoLink ? videoLink : ''"
40-
class="text-left relative flex flex-col gap-4 lg:gap-2 sm:flex-row flex-wrap rounded-lg dark:bg-primary-dark-800/70 bg-primary-800 dark:hover:bg-primary-dark-600 hover:bg-gray-200 dark:text-white shadow p-3 w-full group cursor-pointer divide-gray-300 dark:divide-gray-400"
40+
class="text-left relative flex flex-col gap-4 lg:gap-2 sm:flex-row flex-wrap rounded-lg dark:bg-primary-dark-800/70 bg-primary-800 dark:hover:bg-primary-dark-600 hover:bg-gray-200 text-neutral-500 dark:text-neutral-400 shadow p-3 w-full group cursor-pointer divide-gray-300 dark:divide-gray-400"
4141
>
4242
<section class="flex justify-between gap-4 w-full items-center">
43-
<h2 class="w-full truncate" :title="props.record.relationships.video_name">
43+
<h3 class="w-full truncate dark:text-white" :title="props.record.relationships.video_name">
4444
{{ props.record.relationships.video_name }}
45-
</h2>
45+
</h3>
4646
<div class="flex justify-end gap-1" v-if="videoLink">
4747
<ButtonCorner
4848
:positionClasses="'w-7 h-7'"
@@ -67,19 +67,19 @@ watch(
6767
</template>
6868
</ButtonCorner>
6969
</div>
70-
<div class="flex justify-end gap-1 text-neutral-500 w-full truncate" v-else>
70+
<div class="flex justify-end gap-1 w-full truncate" v-else>
7171
{{ 'Deleted' }}
7272
</div>
7373
</section>
7474
<section class="flex flex-wrap sm:flex-nowrap sm:justify-between w-full gap-x-2 text-sm">
75-
<h3 class="hidden lg:block text-neutral-500 w-full text-wrap truncate sm:text-nowrap shrink-0 sm:shrink" :title="props.record.relationships.folder?.name">
75+
<h4 class="hidden lg:block w-full text-wrap truncate sm:text-nowrap shrink-0 sm:shrink" :title="props.record.relationships.folder?.name">
7676
{{ props.record.relationships.folder?.name }}
77-
</h3>
78-
<h3 class="hidden lg:block truncate text-right text-neutral-500 w-full line-clamp-2" :title="toFormattedDate(rawDate)">
77+
</h4>
78+
<h4 class="hidden lg:block truncate text-right w-full line-clamp-2" :title="toFormattedDate(rawDate)">
7979
{{ timeSpan }}
80-
</h3>
81-
<h3 class="lg:hidden text-neutral-500 text-wrap truncate sm:text-nowrap mr-auto">{{ props.record.relationships.folder?.name }} · {{ timeSpan }}</h3>
82-
<h3 class="lg:hidden truncate sm:text-right text-neutral-500 line-clamp-2 text-wrap sm:text-nowrap">
80+
</h4>
81+
<h4 class="lg:hidden text-wrap truncate sm:text-nowrap mr-auto">{{ props.record.relationships.folder?.name }} · {{ timeSpan }}</h4>
82+
<h4 class="lg:hidden truncate sm:text-right line-clamp-2 text-wrap sm:text-nowrap">
8383
{{
8484
`${rawDate.toLocaleDateString('en-ca', {
8585
year: 'numeric',
@@ -90,7 +90,7 @@ watch(
9090
minute: '2-digit',
9191
})}`
9292
}}
93-
</h3>
93+
</h4>
9494
</section>
9595
</RouterLink>
9696
</template>

‎resources/js/components/cards/SidebarCard.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ const props = defineProps<{
1818
:to="link"
1919
:class="`flex flex-col sm:flex-row flex-wrap gap-4 lg:gap-2 relative
2020
w-full group cursor-pointer rounded-lg shadow p-3
21-
text-left dark:text-white
21+
text-left text-neutral-500 dark:text-neutral-400
2222
dark:bg-primary-dark-800/70 bg-primary-800
2323
dark:hover:bg-primary-dark-600 hover:bg-gray-200
2424
divide-gray-300 dark:divide-gray-400 ${props.class}`"
2525
>
2626
<section class="flex justify-between gap-4 w-full items-center">
2727
<slot name="header">
28-
<h2 class="w-full truncate" :title="title">{{ title }}</h2>
28+
<h3 class="w-full truncate dark:text-white" :title="title">{{ title }}</h3>
2929
<div class="flex justify-end gap-1">
3030
<ButtonCorner
3131
:positionClasses="'w-7 h-7'"
@@ -54,11 +54,11 @@ const props = defineProps<{
5454
</section>
5555
<section class="flex flex-col sm:flex-row sm:justify-between w-full flex-wrap gap-2 text-sm">
5656
<slot name="body">
57-
<h3 class="text-neutral-500 w-full text-wrap truncate sm:text-nowrap flex-1" v-if="false">Episodes: 2</h3>
58-
<h3 class="truncate text-nowrap sm:text-right text-neutral-500 w-fit hidden" v-if="false">
57+
<h4 class="w-full text-wrap truncate sm:text-nowrap flex-1" v-if="false">Episodes: 2</h4>
58+
<h4 class="truncate text-nowrap sm:text-right w-fit hidden" v-if="false">
5959
<!-- some other folder statistic or data like number of seasons or if its popular or something -->
6060
{{ '20gb' }}
61-
</h3>
61+
</h4>
6262
</slot>
6363
</section>
6464
</RouterLink>

‎resources/js/components/panels/NavBar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ watch(userData, handleAuthEvent, { immediate: false });
5555
:aria-expanded="showDropdown"
5656
aria-controls="user-dropdown"
5757
>
58-
<span id="user-name" class="hidden sm:block truncate" v-if="username">{{ username }}</span>
59-
<span id="user-name-unauth" v-else class="text-right hidden sm:block">Guest</span>
58+
<h2 id="user-name" class="hidden sm:block truncate" v-if="username">{{ username }}</h2>
59+
<h2 id="user-name-unauth" v-else class="text-right hidden sm:block">Guest</h2>
6060

6161
<img
6262
:src="userData?.avatar ?? '/storage/avatars/default.jpg'"

‎resources/js/components/panels/VideoSidebar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ watch(
6363
<template>
6464
<div class="p-3 px-6 lg:px-3 flex flex-col gap-3">
6565
<div class="flex py-1 flex-col gap-2">
66-
<h1 id="sidebar-title" class="text-2xl h-8 w-full capitalize dark:text-white">{{ selectedSideBar }}</h1>
66+
<h2 id="sidebar-title" class="text-2xl h-8 w-full capitalize dark:text-white">{{ selectedSideBar }}</h2>
6767
<hr class="" />
6868
</div>
6969

@@ -87,7 +87,7 @@ watch(
8787
<section v-if="selectedSideBar === 'history'" id="list-content-history" class="flex gap-2 flex-wrap">
8888
<RecordCard v-for="(record, index) in stateRecords.slice(0, 10)" :key="record.id" :record="record" :index="index" @clickAction="handleShare" />
8989
<RouterLink v-if="stateRecords.length != 0" to="/history" class="text-center text-sm dark:text-neutral-400 mx-auto p-3 hover:underline">View More</RouterLink>
90-
<h2 v-else class="text-gray-500 dark:text-gray-400 tracking-wider w-full py-2">Nothing Yet...</h2>
90+
<h3 v-else class="text-gray-500 dark:text-gray-400 tracking-wider w-full py-2">Nothing Yet...</h3>
9191
</section>
9292
<ModalBase :modalData="shareModal">
9393
<template #content>

‎resources/js/components/video/VideoAmbientPlayer.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,6 @@ watch(
219219
</filter>
220220
</svg>
221221
</section>
222-
{{ hasStarted && !lightMode && ambientMode && !isAudio && !videoPlayer?.isPictureInPicture }}
223222
</template>
224223
<style lang="css" scoped>
225224
.filter-blur {

‎resources/js/components/video/VideoInfoPanel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ watch(
158158
</section>
159159
<section class="flex flex-col gap-2 flex-1 min-w-0 w-full group">
160160
<section class="hidden sm:flex justify-between gap-2">
161-
<h2 id="mp4-title" class="text-xl font-medium truncate capitalize h-8" :title="metaData?.fields.title ?? 'no file was found at this location'">
161+
<h2 id="mp4-title" class="text-xl truncate capitalize h-8" :title="metaData?.fields.title ?? 'no file was found at this location'">
162162
{{ metaData?.fields.title ?? '[File Not Found]' }}
163163
</h2>
164164
<section class="flex gap-2 justify-end h-8 lg:min-w-32 max-w-64 w-fit">

‎resources/js/layouts/LayoutBase.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,18 +57,15 @@ watch(
5757
}
5858
"
5959
>
60-
<!-- overflow-y-hidden -->
61-
<!-- class="flex p-6 gap-6 flex-wrap lg:flex-nowrap snap-y bg-primary-950 dark:bg-primary-dark-950 dark:text-[#e2e0e2] font-sans text-gray-900 antialiased" -->
6260
<main
63-
class="h-full md:h-auto grid grid-cols-1 lg:grid-cols-10 2xl:grid-cols-6 sm:p-6 gap-6 snap-y bg-primary-900 dark:bg-primary-dark-900 sm:bg-primary-950 sm:dark:bg-primary-dark-950 dark:text-[#e2e0e2] font-sans text-gray-900 antialiased overflow-x-clip"
61+
class="font-nunito h-full md:h-auto grid grid-cols-1 lg:grid-cols-10 2xl:grid-cols-6 sm:p-6 gap-6 snap-y bg-primary-900 dark:bg-primary-dark-900 sm:bg-primary-950 sm:dark:bg-primary-dark-950 dark:text-[#e2e0e2] text-gray-900 antialiased overflow-x-clip"
6462
>
6563
<section
6664
id="left-card"
6765
:class="`col-span-1 lg:col-span-2 2xl:col-span-1 h-fit order-2 lg:order-1 bg-primary-900 dark:bg-primary-dark-900 dark:text-[#e2e0e2] sm:shadow-xl sm:rounded-2xl space-y-2 sm:scroll-mt-6 ring-gray-900/5 ${selectedSideBar && sideBarTarget === 'left-card' ? 'sm:ring-1' : 'hidden lg:block lg:invisible'}`"
6866
>
6967
<slot name="leftSidebar"></slot>
7068
</section>
71-
<!-- class="bg-primary-900 dark:bg-primary-dark-900 dark:text-[#e2e0e2] shadow-xl p-6 pt-3 rounded-2xl w-full h-fit flex flex-col gap-3 z-20 ring-1 ring-gray-900/5" -->
7269
<section
7370
id="content-card"
7471
class="col-span-full lg:col-span-6 2xl:col-span-4 flex-grow order-1 lg:order-2 bg-primary-900 dark:bg-primary-dark-900 dark:text-[#e2e0e2] sm:shadow-xl p-6 pt-3 sm:rounded-2xl w-full h-fit flex flex-col gap-3 sm:ring-1 ring-gray-900/5"
@@ -80,10 +77,17 @@ watch(
8077
id="list-card"
8178
:class="`col-span-1 lg:col-span-2 2xl:col-span-1 h-fit order-3 bg-primary-900 dark:bg-primary-dark-900 dark:text-[#e2e0e2] sm:shadow-xl sm:rounded-2xl space-y-2 sm:scroll-mt-6 ring-gray-900/5 ${selectedSideBar && sideBarTarget === 'list-card' ? 'sm:ring-1' : 'hidden'}`"
8279
>
83-
<!-- w-full h-fit lg:w-1/6 lg:max-w-72 sm:min-w-32 shrink-0 -->
84-
<!-- class="bg-primary-900 dark:bg-primary-dark-900 dark:text-[#e2e0e2] shadow-xl p-3 rounded-2xl w-full h-fit lg:w-1/6 lg:max-w-72 sm:min-w-32 shrink-0 space-y-2 scroll-mt-6 z-20 ring-1 ring-gray-900/5" -->
8580
<slot name="sidebar"></slot>
8681
</section>
8782
</main>
8883
</div>
8984
</template>
85+
86+
<style lang="css">
87+
h1,
88+
h2 {
89+
font-family: 'Rubik', 'sans-serif';
90+
font-weight: 200;
91+
font-optical-sizing: auto;
92+
}
93+
</style>

‎resources/js/views/DashboardView.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ watch(
120120
<template v-slot:leftSidebar>
121121
<div class="p-3 px-6 lg:px-3 flex flex-col gap-3">
122122
<div class="flex py-1 flex-col gap-2">
123-
<h1 id="sidebar-title" class="text-2xl h-8 w-full capitalize dark:text-white">{{ selectedSideBar }}</h1>
123+
<h2 id="sidebar-title" class="text-2xl h-8 w-full capitalize dark:text-white">{{ selectedSideBar }}</h2>
124124
<hr class="" />
125125
</div>
126126
<section class="flex flex-col gap-2">
@@ -143,17 +143,17 @@ watch(
143143
:aria-disabled="tab.disabled"
144144
>
145145
<template #header>
146-
<h2 class="w-full flex-1" :title="tab.title ?? tab.name">{{ tab.title ?? tab.name }}</h2>
146+
<h3 class="w-full flex-1" :title="tab.title ?? tab.name">{{ tab.title ?? tab.name }}</h3>
147147
<component v-if="tab.icon" :is="tab.icon" class="ml-auto w-6 h-6" />
148148
</template>
149149
<template #body>
150-
<h3 v-if="tab.description" title="Description" class="text-neutral-500 w-full text-wrap truncate sm:text-nowrap flex-1">
150+
<h4 v-if="tab.description" title="Description" class="text-neutral-500 w-full text-wrap truncate sm:text-nowrap flex-1">
151151
{{ tab.description }}
152-
</h3>
153-
<h3 v-if="tab.info" title="Information" class="truncate text-nowrap sm:text-right text-neutral-500 w-fit">
152+
</h4>
153+
<h4 v-if="tab.info" title="Information" class="truncate text-nowrap sm:text-right text-neutral-500 w-fit">
154154
<!-- some other folder statistic or data like number of seasons or if its popular or something -->
155155
{{ tab.info.value }}
156-
</h3>
156+
</h4>
157157
</template>
158158
</SidebarCard>
159159
</section>

0 commit comments

Comments
 (0)