mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-04-13 22:02:58 +00:00
Upgraded help webui
This commit is contained in:
Saifeddine ALOUI
parent
4736c6f2ca
commit
f83e4f2d92
@ -1 +1 @@
|
||||
Subproject commit 73fd400ec10b3aeb136b9dc9cd7966ca2cc49adb
|
||||
Subproject commit 69abf262fc380ec0903a58abd0950c53a70bd76d
|
||||
17
web/dist/assets/index-BHdxPy4b.css
vendored
Normal file
17
web/dist/assets/index-BHdxPy4b.css
vendored
Normal file
File diff suppressed because one or more lines are too long
17
web/dist/assets/index-DQXGFUSs.css
vendored
17
web/dist/assets/index-DQXGFUSs.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
web/dist/index.html
vendored
4
web/dist/index.html
vendored
@ -6,8 +6,8 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LoLLMS WebUI</title>
|
||||
<script type="module" crossorigin src="/assets/index-CE4DVwaQ.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-DQXGFUSs.css">
|
||||
<script type="module" crossorigin src="/assets/index-Dt6gkR_r.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-BHdxPy4b.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
<template>
|
||||
<div class="help-view bg-gradient-to-br from-gray-100 to-blue-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex">
|
||||
<div class="help-view bg-gradient-to-br from-gray-50 to-blue-100 dark:from-gray-900 dark:to-blue-950 min-h-screen flex overflow-hidden">
|
||||
<!-- Left Sidebar -->
|
||||
<div class="left-bar w-64 bg-white dark:bg-gray-800 shadow-lg p-6 fixed h-full overflow-y-auto transition-all duration-300 md:w-72 lg:w-80">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-6">Help Topics</h2>
|
||||
<ul class="space-y-3">
|
||||
<div class="left-bar w-72 bg-white dark:bg-gray-800 shadow-2xl p-6 fixed h-screen overflow-y-auto transition-all duration-500 ease-in-out md:w-80 lg:w-96 z-10">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8 flex items-center">
|
||||
<span class="mr-2">🗂️</span> Help Topics
|
||||
</h2>
|
||||
<ul class="space-y-4">
|
||||
<li v-for="(section, index) in helpSections" :key="index">
|
||||
<a @click.prevent="scrollToSection(index)" class="block p-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-blue-100 dark:hover:bg-gray-700 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 cursor-pointer">
|
||||
<a @click.prevent="selectSection(index)" class="block p-4 rounded-xl text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700/50 hover:bg-blue-500 dark:hover:bg-blue-600 hover:text-white dark:hover:text-white transition-all duration-300 cursor-pointer shadow-sm" :class="{ 'bg-blue-500 text-white dark:bg-blue-600': selectedSection === index }">
|
||||
{{ section.title }}
|
||||
</a>
|
||||
</li>
|
||||
@ -13,24 +15,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content ml-64 md:ml-72 lg:ml-80 flex-1 p-8">
|
||||
<div class="big-card bg-white dark:bg-gray-900 rounded-xl shadow-md p-8 max-w-4xl mx-auto">
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-gray-100 mb-8 flex items-center">
|
||||
<span class="mr-2">📚</span> LoLLMs Help
|
||||
<div class="main-content ml-72 md:ml-80 lg:ml-96 flex-1 p-10 overflow-y-auto h-screen flex items-center justify-center">
|
||||
<div class="big-card bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-10 w-full h-full max-w-6xl mx-auto flex flex-col">
|
||||
<h1 class="text-5xl font-extrabold text-gray-900 dark:text-white mb-10 flex items-center">
|
||||
<span class="mr-3">📖</span> LoLLMs Help Center
|
||||
</h1>
|
||||
<div class="help-sections-container space-y-6">
|
||||
<div v-for="(section, index) in helpSections" :key="index" :id="'section-' + index" class="help-section bg-gray-50 dark:bg-gray-800 rounded-lg p-6 transition-all duration-300">
|
||||
<h2 @click="toggleSection(index)" class="menu-item cursor-pointer flex justify-between items-center text-xl font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400">
|
||||
{{ section.title }}
|
||||
<span class="toggle-icon text-gray-500 dark:text-gray-400">{{ section.isOpen ? '▼' : '▶' }}</span>
|
||||
</h2>
|
||||
<transition name="fade">
|
||||
<div v-if="section.isOpen" class="help-content mt-4 text-gray-600 dark:text-gray-300 prose dark:prose-invert">
|
||||
<div v-html="section.content"></div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
<div class="help-content flex-1 overflow-y-auto text-gray-700 dark:text-gray-300 prose dark:prose-invert max-w-none transition-opacity duration-500" v-html="selectedContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -43,21 +33,18 @@ export default {
|
||||
name: 'HelpView',
|
||||
data() {
|
||||
return {
|
||||
helpSections: []
|
||||
helpSections: [],
|
||||
selectedSection: 0, // Default to the first section
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectedContent() {
|
||||
return this.helpSections[this.selectedSection]?.content || 'Select a topic from the sidebar to view help content.';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleSection(index) {
|
||||
this.helpSections[index].isOpen = !this.helpSections[index].isOpen;
|
||||
},
|
||||
scrollToSection(index) {
|
||||
this.helpSections.forEach((section, i) => {
|
||||
section.isOpen = i === index; // Open only the clicked section
|
||||
});
|
||||
const element = document.getElementById(`section-${index}`);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
selectSection(index) {
|
||||
this.selectedSection = index;
|
||||
},
|
||||
async loadMarkdownFile(filename) {
|
||||
try {
|
||||
@ -88,8 +75,7 @@ export default {
|
||||
const content = await this.loadMarkdownFile(section.file);
|
||||
this.helpSections.push({
|
||||
title: section.title,
|
||||
content: content,
|
||||
isOpen: false
|
||||
content: content
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -113,7 +99,7 @@ export default {
|
||||
}
|
||||
|
||||
.left-bar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.left-bar::-webkit-scrollbar-track {
|
||||
@ -124,6 +110,7 @@ export default {
|
||||
.left-bar::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #f1f1f1;
|
||||
}
|
||||
|
||||
.left-bar::-webkit-scrollbar-thumb:hover {
|
||||
@ -132,60 +119,57 @@ export default {
|
||||
|
||||
/* Main Content Styling */
|
||||
.main-content {
|
||||
@apply transition-all duration-300;
|
||||
@apply transition-all duration-500;
|
||||
}
|
||||
|
||||
.big-card {
|
||||
@apply transform transition-all duration-300 hover:shadow-xl;
|
||||
@apply transform transition-all duration-300 hover:shadow-2xl;
|
||||
}
|
||||
|
||||
.help-sections-container {
|
||||
@apply max-h-[70vh] overflow-y-auto;
|
||||
}
|
||||
|
||||
.help-section {
|
||||
@apply hover:bg-gray-100 dark:hover:bg-gray-700;
|
||||
}
|
||||
|
||||
/* Fade Transition */
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
.help-content {
|
||||
@apply p-4;
|
||||
}
|
||||
|
||||
/* Scrollbar Styling for Main Content */
|
||||
.help-sections-container::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
.main-content::-webkit-scrollbar,
|
||||
.help-content::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.help-sections-container::-webkit-scrollbar-track {
|
||||
.main-content::-webkit-scrollbar-track,
|
||||
.help-content::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.help-sections-container::-webkit-scrollbar-thumb {
|
||||
.main-content::-webkit-scrollbar-thumb,
|
||||
.help-content::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #f1f1f1;
|
||||
border-radius: 12px;
|
||||
border: 3px solid #f1f1f1;
|
||||
}
|
||||
|
||||
.help-sections-container::-webkit-scrollbar-thumb:hover {
|
||||
.main-content::-webkit-scrollbar-thumb:hover,
|
||||
.help-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.left-bar {
|
||||
@apply w-full fixed top-0 left-0 h-auto z-10 transform -translate-x-full md:translate-x-0 md:w-64;
|
||||
@apply w-64 fixed top-0 left-0 h-screen z-20 transform -translate-x-full md:translate-x-0 md:w-72;
|
||||
}
|
||||
.main-content {
|
||||
@apply ml-0;
|
||||
@apply ml-0 p-6;
|
||||
}
|
||||
.left-bar.open {
|
||||
@apply translate-x-0;
|
||||
}
|
||||
.big-card {
|
||||
@apply p-6;
|
||||
}
|
||||
h1 {
|
||||
@apply text-4xl;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user