RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve layout & space use

Browse Source
This commit is contained in:
SrGooglo 2023-07-17 16:42:10 +00:00
parent 51a1cf44ca
commit 7e346ea2b1
19 changed files with 152 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app/constants/defaultTheme.json
View File

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

2
packages/app/src/components/Layout/sidebar/index.less
View File

@ -1,7 +1,7 @@
@import "theme/vars.less";
.app_sidebar_wrapper {
position: relative;
position: sticky;
left: 0;
top: 0;

6
packages/app/src/components/Layout/toolsBar/index.less
View File

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

4
packages/app/src/components/MarkdownReader/index.jsx
View File

@ -20,10 +20,6 @@ export default (props) => {
React.useEffect(() => {
app.layout.toggleCenteredContent(true)
return () => {
app.layout.toggleCenteredContent(false)
}
}, [])
if (E_Doc) {

12
packages/app/src/components/Music/PlaylistView/index.jsx
View File

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

16
packages/app/src/components/Music/PlaylistView/index.less
View File

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

6
packages/app/src/components/PagePanels/index.jsx
View File

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

9
packages/app/src/components/PagePanels/index.less
View File

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

2
packages/app/src/components/Searcher/index.less
View File

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

2
packages/app/src/layout.jsx
View File

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

4
packages/app/src/pages/account/index.mobile.jsx
View File

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

4
packages/app/src/pages/index.mobile.jsx
View File

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

8
packages/app/src/pages/music/components/explore/index.jsx
View File

@ -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)
}
}
}, [])

3
packages/app/src/pages/music/components/explore/index.less
View File

@ -15,9 +15,6 @@
display: flex;
flex-direction: column;
overflow-x: visible;
overflow-y: overlay;
width: 100%;
height: 100%;

4
packages/app/src/pages/play/[play_id].jsx
View File

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

200
packages/app/src/pages/play/index.less
View File

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

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

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

14
packages/app/src/router.jsx
View File

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

269
packages/app/src/theme/index.less
View File

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