Skip to content

Commit 1c7fae8

Browse files
GabsEditsGabsEdits
committed
feat: redesign chronos ui
1 parent e2f4fe3 commit 1c7fae8

5 files changed

Lines changed: 534 additions & 266 deletions

File tree

‎src/App.vue‎

Lines changed: 60 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,49 @@
11
<template>
2-
<div :class="{ 'sticky top-0 z-50 shadow': stickyTopbar }" class="bg-white dark:bg-zinc-900">
3-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
4-
<nav class="flex justify-between items-center py-4 print:hidden" aria-label="main navigation">
2+
<div :class="{ 'sticky top-0 z-50 shadow': stickyTopbar }" class="bg-white dark:bg-zinc-950">
3+
<div class="print:hidden fixed top-0 inset-x-0 h-max px-4 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md border-b border-zinc-200 dark:border-zinc-800 z-50">
4+
<nav
5+
class="flex justify-between items-center py-4 z-50 max-w-7xl mx-auto"
6+
aria-label="main navigation">
57
<router-link to="/" class="flex items-center">
68
<img :src="chronosConfig.logoUrl" class="w-7 min-w-7 h-7 min-h-7" alt="Logo" />
79
<h1 class="text-lg font-semibold ml-2 hidden sm:block text-zinc-900 dark:text-zinc-100">
810
{{ chronosConfig.logoTitle }}
911
</h1>
1012
</router-link>
1113

12-
<div class="flex-1 mx-4 relative">
13-
<div v-if="collectionShortName"
14-
class="flex items-center border bg-zinc-100 dark:bg-zinc-800 rounded-lg overflow-hidden focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-opacity-50 border-zinc-200 dark:border-zinc-600">
15-
<input class="flex-1 px-4 py-2 text-zinc-600 dark:text-zinc-300 bg-transparent focus:outline-none w-full"
16-
type="text" placeholder="Search for articles.." v-model="search" @input="searchArticles"
17-
@blur="emptySearch()">
18-
<i class="material-symbols-outlined p-2 text-zinc-400 dark:text-zinc-500">search</i>
19-
20-
<div v-if="collectionShortName" class="relative border-l border-zinc-200 dark:border-zinc-600">
21-
<button @click="showLangs = !showLangs"
22-
class="flex items-center p-2 text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white">
23-
<span>{{ chronosStore.prefLang }}</span>
24-
<i class="material-symbols-outlined">arrow_drop_down</i>
25-
</button>
14+
<div class="flex items-center justify-center flex-row gap-4">
15+
16+
<div class="flex-1 mx-4 relative">
17+
<div v-if="collectionShortName"
18+
class="flex items-center border bg-zinc-100 dark:bg-zinc-900 rounded-lg overflow-hidden focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-opacity-50 border-zinc-200 dark:border-zinc-800">
19+
<i class="material-symbols-outlined p-2 text-zinc-400 dark:text-zinc-500">search</i>
20+
<input class="flex-1 px-4 py-2 text-zinc-600 dark:text-zinc-300 bg-transparent focus:outline-none w-full"
21+
type="text" placeholder="Search for articles.." v-model="search" @input="searchArticles"
22+
@blur="emptySearch()">
23+
24+
<div v-if="collectionShortName" class="relative border-l pl-4 border-zinc-200 dark:border-zinc-800">
25+
<button @click="showLangs = !showLangs"
26+
class="flex items-center p-2 text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white">
27+
<span class="text-zinc-500 dark:text-zinc-400">{{ chronosStore.prefLang }}</span>
28+
<i class="material-symbols-outlined text-zinc-500 dark:text-zinc-400">arrow_drop_down</i>
29+
</button>
30+
</div>
2631
</div>
27-
</div>
2832

