ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-18 20:17:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

upgraded ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2023-08-25 22:42:21 +02:00
parent 1d947e33b2
commit 5b22aaadfb
4 changed files with 41 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/dist/assets/index-76ec0c11.js → web/dist/assets/index-65a3d3a9.js vendored
View File

File diff suppressed because one or more lines are too long

2
web/dist/assets/index-5b957acd.css → web/dist/assets/index-6bbcffe7.css vendored
View File

@ -1,4 +1,4 @@
.container{margin:0;padding:0}.link-item{padding:0 20px;margin-bottom:-5px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:5px 5px 0 0;font-weight:700;background-color:#82a1d4;color:#000;transition:duration-300 ease-in-out transform}.link-item:hover{background-color:#3dabff;animation-timing-function:ease-in-out}.link-item.router-link-active{background-color:#b9d2f7}.link-item-dark{padding:0 20px;margin-bottom:-5px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:5px 5px 0 0;font-weight:700;background-color:#132e59;color:#000;transition:duration-300 ease-in-out transform}.link-item-dark:hover{background-color:#0cc96a;animation-timing-function:ease-in-out}.link-item-dark.router-link-active{background-color:#25477d}.nav-ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;height:100%}.nav-li{cursor:pointer;display:flex;align-items:center;padding:5px}.dot{width:10px;height:10px;border-radius:50%}.dot-green{background-color:green}.dot-red{background-color:red}.toastItem-enter-active[data-v-3ffdabf3],.toastItem-leave-active[data-v-3ffdabf3]{transition:all .5s ease}.toastItem-enter-from[data-v-3ffdabf3],.toastItem-leave-to[data-v-3ffdabf3]{opacity:0;transform:translate(-30px)}.hljs-comment,.hljs-quote{color:#7285b7}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ff9da4}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#ffc58f}.hljs-attribute{color:#ffeead}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#d1f1a9}.hljs-section,.hljs-title{color:#bbdaff}.hljs-keyword,.hljs-selector-tag{color:#ebbbff}.hljs{background:#002451;color:#fff}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*! .container{margin:0;padding:0}.link-item{height:25px;margin-top:5px;padding:0 20px;margin-bottom:-5px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:5px 5px 0 0;font-weight:700;background-color:#82a1d4;color:#000;transition:duration-300 ease-in-out transform}.link-item:hover{background-color:#3dabff;animation-timing-function:ease-in-out}.link-item.router-link-active{height:30px;margin-top:0;background-color:#b9d2f7}.link-item-dark{padding:0 20px;margin-bottom:-5px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:5px 5px 0 0;font-weight:700;background-color:#132e59;color:#000;transition:duration-300 ease-in-out transform}.link-item-dark:hover{background-color:#0cc96a;animation-timing-function:ease-in-out}.link-item-dark.router-link-active{background-color:#25477d}.nav-ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;height:100%}.nav-li{cursor:pointer;display:flex;align-items:center;padding:5px}.dot{width:10px;height:10px;border-radius:50%}.dot-green{background-color:green}.dot-red{background-color:red}.toastItem-enter-active[data-v-3ffdabf3],.toastItem-leave-active[data-v-3ffdabf3]{transition:all .5s ease}.toastItem-enter-from[data-v-3ffdabf3],.toastItem-leave-to[data-v-3ffdabf3]{opacity:0;transform:translate(-30px)}.hljs-comment,.hljs-quote{color:#7285b7}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#ff9da4}.hljs-built_in,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#ffc58f}.hljs-attribute{color:#ffeead}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#d1f1a9}.hljs-section,.hljs-title{color:#bbdaff}.hljs-keyword,.hljs-selector-tag{color:#ebbbff}.hljs{background:#002451;color:#fff}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
Theme: Tokyo-night-Dark Theme: Tokyo-night-Dark
origin: https://github.com/enkia/tokyo-night-vscode-theme origin: https://github.com/enkia/tokyo-night-vscode-theme
Description: Original highlight.js style Description: Original highlight.js style

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI - Welcome</title> <title>LoLLMS WebUI - Welcome</title>
<script type="module" crossorigin src="/assets/index-76ec0c11.js"></script> <script type="module" crossorigin src="/assets/index-65a3d3a9.js"></script>
<link rel="stylesheet" href="/assets/index-5b957acd.css"> <link rel="stylesheet" href="/assets/index-6bbcffe7.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

34
web/src/components/Navigation.vue
View File

@ -1,43 +1,29 @@
<template> <template>
<div v-if="$store.state.ready" class="container flex flex-col sm:flex-row items-center"> <div v-if="$store.state.ready" class="container flex flex-col sm:flex-row items-center">
<div class="w-full"> <div class="w-full">
<ul class="flex flex-row font-medium nav-ul"> <div class="flex flex-row font-medium nav-ul">
<li class="nav-li">
<RouterLink :to="{ name: 'discussions' }" class="link-item dark:link-item-dark"> <RouterLink :to="{ name: 'discussions' }" class="link-item dark:link-item-dark">
Discussions Discussions
</RouterLink> </RouterLink>
</li>
<li class="nav-li">
<RouterLink :to="{ name: 'playground' }" class="link-item dark:link-item-dark"> <RouterLink :to="{ name: 'playground' }" class="link-item dark:link-item-dark">
Playground Playground
</RouterLink> </RouterLink>
</li>
<li class="nav-li">
<RouterLink :to="{ name: 'settings' }" class="link-item dark:link-item-dark"> <RouterLink :to="{ name: 'settings' }" class="link-item dark:link-item-dark">
Settings Settings
</RouterLink> </RouterLink>
</li>
<li class="nav-li">
<RouterLink :to="{ name: 'extensions' }" class="link-item dark:link-item-dark"> <RouterLink :to="{ name: 'extensions' }" class="link-item dark:link-item-dark">
Extensions Extensions
</RouterLink> </RouterLink>
</li>
<li class="nav-li">
<RouterLink :to="{ name: 'training' }" class="link-item dark:link-item-dark"> <RouterLink :to="{ name: 'training' }" class="link-item dark:link-item-dark">
Training Training
</RouterLink> </RouterLink>
</li>
<li class="nav-li">
<RouterLink :to="{ name: 'quantizing' }" class="link-item dark:link-item-dark"> <RouterLink :to="{ name: 'quantizing' }" class="link-item dark:link-item-dark">
Quantizing Quantizing
</RouterLink> </RouterLink>
</li>
<li class="nav-li">
<RouterLink :to="{ name: 'help' }" class="link-item dark:link-item-dark"> <RouterLink :to="{ name: 'help' }" class="link-item dark:link-item-dark">
Help Help
</RouterLink> </RouterLink>
</li> </div>
</ul>
</div> </div>
</div> </div>
</template> </template>
@ -57,6 +43,8 @@
} }
.link-item { .link-item {
height: 25px;
margin-top: 5px;
/* Thin out the links */ /* Thin out the links */
padding: 0px 20px; padding: 0px 20px;
margin-bottom: -5px; /* Removes the gap between li elements */ margin-bottom: -5px; /* Removes the gap between li elements */
@ -86,14 +74,17 @@
/* Optional: Change the color when the link is active */ /* Optional: Change the color when the link is active */
.link-item.router-link-active { .link-item.router-link-active {
height: 30px;
margin-top: 0px;
background-color: #b9d2f7; /* Use your theme's 'bg-dark-tone' color for active link in dark mode */ background-color: #b9d2f7; /* Use your theme's 'bg-dark-tone' color for active link in dark mode */
} }
.link-item-dark { .link-item-dark {
/* Thin out the links */ /* Thin out the links */
padding: 0px 20px; padding: 0px 20px;
color: aliceblue;
margin-bottom: -5px; /* Removes the gap between li elements */ margin-bottom: -5px; /* Removes the gap between li elements */
display: flex; display: flex;
align-items: center; align-items: center;
@ -103,8 +94,7 @@
font-weight: bold; /* Optional: Add font-weight for emphasis */ font-weight: bold; /* Optional: Add font-weight for emphasis */
/* Use different colors for dark and light modes */ /* Use different colors for dark and light modes */
background-color: #132e59; /* Use your theme's 'bg-light-tone' color for light mode */ background-color: #000000; /* Use your theme's 'bg-light-tone' color for light mode */
color: #000; /* Use your theme's 'primary' color for light mode */
/* Animate the links when hovered */ /* Animate the links when hovered */
@ -119,12 +109,12 @@
} }
/* Optional: Change the color when the link is active */
.link-item-dark.router-link-active { .link-item-dark.router-link-active {
background-color: #25477d; /* Use your theme's 'bg-dark-tone' color for active link in dark mode */ height: 30px;
margin-top: 0px;
background-color: #2b74e2; /* Use your theme's 'bg-dark-tone' color for active link in dark mode */
} }
/* Ensure each li extends to the bottom of its container */ /* Ensure each li extends to the bottom of its container */
.nav-ul { .nav-ul {