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

Layout mobile A1

Browse Source
This commit is contained in:
srgooglo 2020-04-02 03:26:28 +02:00
parent 587ddd5cd1
commit 3ff2dd5689
16 changed files with 165 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -3,7 +3,7 @@
"UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
"title": "Comty™",
"DevBuild": true,
"version": "0.3.01",
"version": "0.3.02",
"stage": "dev-pre",
"description": "",
"main": "app/main.js",

4
src/@ycore/libs/app_functions/modals.js
View File

@ -3,7 +3,9 @@ import * as ycore from 'ycore'
import * as antd from 'antd'
import * as Icons from '@ant-design/icons'
import styles from './modals.less';
import classnames from 'classnames'
const isMobile = localStorage.getItem('mobile_src')
class __Model_postreport extends React.PureComponent {
state = {
@ -92,7 +94,7 @@ class __Model_postreport extends React.PureComponent {
render(){
return(
<div className={styles.post_report_main}>
<div className={classnames(styles.post_report_main, {[styles.mobile]: isMobile})}>
<div>
<antd.Steps>
<antd.Steps.Step status={this.status(1)} title="Summary" icon={<Icons.SolutionOutlined />} />

3
src/@ycore/libs/app_functions/modals.less
View File

@ -1,5 +1,8 @@
.post_report_main{
padding: 0 0 0 115px;
&.mobile{
padding: 0 0 60px 0;
}
}
.post_report_body{
color: #2d2d2d!important;

7
src/@ycore/libs/app_functions/pre.js
View File

@ -105,6 +105,13 @@ export const router = {
pathname: `/${e}`,
search: window.location.search,
})
},
goprofile: () => {
goTo.element('primaryContent')
umiRouter.push({
pathname: `/@${ycore.userData().username}`,
search: window.location.search,
})
}
}

25
src/components/HeaderSearch/index.less
View File

@ -5,7 +5,10 @@
top: 0;
display: flex;
margin: auto;
width: 100%;
max-width: 510px;
min-width: 265px;
width: auto;
height: 50px;
&.hidden {
display: none;
@ -13,23 +16,19 @@
}
.headerSearch {
margin: auto;
width: 100%;
height: 100%;
:global {
.ant-input-affix-wrapper {
box-sizing: border-box;
height: 100%;
width: 100%;
display: flex;
margin: 0;
padding: 0;
color: rgba(0, 0, 0, .65);
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
font-feature-settings: 'tnum';
position: relative;
display: inline-block;
width: 100%;
text-align: start;
}
.ant-input-affix-wrapper .ant-input-prefix {

1
src/components/Layout/Control.less
View File

@ -1,6 +1,7 @@
@import '~themes/index.less';
.ControlCard {
overflow: hidden;
background-color: rgba(0, 0, 0, 0.1);
width: auto;
max-width: 60%;

71
src/components/Layout/Secondary/index.less
View File

@ -33,21 +33,61 @@
}
&.mobile {
height: 45px;
width: 100%;
bottom: -70px;
height: 0;
bottom: 0;
opacity: 0;
top: unset;
overflow-y: hidden;
overflow-x: hidden;
overflow: hidden;
>.secondary_layout_bg{
border-radius: 27px 27px 0 0;
overflow-y: hidden;
overflow-x: scroll;
border-radius: 12px 12px 0 0;
flex-direction: column;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
}
.secondary_container_1{
height: 85vh;
width: 100%;
}
.secondary_container_2{
width: 100%;
padding: 10px 10px 60px 10px;
border-radius: 12px 12px 0 0;
}
:global{
.comments_body {
padding: 30px 10px 10px 10px;
}
}
&.active {
opacity: 1;
bottom: 0;
height: 100vh;
height: 100%;
width: 100%;
}
&.half{
opacity: 1;
bottom: 0;
height: 60%;
width: 100%;
}
&.unique {
opacity: 1;
bottom: 0;
height: 100%;
width: 100%;
>.secondary_layout_bg {
background-color: #ffffff;
padding: 0;
border-radius: 12px 12px 0 0;
flex-direction: column;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
}
}
}
@ -126,7 +166,7 @@
padding: 30px 30px 30px 35px;
color: @secondary_container_1_color;
:global {
.ant-btn {
color: @secondary_container_1_btn_color;
@ -163,17 +203,6 @@
width: 600px
}
}
&.mobile{
overflow-x: hidden;
&.active {
width: 400px;
right: -120px;
opacity: 1;
}
}
transition: all @__Global_SwapAnimDuration ease-in-out;

2
src/components/Layout/Secondary/renders.less
View File

@ -199,7 +199,7 @@
z-index: 100;
background-color: #ffffffd7;
padding-top: 20px;
padding-bottom: 40px;
padding-bottom: 60px;
border-radius: 0 0 0 32px;
.comment_box_body {

3
src/components/Layout/Sider/index.js
View File

@ -29,6 +29,7 @@ class Sider extends React.PureComponent {
handleClickMenu = e => {
e.key === 'SignOut' && ycore.app_session.logout()
e.key === 'general_settings' && ycore.router.go('settings')
e.key === 'profile' && ycore.router.goprofile()
e.key === 'saves' && this.onClickFunctions.saves(e.key)
e.key === 'events' && this.onClickFunctions.events(e.key)
e.key === 'marketplace' && this.onClickFunctions.marketplace(e.key)
@ -38,7 +39,7 @@ class Sider extends React.PureComponent {
render() {
const { isMobile } = this.props
const sider_props = {handleClickMenu: this.handleClickMenu ,logo: config.LogoPath, menulist: null}
const sider_props = {handleClickMenu: this.handleClickMenu ,logo: config.LogoPath, menulist: null, userData: this.props.userData}
if (isMobile) {
return <Sider_Mobile {...sider_props} />

24
src/components/Layout/Sider/mobile.js
View File

@ -11,7 +11,7 @@ import CustomIcons from '../../CustomIcons'
@withI18n()
export default class Sider_Mobile extends React.PureComponent {
render() {
const { handleClickMenu, logo } = this.props
const { handleClickMenu, userData } = this.props
return (
<div className={styles.left_sider_wrapper}>
<antd.Layout.Sider
@ -27,33 +27,23 @@ export default class Sider_Mobile extends React.PureComponent {
</antd.Menu.Item>
<antd.Menu.Item key="saves">
<Icon component={CustomIcons.SavedPostColor} />
<Icons.HeartTwoTone twoToneColor={"#ff4d4f"} />
</antd.Menu.Item>
<antd.Menu.Item key="marketplace">
<Icons.ShoppingTwoTone twoToneColor={"#ff7a45"}/>
</antd.Menu.Item>
<antd.Menu.Item key="events">
<Icons.CarryOutTwoTone twoToneColor={"#ff4d4f"}/>
</antd.Menu.Item>
<antd.Menu.Item key="general_settings">
<Icons.SettingOutlined />
</antd.Menu.Item>
<antd.Menu.Item key="SignOut">
<Icons.LogoutOutlined style={{ color: 'red' }} />
<antd.Menu.Item key="profile">
<antd.Avatar size={20} shape="square" src={userData.avatar} />
</antd.Menu.Item>
</antd.Menu>
</antd.Layout.Sider>
</div>
)

3
src/components/Layout/Sider/mobile.less
View File

@ -2,7 +2,8 @@
.left_sider_wrapper {
position: fixed;
overflow: hidden!important;
position: absolute;
z-index: 500;
bottom: 0;
right: 0;

92
src/components/UserProfile/index.js
View File

@ -8,7 +8,10 @@ import { SetHeaderSearchType } from 'components/HeaderSearch'
import * as Icons from '@ant-design/icons'
import Icon from '@ant-design/icons'
import Follow_btn from './components/Follow_btn.js'
import {BadgesType} from 'globals/badges_list'
import { BadgesType } from 'globals/badges_list'
import classnames from 'classnames'
const isMobile = localStorage.getItem('mobile_src')
class UserProfile extends React.PureComponent {
constructor(props) {
@ -91,34 +94,34 @@ class UserProfile extends React.PureComponent {
Followed: ycore.booleanFix(rp['0'].is_following),
})
ycore.comty_user.__tags((err, res) => {
if (err) return false
let fn = [];
const a = JSON.parse(res)['tags']
const b = Object.entries(Object.assign({}, a[0]))
const objectArray = b.slice(1,b.length)
objectArray.forEach(([key, value]) => {
if (value == 'true') {
BadgesType.map(item => {
item.id === key ? (item? fn.push(item) : null) : null
})
}
})
BadgesType.map(item => {
this.require(item.require)? fn.push(item) : null
})
this.setState({ UserTags: fn })
}, { id: this.state.UUID })
ycore.comty_user.__tags(
(err, res) => {
if (err) return false
let fn = []
const a = JSON.parse(res)['tags']
const b = Object.entries(Object.assign({}, a[0]))
const objectArray = b.slice(1, b.length)
objectArray.forEach(([key, value]) => {
if (value == 'true') {
BadgesType.map(item => {
item.id === key ? (item ? fn.push(item) : null) : null
})
}
})
BadgesType.map(item => {
this.require(item.require) ? fn.push(item) : null
})
this.setState({ UserTags: fn })
},
{ id: this.state.UUID }
)
} catch (err) {
ycore.notify.error(err)
}
}, payload)
}
render() {
const { loading, UUID, invalid, RenderValue } = this.state
return (
@ -127,8 +130,12 @@ class UserProfile extends React.PureComponent {
<antd.Skeleton active />
) : (
<div>
{invalid ? null :
<div className={styles.userWrapper}>
{invalid ? null : (
<div
className={classnames(styles.userWrapper, {
[styles.mobile]: isMobile,
})}
>
<div className={styles.UserCover}>
<img src={RenderValue.cover} />
</div>
@ -141,22 +148,27 @@ class UserProfile extends React.PureComponent {
</div>
<div className={styles.content}>
<div className={styles.TagWrappers}>
{this.state.UserTags.length>0? <antd.List
dataSource={this.state.UserTags}
renderItem={item=>(
<antd.Tooltip title={item.tip}>
<antd.Tag id={item.id} color={item.color}>
{item.title} {item.icon}
</antd.Tag>
</antd.Tooltip>
)} /> : null}
{this.state.UserTags.length > 0 ? (
<antd.List
dataSource={this.state.UserTags}
renderItem={item => (
<antd.Tooltip title={item.tip}>
<antd.Tag id={item.id} color={item.color}>
{item.title} {item.icon}
</antd.Tag>
</antd.Tooltip>
)}
/>
) : null}
</div>
{ycore.IsThisUser.same(RenderValue.id) ? null : (
<div
className={styles.follow_wrapper}
onClick={() => this.handleFollowUser()}
>
<Follow_btn followed={this.state.Followed ? true : false} />
<Follow_btn
followed={this.state.Followed ? true : false}
/>
</div>
)}
<div className={styles.contentTitle}>
@ -165,7 +177,10 @@ class UserProfile extends React.PureComponent {
<antd.Tooltip title="User Verified">
{ycore.booleanFix(RenderValue.verified) ? (
<Icon
style={{ color: 'blue', verticalAlign: 'top' }}
style={{
color: 'blue',
verticalAlign: 'top',
}}
component={CustomIcons.VerifiedBadge}
/>
) : null}
@ -178,14 +193,17 @@ class UserProfile extends React.PureComponent {
lineHeight: '0',
marginBottom: '5px',
}}
dangerouslySetInnerHTML={{ __html: RenderValue.about }}
dangerouslySetInnerHTML={{
__html: RenderValue.about,
}}
/>
</div>
</div>
</div>
}
/>
</div>}
</div>
)}
{ycore.IsThisUser.same(UUID) ? (
<PostCreator userData={ycore.userData()} />
) : null}

11
src/components/UserProfile/styles.less
View File

@ -29,7 +29,12 @@
.userWrapper {
padding: 0 68px 15px 68px;
margin: auto;
&.mobile{
max-width: 510px;
min-width: 265px;
width: auto;
padding: 0 15px 0 15px;
}
:global {
.ant-page-header-content {
padding-top: 0;
@ -75,7 +80,9 @@
.avatar {
transform: translate(-25px, -45px);
max-height: 200px;
max-width: 120px;
&>span {
position: relative;
z-index: 10;

1
src/layouts/PrimaryLayout.js
View File

@ -48,6 +48,7 @@ class PrimaryLayout extends React.Component {
this.setState({
isMobile: mobile,
})
store.set('mobile_src', mobile)
}
})
}

9
src/layouts/PrimaryLayout.less
View File

@ -8,8 +8,7 @@
}
.primary_layout {
overflow-x: hidden!important;
overflow-y: hidden!important;
overflow: hidden;
background-color: @primary_layout_backgroud;
margin: auto;
&.mobile{
@ -17,9 +16,11 @@
border-radius: 0;
margin: 0;
padding: 0;
overflow-y: overlay;
overflow-x: hidden;
}
>.primary_layout_content{
padding: 0;
.primary_layout_content{
padding: 35px 15px 15px 15px;
}
}
}

9
src/themes/base/index.less
View File

@ -17,6 +17,7 @@
@ease-in: ease-in;
::-webkit-scrollbar {
position: absolute;
width: 14px;
height: 18px;
}
@ -45,15 +46,17 @@ body {
// min-width: 430px;
background-color: transparent;
// overflow-y: hidden;
// overflow-x: hidden;
// overflow: hidden;
overflow: hidden;
font-size: @base-font-size;
line-height: @base-line-height;
}
#root {
overflow: hidden;
}
@media (min-width: @bp-medium) {
}