ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-04-08 03:14:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added full page shift when hovered

Browse Source
This commit is contained in:
Saifeddine ALOUI 2025-04-03 00:00:10 +02:00
parent aadccffd11
commit e2eb82d759
6 changed files with 662 additions and 669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/dist/assets/index-Bh7FEesB.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

26
web/dist/assets/index-DAwgqLJU.css vendored
View File

File diff suppressed because one or more lines are too long

200
web/dist/assets/index-DOhp3qSl.js → web/dist/assets/index-DBWmPIc8.js vendored
View File

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -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-DOhp3qSl.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DAwgqLJU.css">
<script type="module" crossorigin src="/assets/index-DBWmPIc8.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Bh7FEesB.css">
</head>
<body>
<div id="app"></div>

84
web/src/App.vue
View File

@ -1,21 +1,83 @@
<template>
<div :class="currentTheme" class="flex flex-col h-screen font-sans background-color text-slate-950 dark:bg-bg-dark dark:text-slate-50 w-full overflow-hidden">
<TopBar/>
<div class="flex overflow-hidden flex-grow w-full">
<div :class="['flex flex-col h-screen font-sans background-color text-slate-950 dark:bg-bg-dark dark:text-slate-50 w-full overflow-hidden', currentThemeClass]">
<!-- TopBar Component - Remains fixed for animations -->
<TopBar @update:occupying-space="updateSpaceOccupation" />
<!--
Placeholder Div: REMOVED. We will directly translate the main content instead.
-->
<!-- <div
:class="[
'transition-height duration-300 ease-in-out',
shouldOccupySpace ? 'h-14' : 'h-0'
]"
></div> -->
<!-- Main Content Area -->
<!-- Apply dynamic transform and padding-top -->
<div :class="[
'flex overflow-hidden flex-grow w-full',
'transition-transform duration-300 ease-in-out', // Add transition for transform
shouldOccupySpace ? 'translate-y-14' : 'translate-y-0' // Translate down when TopBar is visible
]"
>
<!-- VIEW CONTAINER -->
<RouterView v-slot="{ Component }">
<KeepAlive>
<component :is="Component" />
</KeepAlive>
</RouterView>
<!-- Add padding-top to compensate for the translation so scroll container starts correctly -->
<div class="flex-1 overflow-y-auto" :class="[shouldOccupySpace ? 'pt-0' : 'pt-0']">
<RouterView v-slot="{ Component }">
<KeepAlive>
<component :is="Component" />
</KeepAlive>
</RouterView>
</div>
</div>
<!-- FOOTER -->
<!-- FOOTER (Optional) -->
<!-- <Footer /> -->
</div>
</template>
<script setup>
import { RouterView } from 'vue-router'
import TopBar from './components/TopBar.vue'
import { ref, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import { RouterView } from 'vue-router';
import TopBar from './components/TopBar.vue';
// import Footer from './components/Footer.vue';
const store = useStore();
// State to track if TopBar should be occupying visual space
const shouldOccupySpace = ref(false);
// Method to update state based on TopBar's effective visibility
const updateSpaceOccupation = (isOccupying) => {
shouldOccupySpace.value = isOccupying;
};
// Compute the current theme class (optional, depends on global styling)
const currentThemeClass = computed(() => {
return localStorage.getItem('preferred-theme') || 'default';
});
// Initialize state on mount
onMounted(() => {
// Initialize based on the initial pinned state from the store
shouldOccupySpace.value = store.state.isTopBarPinned ?? false;
// Initialize languages if not done elsewhere
if (!store.state.languages || store.state.languages.length <= 1) {
store.dispatch('initializeLanguages');
}
});
</script>
<style>
/* Ensure CSS transitions are defined if not using Tailwind defaults fully */
/* Tailwind handles transition-transform, duration, and ease */
/* Body/html overflow might need to be hidden if strange scrollbars appear */
/* html, body {
overflow: hidden;
} */
</style>

991
web/src/components/TopBar.vue
View File

File diff suppressed because it is too large Load Diff