Vasanko/cista-storage
Vasanko/cista-storage
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

File explorer CSS, avoid modified/size being cut

Browse Source
This commit is contained in:
Leo Vasanko 2023-11-18 07:32:40 -08:00
parent de482afd60
commit ba9495eb65
3 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/assets/main.css
View File

@ -92,7 +92,7 @@
nav, nav,
.menu, .menu,
.rename-button { .rename-button {
display: none; display: none !important;
} }
.breadcrumb > a { .breadcrumb > a {
color: black !important; color: black !important;
@ -113,6 +113,7 @@
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
thead tr { thead tr {
font-size: 1rem !important;
position: static !important; position: static !important;
background: none !important; background: none !important;
border-bottom: 1pt solid black !important; border-bottom: 1pt solid black !important;

35
frontend/src/components/FileExplorer.vue
View File

@ -137,10 +137,6 @@ defineExpose({
console.log('Select') console.log('Select')
allSelected.value = !allSelected.value allSelected.value = !allSelected.value
}, },
toggleSortColumn(column: number) {
const order = ['', 'name', 'modified', 'size', ''][column]
if (order) store.toggleSort(order as SortOrder)
},
isCursor() { isCursor() {
return store.cursor && editing.value === null return store.cursor && editing.value === null
}, },
@ -309,29 +305,36 @@ tbody tr {
position: relative; position: relative;
z-index: auto; z-index: auto;
} }
table thead input[type='checkbox'] { table thead .selection input[type='checkbox'] {
position: inherit; position: inherit;
width: 1em; width: 1rem;
height: 1em; height: 1rem;
padding: 0.5rem 0.5em; padding: 0;
margin: auto;
} }
table tbody input[type='checkbox'] { table tbody .selection input[type='checkbox'] {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
} }
table .selection { table .selection {
width: 2rem; width: 3rem;
text-align: center; text-align: center;
text-overflow: clip; text-overflow: clip;
padding: 0;
}
table .selection input {
margin: auto;
} }
table .modified { table .modified {
width: 9em; width: 10rem;
text-overflow: clip;
} }
table .size { table .size {
width: 5em; width: 7rem;
text-overflow: clip;
} }
table .menu { table .menu {
width: 1rem; width: 2rem;
} }
tbody td { tbody td {
font-size: 1.2rem; font-size: 1.2rem;
@ -366,7 +369,7 @@ table td {
} }
} }
thead tr { thead tr {
font-size: var(--header-font-size); font-size: 0.8rem;
background: linear-gradient(to bottom, #eee, #fff 30%, #ddd); background: linear-gradient(to bottom, #eee, #fff 30%, #ddd);
color: #000; color: #000;
box-shadow: 0 0 .2rem black; box-shadow: 0 0 .2rem black;
@ -387,9 +390,11 @@ tbody tr.cursor {
padding-right: 1.5rem; padding-right: 1.5rem;
} }
.sortcolumn::after { .sortcolumn::after {
font-size: 1rem;
content: '▸'; content: '▸';
color: #888; color: #888;
margin-left: 0.5em; margin-left: 0.5rem;
margin-top: -.2rem;
position: absolute; position: absolute;
transition: all var(--transition-time) linear; transition: all var(--transition-time) linear;
} }

2
frontend/src/components/HeaderSelected.vue
View File

@ -150,6 +150,6 @@ const download = async () => {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin: 0;
} }
</style> </style>
@/stores/main