Isaac_Aracena/glm-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Actualizar diseño del Hub

Browse Source
This commit is contained in:
Isaac Aracena
2026-07-29 19:01:13 -04:00
parent 580fb5bc6c
commit 96e831ea01
7 changed files with 298 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/assets/index-9ByAKvcq.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
dist/assets/index-B0NLzVcn.js
Vendored
+179
View File
File diff suppressed because one or more lines are too long
dist/assets/index-Bjd4VYUU.css
Vendored
-1
View File
File diff suppressed because one or more lines are too long
dist/assets/index-CRkChX-P.js
Vendored
-179
View File
File diff suppressed because one or more lines are too long
dist/index.html
Vendored
+2 -2
View File
@@ -9,8 +9,8 @@
<link rel="shortcut icon" type="image/png" href="https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM.png?v=glm-hub-20260722-v3" /> <link rel="shortcut icon" type="image/png" href="https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM.png?v=glm-hub-20260722-v3" />
<link rel="apple-touch-icon" href="https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM.png?v=glm-hub-20260722-v3" /> <link rel="apple-touch-icon" href="https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM.png?v=glm-hub-20260722-v3" />
<title>GLM Hub — GomezLee Marketing</title> <title>GLM Hub — GomezLee Marketing</title>
<script type="module" crossorigin src="/assets/index-CRkChX-P.js"></script> <script type="module" crossorigin src="/assets/index-B0NLzVcn.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-Bjd4VYUU.css"> <link rel="stylesheet" crossorigin href="/assets/index-9ByAKvcq.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
src/App.tsx
+47 -2
View File
@@ -876,11 +876,22 @@ interface HubViewProps {
} }
function HubView({ user, data, storageWarning, onActivate, onFavorite, onAdmin, onRequestAccess }: HubViewProps) { function HubView({ user, data, storageWarning, onActivate, onFavorite, onAdmin, onRequestAccess }: HubViewProps) {
const [search, setSearch] = useState(""); const [categorySearches, setCategorySearches] = useState<Record<string, string>>({
Todas: "",
Administración: "",
"Recursos Humanos": "",
CDC: "",
});
const [category, setCategory] = useState<"Todas" | AppCategory>("Todas"); const [category, setCategory] = useState<"Todas" | AppCategory>("Todas");
const [favoritesOnly, setFavoritesOnly] = useState(false); const [favoritesOnly, setFavoritesOnly] = useState(false);
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [quickPage, setQuickPage] = useState(1); const [quickPage, setQuickPage] = useState(1);
const search = categorySearches[category] ?? "";
const setSearch = (value: string) => {
setCategorySearches((prev) => ({ ...prev, [category]: value }));
};
const deferredSearch = useDeferredValue(search); const deferredSearch = useDeferredValue(search);
const dateLabel = useCurrentDateLabel(); const dateLabel = useCurrentDateLabel();
const canManageCatalog = user.role === "admin"; const canManageCatalog = user.role === "admin";
@@ -980,7 +991,12 @@ function HubView({ user, data, storageWarning, onActivate, onFavorite, onAdmin,
}; };
const clearFilters = () => { const clearFilters = () => {
setSearch(""); setCategorySearches({
Todas: "",
Administración: "",
"Recursos Humanos": "",
CDC: "",
});
setCategory("Todas"); setCategory("Todas");
setFavoritesOnly(false); setFavoritesOnly(false);
}; };
@@ -1075,6 +1091,30 @@ function HubView({ user, data, storageWarning, onActivate, onFavorite, onAdmin,
</button> </button>
))} ))}
</div> </div>
<div className="filter-bar__search">
<Search size={16} aria-hidden="true" />
<label className="sr-only" htmlFor="directory-search-input">
{`Buscar por nombre de proyecto en ${category}`}
</label>
<input
id="directory-search-input"
type="search"
value={search}
onChange={(event) => setSearch(event.target.value)}
placeholder={
category === "Todas"
? "Buscar por nombre de proyecto…"
: `Buscar en ${category}…`
}
/>
{search ? (
<button type="button" onClick={() => setSearch("")} aria-label="Limpiar búsqueda">
<X size={15} aria-hidden="true" />
</button>
) : null}
</div>
<button <button
type="button" type="button"
className={`favorites-filter ${favoritesOnly ? "is-active" : ""}`} className={`favorites-filter ${favoritesOnly ? "is-active" : ""}`}
@@ -1199,6 +1239,11 @@ function AdminAppList({ apps, selectedId, onSelect, onDelete }: AdminAppListProp
<Search size={17} aria-hidden="true" /> <Search size={17} aria-hidden="true" />
<label htmlFor="admin-search" className="sr-only">Buscar en el catálogo</label> <label htmlFor="admin-search" className="sr-only">Buscar en el catálogo</label>
<input id="admin-search" type="search" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Buscar…" /> <input id="admin-search" type="search" value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Buscar…" />
{query ? (
<button type="button" onClick={() => setQuery("")} aria-label="Limpiar búsqueda">
<X size={15} aria-hidden="true" />
</button>
) : null}
</div> </div>
<div className="admin-list__items"> <div className="admin-list__items">
{currentPage === 1 ? ( {currentPage === 1 ? (
src/styles.css
+69 -2
View File
@@ -54,6 +54,15 @@ select {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
appearance: none;
display: none;
}
button { button {
color: inherit; color: inherit;
} }
@@ -1140,8 +1149,9 @@ img {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 20px; gap: 16px;
margin-bottom: 18px; margin-bottom: 18px;
flex-wrap: wrap;
} }
.category-filters { .category-filters {
@@ -1150,6 +1160,53 @@ img {
gap: 4px; gap: 4px;
} }
.filter-bar__search {
flex: 1;
max-width: 360px;
min-width: 220px;
min-height: 42px;
display: grid;
grid-template-columns: 18px 1fr auto;
align-items: center;
gap: 10px;
border: 1px solid var(--line);
border-radius: 2px;
background: #ffffff;
padding: 0 12px;
color: var(--glm-blue);
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.filter-bar__search:focus-within {
border-color: var(--glm-blue);
box-shadow: 0 0 0 1px var(--glm-blue);
}
.filter-bar__search input {
width: 100%;
height: 40px;
border: 0;
outline: 0;
background: transparent;
color: var(--text);
font-size: 0.82rem;
}
.filter-bar__search input::placeholder {
color: #8a8a8a;
}
.filter-bar__search button {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border: 0;
background: transparent;
color: var(--glm-blue);
padding: 0;
}
.category-filters button, .category-filters button,
.favorites-filter { .favorites-filter {
min-height: 44px; min-height: 44px;
@@ -1593,7 +1650,7 @@ img {
.admin-list__search { .admin-list__search {
display: grid; display: grid;
grid-template-columns: 20px 1fr; grid-template-columns: 20px 1fr auto;
align-items: center; align-items: center;
gap: 9px; gap: 9px;
margin: 14px; margin: 14px;
@@ -1612,6 +1669,16 @@ img {
font-size: 0.77rem; font-size: 0.77rem;
} }
.admin-list__search button {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border: 0;
background: transparent;
color: var(--glm-blue);
}
.admin-list__items { .admin-list__items {
min-height: 0; min-height: 0;
flex: 1; flex: 1;