improve layout & space use

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",

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;

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;
     }

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) {

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 <antd.Skeleton active />
     }

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%;

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)
         }
     }
 

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%;
         }

packages/app/src/components/Searcher/index.less

@@ -131,8 +131,6 @@ html {
     flex-direction: row;
     flex-wrap: wrap;
 
-    width: 50vw;
-
     gap: 10px;
 
     &.one_column {

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() {

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({

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 <PagePanelWithNavMenu
             tabs={Tabs}

packages/app/src/pages/music/components/explore/index.jsx

@@ -245,9 +245,7 @@ export default (props) => {
     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)
-            }
         }
     }, [])
 

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%;
 

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)
         }

packages/app/src/pages/play/index.less

@@ -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;
-        }
-    }
-}

packages/app/src/pages/post/[post_id].mobile.jsx

@@ -29,6 +29,8 @@ export default (props) => {
     }
 
     React.useEffect(() => {
+        app.layout.toggleCenteredContent(false)
+        
         loadData()
     }, [])
 

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|\.jsx$/g, "")
-        .replace(/\/src\/pages|index|\.tsx$/g, "")
+            .replace(/\/src\/pages|index|\.tsx$/g, "")
-        .replace(/\/src\/pages|index|\.mobile|\.jsx$/g, "")
+            .replace(/\/src\/pages|index|\.mobile|\.jsx$/g, "")
-        .replace(/\/src\/pages|index|\.mobile|\.tsx$/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(

packages/app/src/theme/index.less

@@ -11,24 +11,77 @@
 	//font-size: calc(1rem * var(--fontScale));
 }
 
-html {
+#nprogress {
-	box-sizing: border-box;
+	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;
+		width: 10px;
-		height: 0;
+		height: 100dvh;
-		z-index: 0;
+		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);
+		border: 4px solid var(--colorPrimary);
-		background-color: rgba(var(--background-color-contrast), 1);
+
+		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 {
-			.content_layout {
+			container-type: inline-size;
-				width: 45%;
 
-				min-width: 400px;
+			margin: auto;
-				max-width: 45%;
 
-				margin: auto;
+			min-width: 400px;
+			max-width: 1100px;
 
-				padding-left: 0;
+			padding-left: 0;
-				padding-right: 10px;
+			padding-right: 0;
 
-				@media screen and (max-width: 1920px) {
+			@media screen and (max-width: 1920px) {
-					width: 50%;
+				max-width: 800px;
-					max-width: 60%;
-				}
-
-				@media screen and (max-width: 1440px) {
-					width: 80%;
-					max-width: 80%;
-				}
 			}
-		}
-	}
 
-	#root {
+			@media screen and (max-width: 1160px) {
-		position: fixed;
+				max-width: 600px;
-		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;
 			}
 		}
 	}
-
-	#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;
 		}
 	}