mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-20 04:47:55 +00:00
upgraded ui
This commit is contained in:
Saifeddine ALOUI
parent
f0e0a9fee9
commit
005d1b19c2
8
web/dist/assets/index-06783a3a.css
vendored
8
web/dist/assets/index-06783a3a.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-e1cab70f.css
vendored
Normal file
8
web/dist/assets/index-e1cab70f.css
vendored
Normal file
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 @@
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LoLLMS WebUI - Welcome</title>
|
||||
<script type="module" crossorigin src="/assets/index-adcb4d8c.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-06783a3a.css">
|
||||
<script type="module" crossorigin src="/assets/index-63f9e2d9.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-e1cab70f.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div :class="selected ? 'bg-bg-light-discussion dark:bg-bg-dark-discussion shadow-md' : ''"
|
||||
<div :class="selected ? 'bg-bg-light-discussion dark:bg-bg-dark-discussion shadow-md min-w-[23rem] max-w-[23rem]' : ' min-w-[23rem] max-w-[23rem]'"
|
||||
class=" flex flex-row sm:flex-row flex-wrap flex-shrink: 0 item-center shadow-sm gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer"
|
||||
:id="'dis-' + id" @click.stop="selectEvent()">
|
||||
|
||||
|
||||
@ -1,71 +1,93 @@
|
||||
<template>
|
||||
<div v-if="$store.state.ready" class="container flex flex-col sm:flex-row item-center gapx-2 pb-0 py-0 ">
|
||||
<div class="items-center justify-between w-full flex-row md:w-auto md:order-1">
|
||||
<ul class="flex flex-row font-medium mb-0 pb-0 mt-4 space-x-8 ">
|
||||
|
||||
<div v-if="$store.state.ready" class="container flex flex-col sm:flex-row items-center">
|
||||
<div class="w-full">
|
||||
<ul class="flex flex-row font-medium">
|
||||
<li>
|
||||
<RouterLink :to="{ name: 'discussions' }" class="px-2 pb-0"
|
||||
active-class="px-2 pb-0 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
|
||||
<a href="#" class=" hover:text-primary duration-150">Discussions</a>
|
||||
<RouterLink :to="{ name: 'discussions' }" class="link-item">
|
||||
Discussions
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink :to="{ name: 'settings' }" class="px-2 pb-0"
|
||||
active-class="px-2 pb-0 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
|
||||
<a href="#" class=" hover:text-primary duration-150">Settings</a>
|
||||
<RouterLink :to="{ name: 'settings' }" class="link-item">
|
||||
Settings
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink :to="{ name: 'extensions' }" class="px-2 pb-0"
|
||||
active-class="px-2 pb-0 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
|
||||
<a href="#" class=" hover:text-primary duration-150">Extensions</a>
|
||||
</RouterLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<RouterLink :to="{ name: 'training' }" class="px-2 pb-0"
|
||||
active-class="px-2 pb-0 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
|
||||
<a href="#" class=" hover:text-primary duration-150">Training</a>
|
||||
<RouterLink :to="{ name: 'extensions' }" class="link-item">
|
||||
Extensions
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink :to="{ name: 'quantizing' }" class="px-2 pb-0"
|
||||
active-class="px-2 pb-0 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
|
||||
<a href="#" class=" hover:text-primary duration-150">Quantizing</a>
|
||||
<RouterLink :to="{ name: 'training' }" class="link-item">
|
||||
Training
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink :to="{ name: 'help' }" class="px-2 pb-0"
|
||||
active-class="px-2 pb-0 bg-bg-light-tone dark:bg-bg-dark-tone rounded-t-lg ">
|
||||
<a href="#" class=" hover:text-primary duration-150">Help</a>
|
||||
<RouterLink :to="{ name: 'quantizing' }" class="link-item">
|
||||
Quantizing
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink :to="{ name: 'help' }" class="link-item">
|
||||
Help
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick } from 'vue'
|
||||
import feather from 'feather-icons'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { store } from '../main';
|
||||
<script setup>
|
||||
import { nextTick } from 'vue';
|
||||
import feather from 'feather-icons';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import { store } from '../main';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
/* Remove margin and padding */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
/* Thin out the links */
|
||||
padding: 0px 20px;
|
||||
margin-bottom: -5px; /* Removes the gap between li elements */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid transparent; /* Ensure all links have the same height */
|
||||
border-radius: 5px 5px 0 0; /* Rounded corners on the top */
|
||||
font-weight: bold; /* Optional: Add font-weight for emphasis */
|
||||
|
||||
/* Use different colors for dark and light modes */
|
||||
background-color: #b9d2f7; /* Use your theme's 'bg-light-tone' color for light mode */
|
||||
color: #000; /* Use your theme's 'primary' color for light mode */
|
||||
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
activated() {
|
||||
/* Animate the links when hovered */
|
||||
transition: duration-300 ease-in-out transform;
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
|
||||
.link-item:hover {
|
||||
background-color: #3dabff; /* Use your theme's 'primary-light' color for the hover effect */
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
/* Optional: Change the color when the link is active */
|
||||
.link-item.router-link-active {
|
||||
background-color: #82a1d4; /* Use your theme's 'bg-dark-tone' color for active link in dark mode */
|
||||
}
|
||||
|
||||
/* Ensure each li extends to the bottom of its container */
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- <link v-if="codeBlockStylesheet" rel="stylesheet" :href="codeBlockStylesheet"> -->
|
||||
<header class=" top-0 shadow-lg">
|
||||
<nav class="container flex flex-col lg:flex-row item-center gap-2 py-0 ">
|
||||
<nav class="container flex flex-col lg:flex-row item-center gap-2 pb-0 ">
|
||||
<!-- LOGO -->
|
||||
<RouterLink :to="{ name: 'discussions' }">
|
||||
<div class="flex items-center gap-3 flex-1">
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
<!-- LEFT SIDE PANEL -->
|
||||
<div id="leftPanel" class="flex flex-col flex-grow overflow-y-scroll no-scrollbar "
|
||||
@dragover.stop.prevent="setDropZoneDiscussion()">
|
||||
<div class=" sticky z-10 top-0 bg-bg-light-tone dark:bg-bg-dark-tone shadow-md">
|
||||
<div class=" sticky z-10 top-0 bg-bg-light-tone dark:bg-bg-dark-tone shadow-md ">
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user