upgraded ui

This commit is contained in:
Saifeddine ALOUI 2023-07-25 22:34:47 +02:00
parent f0e0a9fee9
commit 005d1b19c2
8 changed files with 142 additions and 120 deletions

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

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -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>

View File

@ -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()">

View File

@ -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 ">
<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>
</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>
</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>
</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>
</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>
</li>
</ul>
</div>
<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="link-item">
Discussions
</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'settings' }" class="link-item">
Settings
</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'extensions' }" class="link-item">
Extensions
</RouterLink>
</li>
<li>
<RouterLink :to="{ name: 'training' }" class="link-item">
Training
</RouterLink>
</li>
<li>
<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>

View File

@ -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">

View File

@ -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 ">
@ -194,7 +194,7 @@
<div class="relative flex flex-row flex-grow mb-10 ">
<!-- DISCUSSION LIST -->
<div class="mx-4 flex flex-col flex-grow " :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
<div class="mx-4 flex flex-col flex-grow " :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
<div id="dis-list" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''"