GithubProxy/coai
1
0
Fork 0
mirror of https://github.com/coaidev/coai.git synced 2025-06-06 05:40:25 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix badge css

Browse Source
This commit is contained in:
Zhang Minghan 2023-10-25 15:25:14 +08:00
parent 9c9d1cc65d
commit 8f600d5c7d
3 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/src/assets/ui.less
View File

@ -38,7 +38,7 @@
border-color: hsl(var(--border-hover)); border-color: hsl(var(--border-hover));
color: hsl(var(--background)); color: hsl(var(--background));
.badge { .select-element.badge {
&.badge-default { &.badge-default {
background: hsl(var(--background)) !important; background: hsl(var(--background)) !important;
color: hsl(var(--text)); color: hsl(var(--text));
@ -49,25 +49,25 @@
} }
} }
} }
}
.badge { }
user-select: none;
transition: .2s; .select-element.badge {
padding-left: 0.45rem; user-select: none;
padding-right: 0.45rem; transition: .2s;
padding-left: 0.45rem;
&.badge-default { padding-right: 0.45rem;
background: hsl(var(--primary)) !important;
&.badge-default {
&:hover { background: hsl(var(--primary)) !important;
background: hsl(var(--primary)) !important;
} &:hover {
} background: hsl(var(--primary)) !important;
}
&.badge-gold { }
color: rgb(164, 128, 0) !important;
background: rgb(255, 231, 145) !important; &.badge-gold {
} color: rgb(164, 128, 0) !important;
} background: rgb(255, 231, 145) !important;
} }
} }

2
app/src/components/SelectGroup.tsx
View File

@ -33,7 +33,7 @@ function GroupSelectItem(props: SelectItemProps) {
<> <>
{props.value} {props.value}
{props.badge && ( {props.badge && (
<Badge className={`badge ml-1 badge-${props.badge.variant}`}> <Badge className={`select-element badge ml-1 badge-${props.badge.variant}`}>
{props.badge.name} {props.badge.name}
</Badge> </Badge>
)} )}

18
app/src/utils.ts
View File

@ -1,18 +1,20 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { FileObject } from "./components/FileProvider.tsx"; import { FileObject } from "./components/FileProvider.tsx";
export let mobile = export let mobile = isMobile();
window.innerWidth <= 468 ||
window.innerHeight <= 468 ||
navigator.userAgent.includes("Mobile");
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
mobile = mobile = isMobile();
window.innerWidth <= 468 ||
window.innerHeight <= 468 ||
navigator.userAgent.includes("Mobile");
}); });
export function isMobile(): boolean {
return (
(document.documentElement.clientWidth || window.innerWidth) <= 668 ||
(document.documentElement.clientHeight || window.innerHeight) <= 468 ||
navigator.userAgent.includes("Mobile")
);
}
export function useEffectAsync<T>(effect: () => Promise<T>, deps?: any[]) { export function useEffectAsync<T>(effect: () => Promise<T>, deps?: any[]) {
return useEffect(() => { return useEffect(() => {
effect().catch((err) => effect().catch((err) =>