From 11f9b1bebca921b254ecfe68e4a1e17964156e7a Mon Sep 17 00:00:00 2001 From: Cintia Sanchez Garcia Date: Tue, 16 Jan 2024 09:32:46 +0100 Subject: [PATCH] Some minor improvements in UI Signed-off-by: Cintia Sanchez Garcia --- web/package.json | 2 +- web/src/App.css | 6 +++-- web/src/layout/common/SVGIcon.tsx | 4 ++-- web/src/layout/common/Searchbar.tsx | 2 +- web/src/layout/common/Sidebar.tsx | 6 ++--- .../itemModal/AcquisitionsTable.module.css | 4 ++-- .../common/itemModal/Content.module.css | 2 +- web/src/layout/common/itemModal/Content.tsx | 2 +- .../itemModal/FundingRoundsTable.module.css | 4 ++-- .../common/itemModal/ItemModal.module.css | 2 +- .../common/itemModal/MobileContent.module.css | 2 +- .../layout/common/itemModal/MobileContent.tsx | 2 +- web/src/layout/explore/card/Card.tsx | 2 +- .../layout/explore/card/Content.module.css | 7 ++++++ web/src/layout/explore/card/Menu.tsx | 2 +- web/src/layout/explore/grid/Grid.module.css | 6 +++++ .../explore/grid/GridCategory.module.css | 11 --------- web/src/layout/explore/mobile/Card.tsx | 2 +- web/src/layout/finances/Finances.module.css | 2 +- web/src/layout/guide/ToC.tsx | 23 ++----------------- web/src/layout/guide/index.tsx | 5 +++- web/src/layout/navigation/Header.tsx | 3 +++ 22 files changed, 45 insertions(+), 56 deletions(-) diff --git a/web/package.json b/web/package.json index 0e04b5c4..39e87125 100644 --- a/web/package.json +++ b/web/package.json @@ -5,7 +5,7 @@ "type": "module", "scripts": { "build": "tsc && vite build", - "dev": "vite", + "dev": "vite --host", "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"", "format:diff": "prettier --list-different \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"", "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", diff --git a/web/src/App.css b/web/src/App.css index 9f9e7473..6473a56a 100644 --- a/web/src/App.css +++ b/web/src/App.css @@ -93,7 +93,8 @@ a, .noScroll-sidebar, .noScroll-modal, - .noScroll-loading { + .noScroll-loading, + .noScroll-dropdown { height: 100%; overflow: hidden; overflow-y: hidden !important; @@ -117,7 +118,8 @@ a, .noScroll-sidebar #landscape, .noScroll-modal #landscape, - .noScroll-loading #landscape { + .noScroll-loading #landscape, + .noScroll-dropdown #landscape { height: 100%; overflow: hidden; overflow-y: hidden !important; diff --git a/web/src/layout/common/SVGIcon.tsx b/web/src/layout/common/SVGIcon.tsx index 0f9b6127..e4292c92 100644 --- a/web/src/layout/common/SVGIcon.tsx +++ b/web/src/layout/common/SVGIcon.tsx @@ -780,12 +780,12 @@ const Twitter = (props: IconProps) => ( stroke="currentColor" fill="currentColor" stroke-width="0" - viewBox="0 0 16 16" + viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" > - + ); diff --git a/web/src/layout/common/Searchbar.tsx b/web/src/layout/common/Searchbar.tsx index 47643757..eccdf394 100644 --- a/web/src/layout/common/Searchbar.tsx +++ b/web/src/layout/common/Searchbar.tsx @@ -157,7 +157,7 @@ const Searchbar = (props: Props) => { const scrollToHighlightedItem = (index: number) => { const element = document.getElementById(`sl-opt${index}`); if (element && !isUndefined(dropdownRef())) { - element.scrollIntoView(false); + element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' }); } }; diff --git a/web/src/layout/common/Sidebar.tsx b/web/src/layout/common/Sidebar.tsx index 048c0186..541281c8 100644 --- a/web/src/layout/common/Sidebar.tsx +++ b/web/src/layout/common/Sidebar.tsx @@ -26,7 +26,7 @@ export interface Props { const DEFAULT_DIRECTION = 'left'; export const Sidebar = (props: Props) => { - const open = () => props.open; + const open = () => props.open || false; const [openStatus, setOpenStatus] = createSignal(false); const direction = () => props.direction || DEFAULT_DIRECTION; const [ref, setRef] = createSignal(); @@ -42,9 +42,7 @@ export const Sidebar = (props: Props) => { createEffect( on(open, () => { - if (!isUndefined(open())) { - setOpenStatus(open()!); - } + setOpenStatus(open()); }) ); diff --git a/web/src/layout/common/itemModal/AcquisitionsTable.module.css b/web/src/layout/common/itemModal/AcquisitionsTable.module.css index 2cafbfd9..651a6dc5 100644 --- a/web/src/layout/common/itemModal/AcquisitionsTable.module.css +++ b/web/src/layout/common/itemModal/AcquisitionsTable.module.css @@ -11,7 +11,7 @@ } .tableContent td { - font-size: 0.9rem; + font-size: 0.8rem; line-height: 2; } @@ -35,7 +35,7 @@ } .tableContent td { - font-size: 0.75rem; + font-size: 0.7rem; line-height: 1.5; } diff --git a/web/src/layout/common/itemModal/Content.module.css b/web/src/layout/common/itemModal/Content.module.css index bc25e8a1..ad617242 100644 --- a/web/src/layout/common/itemModal/Content.module.css +++ b/web/src/layout/common/itemModal/Content.module.css @@ -123,7 +123,7 @@ } .tableContent td { - font-size: 0.9rem; + font-size: 0.8rem; line-height: 2; } diff --git a/web/src/layout/common/itemModal/Content.tsx b/web/src/layout/common/itemModal/Content.tsx index de31f07a..0020ad5d 100644 --- a/web/src/layout/common/itemModal/Content.tsx +++ b/web/src/layout/common/itemModal/Content.tsx @@ -163,7 +163,7 @@ const Content = (props: Props) => { - + diff --git a/web/src/layout/common/itemModal/FundingRoundsTable.module.css b/web/src/layout/common/itemModal/FundingRoundsTable.module.css index 2cafbfd9..651a6dc5 100644 --- a/web/src/layout/common/itemModal/FundingRoundsTable.module.css +++ b/web/src/layout/common/itemModal/FundingRoundsTable.module.css @@ -11,7 +11,7 @@ } .tableContent td { - font-size: 0.9rem; + font-size: 0.8rem; line-height: 2; } @@ -35,7 +35,7 @@ } .tableContent td { - font-size: 0.75rem; + font-size: 0.7rem; line-height: 1.5; } diff --git a/web/src/layout/common/itemModal/ItemModal.module.css b/web/src/layout/common/itemModal/ItemModal.module.css index 88114526..4ff6a023 100644 --- a/web/src/layout/common/itemModal/ItemModal.module.css +++ b/web/src/layout/common/itemModal/ItemModal.module.css @@ -133,7 +133,7 @@ } .tableContent td { - font-size: 0.9rem; + font-size: 0.8rem; line-height: 2; } diff --git a/web/src/layout/common/itemModal/MobileContent.module.css b/web/src/layout/common/itemModal/MobileContent.module.css index 2061700d..6fb3d293 100644 --- a/web/src/layout/common/itemModal/MobileContent.module.css +++ b/web/src/layout/common/itemModal/MobileContent.module.css @@ -158,7 +158,7 @@ } .tableContent td { - font-size: 0.9rem; + font-size: 0.7rem; line-height: 2; } diff --git a/web/src/layout/common/itemModal/MobileContent.tsx b/web/src/layout/common/itemModal/MobileContent.tsx index fbd7e4ff..d63337d3 100644 --- a/web/src/layout/common/itemModal/MobileContent.tsx +++ b/web/src/layout/common/itemModal/MobileContent.tsx @@ -116,7 +116,7 @@ const MobileContent = (props: Props) => { - + diff --git a/web/src/layout/explore/card/Card.tsx b/web/src/layout/explore/card/Card.tsx index 305ae59f..3df61961 100644 --- a/web/src/layout/explore/card/Card.tsx +++ b/web/src/layout/explore/card/Card.tsx @@ -122,7 +122,7 @@ const Card = (props: Props) => { - + diff --git a/web/src/layout/explore/card/Content.module.css b/web/src/layout/explore/card/Content.module.css index 48f2b054..34aeabbe 100644 --- a/web/src/layout/explore/card/Content.module.css +++ b/web/src/layout/explore/card/Content.module.css @@ -46,4 +46,11 @@ .btnIcon { line-height: 0.8rem; margin-top: -2px; + cursor: pointer; +} + +@media (hover: hover) { + .btnIcon:hover { + opacity: 0.8; + } } diff --git a/web/src/layout/explore/card/Menu.tsx b/web/src/layout/explore/card/Menu.tsx index f0041390..67658a58 100644 --- a/web/src/layout/explore/card/Menu.tsx +++ b/web/src/layout/explore/card/Menu.tsx @@ -81,10 +81,10 @@ const Menu = (props: Props) => { onClick={() => { // When menu sticky, we need to check #landscape goToElement(!props.sticky, `card_${hash}`, 16); - updateRoute(hash); if (!isUndefined(props.onClickOption)) { props.onClickOption(); } + updateRoute(hash); }} > diff --git a/web/src/layout/explore/grid/Grid.module.css b/web/src/layout/explore/grid/Grid.module.css index 95542d1a..dc69e63e 100644 --- a/web/src/layout/explore/grid/Grid.module.css +++ b/web/src/layout/explore/grid/Grid.module.css @@ -20,3 +20,9 @@ grid-auto-rows: var(--card-size-height); gap: var(--card-gap); } + +@media (hover: hover) { + .btnIcon:hover { + opacity: 0.8; + } +} diff --git a/web/src/layout/explore/grid/GridCategory.module.css b/web/src/layout/explore/grid/GridCategory.module.css index b3c566ed..d11bafbc 100644 --- a/web/src/layout/explore/grid/GridCategory.module.css +++ b/web/src/layout/explore/grid/GridCategory.module.css @@ -12,17 +12,6 @@ max-height: 130px; } -.btnIcon { - font-size: 0.9rem; - line-height: 0.8rem; -} - -.btnInCatTitle { - transform: rotate(180deg); - line-height: 1.25rem; - margin-right: -0.25rem; -} - .icon { margin-top: -2px; font-size: 0.9rem; diff --git a/web/src/layout/explore/mobile/Card.tsx b/web/src/layout/explore/mobile/Card.tsx index d9305f72..07979eb2 100644 --- a/web/src/layout/explore/mobile/Card.tsx +++ b/web/src/layout/explore/mobile/Card.tsx @@ -104,7 +104,7 @@ const Card = (props: Props) => { - + diff --git a/web/src/layout/finances/Finances.module.css b/web/src/layout/finances/Finances.module.css index 3aeae88b..5cd45c97 100644 --- a/web/src/layout/finances/Finances.module.css +++ b/web/src/layout/finances/Finances.module.css @@ -55,7 +55,7 @@ } .tableContent td { - font-size: 0.75rem; + font-size: 0.7rem; line-height: 1.5; } } diff --git a/web/src/layout/guide/ToC.tsx b/web/src/layout/guide/ToC.tsx index 029e1b40..9a9edde9 100644 --- a/web/src/layout/guide/ToC.tsx +++ b/web/src/layout/guide/ToC.tsx @@ -10,14 +10,12 @@ interface Props { sticky: boolean; activeTitle?: string; updateActiveTitle: (activeTitle: string) => void; - onClickOption?: () => void; } interface OptionProps { option: ToCTitle; level: number; updateActiveTitle: (activeTitle: string) => void; - onClickOption?: () => void; } const ToCOption = (props: OptionProps) => { @@ -36,9 +34,6 @@ const ToCOption = (props: OptionProps) => { }} onClick={() => { props.updateActiveTitle(props.option.id); - if (!isUndefined(props.onClickOption)) { - props.onClickOption(); - } }} > {props.option.title} @@ -47,14 +42,7 @@ const ToCOption = (props: OptionProps) => {
{(el: ToCTitle) => { - return ( - - ); + return ; }}
@@ -76,14 +64,7 @@ const ToC = (props: Props) => { diff --git a/web/src/layout/guide/index.tsx b/web/src/layout/guide/index.tsx index b1a2c6ea..f29d4384 100644 --- a/web/src/layout/guide/index.tsx +++ b/web/src/layout/guide/index.tsx @@ -148,6 +148,9 @@ const GuideIndex = () => { const updateActiveTitle = (title: string, onLoad?: boolean) => { updateRoute(title); + if (onSmallDevice) { + onCloseMenu(); + } if (title === firstItem()) { scrollToTop(onSmallDevice); } else { @@ -186,7 +189,7 @@ const GuideIndex = () => { >
}> - +
diff --git a/web/src/layout/navigation/Header.tsx b/web/src/layout/navigation/Header.tsx index 4b35ba9e..571e5146 100644 --- a/web/src/layout/navigation/Header.tsx +++ b/web/src/layout/navigation/Header.tsx @@ -76,6 +76,7 @@ const Header = () => { navigate('/', { state: { from: 'header' }, }); + scrollToTop(false); } }} > @@ -93,6 +94,7 @@ const Header = () => { navigate('/guide', { state: { from: 'header' }, }); + scrollToTop(false); } }} > @@ -110,6 +112,7 @@ const Header = () => { navigate('/stats', { state: { from: 'header' }, }); + scrollToTop(false); } }} >