ui fixes
This commit is contained in:
parent
d8f2e61a9c
commit
7f55db6ea1
@ -21,52 +21,56 @@ export const config = {
|
||||
}
|
||||
|
||||
function addClassesToHtml(htmlString) {
|
||||
// Helper function to add a class to a specific tag
|
||||
// Helper function to add a class to a specific tag
|
||||
function addClassToTag(tag, className) {
|
||||
// Add class if the tag doesn't already have a class attribute
|
||||
const regex = new RegExp(`<${tag}(?![^>]*\\bclass=)([^>]*)>`, 'g');
|
||||
htmlString = htmlString.replace(regex, `<${tag} class="${className}"$1>`);
|
||||
// Add class if the tag doesn't already have a class attribute
|
||||
const regex = new RegExp(`<${tag}(?![^>]*\\bclass=)([^>]*)>`, 'g');
|
||||
htmlString = htmlString.replace(regex, `<${tag} class="${className}"$1>`);
|
||||
|
||||
// Append the new class to tags that already have a class attribute, ensuring no duplicates
|
||||
const regexWithClass = new RegExp(`(<${tag}[^>]*\\bclass=["'][^"']*)(?!.*\\b${className}\\b)([^"']*)["']`, 'g');
|
||||
htmlString = removeDuplicateClasses(htmlString.replace(regexWithClass, `$1 ${className}$2"`));
|
||||
}
|
||||
// Add classes to headings
|
||||
addClassToTag('h1', 'text-2xl');
|
||||
addClassToTag('h2', 'text-xl');
|
||||
addClassToTag('h3', 'text-xl');
|
||||
addClassToTag('h4', 'text-md');
|
||||
addClassToTag('h5', 'text-sm');
|
||||
addClassToTag('h6', 'text-xs');
|
||||
// Append the new class to tags that already have a class attribute, ensuring no duplicates
|
||||
const regexWithClass = new RegExp(`(<${tag}[^>]*\\bclass=["'][^"']*)(?!.*\\b${className}\\b)([^"']*)["']`, 'g');
|
||||
htmlString = htmlString.replace(regexWithClass, `$1 ${className}$2"`);
|
||||
}
|
||||
|
||||
// Add classes to anchor tags
|
||||
addClassToTag('a', 'text-blue-400 hover:text-white underline');
|
||||
// Add classes to headings
|
||||
addClassToTag('h1', 'text-lg');
|
||||
addClassToTag('h2', 'text-lg');
|
||||
addClassToTag('h3', 'text-lg');
|
||||
addClassToTag('h4', 'text-lg');
|
||||
addClassToTag('h5', 'text-lg');
|
||||
addClassToTag('h6', 'text-lg');
|
||||
|
||||
// Add classes to ordered lists
|
||||
addClassToTag('ol', 'list-decimal ml-5 text-sm');
|
||||
// Add classes to anchor tags
|
||||
addClassToTag('a', 'text-blue-400 hover:text-white underline');
|
||||
|
||||
// Add classes to unordered lists
|
||||
addClassToTag('ul', 'list-disc ml-5 text-sm -mt-5');
|
||||
// Add classes to ordered lists
|
||||
addClassToTag('ol', 'list-decimal ml-10 text-sm');
|
||||
|
||||
// Add classes to blockquotes and their paragraphs
|
||||
function addClassToBlockquote() {
|
||||
// Add class to blockquote
|
||||
htmlString = htmlString.replace(
|
||||
'<blockquote',
|
||||
'<blockquote class="p-4 my-4 border-s-4 border-gray-400 bg-[#313131]"'
|
||||
);
|
||||
// Add classes to unordered lists
|
||||
addClassToTag('ul', 'list-disc ml-10 text-sm -mt-5');
|
||||
|
||||
// Add class to p inside blockquote
|
||||
htmlString = htmlString.replace(
|
||||
/<blockquote([^>]*)>\s*<p/g,
|
||||
`<blockquote$1>\n<p class="text-sm italic font-medium leading-relaxed text-white"`
|
||||
);
|
||||
}
|
||||
// Add classes to blockquotes and their paragraphs
|
||||
function addClassToBlockquote() {
|
||||
// Add class to blockquote
|
||||
htmlString = htmlString.replace(
|
||||
/<blockquote/g,
|
||||
'<blockquote class="pl-4 pr-4 rounded-lg bg-[#323232]"'
|
||||
);
|
||||
|
||||
addClassToBlockquote();
|
||||
// Add class to p inside blockquote
|
||||
htmlString = htmlString.replace(
|
||||
/<blockquote([^>]*)>\s*<p/g,
|
||||
`<blockquote$1>\n<p class="text-sm font-medium leading-relaxed text-white"`
|
||||
);
|
||||
}
|
||||
|
||||
return htmlString;
|
||||
}
|
||||
addClassToBlockquote();
|
||||
|
||||
// Remove duplicate classes after all modifications
|
||||
htmlString = removeDuplicateClasses(htmlString);
|
||||
|
||||
return htmlString;
|
||||
}
|
||||
|
||||
|
||||
export const load = async ({ locals}) => {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import {userRegion, screenWidth, numberOfUnreadNotification, scrollToComment } from '$lib/store';
|
||||
import {userRegion, numberOfUnreadNotification, scrollToComment } from '$lib/store';
|
||||
|
||||
export let data;
|
||||
export let form;
|
||||
@ -120,7 +120,7 @@ onMount(async () => {
|
||||
|
||||
|
||||
|
||||
<div class="w-full max-w-3xl m-auto min-h-screen bg-[#202020] sm:rounded-lg border border-gray-700 overflow-hidden sm:overflow-y-scroll scroller sm:max-h-[1100px] pt-5 sm:pb-10 sm:pt-10 sm:mt-3 mb-8">
|
||||
<div class="w-full max-w-3xl m-auto min-h-screen bg-[#202020] sm:rounded-lg sm:border sm:border-gray-700 overflow-hidden sm:overflow-y-scroll scroller sm:max-h-[1100px] pt-5 sm:pb-10 sm:pt-10 sm:mt-3 sm:mb-8">
|
||||
|
||||
<h1 class="pl-5 text-2xl text-white font-semibold mt-2 sm:mt-0">
|
||||
Notifications
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user