From 7e346ea2b135bd274c16f9f649cef17dfa132d65 Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Mon, 17 Jul 2023 16:42:10 +0000 Subject: [PATCH] improve layout & space use --- packages/app/constants/defaultTheme.json | 2 +- .../src/components/Layout/sidebar/index.less | 2 +- .../src/components/Layout/toolsBar/index.less | 6 +- .../src/components/MarkdownReader/index.jsx | 4 - .../components/Music/PlaylistView/index.jsx | 12 - .../components/Music/PlaylistView/index.less | 16 +- .../app/src/components/PagePanels/index.jsx | 6 +- .../app/src/components/PagePanels/index.less | 9 +- .../app/src/components/Searcher/index.less | 2 - packages/app/src/layout.jsx | 2 + .../app/src/pages/account/index.mobile.jsx | 4 - packages/app/src/pages/index.mobile.jsx | 4 + .../pages/music/components/explore/index.jsx | 8 +- .../pages/music/components/explore/index.less | 3 - packages/app/src/pages/play/[play_id].jsx | 4 - packages/app/src/pages/play/index.less | 200 ------------- .../app/src/pages/post/[post_id].mobile.jsx | 2 + packages/app/src/router.jsx | 14 +- packages/app/src/theme/index.less | 269 ++++++++---------- 19 files changed, 152 insertions(+), 417 deletions(-) delete mode 100755 packages/app/src/pages/play/index.less diff --git a/packages/app/constants/defaultTheme.json b/packages/app/constants/defaultTheme.json index 3220de89..37c9557f 100755 --- a/packages/app/constants/defaultTheme.json +++ b/packages/app/constants/defaultTheme.json @@ -8,7 +8,7 @@ "backgroundImage": "", "fontFamily": "'Inter', sans-serif", "layoutMargin": "unset", - "layoutPadding": "20px", + "layoutPadding": "20px 20px 20px 20px", "borderRadius": "8px", "text-color-white": "#d2d2d2", "text-color-black": "#000000", diff --git a/packages/app/src/components/Layout/sidebar/index.less b/packages/app/src/components/Layout/sidebar/index.less index 8966c6be..146d31f0 100755 --- a/packages/app/src/components/Layout/sidebar/index.less +++ b/packages/app/src/components/Layout/sidebar/index.less @@ -1,7 +1,7 @@ @import "theme/vars.less"; .app_sidebar_wrapper { - position: relative; + position: sticky; left: 0; top: 0; diff --git a/packages/app/src/components/Layout/toolsBar/index.less b/packages/app/src/components/Layout/toolsBar/index.less index 3b14b124..3b9766f7 100644 --- a/packages/app/src/components/Layout/toolsBar/index.less +++ b/packages/app/src/components/Layout/toolsBar/index.less @@ -1,5 +1,8 @@ .tools-bar { - position: relative; + position: sticky; + + top: 0; + right: 0; display: flex; flex-direction: column; @@ -13,7 +16,6 @@ gap: 20px; - &.visible { padding: 20px; } diff --git a/packages/app/src/components/MarkdownReader/index.jsx b/packages/app/src/components/MarkdownReader/index.jsx index 5a1c5752..48784dfc 100644 --- a/packages/app/src/components/MarkdownReader/index.jsx +++ b/packages/app/src/components/MarkdownReader/index.jsx @@ -20,10 +20,6 @@ export default (props) => { React.useEffect(() => { app.layout.toggleCenteredContent(true) - - return () => { - app.layout.toggleCenteredContent(false) - } }, []) if (E_Doc) { diff --git a/packages/app/src/components/Music/PlaylistView/index.jsx b/packages/app/src/components/Music/PlaylistView/index.jsx index 92fed3f2..418871fc 100644 --- a/packages/app/src/components/Music/PlaylistView/index.jsx +++ b/packages/app/src/components/Music/PlaylistView/index.jsx @@ -113,18 +113,6 @@ export default (props) => { socketName: "music", }) - React.useEffect(() => { - if (props.centered) { - app.layout.toggleCenteredContent(true) - } - - return () => { - if (props.centered) { - app.layout.toggleCenteredContent(false) - } - } - }, []) - if (!playlist) { return } diff --git a/packages/app/src/components/Music/PlaylistView/index.less b/packages/app/src/components/Music/PlaylistView/index.less index 210abd55..e46ffccf 100755 --- a/packages/app/src/components/Music/PlaylistView/index.less +++ b/packages/app/src/components/Music/PlaylistView/index.less @@ -8,6 +8,8 @@ html { width: 100%; + padding: 0 10px !important; + .play_info_wrapper { position: relative; @@ -29,10 +31,6 @@ html { } } } - - .list { - padding: 30px 0; - } } } } @@ -45,11 +43,11 @@ html { width: 100%; + gap: 20px; + &.vertical { flex-direction: column; - overflow-y: overlay; - .play_info_wrapper { width: 100%; @@ -59,7 +57,7 @@ html { flex-direction: row; width: 100%; - box-shadow: @card-shadow; + //box-shadow: @card-shadow; .play_info_cover { height: 15vh !important; @@ -85,8 +83,6 @@ html { } .play_info_wrapper { - position: sticky; - top: 0; left: 0; @@ -224,8 +220,6 @@ html { color: var(--text-color); - padding: 20px 30px; - gap: 10px; width: 100%; diff --git a/packages/app/src/components/PagePanels/index.jsx b/packages/app/src/components/PagePanels/index.jsx index 1a3cc890..a151cdee 100755 --- a/packages/app/src/components/PagePanels/index.jsx +++ b/packages/app/src/components/PagePanels/index.jsx @@ -62,9 +62,9 @@ export class PagePanelWithNavMenu extends React.Component { if (app.isMobile) { app.layout.top_bar.shouldUseTopBarSpacer(false) - } else { - app.layout.toggleCenteredContent(true) } + + app.layout.toggleCenteredContent(true) } componentWillUnmount() { @@ -72,8 +72,6 @@ export class PagePanelWithNavMenu extends React.Component { if (app.isMobile) { app.layout.top_bar.shouldUseTopBarSpacer(true) - } else { - app.layout.toggleCenteredContent(false) } } diff --git a/packages/app/src/components/PagePanels/index.less b/packages/app/src/components/PagePanels/index.less index bdea1f1f..d46e27c6 100755 --- a/packages/app/src/components/PagePanels/index.less +++ b/packages/app/src/components/PagePanels/index.less @@ -21,12 +21,8 @@ html { align-items: center; justify-content: flex-start; - overflow: unset; - overflow-x: visible; - overflow-y: overlay; - width: 100%; - height: max-content; + //height: max-content; padding: 0; @@ -65,7 +61,6 @@ html { grid-row-gap: 0px; width: 100%; - height: 100%; .panel { position: sticky; @@ -80,8 +75,6 @@ html { gap: 20px; - overflow: hidden; - &.full { height: 100%; } diff --git a/packages/app/src/components/Searcher/index.less b/packages/app/src/components/Searcher/index.less index 950d4ab3..48166f08 100755 --- a/packages/app/src/components/Searcher/index.less +++ b/packages/app/src/components/Searcher/index.less @@ -131,8 +131,6 @@ html { flex-direction: row; flex-wrap: wrap; - width: 50vw; - gap: 10px; &.one_column { diff --git a/packages/app/src/layout.jsx b/packages/app/src/layout.jsx index b7164895..80e7e3a4 100755 --- a/packages/app/src/layout.jsx +++ b/packages/app/src/layout.jsx @@ -67,6 +67,8 @@ export default class Layout extends React.PureComponent { if (app.cores.settings.get("reduceAnimations")) { this.layoutInterface.toggleRootContainerClassname("reduce-animations", true) } + + this.layoutInterface.toggleCenteredContent(true) } componentWillUnmount() { diff --git a/packages/app/src/pages/account/index.mobile.jsx b/packages/app/src/pages/account/index.mobile.jsx index 975f0e3b..61e0f850 100644 --- a/packages/app/src/pages/account/index.mobile.jsx +++ b/packages/app/src/pages/account/index.mobile.jsx @@ -64,10 +64,6 @@ export default class Account extends React.Component { this.loadUser() } - componentWillUnmount = () => { - app.layout.toggleCenteredContent(false) - } - toggleLike = async () => { const accept = await new Promise((resolve, reject) => { antd.Modal.confirm({ diff --git a/packages/app/src/pages/index.mobile.jsx b/packages/app/src/pages/index.mobile.jsx index 23280601..13d37b4a 100644 --- a/packages/app/src/pages/index.mobile.jsx +++ b/packages/app/src/pages/index.mobile.jsx @@ -5,6 +5,10 @@ import { PagePanelWithNavMenu } from "components/PagePanels" import Tabs from "./home/tabs" export default class Home extends React.Component { + componentDidMount() { + app.layout.toggleCenteredContent(false) + } + render() { return { const [searchResults, setSearchResults] = React.useState(false) React.useEffect(() => { - if (app.isMobile) { - app.layout.toggleCenteredContent(true) - } + app.layout.toggleCenteredContent(true) app.layout.page_panels.attachComponent("music_navbar", MusicNavbar, { props: { @@ -259,10 +257,6 @@ export default (props) => { if (app.layout.page_panels) { app.layout.page_panels.detachComponent("music_navbar") } - - if (app.isMobile) { - app.layout.toggleCenteredContent(false) - } } }, []) diff --git a/packages/app/src/pages/music/components/explore/index.less b/packages/app/src/pages/music/components/explore/index.less index 080e5392..c1ad9edb 100755 --- a/packages/app/src/pages/music/components/explore/index.less +++ b/packages/app/src/pages/music/components/explore/index.less @@ -15,9 +15,6 @@ display: flex; flex-direction: column; - overflow-x: visible; - overflow-y: overlay; - width: 100%; height: 100%; diff --git a/packages/app/src/pages/play/[play_id].jsx b/packages/app/src/pages/play/[play_id].jsx index 5e8a403e..553bba63 100755 --- a/packages/app/src/pages/play/[play_id].jsx +++ b/packages/app/src/pages/play/[play_id].jsx @@ -5,8 +5,6 @@ import PlaylistsModel from "models/playlists" import PlaylistView from "components/Music/PlaylistView" -import "./index.less" - export default (props) => { const play_id = props.params.play_id @@ -19,8 +17,6 @@ export default (props) => { return null }) - console.log(response) - if (response) { setPlaylist(response) } diff --git a/packages/app/src/pages/play/index.less b/packages/app/src/pages/play/index.less deleted file mode 100755 index cd7b0b72..00000000 --- a/packages/app/src/pages/play/index.less +++ /dev/null @@ -1,200 +0,0 @@ -html { - &.mobile { - .playlist_view { - display: flex; - flex-direction: column; - - width: 100%; - - .play_info_wrapper { - position: relative; - - width: 100%; - - .play_info { - width: 100%; - - .play_info_cover { - width: 30vh; - height: 30vh; - - img { - width: 100%; - height: 100%; - - object-fit: contain; - } - } - } - } - - .list { - padding: 30px 0; - } - } - } -} - -.playlist_view { - display: flex; - flex-direction: row; - - align-items: flex-start; - - width: 100%; - - .play_info_wrapper { - position: sticky; - - top: 0; - left: 0; - - display: flex; - flex-direction: column; - - align-items: center; - justify-content: center; - - width: fit-content; - height: fit-content; - - color: var(--text-color); - - .play_info { - display: flex; - flex-direction: column; - - align-self: center; - - height: 100%; - - padding: 20px; - - background-color: var(--background-color-accent); - border-radius: 12px; - - .play_info_cover { - display: flex; - flex-direction: column; - - align-items: center; - justify-content: center; - - align-self: center; - - width: 20vw; - height: 20vw; - - max-width: 400px; - max-height: 400px; - - background-color: black; - border-radius: 12px; - overflow: hidden; - - img { - width: 100%; - height: 100%; - - object-fit: contain; - } - } - - .play_info_details { - padding: 20px; - - .play_info_title { - font-size: 1.5rem; - font-family: "Space Grotesk", sans-serif; - - h1 { - margin: 0; - } - - word-break: break-all; - - font-weight: 600; - - margin-bottom: 10px; - } - - .play_info_description { - font-size: 0.8rem; - font-weight: 400; - } - - .play_info_statistics { - display: flex; - flex-direction: column; - - margin-top: 20px; - - background-color: var(--background-color-primary); - - padding: 20px; - - border-radius: 8px; - - .play_info_statistics_item { - display: flex; - flex-direction: row; - - align-items: center; - - margin-bottom: 10px; - - h1, - h2, - h3, - h4, - h5, - h6, - p, - span { - margin: 0; - } - - .play_info_statistics_item_icon { - margin-right: 10px; - } - - .play_info_statistics_item_text { - font-size: 0.8rem; - font-weight: 400; - } - - &:last-child { - margin-bottom: 0; - } - } - - } - } - } - } - - .list { - display: flex; - flex-direction: column; - - color: var(--text-color); - - padding: 20px 30px; - - gap: 10px; - - width: 100%; - - h1 { - margin: 0; - } - - .list_header { - display: flex; - flex-direction: row; - - align-items: center; - justify-content: space-between; - } - } -} \ No newline at end of file diff --git a/packages/app/src/pages/post/[post_id].mobile.jsx b/packages/app/src/pages/post/[post_id].mobile.jsx index e333a899..ca7e1780 100755 --- a/packages/app/src/pages/post/[post_id].mobile.jsx +++ b/packages/app/src/pages/post/[post_id].mobile.jsx @@ -29,6 +29,8 @@ export default (props) => { } React.useEffect(() => { + app.layout.toggleCenteredContent(false) + loadData() }, []) diff --git a/packages/app/src/router.jsx b/packages/app/src/router.jsx index ff60070e..f716d6fd 100755 --- a/packages/app/src/router.jsx +++ b/packages/app/src/router.jsx @@ -45,10 +45,10 @@ const generateRoutes = () => { return Object.keys(paths).map((route) => { let path = route - .replace(/\/src\/pages|index|\.jsx$/g, "") - .replace(/\/src\/pages|index|\.tsx$/g, "") - .replace(/\/src\/pages|index|\.mobile|\.jsx$/g, "") - .replace(/\/src\/pages|index|\.mobile|\.tsx$/g, "") + .replace(/\/src\/pages|index|\.jsx$/g, "") + .replace(/\/src\/pages|index|\.tsx$/g, "") + .replace(/\/src\/pages|index|\.mobile|\.jsx$/g, "") + .replace(/\/src\/pages|index|\.mobile|\.tsx$/g, "") path = path.replace(/\[\.{3}.+\]/, "*").replace(/\[(.+)\]/, ":$1") @@ -119,12 +119,6 @@ function generatePageElementWrapper(route, element, bindProps) { } else { document.title = config.app.siteName } - - if (routeDeclaration.centeredContent) { - app.layout.toggleCenteredContent(true) - } else { - app.layout.toggleCenteredContent(false) - } } return React.createElement( diff --git a/packages/app/src/theme/index.less b/packages/app/src/theme/index.less index d086a10b..6781837c 100755 --- a/packages/app/src/theme/index.less +++ b/packages/app/src/theme/index.less @@ -11,24 +11,77 @@ //font-size: calc(1rem * var(--fontScale)); } -html { - box-sizing: border-box; +#nprogress { + position: absolute; + top: 0; + width: 100vw; - overflow: hidden; + .bar { + height: 2px; + background: var(--app-color); + } +} + +#root { + width: 100%; height: 100%; - -webkit-overflow-scrolling: touch; - - background-color: var(--background-color-primary) !important; padding: 0; margin: 0; + overflow: hidden; + + &.electron { + .ant-layout-sider { + padding-top: 0px; + } + } +} + +body { + width: 100%; + height: 100%; + + padding: 0; + margin: 0; + + overflow: hidden; +} + +html { + box-sizing: border-box; + + width: 100%; + height: 100%; + + padding: 0; + margin: 0; + + overflow: hidden; + + background-color: var(--background-color-primary) !important; + + user-select: none; + --webkit-user-select: none; + + scroll-behavior: smooth; + text-rendering: optimizeLegibility !important; + + font-family: var(--fontFamily); + font-size: calc(16px * var(--fontScale)); + + + -webkit-overflow-scrolling: touch; + -webkit-app-region: no-drag; + ::-webkit-scrollbar { display: none; - width: 0; - height: 0; - z-index: 0; + width: 10px; + height: 100dvh; + z-index: 190; + + background-color: var(--background-color-accent); } ::-webkit-scrollbar-thumb { @@ -39,8 +92,9 @@ html { margin: 5px 10px 5px 5px; transition: all 200ms ease-in-out; - border: 4px solid rgba(var(--background-color-contrast), 1); - background-color: rgba(var(--background-color-contrast), 1); + border: 4px solid var(--colorPrimary); + + background-color: var(--colorPrimary); background-clip: padding-box; -webkit-border-radius: 7px; @@ -58,126 +112,72 @@ html { -webkit-overflow-scrolling: touch; - a { - color: var(--colorPrimary); - text-decoration: none; - - &:hover { - color: var(--colorPrimary); - } - } - - h1, - h2, - h3, - h4, - h5, - h6, - p, - span { - color: var(--text-color); - text-rendering: optimizeLegibility !important; - - margin-top: 0; - } - - svg { - color: currentColor; - margin-right: 10px; - vertical-align: -0.125em; - } - - body { - overflow: hidden; - -webkit-overflow-scrolling: touch; - -webkit-app-region: no-drag; - - height: 100%; - - padding: 0; - margin: 0; - - user-select: none; - --webkit-user-select: none; - - scroll-behavior: smooth; - text-rendering: optimizeLegibility !important; - - background-color: var(--background-color-primary) !important; - font-family: var(--fontFamily); - } - - *:not(input):not(textarea):not(a) { - -webkit-user-select: none; - /* disable selection/Copy of UIWebView */ - -webkit-touch-callout: none; - /* disable the IOS popup when long-press on a link */ - } - &.centered-content { - .app_layout { - .content_layout { - width: 45%; + .content_layout { + container-type: inline-size; - min-width: 400px; - max-width: 45%; + margin: auto; - margin: auto; + min-width: 400px; + max-width: 1100px; - padding-left: 0; - padding-right: 10px; + padding-left: 0; + padding-right: 0; - @media screen and (max-width: 1920px) { - width: 50%; - max-width: 60%; - } - - @media screen and (max-width: 1440px) { - width: 80%; - max-width: 80%; - } + @media screen and (max-width: 1920px) { + max-width: 800px; } - } - } - #root { - position: fixed; - overflow: hidden; - - overflow-y: auto; - - width: 100%; - height: 100%; - - background-color: var(--layoutBackgroundColor) !important; - - font-size: calc(16px * var(--fontScale)); - - &.electron { - .ant-layout-sider { - padding-top: 0px; + @media screen and (max-width: 1160px) { + max-width: 600px; } } } - - #nprogress { - position: absolute; - top: 0; - width: 100vw; - - .bar { - height: 2px; - background: var(--app-color); - } - } } +a { + color: var(--colorPrimary); + text-decoration: none; + + &:hover { + color: var(--colorPrimary); + } +} + +h1, +h2, +h3, +h4, +h5, +h6, +p, +span { + color: var(--text-color); + text-rendering: optimizeLegibility !important; + + margin-top: 0; +} + +svg { + color: currentColor; + margin-right: 10px; + vertical-align: -0.125em; +} + +*:not(input):not(textarea):not(a) { + -webkit-user-select: none; + /* disable selection/Copy of UIWebView */ + -webkit-touch-callout: none; + /* disable the IOS popup when long-press on a link */ +} + + +// LAYOUT .app_layout { position: relative; width: 100%; height: 100%; - max-height: 100dvh; overflow: hidden; @@ -186,48 +186,23 @@ html { background-color: rgba(var(--layoutBackgroundColor), var(--backgroundColorTransparency)) !important; backdrop-filter: blur(var(--backgroundBlur)); - - transition: all 150ms ease-in-out; - - -webkit-overflow-scrolling: touch; - - ::-webkit-scrollbar { - display: block; - position: absolute; - - width: 14px; - height: 18px; - z-index: 200; - transition: all 200ms ease-in-out; - } } .content_layout { - position: relative; -webkit-overflow-scrolling: touch; box-sizing: border-box; - display: flex; - flex-direction: column; - - align-items: center; - justify-content: flex-start; - - height: 100%; - width: 100%; - - max-height: 100dvh; - - overflow-x: hidden; overflow-y: overlay; + overflow-x: visible; + + width: 100%; + height: 100%; transition: all 150ms ease-in-out; margin: var(--layoutMargin); padding: var(--layoutPadding); - - background-color: transparent; } .root_background { @@ -407,6 +382,8 @@ html { } .app_modal_wrapper { + box-sizing: border-box; + position: absolute; top: 0; left: 0; @@ -435,6 +412,8 @@ html { } .app_modal_content { + box-sizing: border-box; + transition: all 150ms ease-in-out; opacity: 0; @@ -457,7 +436,9 @@ html { } .searcher { - width: 50vw; + box-sizing: border-box; + + width: 48vw; height: 80vh; } }