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 18:20:14 -04:00
parent c2fec5a960
commit c61b516410
3 changed files with 48 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@ const emit = defineEmits<{
</script>
<template>
<section class="content-section">
<section class="table-section">
<div v-if="bookmarks.length" class="data-table">
<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>
@@ -41,13 +41,19 @@ const emit = defineEmits<{
</template>
<style scoped>
.table-section {
padding: 0;
}
.data-table {
display: flex;
flex-direction: column;
min-height: 100%;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 18px;
background: var(--panel-strong);
overflow: hidden;
border-radius: 22px;
background: var(--panel);
box-shadow: var(--shadow);
overflow: clip;
}
.bookmarks-grid {
@@ -58,9 +64,14 @@ const emit = defineEmits<{
}
.data-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 {

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

@@ -14,7 +14,7 @@ const emit = defineEmits<{
</script>
<template>
<section class="content-section">
<section class="table-section">
<div v-if="extensions.length" class="data-table">
<div class="data-table-header extensions-grid">
<div class="header-cell icon-cell">Icon</div>
@@ -52,13 +52,19 @@ const emit = defineEmits<{
</template>
<style scoped>
.table-section {
padding: 0;
}
.data-table {
display: flex;
flex-direction: column;
min-height: 100%;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 18px;
background: var(--panel-strong);
overflow: hidden;
border-radius: 22px;
background: var(--panel);
box-shadow: var(--shadow);
overflow: clip;
}
.extensions-grid {
@@ -69,9 +75,14 @@ const emit = defineEmits<{
}
.data-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 {

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

@@ -16,7 +16,7 @@ const emit = defineEmits<{
</script>
<template>
<section class="content-section">
<section class="table-section">
<div v-if="openProfileError" class="inline-error">
{{ openProfileError }}
</div>
@@ -63,13 +63,19 @@ const emit = defineEmits<{
</template>
<style scoped>
.table-section {
padding: 0;
}
.data-table {
display: flex;
flex-direction: column;
min-height: 100%;
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 18px;
background: var(--panel-strong);
overflow: hidden;
border-radius: 22px;
background: var(--panel);
box-shadow: var(--shadow);
overflow: clip;
}
.profiles-grid {
@@ -80,9 +86,14 @@ const emit = defineEmits<{
}
.data-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 {