scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-02 03:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Updated the design of the article page (#8166)

Browse Source 
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Sivin Varghese
2023-11-09 07:35:13 +05:30
committed by GitHub
parent 950f085e80
commit f018b0013c
15 changed files with 115 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
app/javascript/portal/components/TableOfContents.vue
View File

@@ -1,20 +1,29 @@
<template>
<div class="hidden lg:block flex-1 scroll-mt-24 pl-4">
<div v-if="rows.length > 0" class="sticky top-24 py-12 overflow-auto">
<div class="hidden lg:block flex-1 py-6 scroll-mt-24 pl-4">
<div v-if="rows.length > 0" class="sticky top-24 py-2 overflow-auto">
<nav class="max-w-2xl">
<h2
id="on-this-page-title"
class="text-slate-800 dark:text-slate-50 font-semibold tracking-wide border-b mb-3 leading-7"
class="text-slate-800 pl-6 dark:text-slate-50 font-semibold tracking-wide py-3 leading-7 border-l-2 border-solid border-slate-100 dark:border-slate-800"
:class="{
'!border-slate-400 dark:!border-slate-100': !currentSlug,
}"
>
{{ tocHeader }}
</h2>
<ol role="list" class="mt-4 space-y-3 text-base">
<li v-for="element in rows" :key="element.slug" class="leading-6">
<ol role="list" class="text-base">
<li
v-for="element in rows"
:key="element.slug"
class="leading-6 py-2 pl-6 border-l-2 border-solid"
:class="elementBorderStyles(element)"
>
<p :class="getClassName(element)">
<a
:href="`#${element.slug}`"
data-turbolinks="false"
class="text-base text-slate-800 dark:text-slate-50 cursor-pointer"
class="text-base cursor-pointer"
:class="elementTextStyles(element)"
>
{{ element.title }}
</a>
@@ -33,6 +42,11 @@ export default {
default: () => [],
},
},
data() {
return {
currentSlug: window.location?.hash?.substring(1) || '',
};
},
computed: {
tocHeader() {
return window.portalConfig.tocHeader;
@@ -44,6 +58,12 @@ export default {
return this.rows.filter(el => el.tag === 'h2').length;
},
},
mounted() {
window.addEventListener('hashchange', this.onURLHashChange);
},
beforeDestroy() {
window.removeEventListener('hashchange', this.onURLHashChange);
},
methods: {
getClassName(el) {
if (el.tag === 'h1') {
@@ -65,6 +85,30 @@ export default {
return '';
},
onURLHashChange() {
this.currentSlug = window.location?.hash?.substring(1) || '';
},
isElementActive(el) {
return this.currentSlug === el.slug;
},
tocHeaderBorderStyles() {
if (this.currentSlug === '') {
return 'border-slate-400 dark:border-slate-100';
}
return 'border-slate-100 dark:border-slate-800';
},
elementBorderStyles(el) {
if (this.isElementActive(el)) {
return 'border-slate-400 dark:border-slate-50 transition-colors duration-200';
}
return 'border-slate-100 dark:border-slate-800';
},
elementTextStyles(el) {
if (this.isElementActive(el)) {
return 'font-semibold text-slate-900 dark:text-slate-25';
}
return 'text-slate-700 dark:text-slate-100';
},
},
};
</script>