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