diff --git a/craco.config.js b/craco.config.js index a3e300f..162bf7b 100644 --- a/craco.config.js +++ b/craco.config.js @@ -18,5 +18,12 @@ scss: path.resolve(__dirname, "src/scss/"), fontello: path.resolve(__dirname, "src/fontello/") } + }, + + // I use eslint in vscode - to save my CPU I'd rather just rely on using that + // to lint instead of the react-scripts watcher. + // TODO: run this for production builds, and add a separate command for it. + eslint: { + enable: false } -}; \ No newline at end of file +}; diff --git a/src/layouts/main/MainLayout.scss b/src/layouts/main/MainLayout.scss index fc59fa7..b8aa425 100644 --- a/src/layouts/main/MainLayout.scss +++ b/src/layouts/main/MainLayout.scss @@ -10,9 +10,7 @@ } #main-container { - padding-top: $navbar-height; - - overflow: scroll; + overflow: auto; height: calc(100% - #{$navbar-height}); diff --git a/src/shared-components/krist-value/KristValue.scss b/src/shared-components/krist-value/KristValue.scss index d27eb84..d421f75 100644 --- a/src/shared-components/krist-value/KristValue.scss +++ b/src/shared-components/krist-value/KristValue.scss @@ -3,6 +3,8 @@ .krist-value { font-size: 100%; + white-space: nowrap; + .icon-krist { /* Hack to make it consistent with Lato */ position: relative; @@ -23,4 +25,4 @@ content: " "; } } -} \ No newline at end of file +} diff --git a/src/shared-components/list-view/ColumnHeader.scss b/src/shared-components/list-view/ColumnHeader.scss index ab7e6ca..6bb67d3 100644 --- a/src/shared-components/list-view/ColumnHeader.scss +++ b/src/shared-components/list-view/ColumnHeader.scss @@ -3,19 +3,38 @@ .list-view table thead { user-select: none; - .column-sort { - margin-left: 0.25rem; - cursor: pointer; + th { + .header-container { + display: flex; + flex-direction: row; + + .header-name { + display: inline-block; + flex: 1; - &-asc, &-desc { - color: $body-color; - } + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } - &-none { - color: rgba($text-muted, 0.75); + .column-sort { + display: inline-block; + flex: 0; - &:hover { - color: $body-hover-color; + margin-left: 0.25rem; + cursor: pointer; + + &-asc, &-desc { + color: $body-color; + } + + &-none { + color: rgba($text-muted, 0.75); + + &:hover { + color: $body-hover-color; + } + } } } } diff --git a/src/shared-components/list-view/ColumnHeader.tsx b/src/shared-components/list-view/ColumnHeader.tsx index 59eb4d9..e612864 100644 --- a/src/shared-components/list-view/ColumnHeader.tsx +++ b/src/shared-components/list-view/ColumnHeader.tsx @@ -30,6 +30,9 @@ render(): ReactNode { const { headerSpec, sortDirection } = this.props; + // If 'nowrap' is undefined, then assume it is nowrap + const nowrap = headerSpec.nowrap === undefined ? true : headerSpec.nowrap; + // If 'sortable' is undefined, then assume it is sortable const sortable = headerSpec.sortable === undefined ? true : headerSpec.sortable; @@ -47,9 +50,13 @@ } }; - return - {t => t(headerSpec.nameKey)} - {sortable && sortButton()} - ; + return {t => + {/* in case the name got truncated */} +
+ {t(headerSpec.nameKey)} + {sortable && sortButton()} +
+ + }
; } } diff --git a/src/shared-components/list-view/ListTable.scss b/src/shared-components/list-view/ListTable.scss index d1a1e74..0467c85 100644 --- a/src/shared-components/list-view/ListTable.scss +++ b/src/shared-components/list-view/ListTable.scss @@ -15,4 +15,10 @@ pointer-events: none; } } + + tbody { + td { + vertical-align: middle; + } + } } diff --git a/src/shared-components/list-view/ListTable.tsx b/src/shared-components/list-view/ListTable.tsx index 56113e8..3f9699b 100644 --- a/src/shared-components/list-view/ListTable.tsx +++ b/src/shared-components/list-view/ListTable.tsx @@ -113,29 +113,29 @@ {!loading && <> Shop Wallet - kreichdyes - - 12 - Shops - 2020/09/11 08:08 + kreichdyes + + 12 + Shops + 2020/09/11 08:08 Main Wallet - khugepoopy - - 3 - - 2016/02/14 00:00 + khugepoopy + + 3 + + 2016/02/14 00:00 Old Wallet - kre3w0i79j - - 0 - - 2015/02/14 00:00 + kre3w0i79j + + 0 + + 2015/02/14 00:00 } diff --git a/src/shared-components/list-view/ListView.tsx b/src/shared-components/list-view/ListView.tsx index c7511e0..37093cf 100644 --- a/src/shared-components/list-view/ListView.tsx +++ b/src/shared-components/list-view/ListView.tsx @@ -18,6 +18,9 @@ nameKey: string; sortable?: boolean; + /* Whether or not a cell's contents should have text wrapping disabled + (default: true) */ + nowrap?: boolean; skeletonEmWidth?: number; }