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

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

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

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

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