mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
0.1.17 Login Update
This commit is contained in:
srgooglo
parent
26ba451ff7
commit
e7297c3052
@ -20,6 +20,7 @@ export default {
|
|||||||
webpackChunkName: true,
|
webpackChunkName: true,
|
||||||
loadingComponent: './components/Loader/Loader',
|
loadingComponent: './components/Loader/Loader',
|
||||||
},
|
},
|
||||||
|
|
||||||
routes: {
|
routes: {
|
||||||
exclude: [
|
exclude: [
|
||||||
/model\.(j|t)sx?$/,
|
/model\.(j|t)sx?$/,
|
||||||
|
|||||||
17
.vscode/launch.json
vendored
Normal file
17
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
// Use IntelliSense to learn about possible attributes.
|
||||||
|
// Hover to view descriptions of existing attributes.
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"type": "node",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "Launch Program",
|
||||||
|
"skipFiles": [
|
||||||
|
"<node_internals>/**"
|
||||||
|
],
|
||||||
|
"program": "${file}"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
6
.vsls.json
Normal file
6
.vsls.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"$schema": "http://json.schemastore.org/vsls",
|
||||||
|
"excludeFiles": [],
|
||||||
|
"hideFiles": []
|
||||||
|
|
||||||
|
}
|
||||||
@ -2,7 +2,7 @@
|
|||||||
"name": "comty-development",
|
"name": "comty-development",
|
||||||
"title": "Comty™",
|
"title": "Comty™",
|
||||||
"DevBuild": true,
|
"DevBuild": true,
|
||||||
"version": "0.1.16",
|
"version": "0.1.17",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"author": "RageStudio",
|
"author": "RageStudio",
|
||||||
@ -63,8 +63,6 @@
|
|||||||
"validator": "^12.2.0"
|
"validator": "^12.2.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"rimraf": "^3.0.2",
|
|
||||||
"wait-on": "^4.0.0",
|
|
||||||
"@lingui/babel-preset-react": "^2.9.1",
|
"@lingui/babel-preset-react": "^2.9.1",
|
||||||
"@lingui/cli": "^2.9.1",
|
"@lingui/cli": "^2.9.1",
|
||||||
"@lingui/loader": "^2.9.1",
|
"@lingui/loader": "^2.9.1",
|
||||||
@ -88,12 +86,15 @@
|
|||||||
"module": "^1.2.5",
|
"module": "^1.2.5",
|
||||||
"now": "^17.0.3",
|
"now": "^17.0.3",
|
||||||
"prettier": "^1.19.1",
|
"prettier": "^1.19.1",
|
||||||
|
"rimraf": "^3.0.2",
|
||||||
"stylelint": "^13.1.0",
|
"stylelint": "^13.1.0",
|
||||||
"stylelint-config-prettier": "^8.0.1",
|
"stylelint-config-prettier": "^8.0.1",
|
||||||
"stylelint-config-standard": "^20.0.0",
|
"stylelint-config-standard": "^20.0.0",
|
||||||
"typescript": "^3.7.5",
|
"typescript": "^3.7.5",
|
||||||
"umi": "^2.13.3",
|
"umi": "^2.13.3",
|
||||||
"umi-plugin-react": "^1.15.2"
|
"umi-plugin-react": "^1.15.2",
|
||||||
|
"wait-on": "^4.0.0",
|
||||||
|
"workbox-webpack-plugin": "^5.0.0"
|
||||||
},
|
},
|
||||||
"lingui": {
|
"lingui": {
|
||||||
"fallbackLocale": "en",
|
"fallbackLocale": "en",
|
||||||
|
|||||||
@ -21,19 +21,17 @@ const isLocalhost = Boolean(
|
|||||||
);
|
);
|
||||||
|
|
||||||
export function register(config) {
|
export function register(config) {
|
||||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
if ('serviceWorker' in navigator) {
|
||||||
// The URL constructor is available in all browsers that support SW.
|
console.log("The URL constructor is available in all browsers that support SW")
|
||||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
|
||||||
if (publicUrl.origin !== window.location.origin) {
|
if (publicUrl.origin !== window.location.origin) {
|
||||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
console.log("Our service worker won't work if PUBLIC_URL is on a different origin from what our page is served on.")
|
||||||
// from what our page is served on. This might happen if a CDN is used to
|
|
||||||
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('load', () => {
|
window.addEventListener('load', () => {
|
||||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
console.log('Loading event...')
|
||||||
if (isLocalhost) {
|
if (isLocalhost) {
|
||||||
// This is running on localhost. Let's check if a service worker still exists or not.
|
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||||
checkValidServiceWorker(swUrl, config);
|
checkValidServiceWorker(swUrl, config);
|
||||||
|
|||||||
@ -5,6 +5,7 @@ import umiRouter from 'umi/router';
|
|||||||
import * as antd from "antd"
|
import * as antd from "antd"
|
||||||
import config from 'config'
|
import config from 'config'
|
||||||
import './libs.js'
|
import './libs.js'
|
||||||
|
import * as sw from '../../service-worker.js'
|
||||||
|
|
||||||
export * from "./libs.js"
|
export * from "./libs.js"
|
||||||
export * from "../../config/app.settings.js"
|
export * from "../../config/app.settings.js"
|
||||||
@ -12,12 +13,20 @@ export var { router } = require("utils")
|
|||||||
export var endpoints = Endpoints;
|
export var endpoints = Endpoints;
|
||||||
export var yConfig = config.yConfig;
|
export var yConfig = config.yConfig;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var package_json = require("../../package.json");
|
var package_json = require("../../package.json");
|
||||||
export const AppInfo = {
|
export const AppInfo = {
|
||||||
name: package_json.title,
|
name: package_json.title,
|
||||||
version: package_json.version,
|
version: package_json.version,
|
||||||
logo: config.FullLogoPath
|
logo: config.FullLogoPath,
|
||||||
|
logo_dark: config.DarkFullLogoPath
|
||||||
}
|
}
|
||||||
|
export function RegSW(){
|
||||||
|
console.log('Registering Service Worker...')
|
||||||
|
sw.register()
|
||||||
|
}
|
||||||
|
|
||||||
export function ReturnDevOption(e){
|
export function ReturnDevOption(e){
|
||||||
const Ite = AppSettings.map(item => {
|
const Ite = AppSettings.map(item => {
|
||||||
return item.SettingID === e? item.value : null
|
return item.SettingID === e? item.value : null
|
||||||
|
|||||||
@ -2,6 +2,7 @@ const VerifiedBadge = () => (<svg xmlns="http://www.w3.org/2000/svg" fill="#55ac
|
|||||||
const CommonThings = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ff5991" d="M15,2C16.94,2 18.59,2.7 19.95,4.05C21.3,5.41 22,7.06 22,9C22,10.56 21.5,11.96 20.58,13.2C19.64,14.43 18.44,15.27 16.97,15.7L17,15.38V15C17,12.81 16.23,10.93 14.65,9.35C13.07,7.77 11.19,7 9,7H8.63L8.3,7.03C8.73,5.56 9.57,4.36 10.8,3.42C12.04,2.5 13.44,2 15,2M9,8A7,7 0 0,1 16,15A7,7 0 0,1 9,22A7,7 0 0,1 2,15A7,7 0 0,1 9,8M9,10A5,5 0 0,0 4,15A5,5 0 0,0 9,20A5,5 0 0,0 14,15A5,5 0 0,0 9,10Z"></path></svg>)
|
const CommonThings = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ff5991" d="M15,2C16.94,2 18.59,2.7 19.95,4.05C21.3,5.41 22,7.06 22,9C22,10.56 21.5,11.96 20.58,13.2C19.64,14.43 18.44,15.27 16.97,15.7L17,15.38V15C17,12.81 16.23,10.93 14.65,9.35C13.07,7.77 11.19,7 9,7H8.63L8.3,7.03C8.73,5.56 9.57,4.36 10.8,3.42C12.04,2.5 13.44,2 15,2M9,8A7,7 0 0,1 16,15A7,7 0 0,1 9,22A7,7 0 0,1 2,15A7,7 0 0,1 9,8M9,10A5,5 0 0,0 4,15A5,5 0 0,0 9,20A5,5 0 0,0 14,15A5,5 0 0,0 9,10Z"></path></svg>)
|
||||||
const SunSVG = () => (<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd"><path fill="#fff" fill-rule="nonzero" d="M21 10.5l-3 3V18h-4.5l-3 3-3-3H3v-4.5l-3-3 3-3V3h4.5l3-3 3 3H18v4.5z"></path><circle stroke="#000" stroke-width="1.5" cx="10.5" cy="10.5" r="4"></circle></g></svg>)
|
const SunSVG = () => (<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd"><path fill="#fff" fill-rule="nonzero" d="M21 10.5l-3 3V18h-4.5l-3 3-3-3H3v-4.5l-3-3 3-3V3h4.5l3-3 3 3H18v4.5z"></path><circle stroke="#000" stroke-width="1.5" cx="10.5" cy="10.5" r="4"></circle></g></svg>)
|
||||||
const MoonSVG = () => (<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd"><circle fill="#fff" cx="10.5" cy="10.5" r="10.5"></circle><path d="M13.396 11c0-3.019-1.832-5.584-4.394-6.566A6.427 6.427 0 0111.304 4C15.002 4 18 7.135 18 11c0 3.866-2.998 7-6.698 7A6.42 6.42 0 019 17.566c2.564-.98 4.396-3.545 4.396-6.566z" fill="#2F2E30" fill-rule="nonzero"></path></g></svg>)
|
const MoonSVG = () => (<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd"><circle fill="#fff" cx="10.5" cy="10.5" r="10.5"></circle><path d="M13.396 11c0-3.019-1.832-5.584-4.394-6.566A6.427 6.427 0 0111.304 4C15.002 4 18 7.135 18 11c0 3.866-2.998 7-6.698 7A6.42 6.42 0 019 17.566c2.564-.98 4.396-3.545 4.396-6.566z" fill="#2F2E30" fill-rule="nonzero"></path></g></svg>)
|
||||||
|
const RobotOutlined = () => (<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="robot" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M300 328a60 60 0 10120 0 60 60 0 10-120 0zM852 64H172c-17.7 0-32 14.3-32 32v660c0 17.7 14.3 32 32 32h680c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-32 660H204V128h616v596zM604 328a60 60 0 10120 0 60 60 0 10-120 0zm250.2 556H169.8c-16.5 0-29.8 14.3-29.8 32v36c0 4.4 3.3 8 7.4 8h729.1c4.1 0 7.4-3.6 7.4-8v-36c.1-17.7-13.2-32-29.7-32zM664 508H360c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg>)
|
||||||
|
|
||||||
const CustomIcons = {VerifiedBadge, CommonThings, SunSVG, MoonSVG}
|
const CustomIcons = {VerifiedBadge, CommonThings, SunSVG, MoonSVG, RobotOutlined}
|
||||||
export default CustomIcons
|
export default CustomIcons
|
||||||
|
|||||||
37
src/components/Layout/ChatSider.js
Normal file
37
src/components/Layout/ChatSider.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import styles from './ChatSider.less'
|
||||||
|
import * as ycore from 'ycore'
|
||||||
|
import * as antd from 'antd'
|
||||||
|
|
||||||
|
|
||||||
|
class ChatSider extends React.Component {
|
||||||
|
constructor(props){
|
||||||
|
super(props),
|
||||||
|
this.state = {
|
||||||
|
collapsed: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
render(){
|
||||||
|
const { collapsed } = this.state
|
||||||
|
return(
|
||||||
|
<div>
|
||||||
|
<antd.Layout.Sider
|
||||||
|
breakpoint="lg"
|
||||||
|
trigger={null}
|
||||||
|
collapsible
|
||||||
|
defaultCollapsed="true"
|
||||||
|
collapsedWidth="90"
|
||||||
|
width="180"
|
||||||
|
collapsed={collapsed}
|
||||||
|
className={styles.chatsider}
|
||||||
|
>
|
||||||
|
|
||||||
|
<div className={styles.chatContainer}>
|
||||||
|
<div className={styles.chatTitle}><h1>Chat</h1></div>
|
||||||
|
</div>
|
||||||
|
</antd.Layout.Sider>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default ChatSider
|
||||||
206
src/components/Layout/ChatSider.less
Normal file
206
src/components/Layout/ChatSider.less
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
@import '~themes/vars.less';
|
||||||
|
|
||||||
|
@LDarkMode-backgroud: rgba(47, 46, 48, 0.74);
|
||||||
|
@LLightMode-backgroud: #fff;
|
||||||
|
|
||||||
|
@LDarkMode-color: #fff;
|
||||||
|
@LLightMode-color: #2F2E30;
|
||||||
|
|
||||||
|
.chatTitle{
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
padding: 0 10px 0 0;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.something_thats_pulling_me_down{
|
||||||
|
:global{
|
||||||
|
text-align: center;
|
||||||
|
bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.siderhead{
|
||||||
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
::first-letter{
|
||||||
|
margin-left: 7px;
|
||||||
|
}
|
||||||
|
height: 60px;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.siderwrapper {
|
||||||
|
border-color: transparent;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
:global {
|
||||||
|
.ant-layout-sider-dark {
|
||||||
|
background-color: @LDarkMode-backgroud;
|
||||||
|
color: @DarkMode-color;
|
||||||
|
h2{
|
||||||
|
color: @Theme-SiderDeco-Color;
|
||||||
|
}
|
||||||
|
.ant-menu-item{
|
||||||
|
color: @DarkMode-color;
|
||||||
|
}
|
||||||
|
.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{
|
||||||
|
color: @Theme-SiderDeco-Color;
|
||||||
|
}
|
||||||
|
.ant-menu-item{
|
||||||
|
color: @Theme-SiderDeco-Color;
|
||||||
|
}
|
||||||
|
.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
|
||||||
|
:hover {
|
||||||
|
background-color: @Theme-Hover-Backgroud;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatsider {
|
||||||
|
float: right;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px @LDarkMode-color solid;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 50;
|
||||||
|
:global {
|
||||||
|
.ant-menu-dark {
|
||||||
|
background-color: @LDarkMode-backgroud;
|
||||||
|
color: @LDarkMode-color;
|
||||||
|
}
|
||||||
|
.ant-menu-light {
|
||||||
|
background-color: @LLightMode-backgroud;
|
||||||
|
color: @LLightMode-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menuItems{
|
||||||
|
background-color: transparent;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
width: 100%;
|
||||||
|
animation: fadein 0.5s;
|
||||||
|
:global {
|
||||||
|
.ant-menu-item-selected{
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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{
|
||||||
|
padding: 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%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeLeftIn {
|
||||||
|
0% {
|
||||||
|
transform: translateX(5px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.themeSwitcher {
|
||||||
|
:global {
|
||||||
|
.ant-switch-checked {
|
||||||
|
background-color: #2F2E30;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
height: 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -55,7 +55,7 @@ class Sider extends PureComponent {
|
|||||||
|
|
||||||
handleClickMenu = e => {
|
handleClickMenu = e => {
|
||||||
e.key === 'SignOut' && ycore.LogoutCall()
|
e.key === 'SignOut' && ycore.LogoutCall()
|
||||||
e.key === 'settingpage' && router.push('/settings')
|
e.key === 'general_settings' && ycore.crouter.native('settings')
|
||||||
e.key === 'accountpage' && router.push('/account')
|
e.key === 'accountpage' && router.push('/account')
|
||||||
}
|
}
|
||||||
isDarkMode(){
|
isDarkMode(){
|
||||||
@ -103,6 +103,10 @@ class Sider extends PureComponent {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<antd.Menu selectable={false} className={collapsed? styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
|
<antd.Menu selectable={false} className={collapsed? styles.menuItemsCollapsed : styles.menuItems} mode="vertical" onClick={this.handleClickMenu}>
|
||||||
|
<antd.Menu.Item key="explore">
|
||||||
|
<antd.Icon style={{ fontSize: '15px' }} type="compass" />
|
||||||
|
{collapsed ? null : <Trans> Explore </Trans> }
|
||||||
|
</antd.Menu.Item>
|
||||||
{ycore.booleanFix(userData.is_pro)?
|
{ycore.booleanFix(userData.is_pro)?
|
||||||
<antd.Menu.Item key="boosted_pages">
|
<antd.Menu.Item key="boosted_pages">
|
||||||
<antd.Icon style={{ fontSize: '15px' }} type="thunderbolt" />
|
<antd.Icon style={{ fontSize: '15px' }} type="thunderbolt" />
|
||||||
@ -113,10 +117,6 @@ class Sider extends PureComponent {
|
|||||||
<antd.Icon style={{ fontSize: '15px' }} type="star" />
|
<antd.Icon style={{ fontSize: '15px' }} type="star" />
|
||||||
{collapsed ? null : <Trans> Upgrade to Pro </Trans>}
|
{collapsed ? null : <Trans> Upgrade to Pro </Trans>}
|
||||||
</antd.Menu.Item>}
|
</antd.Menu.Item>}
|
||||||
<antd.Menu.Item key="edit_profile">
|
|
||||||
<antd.Icon style={{ fontSize: '15px' }} type="profile" />
|
|
||||||
{collapsed ? null : <Trans>Edit Profile</Trans>}
|
|
||||||
</antd.Menu.Item>
|
|
||||||
<antd.Menu.Item key="general_settings">
|
<antd.Menu.Item key="general_settings">
|
||||||
<antd.Icon style={{ fontSize: '15px' }} type="setting" />
|
<antd.Icon style={{ fontSize: '15px' }} type="setting" />
|
||||||
{collapsed ? null : <Trans>General Settings</Trans>}
|
{collapsed ? null : <Trans>General Settings</Trans>}
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import Header from './Header'
|
import Header from './Header'
|
||||||
import Sider from './Sider'
|
import Sider from './Sider'
|
||||||
|
import ChatSider from './ChatSider'
|
||||||
import Control from './Control'
|
import Control from './Control'
|
||||||
|
|
||||||
export { Header, Sider, Control }
|
export { Header, Sider, Control, ChatSider }
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
@import '~themes/vars.less';
|
@import '~themes/vars.less';
|
||||||
.MicroHeader{
|
.MicroHeader{
|
||||||
background-color: transparent;
|
background-color: transparent !important;
|
||||||
padding: 0 5px 0 5px;
|
padding: 0 5px 0 5px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
{"version":3,"file":"StatusBoxC.js","sourceRoot":"","sources":["StatusBoxC.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,+BAAyC;AACzC,6BAA4B;AAC5B,wCAAiC;AAEjC,yCAAmC;AAEnC;IAAwB,6BAAS;IAE7B,mBAAY,KAAK;QAAjB,YACI,kBAAM,KAAK,CAAC,SAIf;QAHG,KAAI,CAAC,KAAK,GAAG;YACT,QAAQ,EAAE,SAAS;SACtB,CAAA;;IACL,CAAC;IACD,qCAAiB,GAAjB;QACY,IAAA,gCAAS,CAAgB;QACjC,IAAI,CAAC,QAAQ,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1C,CAAC;IACD,0BAAM,GAAN;QACY,IAAA,8BAAQ,CAAgB;QAEhC,IAAI,QAAQ,IAAI,SAAS,EAAE;YACvB,OAAO,CACL,0CAAK,SAAS,EAAE,qBAAM,CAAC,gBAAgB,EAAE,EAAE,EAAC,YAAY;gBACtD;oBAAK,iCAAC,WAAI,IAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,IAAI,SAAG,CAAM;gBAChF;oBACE,4CAAM;oBAAA,4CAAM;oBAAA,4CAAM;oBAClB,0CAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;wBAAE,yCAAI,SAAS,EAAE,qBAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,oBAAoB,CAAM,CAClI,CACF,CACP,CAAA;SACJ;QACD,IAAI,QAAQ,IAAI,KAAK,EAAE;YACnB,OAAO,CACL,0CAAK,SAAS,EAAE,qBAAM,CAAC,gBAAgB,EAAE,EAAE,EAAC,YAAY;gBACtD;oBACE,4CAAM;oBAAA,4CAAM;oBAAA,4CAAM;oBAClB,0CAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;wBAAE,yCAAI,SAAS,EAAE,qBAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAM,CACvH,CACF,CACP,CAAA;SACD;QACJ,IAAI,QAAQ,IAAI,KAAK,EAAE;YACrB,OAAO,CACL,0CAAK,SAAS,EAAE,qBAAM,CAAC,gBAAgB,EAAE,EAAE,EAAC,YAAY;gBACtD;oBACE,4CAAM;oBAAA,4CAAM;oBAAA,4CAAM;oBAClB,0CAAK,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;wBAAE,yCAAI,SAAS,EAAE,qBAAM,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAM,CACvH,CACF,CACP,CAAA;SACD;QAEF,OAAO,IAAI,CAAA;IACf,CAAC;IACL,gBAAC;AAAD,CAAC,AAjDD,CAAwB,iBAAS,GAiDhC;AAED,SAAS,CAAC,SAAS,GAAG;IAClB,YAAY,EAAE,uBAAS,CAAC,IAAI;IAC5B,OAAO,EAAE,uBAAS,CAAC,IAAI;IACvB,SAAS,EAAE,uBAAS,CAAC,MAAM;CAC9B,CAAA;AAED,qBAAe,SAAS,CAAC"}
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
import React, { Component } from 'react';
|
|
||||||
import { Icon } from 'antd';
|
|
||||||
import styles from '../yid.scss';
|
|
||||||
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
class StatusBox extends Component {
|
|
||||||
|
|
||||||
constructor(props){
|
|
||||||
super(props)
|
|
||||||
this.state = {
|
|
||||||
Reactive: 'loading',
|
|
||||||
}
|
|
||||||
}
|
|
||||||
componentDidMount(){
|
|
||||||
const { StateCode } = this.props;
|
|
||||||
this.setState({Reactive: StateCode });
|
|
||||||
}
|
|
||||||
render(){
|
|
||||||
const { Reactive } = this.state;
|
|
||||||
|
|
||||||
if (Reactive == 'loading') {
|
|
||||||
return (
|
|
||||||
<div className={styles.spinner__wrapper} id="loadingspn" >
|
|
||||||
<div><Icon type="loading" style={{ fontSize: 24, margin: '13px' }} spin /></div>
|
|
||||||
<div>
|
|
||||||
<br /><br /><br />
|
|
||||||
<div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>Wait a sec...</h6></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (Reactive == '200') {
|
|
||||||
return (
|
|
||||||
<div className={styles.spinner__wrapper} id="loadingspn" >
|
|
||||||
<div>
|
|
||||||
<br /><br /><br />
|
|
||||||
<div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>SI</h6></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
if (Reactive == '400') {
|
|
||||||
return (
|
|
||||||
<div className={styles.spinner__wrapper} id="loadingspn" >
|
|
||||||
<div>
|
|
||||||
<br /><br /><br />
|
|
||||||
<div style={{ margin: 'auto' }}><h6 className={styles.h6lp} style={{ textAlign: 'center', marginTop: '15%' }}>NO</h6></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
StatusBox.propTypes = {
|
|
||||||
handleStatus: PropTypes.func,
|
|
||||||
Loading: PropTypes.bool,
|
|
||||||
StateCode: PropTypes.string
|
|
||||||
}
|
|
||||||
|
|
||||||
export default StatusBox;
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
var __extends = (this && this.__extends) || (function () {
|
|
||||||
var extendStatics = function (d, b) {
|
|
||||||
extendStatics = Object.setPrototypeOf ||
|
|
||||||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
||||||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
||||||
return extendStatics(d, b);
|
|
||||||
};
|
|
||||||
return function (d, b) {
|
|
||||||
extendStatics(d, b);
|
|
||||||
function __() { this.constructor = d; }
|
|
||||||
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
import * as PropTypes from 'prop-types';
|
|
||||||
var react = require("react");
|
|
||||||
var antd = require("antd");
|
|
||||||
var yid_scss = require("../yid.scss");
|
|
||||||
|
|
||||||
|
|
||||||
var StatusBox = /** @class */ (function (_super) {
|
|
||||||
__extends(StatusBox, _super);
|
|
||||||
function StatusBox(props) {
|
|
||||||
var _this = _super.call(this, props) || this;
|
|
||||||
_this.state = {
|
|
||||||
Reactive: 'loading'
|
|
||||||
};
|
|
||||||
return _this;
|
|
||||||
}
|
|
||||||
StatusBox.prototype.componentDidMount = function () {
|
|
||||||
var StateCode = this.props.StateCode;
|
|
||||||
this.setState({ Reactive: StateCode });
|
|
||||||
};
|
|
||||||
StatusBox.prototype.render = function () {
|
|
||||||
var Reactive = this.state.Reactive;
|
|
||||||
if (Reactive == 'loading') {
|
|
||||||
return (react.createElement("div", { className: yid_scss.spinner__wrapper, id: "loadingspn" },
|
|
||||||
react.createElement("div", null,
|
|
||||||
react.createElement(antd.Icon, { type: "loading", style: { fontSize: 24, margin: '13px' }, spin: true })),
|
|
||||||
react.createElement("div", null,
|
|
||||||
react.createElement("br", null),
|
|
||||||
react.createElement("br", null),
|
|
||||||
react.createElement("br", null),
|
|
||||||
react.createElement("div", { style: { margin: 'auto' } },
|
|
||||||
react.createElement("h6", { className: yid_scss.h6lp, style: { textAlign: 'center', marginTop: '15%' } }, "Wait a sec...")))));
|
|
||||||
}
|
|
||||||
if (Reactive == '200') {
|
|
||||||
return (react.createElement("div", { className: yid_scss.spinner__wrapper, id: "loadingspn" },
|
|
||||||
react.createElement("div", null,
|
|
||||||
react.createElement("br", null),
|
|
||||||
react.createElement("br", null),
|
|
||||||
react.createElement("br", null),
|
|
||||||
react.createElement("div", { style: { margin: 'auto' } },
|
|
||||||
react.createElement("h6", { className: yid_scss.h6lp, style: { textAlign: 'center', marginTop: '15%' } }, "SI")))));
|
|
||||||
}
|
|
||||||
if (Reactive == '400') {
|
|
||||||
return (react.createElement("div", { className: yid_scss.spinner__wrapper, id: "loadingspn" },
|
|
||||||
react.createElement("div", null,
|
|
||||||
react.createElement("br", null),
|
|
||||||
react.createElement("br", null),
|
|
||||||
react.createElement("br", null),
|
|
||||||
react.createElement("div", { style: { margin: 'auto' } },
|
|
||||||
react.createElement("h6", { className: yid_scss.h6lp, style: { textAlign: 'center', marginTop: '15%' } }, "NO")))));
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
return StatusBox;
|
|
||||||
}(react.Component));
|
|
||||||
StatusBox.PropTypes = {
|
|
||||||
handleStatus: PropTypes.func,
|
|
||||||
Loading: PropTypes.bool,
|
|
||||||
StateCode: PropTypes.string
|
|
||||||
};
|
|
||||||
exports["default"] = StatusBox;
|
|
||||||
//# sourceMappingURL=StatusBoxC.js.map
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import { router, pathMatchRegexp } from 'utils'
|
|
||||||
import api from 'api'
|
|
||||||
|
|
||||||
const { loginUser } = api
|
|
||||||
|
|
||||||
export default {
|
|
||||||
namespace: 'login',
|
|
||||||
|
|
||||||
state: {},
|
|
||||||
|
|
||||||
effects: {
|
|
||||||
*login({ payload }, { put, call, select }) {
|
|
||||||
const data = yield call(loginUser, payload)
|
|
||||||
const { locationQuery } = yield select(_ => _.app)
|
|
||||||
if (data.success) {
|
|
||||||
const { from } = locationQuery
|
|
||||||
yield put({ type: 'app/query' })
|
|
||||||
if (!pathMatchRegexp('/login', from)) {
|
|
||||||
if (from === '/') router.push('/dashboard')
|
|
||||||
else router.push(from)
|
|
||||||
} else {
|
|
||||||
router.push('/dashboard')
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
throw data
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@ -1,769 +0,0 @@
|
|||||||
@import url('https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css');
|
|
||||||
@import url('https://fonts.googleapis.com/css?family=Poppins:300,300i,500,500i,700');
|
|
||||||
|
|
||||||
.retryBTN{
|
|
||||||
margin-top: 150px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.StateIcon {
|
|
||||||
font-size: 24px;
|
|
||||||
margin: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.StateIcon_exception {
|
|
||||||
color: red;
|
|
||||||
font-size: 24px;
|
|
||||||
margin: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mainlp {
|
|
||||||
--neutralShade0: #f8f8f8;
|
|
||||||
--neutralShade1: #f2f2f2;
|
|
||||||
--neutralShade2: #e8e9e9;
|
|
||||||
--neutralShade3: #d1d3d4;
|
|
||||||
--neutralShade4: #babdbf;
|
|
||||||
--neutralShade5: #808488;
|
|
||||||
--neutralShade6: #666a6d;
|
|
||||||
--neutralShade7: #4d5052;
|
|
||||||
--neutralShade8: #212122;
|
|
||||||
--grayColor: #999;
|
|
||||||
--lightGrayColor: #ddd;
|
|
||||||
--borderRadius: 6px;
|
|
||||||
--boxShadow: 0 2px 5px rgba(#333, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*overall layout*/
|
|
||||||
.mainlp {
|
|
||||||
width: 90%;
|
|
||||||
max-width: 1050px;
|
|
||||||
margin: 3em auto 0;
|
|
||||||
display: grid;
|
|
||||||
grid: repeat(5, fit-content(300px))/100%;
|
|
||||||
color: var(--foregroundColor);
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mainlp .sectionlp {
|
|
||||||
border: 1px solid var(--accentColor);
|
|
||||||
position: relative;
|
|
||||||
padding: 40px 40px 50px;
|
|
||||||
}
|
|
||||||
.mainlp .sectionlp > h6 {
|
|
||||||
color: var(--accentColor);
|
|
||||||
background: var(--canvasColor);
|
|
||||||
position: absolute;
|
|
||||||
top: -10px;
|
|
||||||
left: 20px;
|
|
||||||
padding: 0 10px;
|
|
||||||
}
|
|
||||||
.mainlp .sectionlp .h6lp.subheader {
|
|
||||||
color: var(--grayColor);
|
|
||||||
margin-top: 20px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
section:not(:last-child) {
|
|
||||||
border-width: 0 0 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section:last-child {
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
main {
|
|
||||||
grid: repeat(9, auto)/45% 1fr 45%;
|
|
||||||
grid-auto-flow: dense;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-card-1 {
|
|
||||||
grid-column: 1 / 2;
|
|
||||||
border-width: 1px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-card-2 {
|
|
||||||
grid-column: 2 / 4;
|
|
||||||
border-width: 1px 0 1px 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-card-3 {
|
|
||||||
grid-column: 1 / 4;
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-section {
|
|
||||||
grid-column: 3 / 4;
|
|
||||||
grid-row: 1 / 2;
|
|
||||||
border-width: 0 0 0 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.well-cta-1 {
|
|
||||||
grid-row: 3;
|
|
||||||
grid-column: 1 / 3;
|
|
||||||
border-width: 1px 1px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.well-cta-2 {
|
|
||||||
grid-row: 2;
|
|
||||||
grid-column: 2 / 4;
|
|
||||||
border-width: 1px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tables {
|
|
||||||
grid-row: 4;
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
border-width: 1px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.forms {
|
|
||||||
grid-column: 1 / 3;
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comments {
|
|
||||||
grid-row: 2;
|
|
||||||
grid-column: 1 / 2;
|
|
||||||
border-width: 1px 1px 0 0;
|
|
||||||
padding-top: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modals {
|
|
||||||
grid-row: 3;
|
|
||||||
grid-column: 3 / 4;
|
|
||||||
justify-content: center;
|
|
||||||
border-width: 1px 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*checkboxes*/
|
|
||||||
input:disabled ~ * {
|
|
||||||
opacity: 0.3;
|
|
||||||
user-select: none;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkboxtoggle input {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.checkboxtoggle label {
|
|
||||||
outline: 0;
|
|
||||||
display: block;
|
|
||||||
width: 45px;
|
|
||||||
height: 16px;
|
|
||||||
background: var(--grayColor);
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 2em;
|
|
||||||
padding: 2px;
|
|
||||||
transition: all 0.4s ease;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.checkboxtoggle .labellp:after {
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #fff;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
border: 1px solid var(--grayColor);
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
||||||
left: -4px;
|
|
||||||
top: -5px;
|
|
||||||
}
|
|
||||||
.checkboxtoggle input:checked + .labellp {
|
|
||||||
background: var(--accent2Color);
|
|
||||||
}
|
|
||||||
.checkboxtoggle input:checked + .labellp:after {
|
|
||||||
left: 52%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
position: relative;
|
|
||||||
user-select: none;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.checkbox input {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.checkbox .labellp {
|
|
||||||
position: relative;
|
|
||||||
vertical-align: middle;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 500;
|
|
||||||
padding-left: 35px;
|
|
||||||
}
|
|
||||||
.checkbox .box {
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
border-radius: var(--borderRadius);
|
|
||||||
border: 1px solid var(--grayColor);
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin-right: 3px;
|
|
||||||
transition: 0.3s ease;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.checkbox .box:before, .checkbox .box:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 4px;
|
|
||||||
height: 16px;
|
|
||||||
border-radius: 40px;
|
|
||||||
background: var(--backgroundColor);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
.checkbox .spanlp.box:before {
|
|
||||||
transform: rotate(45deg) translateY(-5px) translateX(10px) scale(0);
|
|
||||||
}
|
|
||||||
.checkbox .spanlp.box:after {
|
|
||||||
height: 8px;
|
|
||||||
transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(0);
|
|
||||||
}
|
|
||||||
.checkbox input:checked + .labellp .spanlp.box {
|
|
||||||
background: var(--accent2Color);
|
|
||||||
border-color: var(--accent2Color);
|
|
||||||
}
|
|
||||||
.checkbox input:checked + .labellp .spanlp.box:before {
|
|
||||||
transform: rotate(45deg) translateY(-5px) translateX(10px) scale(1);
|
|
||||||
}
|
|
||||||
.checkbox input:checked + .labellp .spanlp.box:after {
|
|
||||||
height: 8px;
|
|
||||||
transform: rotate(-45deg) translateY(10px) translateX(-4px) scale(1);
|
|
||||||
}
|
|
||||||
.checkbox input:disabled:checked + .spanlp.box {
|
|
||||||
background: var(--grayColor);
|
|
||||||
border: var(--grayColor);
|
|
||||||
}
|
|
||||||
.checkbox input:disabled:checked ~ .labellp:before, .checkbox input:disabled:checked ~ .labellp:after {
|
|
||||||
background: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*buttons & links*/
|
|
||||||
.links__sec {
|
|
||||||
margin: 10px 0 30px;
|
|
||||||
}
|
|
||||||
.links a.link {
|
|
||||||
display: inline;
|
|
||||||
margin: 10px 30px 5px 0;
|
|
||||||
border-bottom: 2px dashed;
|
|
||||||
font-weight: 500;
|
|
||||||
line-height: 2.5;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--neutralShade5);
|
|
||||||
}
|
|
||||||
.links a.link:hover, .links a.link.hover {
|
|
||||||
color: var(--neutralShade6);
|
|
||||||
border-bottom: 2px solid;
|
|
||||||
}
|
|
||||||
.links a.link.primary {
|
|
||||||
color: var(--primaryColor);
|
|
||||||
}
|
|
||||||
.links a.link.primary:hover, .links a.link.primary.hover {
|
|
||||||
color: var(--primaryShade5);
|
|
||||||
}
|
|
||||||
.links a.link.secondary {
|
|
||||||
color: var(--secondaryColor);
|
|
||||||
}
|
|
||||||
.links a.link.secondary:hover, .links a.link.secondary.hover {
|
|
||||||
color: var(--secondaryShade5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.buttons > * {
|
|
||||||
flex: 1 1 calc(50% - 20px);
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
.buttons > *:nth-child(odd) {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.buttonlp,
|
|
||||||
input.buttonlp,
|
|
||||||
.buttonlp {
|
|
||||||
outline: none;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
display: inline-block;
|
|
||||||
border: none;
|
|
||||||
font: 500 16px/1 "Poppins", sans-serif;
|
|
||||||
padding: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: var(--borderRadius);
|
|
||||||
background: var(--primaryColor);
|
|
||||||
color: var(--backgroundColor);
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
transition: 0.2s ease;
|
|
||||||
}
|
|
||||||
a.buttonlp:hover, a.buttonlp.hover,
|
|
||||||
input.buttonlp:hover,
|
|
||||||
input.buttonlp.hover,
|
|
||||||
.buttonlp:hover,
|
|
||||||
.buttonlp.hover {
|
|
||||||
top: -3px;
|
|
||||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
|
||||||
}
|
|
||||||
a.buttonlp:active, a.buttonlp.active,
|
|
||||||
input.buttonlp:active,
|
|
||||||
.input.buttonlp.active,
|
|
||||||
.buttonlp:active,
|
|
||||||
.buttonlp.active {
|
|
||||||
background: var(--primaryShade4);
|
|
||||||
outline: none;
|
|
||||||
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
a.buttonlp.disabled,
|
|
||||||
input.buttonlp.disabled,
|
|
||||||
.buttonlp.disabled {
|
|
||||||
opacity: 0.4;
|
|
||||||
user-select: none;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
a.buttonlp.medium,
|
|
||||||
input.buttonlp.medium,
|
|
||||||
.buttonlp.medium {
|
|
||||||
padding: 15px 18px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
a.buttonlp.small,
|
|
||||||
input.buttonlp.small,
|
|
||||||
.buttonlp.small {
|
|
||||||
padding: 10px 12px;
|
|
||||||
width: auto;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
a.buttonlp.secondary,
|
|
||||||
input.buttonlp.secondary,
|
|
||||||
.buttonlp.secondary {
|
|
||||||
background: var(--secondaryColor);
|
|
||||||
}
|
|
||||||
a.buttonlp.secondary:active, a.buttonlp.secondary:focus, a.buttonlp.secondary.active,
|
|
||||||
input.buttonlp.secondary:active,
|
|
||||||
input.buttonlp.secondary:focus,
|
|
||||||
input.buttonlp.secondary.active,
|
|
||||||
.buttonlp.secondary:active,
|
|
||||||
.buttonlp.secondary:focus,
|
|
||||||
.buttonlp.secondary.active {
|
|
||||||
background: var(--secondaryShade4);
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
a.buttonlp.accent,
|
|
||||||
input.buttonlp.accent,
|
|
||||||
.buttonlp.accent {
|
|
||||||
background: var(--accentColor);
|
|
||||||
}
|
|
||||||
a.buttonlp.accent:active, a.buttonlp.accent:focus, a.buttonlp.accent.active,
|
|
||||||
input.buttonlp.accent:active,
|
|
||||||
input.buttonlp.accent:focus,
|
|
||||||
input.buttonlp.accent.active,
|
|
||||||
.buttonlp.accent:active,
|
|
||||||
.buttonlp.accent:focus,
|
|
||||||
.buttonlp.accent.active {
|
|
||||||
background: var(--accentShade4);
|
|
||||||
}
|
|
||||||
a.buttonlp.accent2,
|
|
||||||
input.buttonlp.accent2,
|
|
||||||
.buttonlp.accent2 {
|
|
||||||
background: var(--accent2Color);
|
|
||||||
}
|
|
||||||
a.buttonlp.accent2:active, a.buttonlp.accent2:focus, a.buttonlp.accent2.active,
|
|
||||||
input.buttonlp.accent2:active,
|
|
||||||
input.buttonlp.accent2:focus,
|
|
||||||
input.buttonlp.accent2.active,
|
|
||||||
.buttonlp.accent2:active,
|
|
||||||
.buttonlp.accent2:focus,
|
|
||||||
.buttonlp.accent2.active {
|
|
||||||
background: var(--accent2Shade4);
|
|
||||||
}
|
|
||||||
a.buttonlp.accent3,
|
|
||||||
input.buttonlp.accent3,
|
|
||||||
.buttonlp.accent3 {
|
|
||||||
background: var(--accent3Color);
|
|
||||||
}
|
|
||||||
a.buttonlp.accent3:active, a.buttonlp.accent3:focus, a.buttonlp.accent3.active,
|
|
||||||
input.buttonlp.accent3:active,
|
|
||||||
input.buttonlp.accent3:focus,
|
|
||||||
input.buttonlp.accent3.active,
|
|
||||||
.buttonlp.accent3:active,
|
|
||||||
.buttonlp.accent3:focus,
|
|
||||||
.buttonlp.accent3.active {
|
|
||||||
background: var(--accent3Shade4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*inputs*/
|
|
||||||
.input__wrapper {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.inputRG__wrapper {
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.labelform {
|
|
||||||
font-weight: 500;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputform,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
height: 50px;
|
|
||||||
font-size: 16px;
|
|
||||||
border: 2px solid var(--neutralShade3);
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
font-family: "Poppins";
|
|
||||||
border-radius: var(--borderRadius);
|
|
||||||
color: var(--foregroundColor);
|
|
||||||
background: var(--backgroundColor);
|
|
||||||
}
|
|
||||||
.inputform:focus, .inputform.active,
|
|
||||||
select:focus,
|
|
||||||
select.active,
|
|
||||||
textarea:focus,
|
|
||||||
textarea.active {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--primaryColor);
|
|
||||||
}
|
|
||||||
.inputform:disabled,
|
|
||||||
select:disabled,
|
|
||||||
textarea:disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
background: var(--neutralShade1);
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
Input .inputPasswordform {
|
|
||||||
height: 50px;
|
|
||||||
font-size: 16px;
|
|
||||||
border: 2px solid var(--neutralShade3);
|
|
||||||
width: 100%;
|
|
||||||
padding: 12px;
|
|
||||||
font-family: "Poppins";
|
|
||||||
border-radius: var(--borderRadius);
|
|
||||||
color: var(--foregroundColor);
|
|
||||||
background: var(--backgroundColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
Input .inputPasswordform:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--primaryColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputform.input {
|
|
||||||
height: 56px;
|
|
||||||
font-size: 18px;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.TOSAccept {
|
|
||||||
margin: 7px;
|
|
||||||
}
|
|
||||||
.TOSAccept span::first-letter {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*spinner*/
|
|
||||||
.spinner + .labellp {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-top: 8px;
|
|
||||||
display: inline-block;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: var(--primaryShade4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner1 .spinner {
|
|
||||||
max-width: 50px;
|
|
||||||
margin: auto;
|
|
||||||
height: 20px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.spinner1 .spinner:after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
left: -10%;
|
|
||||||
background: var(--primaryColor);
|
|
||||||
animation: spinnerLeftRight 1s infinite;
|
|
||||||
}
|
|
||||||
.spinner1 .spinner:before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
left: -10%;
|
|
||||||
background: var(--primaryShade2);
|
|
||||||
opacity: 1;
|
|
||||||
animation: spinnerLeftRight 1s infinite 0.06s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spinnerLeftRight {
|
|
||||||
0% {
|
|
||||||
left: 85%;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
left: -10%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
left: 85%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#sunset + .labellp {
|
|
||||||
background: linear-gradient(to right, #ff9557 50%, #ffcc67 50%);
|
|
||||||
}
|
|
||||||
.mainlp {
|
|
||||||
--canvasColor: #f9f9f9;
|
|
||||||
--backgroundColor: #fff;
|
|
||||||
--foregroundColor: #111;
|
|
||||||
--primaryColor: #373F51;
|
|
||||||
--primaryShade1: #ffe2d1;
|
|
||||||
--primaryShade2: #ffceb2;
|
|
||||||
--primaryShade3: #ffb184;
|
|
||||||
--primaryShade4: #e88850;
|
|
||||||
--primaryShade5: #d17a48;
|
|
||||||
--secondaryColor: #ffcc67;
|
|
||||||
--secondaryShade1: #fff1d5;
|
|
||||||
--secondaryShade2: #ffde9e;
|
|
||||||
--secondaryShade3: #ffd074;
|
|
||||||
--secondaryShade4: #e8ba5e;
|
|
||||||
--secondaryShade5: #ba954b;
|
|
||||||
--accentColor: #4e5166;
|
|
||||||
--accentShade1: #cecfd5;
|
|
||||||
--accentShade2: #aeafb9;
|
|
||||||
--accentShade3: #8e909d;
|
|
||||||
--accentShade4: #6e7081;
|
|
||||||
--accentShade5: #404354;
|
|
||||||
--accent2Color: #588b8b;
|
|
||||||
--accent2Shade1: #c2d4d4;
|
|
||||||
--accent2Shade2: #a3bfbf;
|
|
||||||
--accent2Shade3: #85aaaa;
|
|
||||||
--accent2Shade4: #507f7f;
|
|
||||||
--accent2Shade5: #497272;
|
|
||||||
--accent3Color: #fe5f55;
|
|
||||||
--accent3Shade1: #fec4c1;
|
|
||||||
--accent3Shade2: #fea7a2;
|
|
||||||
--accent3Shade3: #fe7c73;
|
|
||||||
--accent3Shade4: #e7574e;
|
|
||||||
--accent3Shade5: #b9463e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.formlogin {
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 30px;
|
|
||||||
box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2);
|
|
||||||
background: var(--backgroundColor);
|
|
||||||
margin-top: 30px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.formlogin .checkbox {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
.formlogin .spinner__wrapper {
|
|
||||||
place-items: center;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
background: rgba(255, 255, 255, 0.85);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
|
||||||
.formlogin {
|
|
||||||
grid: auto / 1fr 40%;
|
|
||||||
}
|
|
||||||
.formlogin .input__wrapper {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
.formlogin .inputRG__wrapper {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
.formlogin .checkbox {
|
|
||||||
align-self: center;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#dark:checked ~ .mainlp .spinner__wrapper,
|
|
||||||
#pinkaru:checked ~ .mainlp .spinner__wrapper {
|
|
||||||
background: rgba(20, 20, 20, 0.85);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*typography 2*/
|
|
||||||
.stonglp {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emlp {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h1lp {
|
|
||||||
font: 700 48px/1.2 "Poppins", sans-serif;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h2lp {
|
|
||||||
font: 700 32px/1.2 "Poppins", sans-serif;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h3lp {
|
|
||||||
font: 700 24px/1.2 "Poppins", sans-serif;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h4lp {
|
|
||||||
font: 700 20px/1.2 "Poppins", sans-serif;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h5lp {
|
|
||||||
font: 500 18px/1.2 "Poppins", sans-serif;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h6lp {
|
|
||||||
font: 500 16px/1.2 "Poppins", sans-serif;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.apierrort {
|
|
||||||
font: 700 20px/1.2 "Poppins", sans-serif;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.apierrort::first-letter {
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.devServer{
|
|
||||||
color: orangered;
|
|
||||||
text-align: left;
|
|
||||||
margin: 10px;
|
|
||||||
float: left;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 104;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.devServer span{
|
|
||||||
text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bgHero iframe {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
z-index: 103;
|
|
||||||
}
|
|
||||||
|
|
||||||
$circle-length: 340px;
|
|
||||||
$check-length: 230px;
|
|
||||||
|
|
||||||
@keyframes scaleAnimation {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(1.5);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes drawCircle {
|
|
||||||
0% {
|
|
||||||
stroke-dashoffset: $circle-length;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
stroke-dashoffset: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes drawCheck {
|
|
||||||
0% {
|
|
||||||
stroke-dashoffset: $check-length;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
stroke-dashoffset: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeOut {
|
|
||||||
0% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#successAnimationCircle {
|
|
||||||
stroke-dasharray: $circle-length $circle-length;
|
|
||||||
stroke: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
#successAnimationCheck {
|
|
||||||
stroke-dasharray: $check-length $check-length;
|
|
||||||
stroke: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
#successAnimationResult {
|
|
||||||
fill: #FFF;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#successAnimation .animated {
|
|
||||||
animation: 1s ease-out 0s 1 both scaleAnimation;
|
|
||||||
|
|
||||||
#successAnimationCircle {
|
|
||||||
animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCircle,
|
|
||||||
0.3s linear 0.9s 1 both fadeOut;
|
|
||||||
}
|
|
||||||
|
|
||||||
#successAnimationCheck {
|
|
||||||
animation: 1s cubic-bezier(0.77, 0, 0.175, 1) 0s 1 both drawCheck,
|
|
||||||
0.3s linear 0.9s 1 both fadeOut;
|
|
||||||
}
|
|
||||||
|
|
||||||
#successAnimationResult {
|
|
||||||
animation: 0.3s linear 0.9s both fadeIn;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -9,8 +9,7 @@ import Loader from './Loader/Loader.js'
|
|||||||
import ScrollBar from './ScrollBar'
|
import ScrollBar from './ScrollBar'
|
||||||
import * as MyLayout from './Layout/index.js'
|
import * as MyLayout from './Layout/index.js'
|
||||||
import Page from './Page'
|
import Page from './Page'
|
||||||
import YulioID from './YulioID/experimental/index.js'
|
|
||||||
import CoreLoader from './CoreLoader'
|
import CoreLoader from './CoreLoader'
|
||||||
import MicroHeader from './MicroHeader'
|
import MicroHeader from './MicroHeader'
|
||||||
|
|
||||||
export { UserProfile, MyLayout, Loader, Page, ScrollBar, YulioID, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar, LikeBTN, MainFeed, MicroHeader}
|
export { UserProfile, MyLayout, Loader, Page, ScrollBar, CoreLoader, PostCard, PostCreator, CustomIcons, MainSidebar, LikeBTN, MainFeed, MicroHeader}
|
||||||
|
|||||||
@ -14,7 +14,7 @@ import Error from '../pages/404'
|
|||||||
import styles from './PrimaryLayout.less'
|
import styles from './PrimaryLayout.less'
|
||||||
|
|
||||||
const { Content } = Layout
|
const { Content } = Layout
|
||||||
const { Header, Sider, Control } = MyLayout
|
const { ChatSider, Sider, Control } = MyLayout
|
||||||
|
|
||||||
@withRouter
|
@withRouter
|
||||||
@connect(({ app, loading }) => ({ app, loading }))
|
@connect(({ app, loading }) => ({ app, loading }))
|
||||||
@ -161,6 +161,7 @@ class PrimaryLayout extends PureComponent {
|
|||||||
</Content>
|
</Content>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<ChatSider />
|
||||||
</Layout>
|
</Layout>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -10,7 +10,6 @@ class AppAbout extends React.Component {
|
|||||||
<div className={styles.aboutWrapper}>
|
<div className={styles.aboutWrapper}>
|
||||||
<img src={ycore.AppInfo.logo} />
|
<img src={ycore.AppInfo.logo} />
|
||||||
<antd.Card >
|
<antd.Card >
|
||||||
|
|
||||||
<h1 className={styles.appName}> {ycore.AppInfo.name} </h1>
|
<h1 className={styles.appName}> {ycore.AppInfo.name} </h1>
|
||||||
<antd.Tag color="geekblue">v{ycore.AppInfo.version}</antd.Tag>{ycore.DetectNoNStableBuild('TagComponent')}
|
<antd.Tag color="geekblue">v{ycore.AppInfo.version}</antd.Tag>{ycore.DetectNoNStableBuild('TagComponent')}
|
||||||
</antd.Card>
|
</antd.Card>
|
||||||
|
|||||||
@ -3,11 +3,10 @@ import {GetAuth, InitSDCP, DevOptions, asyncSDCP} from 'ycore';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { connect } from 'dva';
|
import { connect } from 'dva';
|
||||||
import { Button, Form, Input, Drawer, Icon, Collapse } from 'antd'
|
import { Button, Form, Input, Drawer, Icon, Collapse } from 'antd'
|
||||||
import styles from './yid.scss';
|
import styles from './index.less';
|
||||||
import formstyle from './formstyle.less'
|
import formstyle from './formstyle.less'
|
||||||
|
|
||||||
const FormItem = Form.Item
|
const FormItem = Form.Item
|
||||||
const RenderInclude = ({ data }) => { if (!data) { return null; } else { return data; } }
|
|
||||||
|
|
||||||
@connect(({ loading }) => ({ loading }))
|
@connect(({ loading }) => ({ loading }))
|
||||||
@Form.create()
|
@Form.create()
|
||||||
@ -71,22 +70,29 @@ class YulioID extends Component {
|
|||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { visible } = this.props
|
||||||
const { getFieldDecorator } = this.props.form;
|
const { getFieldDecorator } = this.props.form;
|
||||||
const { ShowLoading, StateIcon, StateMessage, StateException } = this.state;
|
const { ShowLoading, StateIcon, StateMessage, StateException } = this.state;
|
||||||
const { Panel } = Collapse;
|
const { Panel } = Collapse;
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={styles.loginWrapper}>
|
||||||
<Drawer
|
<Drawer
|
||||||
width={520}
|
width="100%"
|
||||||
|
mask={false}
|
||||||
|
getContainer={false}
|
||||||
closable={false}
|
closable={false}
|
||||||
visible={this.state.MainLoginVisible}
|
visible={visible}
|
||||||
|
className={styles.loginWrapper}
|
||||||
>
|
>
|
||||||
<main className={styles.mainlp}>
|
<main className={styles.mainlp}>
|
||||||
<section className={styles.forms}>
|
<section className={styles.forms}>
|
||||||
<h6 className={styles.h6lp}>YulioID™</h6>
|
<div className={styles.logHeader}>
|
||||||
<h1 className={styles.h1lp}>Welcome Back !</h1>
|
<h6><img src={"http://api.ragestudio.net/id.svg"} /> YulioID™</h6>
|
||||||
|
<h1>Login</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{/* <RenderInclude data={include} /> */}
|
{/* <RenderInclude data={include} /> */}
|
||||||
|
|
||||||
@ -150,11 +156,7 @@ class YulioID extends Component {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ margin: 'auto' }}>
|
<div style={{ margin: 'auto' }}>
|
||||||
<a
|
<a className={styles.buttonlp} id="login" onClick={this.handleLogin}>
|
||||||
className={styles.buttonlp}
|
|
||||||
id="login"
|
|
||||||
onClick={this.handleLogin}
|
|
||||||
>
|
|
||||||
Login
|
Login
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -167,24 +169,11 @@ class YulioID extends Component {
|
|||||||
>
|
>
|
||||||
Or
|
Or
|
||||||
</h2>
|
</h2>
|
||||||
<div style={{ float: 'left' }}>
|
<div className={styles.moreActions}>
|
||||||
<Button
|
<Button type="dashed"><Icon type="exclamation-circle" /> Forgotten password </Button>
|
||||||
type="dashed"
|
<Button type="dashed" ><Icon type="user-add" /> Create an account </Button>
|
||||||
onClick={this.initFPassword}
|
|
||||||
style={{ top: '8px' }}
|
|
||||||
>
|
|
||||||
<Icon type="exclamation-circle" /> Forgotten password
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div style={{ float: 'right' }}>
|
|
||||||
<Button
|
|
||||||
type="dashed"
|
|
||||||
onClick={this.initRegister}
|
|
||||||
style={{ top: '8px' }}
|
|
||||||
>
|
|
||||||
<Icon type="user-add" /> Create an account
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</form>
|
</form>
|
||||||
@ -1,5 +1,6 @@
|
|||||||
@import '~themes/vars.less';
|
@import '~themes/vars.less';
|
||||||
|
|
||||||
|
|
||||||
.inputform {
|
.inputform {
|
||||||
:global{
|
:global{
|
||||||
input {
|
input {
|
||||||
368
src/pages/login/components/index.less
Normal file
368
src/pages/login/components/index.less
Normal file
@ -0,0 +1,368 @@
|
|||||||
|
@import '~themes/vars.less';
|
||||||
|
|
||||||
|
.loginWrapper{
|
||||||
|
:global{
|
||||||
|
.ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper{
|
||||||
|
border-radius: 20px 0 0 20px;
|
||||||
|
}
|
||||||
|
.ant-drawer {
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 20px 0 0 20px;
|
||||||
|
max-width: 490px;
|
||||||
|
min-width: 34%;
|
||||||
|
}
|
||||||
|
.ant-drawer-content{
|
||||||
|
background: #ffffff9f;
|
||||||
|
border-radius: 20px 0 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.retryBTN{
|
||||||
|
margin-top: 150px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.StateIcon {
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 13px;
|
||||||
|
}
|
||||||
|
.StateIcon_exception {
|
||||||
|
color: red;
|
||||||
|
font-size: 24px;
|
||||||
|
margin: 13px;
|
||||||
|
}
|
||||||
|
.mainlp {
|
||||||
|
word-break: keep-all;
|
||||||
|
margin: 3em 20px 0 20px;
|
||||||
|
color: @foregroundColor;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainlp .sectionlp {
|
||||||
|
border: 1px solid @accentColor;
|
||||||
|
position: relative;
|
||||||
|
padding: 40px 40px 50px;
|
||||||
|
}
|
||||||
|
.mainlp .sectionlp > h6 {
|
||||||
|
color: @accentColor;
|
||||||
|
background: @canvasColor;
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
left: 20px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.mainlp .sectionlp .h6lp.subheader {
|
||||||
|
color: @grayColor;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 992px) {
|
||||||
|
section:not(:last-child) {
|
||||||
|
border-width: 0 0 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section:last-child {
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.buttons > * {
|
||||||
|
flex: 1 1 calc(50% - 20px);
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.buttons > *:nth-child(odd) {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.buttonlp,
|
||||||
|
input.buttonlp,
|
||||||
|
.buttonlp {
|
||||||
|
outline: none;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
border: none;
|
||||||
|
font: 500 16px/1 "Poppins", sans-serif;
|
||||||
|
padding: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: @borderRadius;
|
||||||
|
background: @primaryColor;
|
||||||
|
color: @backgroundColor;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
transition: 0.2s ease;
|
||||||
|
}
|
||||||
|
a.buttonlp:hover, a.buttonlp.hover,
|
||||||
|
input.buttonlp:hover,
|
||||||
|
input.buttonlp.hover,
|
||||||
|
.buttonlp:hover,
|
||||||
|
.buttonlp.hover {
|
||||||
|
top: -3px;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
a.buttonlp:active, a.buttonlp.active,
|
||||||
|
input.buttonlp:active,
|
||||||
|
.input.buttonlp.active,
|
||||||
|
.buttonlp:active,
|
||||||
|
.buttonlp.active {
|
||||||
|
background: @primaryShade4;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
a.buttonlp.disabled,
|
||||||
|
input.buttonlp.disabled,
|
||||||
|
.buttonlp.disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
user-select: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
a.buttonlp.medium,
|
||||||
|
input.buttonlp.medium,
|
||||||
|
.buttonlp.medium {
|
||||||
|
padding: 15px 18px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
a.buttonlp.small,
|
||||||
|
input.buttonlp.small,
|
||||||
|
.buttonlp.small {
|
||||||
|
padding: 10px 12px;
|
||||||
|
width: auto;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
a.buttonlp.secondary,
|
||||||
|
input.buttonlp.secondary,
|
||||||
|
.buttonlp.secondary {
|
||||||
|
background: @secondaryColor;
|
||||||
|
}
|
||||||
|
a.buttonlp.secondary:active, a.buttonlp.secondary:focus, a.buttonlp.secondary.active,
|
||||||
|
input.buttonlp.secondary:active,
|
||||||
|
input.buttonlp.secondary:focus,
|
||||||
|
input.buttonlp.secondary.active,
|
||||||
|
.buttonlp.secondary:active,
|
||||||
|
.buttonlp.secondary:focus,
|
||||||
|
.buttonlp.secondary.active {
|
||||||
|
background: @secondaryShade4;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
a.buttonlp.accent,
|
||||||
|
input.buttonlp.accent,
|
||||||
|
.buttonlp.accent {
|
||||||
|
background: @accentColor;
|
||||||
|
}
|
||||||
|
a.buttonlp.accent:active, a.buttonlp.accent:focus, a.buttonlp.accent.active,
|
||||||
|
input.buttonlp.accent:active,
|
||||||
|
input.buttonlp.accent:focus,
|
||||||
|
input.buttonlp.accent.active,
|
||||||
|
.buttonlp.accent:active,
|
||||||
|
.buttonlp.accent:focus,
|
||||||
|
.buttonlp.accent.active {
|
||||||
|
background: @accentShade4;
|
||||||
|
}
|
||||||
|
a.buttonlp.accent2,
|
||||||
|
input.buttonlp.accent2,
|
||||||
|
.buttonlp.accent2 {
|
||||||
|
background: @accent2Color;
|
||||||
|
}
|
||||||
|
a.buttonlp.accent2:active, a.buttonlp.accent2:focus, a.buttonlp.accent2.active,
|
||||||
|
input.buttonlp.accent2:active,
|
||||||
|
input.buttonlp.accent2:focus,
|
||||||
|
input.buttonlp.accent2.active,
|
||||||
|
.buttonlp.accent2:active,
|
||||||
|
.buttonlp.accent2:focus,
|
||||||
|
.buttonlp.accent2.active {
|
||||||
|
background: @accent2Shade4;
|
||||||
|
}
|
||||||
|
a.buttonlp.accent3,
|
||||||
|
input.buttonlp.accent3,
|
||||||
|
.buttonlp.accent3 {
|
||||||
|
background: @accent3Color;
|
||||||
|
}
|
||||||
|
a.buttonlp.accent3:active, a.buttonlp.accent3:focus, a.buttonlp.accent3.active,
|
||||||
|
input.buttonlp.accent3:active,
|
||||||
|
input.buttonlp.accent3:focus,
|
||||||
|
input.buttonlp.accent3.active,
|
||||||
|
.buttonlp.accent3:active,
|
||||||
|
.buttonlp.accent3:focus,
|
||||||
|
.buttonlp.accent3.active {
|
||||||
|
background: @accent3Shade4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*inputs*/
|
||||||
|
.input__wrapper {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.inputRG__wrapper {
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.labelform {
|
||||||
|
font-weight: 500;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputform,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
height: 50px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 2px solid @neutralShade3;
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
font-family: "Poppins";
|
||||||
|
border-radius: @borderRadius;
|
||||||
|
color: @foregroundColor;
|
||||||
|
background: @backgroundColor;
|
||||||
|
}
|
||||||
|
.inputform:focus, .inputform.active,
|
||||||
|
select:focus,
|
||||||
|
select.active,
|
||||||
|
textarea:focus,
|
||||||
|
textarea.active {
|
||||||
|
outline: none;
|
||||||
|
border-color: @primaryColor;
|
||||||
|
}
|
||||||
|
.inputform:disabled,
|
||||||
|
select:disabled,
|
||||||
|
textarea:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
background: @neutralShade1;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
Input .inputPasswordform {
|
||||||
|
height: 50px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: 2px solid @neutralShade3;
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
font-family: "Poppins";
|
||||||
|
border-radius: @borderRadius;
|
||||||
|
color: @foregroundColor;
|
||||||
|
background: @backgroundColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
Input .inputPasswordform:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: @primaryColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inputform.input {
|
||||||
|
height: 56px;
|
||||||
|
font-size: 18px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*spinner*/
|
||||||
|
.spinner + .labellp {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-top: 8px;
|
||||||
|
display: inline-block;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: @primaryShade4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner1 .spinner {
|
||||||
|
max-width: 50px;
|
||||||
|
margin: auto;
|
||||||
|
height: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.spinner1 .spinner:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
left: -10%;
|
||||||
|
background: @primaryColor;
|
||||||
|
animation: spinnerLeftRight 1s infinite;
|
||||||
|
}
|
||||||
|
.spinner1 .spinner:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
left: -10%;
|
||||||
|
background: @primaryShade2;
|
||||||
|
opacity: 1;
|
||||||
|
animation: spinnerLeftRight 1s infinite 0.06s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spinnerLeftRight {
|
||||||
|
0% {
|
||||||
|
left: 85%;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
left: -10%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 85%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.formlogin {
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 30px;
|
||||||
|
box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2);
|
||||||
|
background: #ffffff44;
|
||||||
|
margin-top: 30px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.formlogin .checkbox {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.formlogin .spinner__wrapper {
|
||||||
|
place-items: center;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.logHeader{
|
||||||
|
|
||||||
|
h1{
|
||||||
|
font: 700 48px/1.2 "Nunito", sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
h6{
|
||||||
|
line-height: 1px;
|
||||||
|
display: flex;
|
||||||
|
font: 500 16px/1 "Poppins", sans-serif;
|
||||||
|
text-transform: uppercase;
|
||||||
|
img{
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.moreActions{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -1,18 +1,39 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react'
|
||||||
import { YulioID } from 'components';
|
import * as antd from 'antd'
|
||||||
|
import * as ycore from 'ycore'
|
||||||
|
import YulioID from './components/YulioID.js'
|
||||||
|
import styles from './index.less';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
class Login extends Component {
|
class Login extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
showYulioID: true
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
toogleYulioID(){
|
||||||
|
this.setState({ showYulioID: !this.state.showYulioID })
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<YulioID include={<div>Using stable</div>} />
|
<div>
|
||||||
|
<img src="https://dl.ragestudio.net/background.svg" className={styles.backgroud} />
|
||||||
|
<div className={styles.loginLandingWrapper}>
|
||||||
|
<div className={styles.brand} ><img src={ycore.AppInfo.logo} /> </div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.prest}>
|
||||||
|
{/* <img src="https://comty.julioworld.club/themes/comty27/img/backgrounds/group-chat.svg" /> */}
|
||||||
|
{/* <div className={styles.loginbtn}><antd.Button onClick={() => this.toogleYulioID()} icon="login" > Login </antd.Button></div> */}
|
||||||
|
</div>
|
||||||
|
<div className={styles.version}><h2>{`v${ycore.AppInfo.version}`}</h2>{ycore.DetectNoNStableBuild('TagComponent')}</div>
|
||||||
|
<YulioID visible={this.state.showYulioID} />
|
||||||
|
</div>
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Login
|
export default Login
|
||||||
|
|||||||
64
src/pages/login/index.less
Normal file
64
src/pages/login/index.less
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
@import '~themes/vars.less';
|
||||||
|
|
||||||
|
.backgroud{
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.version{
|
||||||
|
display: inline;
|
||||||
|
z-index: 2;
|
||||||
|
font-family: "Poppins", sans-serif;
|
||||||
|
font-size: 11px;
|
||||||
|
bottom: 0;
|
||||||
|
position: absolute;
|
||||||
|
float: left;
|
||||||
|
margin: 0 0 5px 3%;
|
||||||
|
color: #F9F9F9;
|
||||||
|
h2{
|
||||||
|
color: #F9F9F9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.loginLandingWrapper{
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: "Nunito", sans-serif;
|
||||||
|
padding: 15px 30px 15px 35px;
|
||||||
|
}
|
||||||
|
.brand{
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
float: left;
|
||||||
|
vertical-align: middle;
|
||||||
|
position: relative;
|
||||||
|
img{
|
||||||
|
max-width: 11vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.prest{
|
||||||
|
z-index: 2;
|
||||||
|
position: relative;
|
||||||
|
font-family: "Source Sans Pro", sans-serif;
|
||||||
|
padding: 25px;
|
||||||
|
margin: auto;
|
||||||
|
vertical-align: bottom;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
max-height: 60vh;
|
||||||
|
}
|
||||||
|
.loginbtn{
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
:global{
|
||||||
|
.ant-btn {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import { router, pathMatchRegexp } from 'utils'
|
|
||||||
import api from 'api'
|
|
||||||
|
|
||||||
const { loginUser } = api
|
|
||||||
|
|
||||||
export default {
|
|
||||||
namespace: 'login',
|
|
||||||
state: {},
|
|
||||||
effects: {
|
|
||||||
*login({ payload }, { put, call, select }) {
|
|
||||||
const data = yield call(loginUser, payload)
|
|
||||||
const { locationQuery } = yield select(_ => _.app)
|
|
||||||
if (data.success == true) {
|
|
||||||
const { from } = locationQuery
|
|
||||||
yield put({ type: 'app/query' })
|
|
||||||
if (!pathMatchRegexp('/login', from)) {
|
|
||||||
if (from === '/') router.push('/dashboard')
|
|
||||||
else router.push(from)
|
|
||||||
} else {
|
|
||||||
router.push('/dashboard')
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
throw data
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@ -20,7 +20,7 @@ class Main extends React.Component {
|
|||||||
render(){
|
render(){
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div><antd.Card bordered="false" > Kintxy xikito </antd.Card></div>
|
<div><antd.Card className={styles.FeedTools} bordered="false" > Kintxy xikito </antd.Card></div>
|
||||||
<div><PostCreator /></div>
|
<div><PostCreator /></div>
|
||||||
<div><MainFeed get="feed" /></div>
|
<div><MainFeed get="feed" /></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -11,3 +11,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
.FeedTools{
|
||||||
|
border-radius: 7px;
|
||||||
|
max-width: 510px;
|
||||||
|
min-width: 265px;
|
||||||
|
width: auto;
|
||||||
|
margin: 23px auto 50px auto;
|
||||||
|
}
|
||||||
@ -2,6 +2,8 @@ import React, { Component, Fragment } from 'react';
|
|||||||
import { List, Icon, Switch, Button, notification } from 'antd';
|
import { List, Icon, Switch, Button, notification } from 'antd';
|
||||||
import { AppSettings } from '../../../../globals/settings.js'
|
import { AppSettings } from '../../../../globals/settings.js'
|
||||||
import { DevOptions, ControlBar } from 'ycore'
|
import { DevOptions, ControlBar } from 'ycore'
|
||||||
|
import * as ycore from "ycore"
|
||||||
|
import { CustomIcons } from 'components'
|
||||||
|
|
||||||
class Base extends Component {
|
class Base extends Component {
|
||||||
constructor(props){
|
constructor(props){
|
||||||
@ -20,6 +22,7 @@ class Base extends Component {
|
|||||||
SettingRender = data =>{
|
SettingRender = data =>{
|
||||||
try{
|
try{
|
||||||
return(
|
return(
|
||||||
|
<div>
|
||||||
<List
|
<List
|
||||||
itemLayout="horizontal"
|
itemLayout="horizontal"
|
||||||
dataSource={data}
|
dataSource={data}
|
||||||
@ -30,6 +33,8 @@ class Base extends Component {
|
|||||||
</List.Item>
|
</List.Item>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
<Button onClick={() => ycore.RegSW()} > Upload Service Worker </Button>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
catch (err){
|
catch (err){
|
||||||
@ -72,7 +77,7 @@ class Base extends Component {
|
|||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<div>
|
<div>
|
||||||
<h1><Icon type="global" /> Behaviors</h1>
|
<h1><CustomIcons.RobotOutlined /> Behaviors</h1>
|
||||||
{this.SettingRender(this.state.SettingRepo)}
|
{this.SettingRender(this.state.SettingRepo)}
|
||||||
</div>
|
</div>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
|
|||||||
@ -10,7 +10,7 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
color: @DarkMode-color_container;
|
color: @DarkMode-color_container;
|
||||||
background-color: @DarkMode-backgroud;
|
background-color: transparent;
|
||||||
.leftMenu {
|
.leftMenu {
|
||||||
width: 224px;
|
width: 224px;
|
||||||
border-right: @border-width-base @border-style-base @border-color-split;
|
border-right: @border-width-base @border-style-base @border-color-split;
|
||||||
@ -18,7 +18,7 @@
|
|||||||
|
|
||||||
.ant-menu-inline {
|
.ant-menu-inline {
|
||||||
color: @DarkMode-color_container;
|
color: @DarkMode-color_container;
|
||||||
background-color: @DarkMode-backgroud;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
|
||||||
|
|||||||
@ -9,3 +9,55 @@
|
|||||||
@Theme-SiderDeco-Color: #f9f6f7;
|
@Theme-SiderDeco-Color: #f9f6f7;
|
||||||
|
|
||||||
@Theme-Hover-Backgroud: rgba(107, 162, 235, 0.507);
|
@Theme-Hover-Backgroud: rgba(107, 162, 235, 0.507);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// YulioID
|
||||||
|
|
||||||
|
@canvasColor: #f9f9f9;
|
||||||
|
@backgroundColor: #fff;
|
||||||
|
@foregroundColor: #111;
|
||||||
|
@primaryColor: #373F51;
|
||||||
|
@primaryShade1: #ffe2d1;
|
||||||
|
@primaryShade2: #ffceb2;
|
||||||
|
@primaryShade3: #ffb184;
|
||||||
|
@primaryShade4: #e88850;
|
||||||
|
@primaryShade5: #d17a48;
|
||||||
|
@secondaryColor: #ffcc67;
|
||||||
|
@secondaryShade1: #fff1d5;
|
||||||
|
@secondaryShade2: #ffde9e;
|
||||||
|
@secondaryShade3: #ffd074;
|
||||||
|
@secondaryShade4: #e8ba5e;
|
||||||
|
@secondaryShade5: #ba954b;
|
||||||
|
@accentColor: #4e5166;
|
||||||
|
@accentShade1: #cecfd5;
|
||||||
|
@accentShade2: #aeafb9;
|
||||||
|
@accentShade3: #8e909d;
|
||||||
|
@accentShade4: #6e7081;
|
||||||
|
@accentShade5: #404354;
|
||||||
|
@accent2Color: #588b8b;
|
||||||
|
@accent2Shade1: #c2d4d4;
|
||||||
|
@accent2Shade2: #a3bfbf;
|
||||||
|
@accent2Shade3: #85aaaa;
|
||||||
|
@accent2Shade4: #507f7f;
|
||||||
|
@accent2Shade5: #497272;
|
||||||
|
@accent3Color: #fe5f55;
|
||||||
|
@accent3Shade1: #fec4c1;
|
||||||
|
@accent3Shade2: #fea7a2;
|
||||||
|
@accent3Shade3: #fe7c73;
|
||||||
|
@accent3Shade4: #e7574e;
|
||||||
|
@accent3Shade5: #b9463e;
|
||||||
|
|
||||||
|
@neutralShade0: #f8f8f8;
|
||||||
|
@neutralShade1: #f2f2f2;
|
||||||
|
@neutralShade2: #e8e9e9;
|
||||||
|
@neutralShade3: #d1d3d4;
|
||||||
|
@neutralShade4: #babdbf;
|
||||||
|
@neutralShade5: #808488;
|
||||||
|
@neutralShade6: #666a6d;
|
||||||
|
@neutralShade7: #4d5052;
|
||||||
|
@neutralShade8: #212122;
|
||||||
|
@grayColor: #999;
|
||||||
|
@lightGrayColor: #ddd;
|
||||||
|
@borderRadius: 6px;
|
||||||
|
@boxShadow: 0 2px 5px rgba(#333, 0.2);
|
||||||
Loading…
x
Reference in New Issue
Block a user