julian/chrom-tool
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix table ui

Browse Source
This commit is contained in:
Julian Freeman
2026-04-16 19:38:46 -04:00
parent c8e1641896
commit 16eb25d552
6 changed files with 79 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/browser-data/AssociatedProfilesModal.vue
View File

@@ -42,7 +42,7 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
</button>
</div>
<div class="modal-table">
<div class="modal-table styled-scrollbar">
<div class="modal-table-header modal-grid" :class="{ bookmark: isBookmark }">
<div class="header-cell icon-cell">Avatar</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="sortKey = 'name'">Name</button>
@@ -51,7 +51,6 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
<div class="header-cell actions-cell">Action</div>
</div>
<div class="modal-list">
<article
v-for="profile in sortedProfiles"
:key="profile.id"
@@ -91,7 +90,6 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
</div>
</article>
</div>
</div>
</section>
</div>
</template>
@@ -139,10 +137,10 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 18px;
background: var(--panel-strong);
overflow: hidden;
}
.modal-grid {
@@ -157,9 +155,14 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
}
.modal-table-header {
position: sticky;
top: 0;
z-index: 2;
padding: 10px 14px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(248, 250, 252, 0.82);
background: rgba(248, 250, 252, 0.94);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.header-cell {
@@ -180,13 +183,6 @@ function hasBookmarkPath(profile: ModalProfile): profile is BookmarkAssociatedPr
color: var(--text);
}
.modal-list {
display: flex;
flex-direction: column;
min-height: 0;
overflow: auto;
}
.modal-table-row {
padding: 12px 14px;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);

9
src/components/browser-data/BookmarksList.vue
View File

@@ -14,7 +14,7 @@ const emit = defineEmits<{
<template>
<section class="table-section">
<div v-if="bookmarks.length" class="data-table">
<div v-if="bookmarks.length" class="data-table styled-scrollbar">
<div class="data-table-header bookmarks-grid">
<button class="header-cell sortable" :class="{ active: sortKey === 'title' }" type="button" @click="emit('update:sortKey', 'title')">Name</button>
<button class="header-cell sortable" :class="{ active: sortKey === 'url' }" type="button" @click="emit('update:sortKey', 'url')">URL</button>
@@ -43,17 +43,20 @@ const emit = defineEmits<{
<style scoped>
.table-section {
padding: 0;
height: 100%;
min-height: 0;
}
.data-table {
display: flex;
flex-direction: column;
min-height: 100%;
height: 100%;
min-height: 0;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 22px;
background: var(--panel);
box-shadow: var(--shadow);
overflow: clip;
overflow: auto;
}
.bookmarks-grid {

9
src/components/browser-data/BrowserDataView.vue
View File

@@ -163,4 +163,13 @@ const emit = defineEmits<{
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 240, 255, 0.92));
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}
.content-scroll-area {
display: flex;
}
.content-scroll-area > * {
flex: 1;
min-height: 0;
}
</style>

9
src/components/browser-data/ExtensionsList.vue
View File

@@ -15,7 +15,7 @@ const emit = defineEmits<{
<template>
<section class="table-section">
<div v-if="extensions.length" class="data-table">
<div v-if="extensions.length" class="data-table styled-scrollbar">
<div class="data-table-header extensions-grid">
<div class="header-cell icon-cell">Icon</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
@@ -54,17 +54,20 @@ const emit = defineEmits<{
<style scoped>
.table-section {
padding: 0;
height: 100%;
min-height: 0;
}
.data-table {
display: flex;
flex-direction: column;
min-height: 100%;
height: 100%;
min-height: 0;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 22px;
background: var(--panel);
box-shadow: var(--shadow);
overflow: clip;
overflow: auto;
}
.extensions-grid {

9
src/components/browser-data/ProfilesList.vue
View File

@@ -23,7 +23,7 @@ const emit = defineEmits<{
{{ openProfileError }}
</div>
<div v-if="profiles.length" class="data-table">
<div v-if="profiles.length" class="data-table styled-scrollbar">
<div class="data-table-header profiles-grid">
<div class="header-cell icon-cell">Avatar</div>
<button class="header-cell sortable" :class="{ active: sortKey === 'name' }" type="button" @click="emit('update:sortKey', 'name')">Name</button>
@@ -71,17 +71,20 @@ const emit = defineEmits<{
<style scoped>
.table-section {
padding: 0;
height: 100%;
min-height: 0;
}
.data-table {
display: flex;
flex-direction: column;
min-height: 100%;
height: 100%;
min-height: 0;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 22px;
background: var(--panel);
box-shadow: var(--shadow);
overflow: clip;
overflow: auto;
}
.profiles-grid {

15
src/styles/app.css
View File

@@ -86,8 +86,8 @@
.content-scroll-area {
min-height: 0;
overflow: auto;
padding-right: 2px;
overflow: hidden;
padding-right: 0;
}
.count-pill,
@@ -175,23 +175,24 @@
}
.browser-nav,
.content-scroll-area {
.styled-scrollbar {
scrollbar-width: thin;
scrollbar-color: rgba(100, 116, 139, 0.42) transparent;
}
.content-scroll-area::-webkit-scrollbar {
.styled-scrollbar::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.content-scroll-area::-webkit-scrollbar-track {
.styled-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.content-scroll-area::-webkit-scrollbar-thumb {
.styled-scrollbar::-webkit-scrollbar-thumb {
border: 3px solid transparent;
border-radius: 999px;
background: linear-gradient(180deg, rgba(148, 163, 184, 0.72), rgba(100, 116, 139, 0.58));
background-clip: padding-box;
}
.content-scroll-area::-webkit-scrollbar-thumb:hover {
.styled-scrollbar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(100, 116, 139, 0.82), rgba(71, 85, 105, 0.72));
background-clip: padding-box;
}