29-
<div v-show="showLangs"
30-
class="absolute right-0 mt-2 w-max bg-white dark:bg-zinc-800 shadow-lg rounded-md z-50">
31-
<div class="py-1">
32-
<a v-for="(lang, index) in langs" :key="index" @click="setLang(lang)"
33-
class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer">
34-
{{ lang }}
35-
</a>
33+
<div v-show="showLangs"
34+
class="absolute right-0 mt-2 w-max bg-white dark:bg-zinc-800 shadow-lg rounded-md z-50">
35+
<div class="py-1">
36+
<a v-for="(lang, index) in langs" :key="index" @click="setLang(lang)"
37+
class="block px-4 py-2 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 cursor-pointer">
38+
{{ lang }}
39+
</a>
40+
</div>
3641
</div>
37-
</div>
3842

39-
<div v-if="searchResponse.length > 0"
40-
class="absolute w-full mt-1 z-50 max-h-80 overflow-auto bg-white dark:bg-zinc-800 rounded-md shadow-lg m-2">
43+
<div v-if="searchResponse.length > 0"
44+
class="absolute w-full mt-1 z-50 max-h-80 overflow-auto bg-white dark:bg-zinc-800 rounded-md shadow-lg m-2">
4145
<span class="block p-4 hover:bg-zinc-50 dark:hover:bg-zinc-800 cursor-pointer"
42-
v-for="(result, index) in searchResponse" :key="index" @mousedown.prevent="goToArticle(result.Slug)">
46+
v-for="(result, index) in searchResponse" :key="index" @mousedown.prevent="goToArticle(result.Slug)">
4347
<div class="flex items-center space-x-2">
4448
<i class="mdi material-symbols-outlined text-zinc-500 dark:text-zinc-400">book</i>
4549
<div class="flex-1">
@@ -52,39 +56,31 @@
5256
</div>
5357
</div>
5458
</span>
59+
</div>
60+
</div>
61+
62+
<div class="hidden md:flex items-center gap-6 text-sm font-medium text-zinc-600 dark:text-zinc-400">
63+
<a class="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors"
64+
:href="link.url" target="_blank" v-for="(link, index) in chronosConfig.extraLinks" :key="index">
65+
{{ link.name }}
66+
</a>
5567
</div>
56-
</div>
5768

58-
<button @click="toggleThemeMode"
59-
class="flex items-center p-2 text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white">
60-
<i class="material-symbols-outlined" v-if="theme === 'light'">light_mode</i>
61-
<i class="material-symbols-outlined" v-if="theme === 'system'">contrast</i>
62-
<i class="material-symbols-outlined" v-if="theme === 'dark'">dark_mode</i>
63-
</button>
64-
65-
<div class="hidden sm:flex items-center space-x-4">
66-
<a class="text-base text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white"
67-
:href="link.url" target="_blank" v-for="(link, index) in chronosConfig.extraLinks" :key="index">
68-
{{ link.name }}
69-
</a>
69+
<div class="hidden sm:block w-px h-4 bg-zinc-200 dark:bg-zinc-800"></div>
70+
71+
<button @click="toggleThemeMode"
72+
class="flex items-center p-2 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white">
73+
<i class="material-symbols-outlined" v-if="theme === 'light'">light_mode</i>
74+
<i class="material-symbols-outlined" v-if="theme === 'system'">contrast</i>
75+
<i class="material-symbols-outlined" v-if="theme === 'dark'">dark_mode</i>
76+
</button>
77+
7078
</div>
7179
</nav>
7280
</div>
7381

7482
<router-view />
7583

76-
<footer class="bg-white dark:bg-zinc-900 mt-12">
77-
<div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 text-center">
78-
<p class="text-base text-zinc-600 dark:text-zinc-400 print:hidden">
79-
<strong>Chronos</strong> by <a href="https://vanillaos.org"
80-
class="text-blue-800 dark:text-blue-400 hover:underline">Vanilla OS</a>.
81-
</p>
82-
<p class="text-base text-zinc-600 dark:text-zinc-400 hidden print:block">
83-
PDF generated with <strong>Chronos</strong> by <a href="https://vanillaos.org"
84-
class="text-blue-800 dark:text-blue-400 hover:underline">Vanilla OS</a>.
85-
</p>
86-
</div>
87-
</footer>
8884
</div>
8985
</template>
9086

