+
- );
+ )
}
}
diff --git a/src/components/HeaderSearch/index.less b/src/components/HeaderSearch/index.less
index 491179ef..2d4893ac 100755
--- a/src/components/HeaderSearch/index.less
+++ b/src/components/HeaderSearch/index.less
@@ -1,24 +1,26 @@
@import '~themes/vars.less';
-.HeaderSearchWrapper{
+.HeaderSearchWrapper {
z-index: 20;
top: 0;
display: flex;
margin: auto;
width: 100%;
- &.hidden{
+
+ &.hidden {
display: none;
}
}
.headerSearch {
margin: auto;
- :global{
+
+ :global {
.ant-input-affix-wrapper {
box-sizing: border-box;
margin: 0;
padding: 0;
- color: rgba(0,0,0,.65);
+ color: rgba(0, 0, 0, .65);
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
@@ -31,19 +33,23 @@
}
.ant-input-affix-wrapper .ant-input-prefix {
- left: 12px;
+ left: 12px;
}
- .ant-input-affix-wrapper{
+
+ .ant-input-affix-wrapper {
background-color: transparent !important;
border-color: transparent;
border-radius: 12px;
}
- .ant-input-affix-wrapper > input.ant-input {
+
+ .ant-input-affix-wrapper>input.ant-input {
padding: 0 0 0 30px;
- border: inherit;
- outline: inherit;
- }
- .ant-input-affix-wrapper .ant-input-prefix, .ant-input-affix-wrapper .ant-input-suffix {
+ border: inherit;
+ outline: inherit;
+ }
+
+ .ant-input-affix-wrapper .ant-input-prefix,
+ .ant-input-affix-wrapper .ant-input-suffix {
background-color: transparent !important;
border-color: transparent;
border-radius: 12px;
@@ -54,14 +60,14 @@
display: flex;
-ms-flex-align: center;
align-items: center;
- color: rgba(0,0,0,.65);
+ color: rgba(0, 0, 0, .65);
line-height: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: #9d9da7 !important;
}
-
- .ant-input{
+
+ .ant-input {
border-radius: 12px;
color: #9D9DA7;
background-color: #FFFFFF;
diff --git a/src/components/Layout/ChatSider.less b/src/components/Layout/ChatSider.less
index c7df3b29..f9af07f1 100755
--- a/src/components/Layout/ChatSider.less
+++ b/src/components/Layout/ChatSider.less
@@ -6,37 +6,42 @@
@LDarkMode-color: #fff;
@LLightMode-color: #2F2E30;
-.chatTitle{
+.chatTitle {
font-family: "Poppins", sans-serif;
padding: 0 10px 0 0;
float: right;
display: flex;
- h1{
+
+ h1 {
line-height: 1.2;
margin-right: 5px;
}
- svg{
+
+ svg {
font-size: 20px;
}
}
-.something_thats_pulling_me_down{
- :global{
+.something_thats_pulling_me_down {
+ :global {
text-align: center;
bottom: 0;
position: absolute;
width: 100%;
}
}
-.siderhead{
+
+.siderhead {
font-family: 'Source Sans Pro', sans-serif;
display: flex;
align-items: center;
justify-content: center;
- ::first-letter{
+
+ ::first-letter {
margin-left: 7px;
}
+
height: 60px;
font-size: 17px;
}
@@ -49,42 +54,55 @@
width: 100%;
left: 0;
position: absolute;
-
+
:global {
.ant-layout-sider-dark {
background-color: @LDarkMode-backgroud;
color: @DarkMode-color;
- h2{
+
+ h2 {
color: @Theme-SiderDeco-Color;
}
- .ant-menu-item{
+
+ .ant-menu-item {
color: @DarkMode-color;
}
- .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
+
+ .ant-menu-inline,
+ .ant-menu-vertical,
+ .ant-menu-vertical-left {
:hover {
background-color: rgb(80, 80, 80);
color: #fff;
}
+
border-right: 1px solid transparent;
}
}
+
.ant-layout-sider-light {
background-color: @Theme-SiderDeco-Backgroud;
color: @Theme-SiderDeco-Color;
- h2{
+
+ h2 {
color: @Theme-SiderDeco-Color;
}
- .ant-menu-item{
+
+ .ant-menu-item {
color: @Theme-SiderDeco-Color;
}
- .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
+
+ .ant-menu-inline,
+ .ant-menu-vertical,
+ .ant-menu-vertical-left {
:hover {
background-color: @Theme-Hover-Backgroud;
color: #fff;
}
+
border-right: 1px solid transparent;
}
- }
+ }
}
}
@@ -94,93 +112,112 @@
border: 1px @LDarkMode-color solid;
height: 100%;
z-index: 50;
+
:global {
- .ant-menu-dark {
- background-color: @LDarkMode-backgroud;
- color: @LDarkMode-color;
+ .ant-menu-dark {
+ background-color: @LDarkMode-backgroud;
+ color: @LDarkMode-color;
}
- .ant-menu-light {
- background-color: @LLightMode-backgroud;
- color: @LLightMode-color;
+
+ .ant-menu-light {
+ background-color: @LLightMode-backgroud;
+ color: @LLightMode-color;
}
}
- .menuItems{
+
+ .menuItems {
background-color: transparent;
- margin-bottom: 8px;
+ margin-bottom: 8px;
width: 100%;
animation: fadein 0.5s;
- :global {
- .ant-menu-item-selected{
- background-color: transparent;
- }
+
+ :global {
+ .ant-menu-item-selected {
+ background-color: transparent;
}
+ }
}
- .menuItemsCollapsed{
+
+ .menuItemsCollapsed {
background-color: transparent;
color: @LDarkMode-color;
width: 100%;
animation: fadein 0.5s;
- :global {
- .ant-menu-item {
- padding: 0 !important;
- margin: 2px 0 2px 0;
- width: 100%;
- text-align: center;
- font-size: 20px;
- }
- .ant-menu-item-selected{
- background-color: rgba(82, 82, 82, 0.562);
- }
+
+ :global {
+ .ant-menu-item {
+ padding: 0 !important;
+ margin: 2px 0 2px 0;
+ width: 100%;
+ text-align: center;
+ font-size: 20px;
}
+
+ .ant-menu-item-selected {
+ background-color: rgba(82, 82, 82, 0.562);
+ }
+ }
}
+
.chatContainer {
height: 100%;
margin: 18px 0 8px 0;
+
.scrollbar-container {
position: initial;
height: 100%;
}
+
overflow-x: hidden;
flex: 1;
+
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
+
&:hover {
&::-webkit-scrollbar-thumb {
background-color: rgba(59, 59, 59, 0.2);
}
}
+
:global {
.ant-layout-sider-children {
display: flex;
flex-direction: column;
justify-content: space-between;
}
+
.ant-layout-sider-collapsed {
.ant-menu-item {
left: 0;
margin: 0;
padding: 0;
}
- .ant-menu-inline-collapsed > .ant-menu-item{
+
+ .ant-menu-inline-collapsed>.ant-menu-item {
padding: 0;
- left:0;
+ left: 0;
}
}
+
.scrollbar-container {
position: initial;
height: 100%;
}
+
.ant-menu-inline .ant-menu-item {
font-size: 14px;
font-family: 'Source Sans Pro', sans-serif;
}
+
.ant-menu-dark .ant-menu-item a {
color: rgb(197, 197, 197);
}
}
}
}
+
.scrollbar-container {
position: initial;
height: 100%;
@@ -197,7 +234,8 @@
opacity: 1;
}
}
-.search{
+
+.search {
position: relative;
bottom: 0;
width: 100%;
@@ -205,10 +243,9 @@
}
-.chatbox{
- width:100%;
- background: transparent;
- border-radius:6px;
- height:100%;
+.chatbox {
+ width: 100%;
+ background: transparent;
+ border-radius: 6px;
+ height: 100%;
}
-
diff --git a/src/components/Layout/Control.js b/src/components/Layout/Control.js
index 9417ebae..f32b462a 100755
--- a/src/components/Layout/Control.js
+++ b/src/components/Layout/Control.js
@@ -3,63 +3,65 @@ import * as antd from 'antd'
import * as ycore from 'ycore'
import styles from './Control.less'
-import Radium, {StyleRoot}from 'radium';
+import Radium, { StyleRoot } from 'radium'
import { fadeInUp, bounceOutDown } from 'react-animations'
const animationStyles = {
- fadeInUp: {
- animation: 'x 0.5s',
- animationName: Radium.keyframes(fadeInUp, 'fadeInUp')
- },
- bounceOutDown: {
- animation: 'x 1s',
- animationName: Radium.keyframes(bounceOutDown, 'bounceOutDown')
- }
+ fadeInUp: {
+ animation: 'x 0.5s',
+ animationName: Radium.keyframes(fadeInUp, 'fadeInUp'),
+ },
+ bounceOutDown: {
+ animation: 'x 1s',
+ animationName: Radium.keyframes(bounceOutDown, 'bounceOutDown'),
+ },
}
-export function SetControls(e){
- window.ControlComponent.DummySetControls(e);
- return
+export function SetControls(e) {
+ window.ControlComponent.DummySetControls(e)
+ return
}
-export function CloseControls(){
- window.ControlComponent.DummyCloseControls();
- return
+export function CloseControls() {
+ window.ControlComponent.DummyCloseControls()
+ return
}
class Control extends React.Component {
- constructor(props){
- super(props)
- window.ControlComponent = this;
- this.state = {
- Show: false,
- FadeIN: true,
- }
+ constructor(props) {
+ super(props)
+ window.ControlComponent = this
+ this.state = {
+ Show: false,
+ FadeIN: true,
}
- DummySetControls = (e) =>{
- ycore.yconsole.log('Controls recived => ', e)
- if (this.state.Show == false) {
- this.setState({ FadeIN: true })
- }
- this.setState({Show: true, RenderFragment: e})
- }
- DummyCloseControls(){
- ycore.yconsole.log('Closing Control Bar...')
- this.setState({FadeIN: false})
- setTimeout(() => this.setState({ Show: false, RenderFragment: null}), 1000)
- }
-
- render(){
- const {RenderFragment, Show, FadeIN} = this.state
- return(
- Show? (
-
-
- {RenderFragment}
-
-
-
+
+ {RenderFragment}
+
+
+
+
+ )
+ }
+}
diff --git a/src/components/Layout/Secondary/index.less b/src/components/Layout/Secondary/index.less
index 1a13cd0d..f768f959 100644
--- a/src/components/Layout/Secondary/index.less
+++ b/src/components/Layout/Secondary/index.less
@@ -1,110 +1,120 @@
@SwapAnimDuration: 340ms;
- .SecondaryWrapper{
- width: 27%;
- height: 100vh;
-
+.SecondaryWrapper {
+ width: 27%;
+ height: 100vh;
- position: relative;
- float: left;
- overflow-y: hidden !important;
- overflow-x: hidden;
- display: flex;
+ position: relative;
+ float: left;
+ overflow-y: hidden !important;
+ overflow-x: hidden;
- &.active{
- width: 96vw;
- position: absolute;
- right: 0;
- >.container{
- border-radius: 12px 12px 12px 12px;
- }
+ display: flex;
+
+ &.active {
+ width: 96vw;
+ position: absolute;
+ right: 0;
+
+ >.container {
+ border-radius: 12px 12px 12px 12px;
}
-
+ }
- transition: all @SwapAnimDuration ease-in-out;
+
+ transition: all @SwapAnimDuration ease-in-out;
+
+}
+
+.UserHeader {
+ right: 20px;
+ top: 25px;
+ display: flex;
+ position: absolute;
+ z-index: 52;
+
+ img {
+ border-radius: 15px;
+ width: 40px;
+ transition: all 150ms linear;
+ box-shadow: 0px 0px 0 0px rgba(255, 255, 255, 0);
}
- .UserHeader{
- right: 20px;
- top: 25px;
- display: flex;
- position: absolute;
- z-index: 52;
- img {
- border-radius: 15px;
- width: 40px;
- transition: all 150ms linear;
- box-shadow: 0px 0px 0 0px rgba(255, 255, 255, 0);
-
+ img:hover {
+ box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.205);
+ transition: all 150ms linear;
+ }
+
+ transition: all 150ms linear;
+
+ .notif_box {
+ margin: 0 15px 0 5px;
+ width: 40px;
+ height: 40px;
+ border-radius: 15px;
+ background-color: #78CFED;
+ }
+}
+
+.container {
+ z-index: 50;
+ position: relative;
+ background-color: #201F23;
+ color: @DarkMode-color_container !important;
+
+ &.desktop_mode {
+ border-radius: 0 12px 12px 0;
+ }
+
+ width: 100%;
+ height: 100vh;
+
+ :global {
+ h1 {
+ color: @DarkMode-color_container;
}
- img:hover{
+
+ .ant-btn {
+ color: #ffffff;
+ background-color: #4c4c4c;
+ border-color: transparent;
+ border-radius: 12px;
+ }
+
+ .ant-btn:hover {
box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.205);
transition: all 150ms linear;
}
- transition: all 150ms linear;
- .notif_box {
- margin: 0 15px 0 5px;
- width: 40px;
- height: 40px;
- border-radius: 15px;
- background-color: #78CFED;
- }
}
- .container{
- z-index: 50;
- position: relative;
- background-color: #201F23;
- color: @DarkMode-color_container !important;
- &.desktop_mode{
- border-radius: 0 12px 12px 0;
- }
- width: 100%;
- height: 100vh;
- :global{
- h1{
- color: @DarkMode-color_container;
- }
- .ant-btn{
- color: #ffffff;
- background-color: #4c4c4c;
- border-color: transparent;
- border-radius: 12px;
- }
- .ant-btn:hover{
- box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.205);
- transition: all 150ms linear;
- }
- }
- }
- .container_body{
- padding: 30px 375px 30px 75px;
+}
+
+.container_body {
+ padding: 30px 375px 30px 75px;
+}
+
+.container_2 {
+ z-index: 51;
+
+ background-color: #fff;
+ border-radius: 32px 0 0 32px;
+ padding: 20px 15px 15px 15px;
+
+ width: 0;
+ height: 100vh;
+ opacity: 0;
+
+ position: absolute;
+ right: -500px;
+
+ &.active {
+ width: 300px;
+ opacity: 1;
+ right: 0;
}
- .container_2{
- z-index: 51;
+ transition: all @SwapAnimDuration ease-in-out;
+}
- background-color: #fff;
- border-radius: 32px 0 0 32px;
- padding: 20px 15px 15px 15px;
-
- width: 0;
- height: 100vh;
- opacity: 0;
-
- position: absolute;
- right: -500px;
-
- &.active{
- width: 300px;
- opacity: 1;
- right: 0;
- }
-
- transition: all @SwapAnimDuration ease-in-out;
- }
-
- .comments_body{
-
- }
\ No newline at end of file
+.comments_body {}
\ No newline at end of file
diff --git a/src/components/Layout/Secondary/renders.js b/src/components/Layout/Secondary/renders.js
index 0396d8d6..6b6a3888 100644
--- a/src/components/Layout/Secondary/renders.js
+++ b/src/components/Layout/Secondary/renders.js
@@ -6,151 +6,196 @@ import * as ycore from 'ycore'
import * as Icons from '@ant-design/icons'
import Icon from '@ant-design/icons'
-import {MediaPlayer, PostCard} from 'components'
+import { MediaPlayer, PostCard } from 'components'
-const VerifiedBadge = () => ()
+const VerifiedBadge = () => (
+
+)
-export class __priPost extends React.Component{
-
- renderContent(payload){
- const { id, postText, postFile_full, post_time, publisher} = payload
- if (!postFile_full) {
- return(
-
+
+ ![]()
ycore.crouter.native(`@${userData.username}`)}
+ src={userData.avatar}
+ />
+
- render(){
- const { userData } = this.props
- return(
-
-
-
- )
- }
-}
\ No newline at end of file
+
-
- ![]()
ycore.crouter.native(`@${userData.username}`)} src={userData.avatar} />
-
+
+
-
+ {this.state.swap ? (
+
+
-
-
-
- {this.state.swap?
-
- {this.SwapBalanceContent('__sec')}
-
-
-
-
+ {this.SwapBalanceContent('__sec')}
+
+
-
- )
- }
- return (
-
- {postFile_full?
- )
+export class __priPost extends React.Component {
+ renderContent(payload) {
+ const { id, postText, postFile_full, post_time, publisher } = payload
+ if (!postFile_full) {
+ return (
+
+
+ )
}
+ return (
+
+ {postFile_full ?
+ )
+ }
-
- render(){
- const payload = this.props.payload
- if (!payload) {
- return (
-
+ {' '}
+ {' '}
+
+ ) : null}
+ This post not exists!!!
- ) - } - const { id, postText, postFile_full, post_time, publisher} = payload - return( -
-
-
- )
+ render() {
+ const payload = this.props.payload
+ if (!payload) {
+ return
-
- {this.renderContent(payload)}
-
- {publisher.username} {ycore.booleanFix(publisher.verified)?
-
- {publisher.username} {ycore.booleanFix(publisher.verified)?
- {post_time} {ycore.IsThisUser.dev()? `| #${id}` : null}
-This post not exists!!!
} + const { id, postText, postFile_full, post_time, publisher } = payload + return ( +
+
+ )
+ }
}
-
export class __secComments extends React.Component {
- state = {
- comment_data: this.props.payload,
- raw_comment: '',
- loading: false
- }
- handleDeleteComment(id){
- console.log(`Removing Comment with id => ${id}`)
- ycore.Post_Comments.delete((err, res) => { if(err){return false} return this.reloadComments() }, {comment_id: id})
- }
- handleNewComment(){
- const { raw_comment } = this.state
- const { post_id } = this.props
- if (raw_comment) {
- const payload = { post_id: post_id, raw_text: raw_comment }
- ycore.Post_Comments.new((err,res) =>{
- if (err) {
- ycore.notify.error('This action could not be performed.', err)
- }
- this.setState({ raw_comment: '' })
- return this.reloadComments()
- }, payload)
+ state = {
+ comment_data: this.props.payload,
+ raw_comment: '',
+ loading: false,
+ }
+ handleDeleteComment(id) {
+ console.log(`Removing Comment with id => ${id}`)
+ ycore.comty_post_comment.delete(
+ (err, res) => {
+ if (err) {
+ return false
}
- return false
- }
-
- renderComment = (a) => {
- const {id, time, Orginaltext, publisher} = a
- const CommentMenu = (
-
+
+ {this.renderContent(payload)}
+
+
+ {publisher.username}{' '}
+ {ycore.booleanFix(publisher.verified) ? (
+
+
+
+ {publisher.username}{' '}
+ {ycore.booleanFix(publisher.verified) ? (
+
+ + {' '} + {post_time} {ycore.IsThisUser.dev() ? `| #${id}` : null}{' '} +
+
-
- )
- }
- HandleCommentInput = e => {
- const { value } = e.target;
- this.setState({ raw_comment: value })
- };
- reloadComments(){
- try {
- this.setState({ loading: true })
- const payload = { post_id: this.props.post_id }
- ycore.comty_post.get((err, res) => {
- const post_comments = JSON.parse(res)['post_comments']
- this.setState({ comment_data: post_comments, loading: false})
- }, payload)
-
- } catch (error) {
- return false
+ return this.reloadComments()
+ },
+ { comment_id: id }
+ )
+ }
+ handleNewComment() {
+ const { raw_comment } = this.state
+ const { post_id } = this.props
+ if (raw_comment) {
+ const payload = { post_id: post_id, raw_text: raw_comment }
+ ycore.comty_post_comment.new((err, res) => {
+ if (err) {
+ ycore.notify.error('This action could not be performed.', err)
}
+ this.setState({ raw_comment: '' })
+ return this.reloadComments()
+ }, payload)
}
-
+ return false
+ }
-
- render(){
- const {comment_data, loading} = this.state
-
- return(
-
- 
-
-
-
-
- @{publisher.username} {ycore.booleanFix(publisher.verified)?
e.preventDefault()} className={styles.comment_user_ago}>{ycore.time.stmToAgo(time)}
-
-
- {Orginaltext}
-
-
- )
+ renderComment = a => {
+ const { id, time, Orginaltext, publisher } = a
+ const CommentMenu = (
+
-
- Comments ({comment_data.length})
-
- {loading? (
- this.renderComment(item)
- )}
- />
- }
-
-
-
-
-
-
- this.handleNewComment()} placeholder="Write a comment..." allowClear onChange={this.HandleCommentInput} />
-
-
+
+ )
+ }
+ HandleCommentInput = e => {
+ const { value } = e.target
+ this.setState({ raw_comment: value })
+ }
+ reloadComments() {
+ try {
+ this.setState({ loading: true })
+ const payload = { post_id: this.props.post_id }
+ ycore.comty_post.get((err, res) => {
+ const post_comments = JSON.parse(res)['post_comments']
+ this.setState({ comment_data: post_comments, loading: false })
+ }, payload)
+ } catch (error) {
+ return false
}
-}
\ No newline at end of file
+ }
+
+ render() {
+ const { comment_data, loading } = this.state
+
+ return (
+
+
+
+
+
+
+ @{publisher.username}{' '}
+ {ycore.booleanFix(publisher.verified) ? (
+
e.preventDefault()} + className={styles.comment_user_ago} + > + {ycore.time.stmToAgo(time)} +
+
+
+ {Orginaltext}
+
+
+ )
+ }
+}
diff --git a/src/components/Layout/Secondary/renders.less b/src/components/Layout/Secondary/renders.less
index 81981a50..bf9acb0c 100644
--- a/src/components/Layout/Secondary/renders.less
+++ b/src/components/Layout/Secondary/renders.less
@@ -1,189 +1,223 @@
@import '~themes/vars.less';
-.SecondaryBody{
- width: 100%;
- height: 100%;
+.SecondaryBody {
+ width: 100%;
+ height: 100%;
}
-.UserContainer{
- display: flex;
- position: relative;
- float: right;
- z-index: 150;
- transform: translate(0, -40px);
- .UserContainer_text{
- margin: 0 8px;
- h4 { text-align: right; }
- p { word-break: break-all; text-align: right; font-size: 11px; color: #eeeeee!important; }
+.UserContainer {
+ display: flex;
+ position: relative;
+ float: right;
+ z-index: 150;
+ transform: translate(0, -40px);
+
+ .UserContainer_text {
+ margin: 0 8px;
+
+ h4 {
+ text-align: right;
}
-
-}
-
-.postAvatar{
- position: absolute;
- left: -8px;
- top: -8px;
- display: flex;
-}
-.titleUser{
- display: flex;
- font-family: 'Poppins', sans-serif;
- margin: 0 0 0 50px;
- color: #ffffff!important;
-}
-.textAgo{
- display: flex;
- font-size: 10px;
- margin: 0 0 0 53px;
-}
-.PostTags{
- float: right;
- width: 100%;
- z-index: 10;
- :global {
- .anticon{
- color:rgb(249, 179, 64);
- float: right;
- margin: -0 6px 0 0;;
- font-size: 17px;
- }
- .MoreMenu{
- color: #2d2d2d !important;
- }
+ p {
+ word-break: break-all;
+ text-align: right;
+ font-size: 11px;
+ color: #eeeeee !important;
}
+ }
+
+
}
-.titleWrapper{
- display: flex;
- h4{
- cursor: pointer;
+
+.postAvatar {
+ position: absolute;
+ left: -8px;
+ top: -8px;
+ display: flex;
+}
+
+.titleUser {
+ display: flex;
+ font-family: 'Poppins', sans-serif;
+ margin: 0 0 0 50px;
+ color: #ffffff !important;
+}
+
+.textAgo {
+ display: flex;
+ font-size: 10px;
+ margin: 0 0 0 53px;
+}
+
+.PostTags {
+ float: right;
+ width: 100%;
+ z-index: 10;
+
+ :global {
+ .anticon {
+ color: rgb(249, 179, 64);
+ float: right;
+ margin: -0 6px 0 0;
+ ;
+ font-size: 17px;
}
- color: #ffffff!important;
-}
-.contentWrapper{
- margin: auto;
- width: 100%;
- padding: 20px;
-}
-
-
-.postContent{
- word-break: break-all;
- position: absolute;
- vertical-align: bottom;
- border-radius: 7px;
- bottom: 0;
- max-width: 50vw;
-
- background-color: #2d2d2d4b;
- padding: 10px;
- h3{
- font-family: "Poppins", sans-serif;
- color: #ffffff;
- font-weight: 400;
- font-size: 15px;
- letter-spacing: -0.3px;
+ .MoreMenu {
+ color: #2d2d2d !important;
}
+ }
}
-.postContent_OnlyText{
- padding: 25% 0 0 0;
- position: relative;
- vertical-align: middle;
+
+.titleWrapper {
+ display: flex;
+
+ h4 {
+ cursor: pointer;
+ }
+
+ color: #ffffff !important;
}
-
-.likebtn{
- :global{
- svg{
- color:rgba(0, 0, 0, 0.45);
- }
- svg:hover{
- color: rgb(233, 35, 68);
- transition: all 0.2s linear;
- }
- }
+.contentWrapper {
+ margin: auto;
+ width: 100%;
+ padding: 20px;
}
-.comments_body{
+
+.postContent {
+ word-break: break-all;
+ position: absolute;
+ vertical-align: bottom;
+ border-radius: 7px;
+ bottom: 0;
+ max-width: 50vw;
+
+ background-color: #2d2d2d4b;
+ padding: 10px;
+
+ h3 {
font-family: "Poppins", sans-serif;
- padding: 75px 10px 10px 20px;
-
- .comments_body_title{
- font-size: 12px;
- h1{
- font-weight: 550;
- letter-spacing: 0.01px;
- }
- }
+ color: #ffffff;
+ font-weight: 400;
+ font-size: 15px;
+ letter-spacing: -0.3px;
+ }
+}
- .comments_cards_wrapper{
- z-index: 50;
- overflow: scroll;
- :global{
- overflow: scroll;
- }
- .comment_card{
- position: relative;
- width: 100%;
- background-color: #ffffff;
- word-break: break-all;
- .comment_title{
- display: flex;
- img{
- float: left;
- width: 30px;
- height: 30px;
- border-radius: 12px;
- }
- .comment_user_username{
- margin: 0 5px 0 8px;
- vertical-align: middle;
- height: 100%;
- color: #2d2d2d;
- line-height: 25px;
- }
- .comment_user_ago{
- cursor: pointer;
- position: absolute;
- right: 0;
- text-align: right;
- font-size: 9px;
- }
- }
- .comment_text{
- margin: 10px 0 0 0;
- }
-
- }
- }
-
- .comment_box{
- width: 100%;
- bottom: 0;
- right: 0;
- position: absolute;
- z-index: 100;
- background-color: #ffffffd7;
- padding-top: 20px;
- padding-bottom: 40px;
- border-radius: 0 0 0 32px;
- .comment_box_body{
- border-radius: 5px;
- width: 85%;
- height: 40px;
- margin: auto;
- background-color: #f8f6f8;
- :global{
- .ant-input-affix-wrapper, .ant-input{
- padding: 4px 5px;
- background-color: transparent;
- border: 0;
- }
- }
- }
- }
+.postContent_OnlyText {
+ padding: 25% 0 0 0;
+ position: relative;
+ vertical-align: middle;
}
+
+.likebtn {
+ :global {
+ svg {
+ color: rgba(0, 0, 0, 0.45);
+ }
+
+ svg:hover {
+ color: rgb(233, 35, 68);
+ transition: all 0.2s linear;
+ }
+ }
+}
+
+.comments_body {
+ font-family: "Poppins", sans-serif;
+ padding: 75px 10px 10px 20px;
+
+ .comments_body_title {
+ font-size: 12px;
+
+ h1 {
+ font-weight: 550;
+ letter-spacing: 0.01px;
+ }
+ }
+
+ .comments_cards_wrapper {
+ z-index: 50;
+ overflow: scroll;
+
+ :global {
+ overflow: scroll;
+ }
+
+ .comment_card {
+ position: relative;
+ width: 100%;
+ background-color: #ffffff;
+ word-break: break-all;
+
+ .comment_title {
+ display: flex;
+
+ img {
+ float: left;
+ width: 30px;
+ height: 30px;
+ border-radius: 12px;
+ }
+
+ .comment_user_username {
+ margin: 0 5px 0 8px;
+ vertical-align: middle;
+ height: 100%;
+ color: #2d2d2d;
+ line-height: 25px;
+ }
+
+ .comment_user_ago {
+ cursor: pointer;
+ position: absolute;
+ right: 0;
+ text-align: right;
+ font-size: 9px;
+ }
+ }
+
+ .comment_text {
+ margin: 10px 0 0 0;
+ }
+
+ }
+ }
+
+ .comment_box {
+ width: 100%;
+ bottom: 0;
+ right: 0;
+ position: absolute;
+ z-index: 100;
+ background-color: #ffffffd7;
+ padding-top: 20px;
+ padding-bottom: 40px;
+ border-radius: 0 0 0 32px;
+
+ .comment_box_body {
+ border-radius: 5px;
+ width: 85%;
+ height: 40px;
+ margin: auto;
+ background-color: #f8f6f8;
+
+ :global {
+
+ .ant-input-affix-wrapper,
+ .ant-input {
+ padding: 4px 5px;
+ background-color: transparent;
+ border: 0;
+ }
+ }
+ }
+ }
+
+}
diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js
index e42a0981..5fbee2db 100755
--- a/src/components/Layout/Sider.js
+++ b/src/components/Layout/Sider.js
@@ -2,46 +2,46 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import * as antd from 'antd'
-import * as Icons from '@ant-design/icons';
+import * as Icons from '@ant-design/icons'
import Icon from '@ant-design/icons'
import { withI18n, Trans } from '@lingui/react'
import ScrollBar from '../ScrollBar'
import { config } from 'utils'
import styles from './Sider.less'
-import * as ycore from 'ycore';
-import router from 'umi/router';
-import {CustomIcons} from 'components'
+import * as ycore from 'ycore'
+import router from 'umi/router'
+import { CustomIcons } from 'components'
@withI18n()
class Sider extends PureComponent {
constructor(props) {
- super(props);
+ super(props)
this.state = {
isHover: false,
collapsedWidth: '30',
- };
+ }
}
- StrictMode = () =>{
- const { theme } = this.props;
+ StrictMode = () => {
+ const { theme } = this.props
if (ycore.AppSettings.StrictLightMode == false) {
- return "dark"
+ return 'dark'
}
return theme
}
handleClickMenu = e => {
- e.key === 'SignOut' && ycore.LogoutCall()
+ e.key === 'SignOut' && ycore.app_session.logout()
e.key === 'general_settings' && ycore.crouter.native('settings')
e.key === 'accountpage' && router.push('/account')
e.key === 'explore' && router.push('main')
e.key === 'admin_area' && router.push('__m')
}
- isDarkMode(){
+ isDarkMode() {
const { theme } = this.props
- if (theme == 'dark'){
+ if (theme == 'dark') {
return true
}
return false
@@ -56,82 +56,143 @@ class Sider extends PureComponent {
onCollapseChange,
} = this.props
return (
-
+
+ Comments ({comment_data.length})
+
+ {loading ? (
+ this.renderComment(item)}
+ />
+ )}
+
+
+
+
+ this.handleNewComment()}
+ placeholder="Write a comment..."
+ allowClear
+ onChange={this.HandleCommentInput}
+ />
+
+
- this.setState({ collapsedWidth: '90' })}
- onMouseLeave={() => this.setState({ collapsedWidth: '35' })}
- >
- ![]()
ycore.crouter.native('main')} src={collapsed? config.LogoPath : config.FullLogoPath } />
- onCollapseChange(!collapsed)} icon={collapsed?
-
+
)
}
}
diff --git a/src/components/Layout/Sider.less b/src/components/Layout/Sider.less
index c659952d..892a7240 100755
--- a/src/components/Layout/Sider.less
+++ b/src/components/Layout/Sider.less
@@ -6,16 +6,17 @@
@LDarkMode-color: #fff;
@LLightMode-color: #2F2E30;
-.CollapserWrapperLight{
+.CollapserWrapperLight {
height: 100%;
position: absolute;
float: left;
- top: 0;
+ top: 0;
left: 0;
z-index: 200;
vertical-align: middle;
- :global{
-
+
+ :global {
+
.ant-btn {
border: none;
border-radius: unset;
@@ -27,23 +28,25 @@
box-shadow: none;
transition: all 1s ease-in;
}
- .ant-btn:hover{
+
+ .ant-btn:hover {
background: rgba(121, 121, 121, 0.247);
background: linear-gradient(270deg, rgba(121, 121, 121, 0) 0%, rgba(252, 252, 252, 0.13) 95%);
transition: all 1s ease-in;
- }
+ }
}
}
-.CollapserWrapperDark{
+.CollapserWrapperDark {
height: 100%;
position: absolute;
float: left;
- top: 0;
+ top: 0;
left: 0;
z-index: 200;
vertical-align: middle;
- :global{
+
+ :global {
.ant-btn {
border: none;
border-radius: unset;
@@ -55,17 +58,19 @@
box-shadow: none;
transition: all 1s ease-in;
}
- .ant-btn:hover{
+
+ .ant-btn:hover {
background: rgba(121, 121, 121, 0.247);
background: linear-gradient(270deg, rgba(121, 121, 121, 0) 0%, rgba(121, 121, 121, 0.13) 95%);
transition: all 1s ease-in;
- }
+ }
}
}
.brand {
cursor: pointer;
- img{
+
+ img {
display: flex;
vertical-align: middle;
padding: 5px;
@@ -76,31 +81,34 @@
}
-.avatarFull{
+.avatarFull {
width: 120px;
}
-.avatar{
+.avatar {
margin: 0 0 15px 0;
}
-.something_thats_pulling_me_down{
- :global{
+.something_thats_pulling_me_down {
+ :global {
text-align: center;
bottom: 0;
position: absolute;
width: 100%;
}
}
-.siderhead{
+
+.siderhead {
cursor: pointer;
font-family: 'Source Sans Pro', sans-serif;
display: flex;
align-items: center;
justify-content: center;
- ::first-letter{
+
+ ::first-letter {
margin-left: 7px;
}
+
height: 60px;
font-size: 17px;
}
@@ -113,155 +121,192 @@
z-index: 100;
float: left;
position: relative;
-
+
:global {
.ant-layout-sider-dark {
background-color: @LDarkMode-backgroud;
color: @DarkMode-color;
- h2{
+
+ h2 {
color: @Theme-SiderDeco-Color;
}
- .ant-menu-item{
+
+ .ant-menu-item {
color: @DarkMode-color;
}
- .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
+
+ .ant-menu-inline,
+ .ant-menu-vertical,
+ .ant-menu-vertical-left {
:hover {
background-color: rgb(80, 80, 80);
color: #fff;
}
+
border-right: 1px solid transparent;
}
}
+
.ant-layout-sider-light {
background-color: @Theme-SiderDeco-Backgroud;
color: @Theme-SiderDeco-Color;
- h2{
+
+ h2 {
color: @Theme-SiderDeco-Color;
}
- .ant-menu-item{
+
+ .ant-menu-item {
color: @Theme-SiderDeco-Color;
}
- .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
+
+ .ant-menu-inline,
+ .ant-menu-vertical,
+ .ant-menu-vertical-left {
:hover {
background-color: @Theme-Hover-Backgroud;
color: #fff;
}
+
border-right: 1px solid transparent;
}
- }
+ }
}
}
.sider {
border-right: transparent;
- &.desktop_mode{
+
+ &.desktop_mode {
border-radius: 12px 0 0 12px;
}
+
height: 100%;
z-index: 50;
+
:global {
- .ant-menu-sub {
- font-size: 14px;
- -webkit-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
- -moz-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
- box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
- }
- .ant-menu-dark {
- background-color: @LDarkMode-backgroud;
- color: @LDarkMode-color;
+ .ant-menu-sub {
+ font-size: 14px;
+ -webkit-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
+ -moz-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
+ box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
}
- .ant-menu-light {
- background-color: @LLightMode-backgroud;
- color: @LLightMode-color;
+
+ .ant-menu-dark {
+ background-color: @LDarkMode-backgroud;
+ color: @LDarkMode-color;
+ }
+
+ .ant-menu-light {
+ background-color: @LLightMode-backgroud;
+ color: @LLightMode-color;
}
}
- .menuItems{
+
+ .menuItems {
background-color: transparent;
- margin-bottom: 8px;
+ margin-bottom: 8px;
width: 100%;
font-weight: 500;
animation: fadein 0.5s;
- :global {
- .ant-menu-item-selected{
- background-color: transparent;
- }
- .ant-menu-item .anticon, .ant-menu-submenu-title .anticon {
- font-weight: 500;
- min-width: 14px;
- margin: 0 10px 0 10px;
- font-size: 16px;
- line-height: 1;
- }
+
+ :global {
+ .ant-menu-item-selected {
+ background-color: transparent;
}
+
+ .ant-menu-item .anticon,
+ .ant-menu-submenu-title .anticon {
+ font-weight: 500;
+ min-width: 14px;
+ margin: 0 10px 0 10px;
+ font-size: 16px;
+ line-height: 1;
+ }
+ }
}
- .menuItemsCollapsed{
+
+ .menuItemsCollapsed {
background-color: transparent;
- margin-bottom: 8px;
+ margin-bottom: 8px;
width: 100%;
font-weight: 500;
animation: fadein 0.5s;
- :global {
- .ant-menu-item-selected{
- background-color: transparent;
- }
- .ant-menu-item {
- padding: 0 !important;
- margin: 2px 0 2px 0;
- width: 100%;
- text-align: center;
- }
+
+ :global {
+ .ant-menu-item-selected {
+ background-color: transparent;
}
+
+ .ant-menu-item {
+ padding: 0 !important;
+ margin: 2px 0 2px 0;
+ width: 100%;
+ text-align: center;
+ }
+ }
}
+
.menuContainer {
height: 100%;
margin: 18px 0 8px 0;
+
.scrollbar-container {
position: initial;
height: 100%;
}
+
overflow-x: hidden;
flex: 1;
+
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
+
&:hover {
&::-webkit-scrollbar-thumb {
background-color: rgba(59, 59, 59, 0.2);
}
}
+
:global {
.ant-layout-sider-children {
display: flex;
flex-direction: column;
justify-content: space-between;
}
+
.ant-layout-sider-collapsed {
.ant-menu-item {
left: 0;
margin: 0;
padding: 0;
}
- .ant-menu-inline-collapsed > .ant-menu-item{
+
+ .ant-menu-inline-collapsed>.ant-menu-item {
padding: 0;
- left:0;
+ left: 0;
}
}
+
.scrollbar-container {
position: initial;
height: 100%;
}
+
.ant-menu-inline .ant-menu-item {
font-size: 14px;
font-family: 'Source Sans Pro', sans-serif;
}
+
.ant-menu-dark .ant-menu-item a {
color: rgb(197, 197, 197);
}
}
}
}
+
.scrollbar-container {
position: initial;
height: 100%;
@@ -285,10 +330,12 @@
background-color: #2F2E30;
}
}
+
svg {
height: 100%;
vertical-align: middle;
}
+
span {
line-height: 10px;
}
diff --git a/src/components/Layout/WindowAppBar.js b/src/components/Layout/WindowAppBar.js
deleted file mode 100644
index 6fd8c1b2..00000000
--- a/src/components/Layout/WindowAppBar.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react'
-import styles from './WindowAppBar.less'
-import * as Icons from '@ant-design/icons'
-const remote = {
- getCurrentWindow: () =>{
- return
- },
- handleFullRescale: () => {
- return
- },
- app: {
- quit: () => {
- return
- }
- }
-}
-export default class WindowAppBar extends React.PureComponent {
- handleFullRescale(){
- return
- // const currentWindow = remote.getCurrentWindow()
- // if(currentWindow.isMaximized()) {
- // currentWindow.unmaximize()
- // } else {
- // currentWindow.maximize()
- // }
- }
- render(){
- return(
-
-
-
-
- Explore
-
+
+
+ this.setState({ collapsedWidth: '90' })}
+ onMouseLeave={() => this.setState({ collapsedWidth: '35' })}
+ >
+
-
+
+ ![]()
ycore.crouter.native('main')}
+ src={collapsed ? config.LogoPath : config.FullLogoPath}
+ />
+
+
+ onCollapseChange(!collapsed)}
+ icon={
+ collapsed ? (
+
+
+
+
+
+
+ Explore
+
+
-
- Journal
-
-
-
- Marketplace
-
-
-
-
-
-
+
+ Journal
+
+
+
+
+
+ Marketplace
+
+
+
+
+
-
-
-
-
-
- Settings
-
- {ycore.booleanFix(userData.admin)?
-
- {userData.username}
-
- :
- undefined
- }
-
- {collapsed?
-
- Logout }
-
-
-
+
-
}
-
+
+
+
+ Settings
+
+
+ {ycore.booleanFix(userData.admin) ? (
+
+
+ {userData.username}
+
+
+ ) : (
+ undefined
+ )}
+
+ {collapsed ? (
+
+
+ Logout }
+
+
+
+
+ )}
+
-
- )
- }
-}
\ No newline at end of file
diff --git a/src/components/Layout/WindowAppBar.less b/src/components/Layout/WindowAppBar.less
deleted file mode 100644
index 3293acfd..00000000
--- a/src/components/Layout/WindowAppBar.less
+++ /dev/null
@@ -1,31 +0,0 @@
-.WindowAppBar {
- -webkit-app-region: drag;
- position: relative;
- vertical-align: top;
- width: 100%;
- height: 25px;
- z-index: 5000;
- background-color: #2d2d2d;
-}
-.WindowControl {
- float: right;
- height: 100%;
- padding: 0 20px 0 0;
- transition: all 140ms linear;
- :global {
- color: #747474;
- .anticon {
- margin: 0 15px 0 15px;
- display: inline-block;
- color: inherit;
- font-style: normal;
- vertical-align: middle;
- text-align: center;
- }
- }
-}
-.WindowControl:hover{
- :global{
- color: #ffffff;
- }
-}
\ No newline at end of file
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
index 623e1f25..bfb103b5 100755
--- a/src/components/Layout/index.js
+++ b/src/components/Layout/index.js
@@ -1,6 +1,5 @@
import Sider from './Sider'
import Control from './Control'
import Secondary from './Secondary/index.js'
-import WindowAppBar from './WindowAppBar'
-export { Sider, Control, Secondary,WindowAppBar }
+export { Sider, Control, Secondary }
diff --git a/src/components/LikeBtn/index.js b/src/components/LikeBtn/index.js
deleted file mode 100755
index 619d10b3..00000000
--- a/src/components/LikeBtn/index.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react'
-import styles from './index.scss'
-import * as ycore from 'ycore'
-import classnames from 'classnames'
-
-class LikeBTN extends React.PureComponent {
- constructor(props){
- super(props),
- this.state = {
- liked: this.props.liked,
- likes: this.props.count,
- type: (this.props.liked? 'dislike' : 'like' ),
- clicked: false
- }
- }
-
- SumLike(){
- this.setState({
- likes: (parseInt(this.state.likes) + 1),
- type: 'dislike'
- })
- setTimeout(() => {this.setState({ liked: true })}, 500)
- }
- RestLike(){
- this.setState({
- likes: (parseInt(this.state.likes) - 1),
- type: 'like'
- })
- setTimeout(() => {this.setState({ liked: false })}, 500)
- }
-
- dispatchLike(e){
- const { type } = this.state
- ycore.yconsole.log(`Dispatch ${type} to post id => ${e}`)
- this.setState({ clicked: true })
- setTimeout(() => {
- this.setState({ clicked: false })
- }, 500);
-
- ycore.ActionPost('like', e, null, (exception, response) => {
- if (exception) {
- ycore.notifyError(response)
- return
- }
- if (type == 'like') {
- this.SumLike()
- }
- if (type == 'dislike') {
- this.RestLike()
- }
-
- })
-
-
- }
- render(){
- const { id } = this.props
- const { likes, liked, clicked } = this.state
- if (!id){
- ycore.yconsole.error('[LikeBTN] No post id provided!')
- return null
- }
- return(
-
- remote.getCurrentWindow().minimize() } id="minimize-button" />
- this.handleFullRescale()} />
- remote.app.quit()} id="close-button" />
-
-
-
-
- )
- }
-}
-
-export default LikeBTN
\ No newline at end of file
diff --git a/src/components/Like_button/index.js b/src/components/Like_button/index.js
new file mode 100644
index 00000000..ac3e5ac2
--- /dev/null
+++ b/src/components/Like_button/index.js
@@ -0,0 +1,106 @@
+import React from 'react'
+import styles from './index.scss'
+import * as ycore from 'ycore'
+import classnames from 'classnames'
+
+class Like_button extends React.PureComponent {
+ constructor(props) {
+ super(props),
+ (this.state = {
+ liked: this.props.liked,
+ likes: this.props.count,
+ type: this.props.liked ? 'dislike' : 'like',
+ clicked: false,
+ })
+ }
+
+ SumLike() {
+ this.setState({
+ likes: parseInt(this.state.likes) + 1,
+ type: 'dislike',
+ })
+ setTimeout(() => {
+ this.setState({ liked: true })
+ }, 500)
+ }
+ RestLike() {
+ this.setState({
+ likes: parseInt(this.state.likes) - 1,
+ type: 'like',
+ })
+ setTimeout(() => {
+ this.setState({ liked: false })
+ }, 500)
+ }
+
+ dispatchLike(e) {
+ const { type } = this.state
+ ycore.yconsole.log(`Dispatch ${type} to post id => ${e}`)
+ this.setState({ clicked: true })
+ setTimeout(() => {
+ this.setState({ clicked: false })
+ }, 500)
+ const payload = { post_id: e }
+ ycore.comty_post.like((err, res) => {
+ if (err) {
+ ycore.notify.error(res)
+ return
+ }
+ if (type == 'like') {
+ this.SumLike()
+ }
+ if (type == 'dislike') {
+ this.RestLike()
+ }
+ }, payload)
+ }
+ render() {
+ const { id } = this.props
+ const { likes, liked, clicked } = this.state
+ if (!id) {
+ ycore.yconsole.error('[LikeBTN] No post id provided!')
+ return null
+ }
+ return (
+ {likes}
-
+
+
+ )
+ }
+}
+
+export default Like_button
diff --git a/src/components/LikeBtn/index.scss b/src/components/Like_button/index.scss
old mode 100755
new mode 100644
similarity index 81%
rename from src/components/LikeBtn/index.scss
rename to src/components/Like_button/index.scss
index 9d7e785f..2f10bdf9
--- a/src/components/LikeBtn/index.scss
+++ b/src/components/Like_button/index.scss
@@ -1,17 +1,22 @@
- .like_button, .like_button:before, .like_button:after {
- position: relative;
- box-sizing: border-box;
- }
- .ripple, .ripple:before, .ripple:after {
+ .like_button,
+ .like_button:before,
+ .like_button:after {
position: relative;
box-sizing: border-box;
}
- .btnWrapper{
+ .ripple,
+ .ripple:before,
+ .ripple:after {
+ position: relative;
+ box-sizing: border-box;
+ }
+
+ .btnWrapper {
display: flex;
}
- .likeCounter{
+ .likeCounter {
font-family: "Poppins", sans-serif;
line-height: 70px;
margin: 0 0 0 10px;
@@ -20,26 +25,28 @@
transform: perspective(100px) translateZ(10px);
filter: blur(10px);
letter-spacing: 0.1em;
- &.active{
+
+ &.active {
opacity: 1;
transform: perspective(100px) translateZ(0px);
filter: blur(0px);
letter-spacing: 0.15em;
transition: opacity 1000ms linear, transform 1000ms linear, filter 400ms linear, letter-spacing 1000ms linear;
}
- &.past{
+
+ &.past {
opacity: 0;
transform: perspective(100px) translateZ(-10px);
filter: blur(10px);
letter-spacing: 0.2em;
transition: opacity 1000ms linear, transform 1000ms linear, filter 400ms linear, letter-spacing 1000ms linear;
}
-
+
}
-
+
.like_button {
--color-heart: #EA442B;
- --easing: cubic-bezier(.7,0,.3,1);
+ --easing: cubic-bezier(.7, 0, .3, 1);
--duration: .5s;
font-size: 40px;
@@ -54,7 +61,7 @@
z-index: 2;
transition: transform var(--duration) var(--easing);
cursor: pointer;
-
+
&:before {
z-index: -1;
content: '';
@@ -66,7 +73,7 @@
border-radius: inherit;
transition: inherit;
}
-
+
&:after {
content: '';
position: absolute;
@@ -78,55 +85,62 @@
border-radius: inherit;
z-index: -1;
}
-
-
-
-
+
+
+
+
@keyframes depress {
- from, to {
+
+ from,
+ to {
transform: none;
}
+
50% {
transform: translateY(5%) scale(0.9);
}
}
-
+
@keyframes depress-shadow {
- from, to {
+
+ from,
+ to {
transform: none;
}
+
50% {
transform: scale(0.5);
}
}
}
-
+
.like_wrapper {
display: grid;
align-items: center;
justify-content: center;
z-index: 1;
- > * {
+
+ >* {
margin: auto;
- grid-area: 1 / 1;
+ grid-area: 1 / 1;
}
}
-
+
.heart {
width: .5em;
height: .5em;
display: block;
- transform-origin: center 80%;
+ transform-origin: center 80%;
- > path {
+ >path {
stroke: var(--color-heart);
stroke-width: 2;
transition: fill var(--duration) var(--easing);
fill: var(--color-heart);
}
-
- &.empty{
- > path {
+
+ &.empty {
+ >path {
stroke: var(--color-heart);
stroke-width: 2;
transition: fill var(--duration) var(--easing);
@@ -134,18 +148,23 @@
}
}
- &.clickanim{
+ &.clickanim {
animation: heart-bounce var(--duration) var(--easing);
+
@keyframes heart-bounce {
- 40% { transform: scale(0.7); }
- 0%, 80%, 100% { transform: scale(1); }
+ 40% {
+ transform: scale(0.7);
+ }
+
+ 0%,
+ 80%,
+ 100% {
+ transform: scale(1);
+ }
}
}
animation: none;
-
-
-
}
.ripple {
@@ -154,7 +173,7 @@
border-radius: 50%;
overflow: hidden;
z-index: 1;
-
+
&:before {
content: '';
position: absolute;
@@ -166,16 +185,21 @@
border-radius: inherit;
transform: scale(0);
}
- &.clickanim{
+
+ &.clickanim {
&:before {
animation: ripple-out var(--duration) var(--easing);
+
@keyframes ripple-out {
- from { transform: scale(0); }
- to { transform: scale(5); }
+ from {
+ transform: scale(0);
+ }
+
+ to {
+ transform: scale(5);
+ }
}
}
}
-
- }
-
\ No newline at end of file
+ }
diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js
index 98dab1ab..0033275e 100755
--- a/src/components/Loader/Loader.js
+++ b/src/components/Loader/Loader.js
@@ -1,5 +1,5 @@
import React from 'react'
-import {CoreLoader} from 'components'
+import { CoreLoader } from 'components'
import { AppSettings } from 'ycore'
import PropTypes from 'prop-types'
import classNames from 'classnames'
@@ -11,14 +11,14 @@ const Loader = ({ spinning = true, fullScreen }) => {
+ {likes} +
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
@@ -51,4 +53,4 @@ Loader.propTypes = {
fullScreen: PropTypes.bool,
}
-export default Loader;
+export default Loader
diff --git a/src/components/Loader/Loader.less b/src/components/Loader/Loader.less
index f7c229df..7151e39b 100755
--- a/src/components/Loader/Loader.less
+++ b/src/components/Loader/Loader.less
@@ -1,4 +1,5 @@
@import '~themes/vars.less';
+
.loader {
background-color: transparent; //rgba(44, 44, 44, 0.74);
width: 100%;
@@ -16,7 +17,7 @@
position: fixed;
}
- &.hidden{
+ &.hidden {
z-index: -1;
opacity: 0;
transition: opacity 3s ease 0.5s, z-index 0.1s ease 1.5s;
@@ -39,18 +40,20 @@
height: 0px;
margin: 0 auto;
position: relative;
- &.end{
+
+ &.end {
.loader {
z-index: -1;
opacity: 0;
}
+
>div {
- animation: newloader 0.8s linear;
+ animation: newloader 0.8s linear;
+ }
}
- }
}
-
- .newloader > div {
+
+ .newloader>div {
background-color: rgb(34, 34, 34);
width: 6px;
height: 20px;
@@ -62,52 +65,64 @@
transform: rotate(0deg);
animation: newloader 0.8s infinite;
}
- .newloader > div:nth-child(2) {
+
+ .newloader>div:nth-child(2) {
transform: rotate(45deg);
animation-delay: 0.1s;
}
- .newloader > div:nth-child(3) {
+
+ .newloader>div:nth-child(3) {
transform: rotate(90deg);
animation-delay: 0.2s;
}
- .newloader > div:nth-child(4) {
+
+ .newloader>div:nth-child(4) {
transform: rotate(135deg);
animation-delay: 0.3s;
}
- .newloader > div:nth-child(5) {
+
+ .newloader>div:nth-child(5) {
transform: rotate(180deg);
animation-delay: 0.4s;
}
- .newloader > div:nth-child(6) {
+
+ .newloader>div:nth-child(6) {
transform: rotate(225deg);
animation-delay: 0.5s;
}
- .newloader > div:nth-child(7) {
+
+ .newloader>div:nth-child(7) {
transform: rotate(270deg);
animation-delay: 0.6s;
}
- .newloader > div:nth-child(8) {
+
+ .newloader>div:nth-child(8) {
transform: rotate(315deg);
animation-delay: 0.7s;
}
+
@keyframes unshow {
- 0%{
+ 0% {
opacity: 1;
}
- 100%{
+
+ 100% {
opacity: 0;
z-index: -1;
}
}
+
@keyframes newloader {
0% {
background: transparent;
left: -10px;
transform-origin: 10px 35px;
}
+
30% {
background: #fff;
}
+
100% {
background: transparent;
left: 10px;
@@ -115,4 +130,3 @@
}
}
}
-
diff --git a/src/components/MainFeed/index.js b/src/components/MainFeed/index.js
index ec494a73..c250297f 100755
--- a/src/components/MainFeed/index.js
+++ b/src/components/MainFeed/index.js
@@ -3,165 +3,194 @@ import * as antd from 'antd'
import * as ycore from 'ycore'
import * as Icons from '@ant-design/icons'
-import {PostCard} from 'components'
+import { PostCard } from 'components'
export const RenderFeed = {
- RefreshFeed: () => {
- window.MainFeedComponent.FirstGet();
- return
- },
- killByID: (post_id) => {
- window.MainFeedComponent.killByID(post_id);
- return
- },
- addToRend: (payload) => {
- window.MainFeedComponent.addToRend(payload);
- return
- }
+ RefreshFeed: () => {
+ window.MainFeedComponent.FirstGet()
+ return
+ },
+ killByID: post_id => {
+ window.MainFeedComponent.killByID(post_id)
+ return
+ },
+ addToRend: payload => {
+ window.MainFeedComponent.addToRend(payload)
+ return
+ },
}
class MainFeed extends React.Component {
- constructor(props){
- super(props)
- window.MainFeedComponent = this;
- this.state = {
- invalid: false,
- loading: false,
- data: [],
- fkey: 0
+ constructor(props) {
+ super(props)
+ window.MainFeedComponent = this
+ this.state = {
+ invalid: false,
+ loading: false,
+ data: [],
+ fkey: 0,
+ }
+ }
+
+ componentDidMount() {
+ this.FirstGet()
+ }
+
+ toogleLoader() {
+ this.setState({ loading: !this.state.loading })
+ }
+
+ killByID(post_id) {
+ const a = this.state.data
+ const b = ycore.arrayRemoveByID(a, post_id)
+ this.setState({ data: b })
+ }
+
+ addToRend(payload) {
+ let a = this.state.data
+ a.unshift(payload)
+ this.setState({ data: a })
+ }
+
+ FirstGet() {
+ try {
+ const { get, uid, filters } = this.props
+ if (this.props.custompayload) {
+ this.setState({
+ isEnd: true,
+ data: this.props.custompayload,
+ loading: false,
+ })
+ return
+ }
+ if (!get) {
+ ycore.yconsole.error('Please, fill params with an catch type...')
+ return
+ }
+ this.toogleLoader()
+ const payload = { fkey: 0, type: get, id: uid }
+ ycore.comty_post.getFeed((err, res) => {
+ if (err) {
+ ycore.notify.error('Error when get data from this input')
+ return
}
- }
+ if (JSON.parse(res).api_status == '400') {
+ this.setState({ invalid: true })
+ return
+ }
+ const parsed = JSON.parse(res)['data']
- componentDidMount(){
- this.FirstGet()
+ const isEnd =
+ parsed.length < ycore.AppSettings.limit_post_catch ? true : false
+ this.setState({ isEnd: isEnd, data: parsed, loading: false })
+ }, payload)
+ } catch (err) {
+ ycore.notify.error('err')
}
+ }
- toogleLoader(){
- this.setState({ loading: !this.state.loading })
- }
+ GetMore(fkey) {
+ try {
+ const { get, uid, filters } = this.props
+ if (!get) {
+ ycore.yconsole.error('Please, fill params with an catch type...')
+ return
+ }
+ if (!fkey) {
+ ycore.yconsole.warn(
+ 'Please, provide a fkey for offset the feed, default using => 0'
+ )
+ }
+ this.toogleLoader()
+ const getLastPost = ycore.objectLast(this.state.data)
+ ycore.yconsole.log('LAST POST ID =>', getLastPost.id)
- killByID(post_id){
- const a = this.state.data
- const b = ycore.arrayRemoveByID(a, post_id)
- this.setState({data: b})
+ const payload = { fkey: getLastPost.id, type: get, id: uid }
+ ycore.comty_post.getFeed((err, res) => {
+ if (err) {
+ return false
+ }
+ const oldData = this.state.data
+ const parsed = JSON.parse(res)['data']
+ const mix = oldData.concat(parsed)
+ const isEnd =
+ parsed.length < ycore.AppSettings.limit_post_catch ? true : false
+ this.setState({ isEnd: isEnd, data: mix, loading: false }, () =>
+ ycore.gotoElement(getLastPost.id)
+ )
+ return true
+ }, payload)
+ } catch (err) {
+ ycore.notify.error(err)
}
+ }
- addToRend(payload){
- let a = this.state.data
- a.unshift(payload)
- this.setState({ data: a })
- }
+ renderFeedPosts = () => {
+ const { data, loading, isEnd } = this.state
- FirstGet() {
- try{
- const { get, uid, filters } = this.props;
- if (this.props.custompayload) {
- this.setState({ isEnd: true, data: this.props.custompayload, loading: false })
- return
- }
- if (!get) {
- ycore.yconsole.error('Please, fill params with an catch type...')
- return
- }
- this.toogleLoader()
- const payload = { fkey: 0, type: get, id: uid }
- ycore.comty_post.getFeed((err,res) => {
- if (err) {
- ycore.notifyError('Error when get data from this input')
- return
- }
- if (JSON.parse(res).api_status == '400') {
- this.setState({ invalid: true })
- return
- }
- const parsed = JSON.parse(res)['data']
-
- const isEnd = parsed.length < ycore.AppSettings.limit_post_catch? true : false
- this.setState({ isEnd: isEnd, data: parsed, loading: false })
- }, payload)
+ const loadMore =
+ !isEnd && !loading ? (
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ ) : null
+ try {
+ ycore.yconsole.log(data)
+ return (
+
+
+ )}
+ />
+ )
+ } catch (err) {
+ return false
+ }
+ }
- }catch(err){
- ycore.notifyError('err')
- }
- }
-
- GetMore(fkey){
- try{
- const { get, uid, filters } = this.props;
- if (!get) {
- ycore.yconsole.error('Please, fill params with an catch type...')
- return
- }
- if (!fkey) {
- ycore.yconsole.warn('Please, provide a fkey for offset the feed, default using => 0');
- }
- this.toogleLoader()
- const getLastPost = ycore.objectLast(this.state.data)
- ycore.yconsole.log('LAST POST ID =>', getLastPost.id)
-
- const payload = { fkey: getLastPost.id, type: get, id: uid }
- ycore.comty_post.getFeed((err,res) => {
- if (err){return false}
- const oldData = this.state.data
- const parsed = JSON.parse(res)['data']
- const mix = oldData.concat(parsed)
- const isEnd = parsed.length < ycore.AppSettings.limit_post_catch? true : false
- this.setState({ isEnd: isEnd, data: mix, loading: false }, () => ycore.gotoElement(getLastPost.id) )
- return true
- }, payload)
- }catch(err){
- ycore.notifyError(err)
- }
-
- }
-
- renderFeedPosts = () =>{
- const {data, loading, isEnd} = this.state
-
- const loadMore =
- !isEnd && !loading ? (
-
+ {invalid ? (
+
-
- ) : null;
- try {
- ycore.yconsole.log(data)
- return (
-
- {invalid?
-
-
- If this error has occurred several times, try restarting the app
-
- :
- loading?
-
-
- : this.renderFeedPosts()
- }
-
-
- )
- }
+ ![]({"https://api.ragestudio.net/id.svg"})
YulioID™
YulioID™
+