From e732eed98a15b40535e448d89125f02206535411 Mon Sep 17 00:00:00 2001 From: Geometrically <18202329+Geometrically@users.noreply.github.com> Date: Fri, 21 Apr 2023 12:58:30 -0700 Subject: [PATCH] Fix tables (#44) --- lib/assets/styles/classes.scss | 63 +++++++++++++++++----------------- package.json | 4 +-- 2 files changed, 33 insertions(+), 34 deletions(-) diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss index 0578cd2e0..b19dee7e3 100644 --- a/lib/assets/styles/classes.scss +++ b/lib/assets/styles/classes.scss @@ -469,17 +469,33 @@ a, // TABLE .table { - .table-container { - display: grid; - grid-template-rows: repeat(auto-fill, auto); - width: 100%; - border-radius: var(--radius-md); - overflow: hidden; - } + display: grid; + grid-template-rows: repeat(auto-fill, auto); + width: 100%; + border-radius: var(--radius-md); + overflow: hidden; .table-row { display: grid; - grid-template-columns: 1fr 4fr 1.5fr; + + transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, scale 0.05s ease-in-out, + outline 0.2s ease-in-out; + + &.selectable:focus-visible, + &.selectable:hover { + cursor: pointer; + filter: brightness(0.85); + } + + &.selectable:active { + filter: brightness(0.8); + scale: 0.99; + } + } + + .entire-row { + grid-template-columns: 1fr !important; + align-items: center; } .table-head { @@ -491,42 +507,25 @@ a, .table-cell { padding: 1rem; height: 100%; - align-items: center; vertical-align: center; display: flex; } + .name-cell { + padding-left: 0; + } + .table-text { overflow: hidden; white-space: nowrap; - text-overflow: ellipsis; - display: flex; - - span { - display: inline-block; - text-overflow: ellipsis; - overflow: hidden; - } + text-overflow: fade; } - button { - width: 100%; - display: flex; - align-items: center; - justify-content: center; - - span { - display: inherit; - align-items: center; - justify-content: center; - } + .table-row:nth-child(even) .table-cell { + background-color: var(--color-bg); } } -.table-row:nth-child(even) .table-cell { - background-color: var(--color-bg); -} - // CUSTOM COMPONENTS // TODO: MOST OF THESE SHOULD BE MOVED TO AN OMORPHIA COMPONENT .textarea-wrapper { diff --git a/package.json b/package.json index b13680807..b79b1c7ed 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "omorphia", "type": "module", - "version": "0.4.8", + "version": "0.4.9", "files": [ "dist" ], @@ -18,7 +18,7 @@ "build": "vite build", "lint:js": "eslint --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue .", "lint": "npm run lint:js && prettier --check .", - "fix": "eslint --fix --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue .", + "fix": "eslint --fix --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue . && prettier --write .", "docs:dev": "vitepress dev docs", "docs:build": "vitepress build docs", "docs:preview": "vitepress preview docs"