@@ -103,7 +99,7 @@ export default defineComponent({
10399
search: "",
104100
chronosConfig: {} as ChronosConfig,
105101
collectionShortName: "",
106-
theme: "system",
102+
theme: "system"
107103
};
108104
},
109105
computed: {
@@ -112,15 +108,15 @@ export default defineComponent({
112108
},
113109
stickyTopbar() {
114110
return this.$route.name !== "article";
115-
},
111+
}
116112
},
117113
watch: {
118114
$route(to, from) {
119115
this.fetchLanguages();
120116
},
121117
theme() {
122118
this.applyTheme();
123-
},
119+
}
124120
},
125121
async mounted() {
126122
try {
@@ -154,7 +150,7 @@ export default defineComponent({
154150
const response = await this.$chronosAPI.searchArticles(
155151
this.chronosStore.prefLang,
156152
this.search,
157-
this.collectionShortName,
153+
this.collectionShortName
158154
);
159155
if (response != null) {
160156
this.searchResponse = response;
@@ -168,7 +164,7 @@ export default defineComponent({
168164
},
169165
goToArticle(slug: string) {
170166
this.$router.push(
171-
`/${this.collectionShortName}/${this.chronosStore.prefLang}/${slug}`,
167+
`/${this.collectionShortName}/${this.chronosStore.prefLang}/${slug}`
172168
);
173169
this.searchResponse = [];
174170
this.search = "";
@@ -182,12 +178,12 @@ export default defineComponent({
182178
try {
183179
// @ts-ignore
184180
this.langs = await this.$chronosAPI.getLangs(
185-
this.collectionShortName,
181+
this.collectionShortName
186182
);
187183
} catch (error) {
188184
console.error(
189185
`Error fetching languages for collection ${this.collectionShortName}:`,
190-
error,
186+
error
191187
);
192188
}
193189
}
@@ -218,8 +214,8 @@ export default defineComponent({
218214
},
219215
emptySearch() {
220216
this.searchResponse = [];
221-
console.log("Focus lost")
222-
},
223-
},
217+
console.log("Focus lost");
218+
}
219+
}
224220
});
225221
</script>

‎src/assets/css/style.css‎

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,53 @@
11
::-webkit-scrollbar {
2-
width: 8px;
3-
height: 8px;
2+
width: 8px;
3+
height: 8px;
44
}
55

66
::-webkit-scrollbar-track {
7-
background: #f1f1f1;
7+
background: #f1f1f1;
88
}
99

1010
::-webkit-scrollbar-thumb {
11-
background: #888;
12-
border-radius: 4px;
11+
background: #888;
12+
border-radius: 4px;
1313
}
1414

1515
::-webkit-scrollbar-thumb:hover {
16-
background: #555;
16+
background: #555;
1717
}
1818

1919
.pre-div:hover button {
20-
@apply opacity-100;
20+
@apply opacity-100;
2121
}
2222

2323

2424
@media print {
25-
body {
26-
background-color: white;
27-
color: black;
28-
}
29-
30-
h1,
31-
h2,
32-
h3,
33-
h4,
34-
h5,
35-
h6,
36-
code {
37-
color: black;
38-
}
25+
body {
26+
background-color: white;
27+
color: black;
28+
}
29+
30+
h1,
31+
h2,
32+
h3,
33+
h4,
34+
h5,
35+
h6,
36+
code {
37+
color: black;
38+
}
3939
}
4040

4141
.prose {
42-
max-width: 100%;
42+
max-width: 100%;
43+
}
44+
45+
.material-symbols-outlined {
46+
font-size: unset;
47+
}
48+
49+
pre code {
50+
background-color: transparent !important;
51+
scrollbar-track-color: transparent !important;
52+
padding: 0 !important;
4353
}

0 commit comments

Comments
 (0)