+
{frag}
)
}
-Card_Component.defaultProps = {
+CardComponent.defaultProps = {
style: null,
type: null,
children:
Empty
}
-export default Card_Component
\ No newline at end of file
+export default CardComponent
\ No newline at end of file
diff --git a/src/components/Layout/Overlay/components/cards/__searchBar.js b/src/components/Layout/Overlay/components/cards/__searchBar.js
index ba610e01..5b0734be 100644
--- a/src/components/Layout/Overlay/components/cards/__searchBar.js
+++ b/src/components/Layout/Overlay/components/cards/__searchBar.js
@@ -1,36 +1,36 @@
import React from 'react'
import styles from './__searchBar.less'
-import {newSearch} from "core/models/overlay"
+import { newSearch } from "core/models/overlay"
-export default class __searchBar extends React.Component{
- state = {
- value: '',
+export default class __searchBar extends React.Component {
+ state = {
+ value: '',
+ }
+ openSearcher = () => {
+ const { value } = this.state
+ if (value.length < 1) return false
+ if (value == /\s/) return false
+ newSearch({ keyword: value });
+ }
+ onChange = e => {
+ const { value } = e.target
+ this.setState({ value: value })
+ }
+
+ handleKey = (e) => {
+ if (e.key == 'Enter') {
+ this.openSearcher()
}
- openSearcher = () => {
- const { value } = this.state
- if (value.length < 1) return false
- if (value == /\s/) return false
- newSearch({ keyword: value });
- }
- onChange = e => {
- const { value } = e.target
- this.setState({ value: value })
- }
-
- handleKey = (e) =>{
- if (e.key == 'Enter') {
- this.openSearcher()
- }
- }
- render(){
- return(
-
-
-
- )
- }
- }
\ No newline at end of file
+ }
+ render() {
+ return (
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/components/Layout/Overlay/components/index.js b/src/components/Layout/Overlay/components/index.js
index 4b655452..80501ac6 100644
--- a/src/components/Layout/Overlay/components/index.js
+++ b/src/components/Layout/Overlay/components/index.js
@@ -1,16 +1,5 @@
import Primary from './layout/Primary.tsx'
-import Secondary from './layout/Secondary.tsx'
-import Card_Component from './Card_Component.tsx'
-
-import __searchBar from './cards/__searchBar'
-import __trendings from './cards/__trendings'
-import __suggestions from './cards/__suggestions'
export {
- Card_Component,
- Secondary,
- Primary,
- __searchBar,
- __trendings,
- __suggestions,
+ Primary
}
\ No newline at end of file
diff --git a/src/components/Layout/Overlay/components/layout/Primary.tsx b/src/components/Layout/Overlay/components/layout/Primary.tsx
index 2ad96c01..368911ef 100644
--- a/src/components/Layout/Overlay/components/layout/Primary.tsx
+++ b/src/components/Layout/Overlay/components/layout/Primary.tsx
@@ -1,8 +1,6 @@
import * as React from 'react'
import * as antd from 'antd'
-import { LeftOutlined } from 'components/Icons'
-import styles from '../../index.less'
-import classnames from 'classnames'
+import { LeftOutlined } from 'components/Icons'
import { Swapper } from '../../index.js'
export interface overlay_primary_props {
@@ -14,28 +12,14 @@ export interface overlay_primary_props {
closable: boolean;
}
-
-const renderExit = (
-
-
} onClick={() => Swapper.closeAll()}> Back
-
-)
-
+const renderExit =
} onClick={() => Swapper.closeAll()}> Back
const overlay_primary = (props: overlay_primary_props) => {
const { fragment, mode, isMobile } = props
return (
-
-
- {props.mode === 'full' || props.mode === 'half'? renderExit : null}
- {fragment}
-
+
+ {props.mode === 'full' || props.mode === 'half' ? renderExit : null}
+ {fragment}
)
}
diff --git a/src/components/Layout/Overlay/components/layout/Secondary.tsx b/src/components/Layout/Overlay/components/layout/Secondary.tsx
deleted file mode 100644
index 55592593..00000000
--- a/src/components/Layout/Overlay/components/layout/Secondary.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as React from 'react'
-import * as antd from 'antd'
-import { LeftOutlined } from 'components/Icons'
-import styles from '../../index.less'
-import classnames from 'classnames'
-
-export interface __sec_props {
- y?: number;
- getRef: React.Ref
;
- isMobile: boolean;
- functs: any;
- render: any;
- type: any;
-}
-
-const isOpen = (props: __sec_props) => {
- const t_full = props.type === 'full_open'? true : false
- const t_def = props.type === 'active'? true: false
- if (t_full || t_def ) {
- return true
- }
- return false
-}
-
-const renderExit = (props: __sec_props) => {
- const {functs} = props
- if (isOpen) {
- return
-
} onClick={() => functs.Swapper.close()}> Back
-
-
-
- {renderExit}
-
- {render}
-
-
-
-
<__searchBar />
-
- {session_valid?
router.goProfile(session_data["username"])} style={{ display: 'flex', lineHeight: '30px', wordBreak: 'break-all' }} > @{session_data.username}#{session_uuid}
: null }
-
-
- {renderElement()}
-
-
+
+ {renderElement()}
+
)
}
}
diff --git a/src/components/Layout/Overlay/index.less b/src/components/Layout/Overlay/index.less
deleted file mode 100644
index 2fb5d71a..00000000
--- a/src/components/Layout/Overlay/index.less
+++ /dev/null
@@ -1,174 +0,0 @@
-@import '~theme/index.less';
-
-.render_component {
- width: 100%;
- height: 100%;
-
- background-color: #fff;
- border-radius: 8px;
- padding: 10px;
-
-
- h2,h3,h4{
- color: #9597A1;
- font-family: Netflix Sans;
- font-style: normal;
- font-weight: 300;
- font-size: 12px;
- line-height: 15px;
- }
-}
-
-.exit_button{
- position: relative;
- z-index: 52;
-
- left: 0;
-
- //padding: 10px 0px 0 15px;
- :global{
- .ant-btn{
- background-color: #fff;
- border-radius: 8px;
- }
- }
-}
-
-.Overlay_wrapper {
- user-select: none;
- right: 0;
- top: 0;
- z-index: 50;
-
- height: 100%;
- // 150px extra for left-sider
- width: 87%;
- backdrop-filter: blur(2px);
- &.mobile{
- overflow-y: scroll;
- flex-direction: column;
- width: 0;
- height: 0;
-
- &.active{
- position: absolute;
- width: 100%;
- height: 100%;
- width: none;
- }
- }
-
- &.undocked {
- display: none;
- }
-
- &.expand{
- max-width: calc(100% + 150px);
- }
-
- transition: all @__app_SwapDuration ease-in-out;
-}
-
-.overlay_primary_wrapper {
- height: 100%;
- width: 100%;
-
- max-width: @Overlay_wrapper_maxwidth;
- min-width: 200px;
-
- display: flex;
- z-index: 50;
-
- right: 0;
- padding: 30px 30px 30px 35px;
-
-
- @media (max-width: @screen-md) {
- padding: 30px 5px;
- }
-
- color: @Overlay_container1_def_color;
-
- .renderBody{
- height: 100%;
- width: 100%;
- > div {
- margin-bottom: 35px;
- }
- }
-
- &.half {
- background-color: #2d2d2d;
- color: @Overlay_container1_active_color;
- max-width: calc(100% + 150px);
- }
-
- &.full{
- max-width: none;
- background-color: transparent;
- position: absolute;
- width: 100vw;
- height: 100vh;
- }
-
- :global {
- .ant-btn {
- color: @Overlay_container_1_btn_color;
- background-color: @Overlay_container_1_btn_backgroud;
- border-color: transparent;
- border-radius: 12px;
- }
-
- .ant-btn:hover {
- box-shadow: @Overlay_container_1_btn_shadow;
- transition: all @__Global_Components_transitions_dur linear;
- }
- }
-
- transition: all @__app_SwapDuration ease-in-out;
- border-radius: @__Global_layout_border-rd;
-}
-
-
-.overlay_secondary_wrapper {
- position: absolute;
- z-index: 55;
- height: 100vh;
- right: 0;
- width: 0;
- opacity: 0;
-
- padding: @Overlay_container2_padding;
-
- color: @Overlay_container2_color!important;
- background-color: @Overlay_container2_backgroud;
-
- border-radius: 32px 0 0 32px;
-
- &.active {
- width: @Overlay_container2_active_width;
- opacity: 1;
- }
-
-
- transition: all @__app_SwapDuration ease-in-out;
-
- }
-
-
- .renderSearch_wrapper {
- height: 87vh;
- overflow: hidden;
- margin: 20px 0 0;
- font-family: @__app_generalFont;
- h2 {
- color: #ffffff;
- }
- }
-
-
- .mainElement {
- > div {
- margin: 30px 0;
- }
- }
\ No newline at end of file
diff --git a/src/components/Layout/RightSider/components/invalid/index.js b/src/components/Layout/RightSider/components/invalid/index.js
new file mode 100644
index 00000000..a66d03bc
--- /dev/null
+++ b/src/components/Layout/RightSider/components/invalid/index.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import * as antd from 'antd'
+import { CardComponent } from 'components'
+
+export default () => {
+ return (
+
+ Invalid Component
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Layout/RightSider/components/profileCard/index.js b/src/components/Layout/RightSider/components/profileCard/index.js
new file mode 100644
index 00000000..59185280
--- /dev/null
+++ b/src/components/Layout/RightSider/components/profileCard/index.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import * as antd from 'antd'
+import router from 'core/libs/router'
+import withConnector from 'core/libs/withConnector'
+import { CardComponent } from 'components'
+
+@withConnector
+export default class ProfileCard extends React.Component {
+ render() {
+ const { session_data, session_valid, session_uuid } = this.props.app
+
+ if (session_valid) {
+ return(
+
+
router.goProfile(session_data["username"])} style={{ display: 'flex', lineHeight: '30px', wordBreak: 'break-all' }} >
+
+
+ @{session_data.username}
+ #{session_uuid}
+
+
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/components/Layout/RightSider/components/searchBar/index.less b/src/components/Layout/RightSider/components/searchBar/index.less
new file mode 100644
index 00000000..7d62a66a
--- /dev/null
+++ b/src/components/Layout/RightSider/components/searchBar/index.less
@@ -0,0 +1,33 @@
+@import '~theme/index.less';
+
+.search_bar {
+ height: 24px;
+ position: relative;
+
+ input {
+ height: 100%;
+ width: 100%;
+ background-color: transparent;
+ border: 0!important;
+ outline: 0!important;
+ color: @__app_backgroundAccent;
+ padding: 0 0 0 48px;
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
+ background-repeat: no-repeat;
+ background-size: 16px;
+ background-position: 0 48%;
+ font-family: @__app_secondaryFont;
+ font-weight: 600;
+ font-size: 15px;
+ &::placeholder {
+ color: @__app_backgroundAccent;
+ }
+ transition: all 150ms ease-in-out;
+
+ }
+
+ input:focus{
+ background-position: 20px 48%;
+ transition: all 150ms ease-in-out;
+ }
+ }
\ No newline at end of file
diff --git a/src/components/Layout/RightSider/index.js b/src/components/Layout/RightSider/index.js
new file mode 100644
index 00000000..96b29fc9
--- /dev/null
+++ b/src/components/Layout/RightSider/index.js
@@ -0,0 +1,69 @@
+import React from 'react'
+import classnames from 'classnames'
+import withConnector from 'core/libs/withConnector'
+import { __legacy__objectToArray } from '@ragestudio/nodecore-utils'
+
+import InvalidComponent from './components/invalid'
+import ProfileCard from './components/profileCard'
+import SearchBar from './components/searchBar'
+
+const MapToComponent = {
+ profileCard: ,
+ searchBar:
+}
+
+// to do: add order by numeric range
+let DefaultElements = [
+ "searchBar",
+ "profileCard"
+]
+
+@withConnector
+export default class RightSider extends React.Component {
+
+ state = {
+ fragments: []
+ }
+
+ renderElements() {
+ try {
+ return this.state.fragments.map((element) => {
+ return
+ {element.fragment ?? null}
+
+ })
+ } catch (error) {
+ console.log(error)
+ return
+ }
+ }
+
+ componentDidMount() {
+ if (typeof (window.rightSidebar) == "undefined") {
+ window.RightSider = {}
+ }
+ window.RightSider.addFragment = (fragment) => {
+ let updated = this.state.fragments
+ updated.push(fragment)
+ this.setState({ fragments: updated })
+ }
+
+ DefaultElements.forEach((e) => {
+ window.RightSider.addFragment({ id: e, fragment: MapToComponent[e] })
+ })
+
+ }
+
+ render() {
+ return (
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/components/Layout/Sider/index.js b/src/components/Layout/Sider/index.js
index 100b046b..31fbcb6e 100755
--- a/src/components/Layout/Sider/index.js
+++ b/src/components/Layout/Sider/index.js
@@ -2,11 +2,11 @@ import React from 'react'
import { app } from 'config'
import { router } from 'core/libs'
import { __legacy__objectToArray } from 'core'
-import Sider_Mobile from './mobile'
-import Sider_Default from './default'
import { connect } from 'umi'
import MenuList from 'globals/sidebar_menu.js'
-import { FloatComponent } from 'components'
+
+import Sider_Mobile from './mobile'
+import Sider_Default from './default'
@connect(({ app, extended }) => ({ app, extended }))
class Sider extends React.Component {
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
index 9b24adf8..654137dc 100755
--- a/src/components/Layout/index.js
+++ b/src/components/Layout/index.js
@@ -1,6 +1,7 @@
import Sider from './Sider'
+import RightSider from './RightSider'
import Overlay from './Overlay'
import WindowNavbar from './WindowNavbar'
import ContextMenu from './ContextMenu/index.tsx'
-export { Sider, Overlay, WindowNavbar, ContextMenu }
+export { RightSider, Sider, Overlay, WindowNavbar, ContextMenu }
diff --git a/src/components/index.js b/src/components/index.js
index e9d33b9a..f348e92c 100755
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -5,6 +5,7 @@ import Loader from './Loader'
import About from './About'
import * as Feather from 'feather-reactjs'
import Invalid from './Invalid'
+import CardComponent from './CardComponent'
// App Layout Components
import Splash from './Splash'
@@ -23,6 +24,7 @@ import PostCard from './PostCard'
// Mix & Export all
export {
+ CardComponent,
PostsFeed,
Splash,
ParamsList,
diff --git a/src/core/libs/router/index.js b/src/core/libs/router/index.js
index 4910f9fb..94085941 100644
--- a/src/core/libs/router/index.js
+++ b/src/core/libs/router/index.js
@@ -8,11 +8,9 @@ export const router = {
},
go: e => {
router.push(e);
- // goTo.element('primaryContent');
},
goProfile: e => {
router.push(`/@/${e}`);
- // goTo.element('primaryContent');
},
};
diff --git a/src/core/libs/withConnector/index.js b/src/core/libs/withConnector/index.js
new file mode 100644
index 00000000..e7b9fbda
--- /dev/null
+++ b/src/core/libs/withConnector/index.js
@@ -0,0 +1,5 @@
+import { connect } from 'umi'
+
+export default (children) => {
+ return connect(({ app }) => ({ app }))(children)
+}
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.js b/src/layouts/BaseLayout.js
index bc17fab4..ac1cde65 100755
--- a/src/layouts/BaseLayout.js
+++ b/src/layouts/BaseLayout.js
@@ -1,5 +1,4 @@
import React from 'react'
-import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'
import { Loader } from 'components'
import { withRouter, connect } from 'umi'
@@ -11,7 +10,7 @@ import { Splash } from 'components'
import PrimaryLayout from './PrimaryLayout'
import PublicLayout from './PublicLayout'
-import 'theme'
+import 'theme/index.less'
const LayoutMap = {
primary: PrimaryLayout,
@@ -20,7 +19,7 @@ const LayoutMap = {
@withRouter
@connect(({ app, loading }) => ({ app, loading }))
-class BaseLayout extends React.Component {
+export default class BaseLayout extends React.Component {
previousPath = ''
renderLoading = true
@@ -53,10 +52,4 @@ class BaseLayout extends React.Component {
)
}
-}
-
-BaseLayout.propTypes = {
- loading: PropTypes.object,
-}
-
-export default BaseLayout
+}
\ No newline at end of file
diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js
index e06e7e33..7d37fd42 100755
--- a/src/layouts/PrimaryLayout.js
+++ b/src/layouts/PrimaryLayout.js
@@ -1,5 +1,4 @@
import React from 'react'
-import PropTypes from 'prop-types'
import { withRouter, connect } from 'umi'
import {
AppLayout
@@ -13,15 +12,14 @@ import { theme } from 'core/libs/style'
import * as antd from 'antd'
import contextMenuList from 'globals/contextMenu'
-import styles from 'theme'
const { Content } = antd.Layout
-const { Sider, Overlay } = AppLayout
+const { Sider, Overlay, RightSider } = AppLayout
const isActive = (key) => { return key ? key.active : false }
@withRouter
@connect(({ app, contextMenu, loading }) => ({ app, contextMenu, loading }))
-class PrimaryLayout extends React.Component {
+export default class PrimaryLayout extends React.Component {
constructor(props) {
super(props)
this.state = {
@@ -78,14 +76,11 @@ class PrimaryLayout extends React.Component {
)
}
-
this.enquireHandler = enquireScreen(mobile => {
const { isMobile } = this.state
if (isMobile !== mobile) {
window.isMobile = mobile
- this.setState({
- isMobile: mobile,
- })
+ this.setState({isMobile: mobile})
}
})
@@ -131,33 +126,22 @@ class PrimaryLayout extends React.Component {
overflow: "hidden",
opacity: currentTheme.backgroundImage.opacity
}} /> : null}
-
-
+
{children ? children : null}
+
)
}
-}
-
-PrimaryLayout.propTypes = {
- children: PropTypes.element.isRequired,
- location: PropTypes.object,
- dispatch: PropTypes.func,
- app: PropTypes.object,
- loading: PropTypes.object,
-}
-
-export default PrimaryLayout
+}
\ No newline at end of file
diff --git a/src/models/app.js b/src/models/app.js
index c6ba18f4..b32957c2 100755
--- a/src/models/app.js
+++ b/src/models/app.js
@@ -45,12 +45,7 @@ export default {
subscriptions: {
setup({ dispatch }) {
dispatch({ type: 'updateState', payload: { dispatcher: dispatch } })
- try {
- const electron = window.require("electron")
- dispatch({ type: 'updateState', payload: { electron, embedded: true } })
- } catch (error) {
- // nothing
- }
+ dispatch({ type: 'earlyInit' })
dispatch({ type: 'updateFrames' })
dispatch({ type: 'validateSession' })
dispatch({ type: 'initHeaderSocket' })
@@ -79,17 +74,13 @@ export default {
},
},
effects: {
- *query({ payload }, { call, put, select }) {
+ *earlyInit({ dispatcher }, { call, put, select }) {
const state = yield select(state => state.app)
- window.PluginGlobals = []
- window.Internal = []
-
window.classToStyle = (key) => {
if (typeof (key) !== "string") {
try {
const toString = JSON.stringify(key)
- console.log(toString)
if (toString) {
return toString
} else {
@@ -105,6 +96,20 @@ export default {
return key
}
+ try {
+ const electron = window.require("electron")
+ state.dispatcher({ type: 'updateState', payload: { electron, embedded: true } })
+ } catch (error) {
+ // nothing
+ }
+
+ },
+ *query({ payload }, { call, put, select }) {
+ const state = yield select(state => state.app)
+
+ window.PluginGlobals = []
+ window.Internal = []
+
queryIndexer([
{
match: '/s;:id',
@@ -289,7 +294,7 @@ export default {
}
}
})
-
+
},
*updateTheme({ payload }, { put, select }) {
if (!payload) return false
diff --git a/src/pages/index.js b/src/pages/index.js
index e99c961c..cef9aff6 100755
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,7 +1,6 @@
import React from 'react'
import ReduxDebugger from 'debuggers/redux'
import * as antd from 'antd'
-import { FloatComponent } from 'components'
import { connect } from 'umi'
import { ClusterOutlined } from 'components/Icons'
import { __legacy__objectToArray } from 'core'
diff --git a/src/theme/antd-theme.less b/src/theme/antd-theme.less
deleted file mode 100644
index 77899efb..00000000
--- a/src/theme/antd-theme.less
+++ /dev/null
@@ -1 +0,0 @@
-@import '~antd/dist/antd.dark.less'; // Introduce the official dark less style entry file
diff --git a/src/theme/base/components/Menssaging.less b/src/theme/base/components/Menssaging.less
deleted file mode 100644
index a9eb5947..00000000
--- a/src/theme/base/components/Menssaging.less
+++ /dev/null
@@ -1,30 +0,0 @@
-@chat_footer_height: 67px;
-@chats-bg-color: #fff;
-@chats-input-bg: #f8f8fa;
-@input-chat-color: #a2a2a2;
-@chat-border-color: #eef2f4;
-@chat-body-color: #273346;
-@chat-msg-message: #969eaa;
-@chat-text-bg: #f1f2f6;
-@chat-text-color: rgb(39, 51, 70);
-@chat-theme-color: #0086ff;
-@msg-date: #c0c7d2;
-@chat-button-bg-color: #f0f7ff;
-@msg-hover-bg: rgba(238, 242, 244, 0.4);
-@active-conversation-bg: linear-gradient(
- to right,
- rgba(238, 242, 244, 0.4) 0%,
- rgba(238, 242, 244, 0) 100%
-);
-@overlay-bg: linear-gradient(
- to bottom,
- rgba(255, 255, 255, 0) 0%,
- rgba(255, 255, 255, 1) 65%,
- rgba(255, 255, 255, 1) 100%
-);
-@chat-header-bg: linear-gradient(
- to bottom,
- rgba(255, 255, 255, 1) 0%,
- rgba(255, 255, 255, 1) 78%,
- rgba(255, 255, 255, 0) 100%
-);
\ No newline at end of file
diff --git a/src/theme/base/index.less b/src/theme/base/index.less
index 8396a64f..1320b019 100644
--- a/src/theme/base/index.less
+++ b/src/theme/base/index.less
@@ -1,5 +1,3 @@
-@import '../../../node_modules/antd/lib/style/themes/default.less';
-
@import './vars.less';
@import './fonts-import.css';
@@ -8,6 +6,14 @@
@import './components/PostCard.less';
+
+// Resolutions variables
+@screen-sm: 48em; // 768px
+@screen-md: 64em; // 1024px
+@screen-lg: 85.375em; // 1366px
+@screen-xl: 120em; // 1920px
+@screen-xxl: 160em; // 2560px
+
::-webkit-scrollbar {
position: absolute;
width: 14px;
@@ -33,21 +39,28 @@
}
.app{
+ &.overlayActive {
+ .app_layout_container{
+ filter: saturate(10%);
+ transform: translate(-150px, 0);// to do: get from overlay direction variable
+ }
+ }
+
&.interfaced{
- .primary_layout_container{
+ .app_layout_container{
height: 98%;
}
}
&.mobile{
- .primary_layout_container {
+ .app_layout_container {
width: 100%;
padding: 0;
overflow-y: overlay;
overflow-x: hidden;
min-width: unset;
}
- .primary_layout_content{
+ .app_layout_content{
padding: 35px 15px 15px;
}
}
@@ -101,36 +114,7 @@ body {
}
}
-@media (max-width: @screen-sm){
- ::-webkit-scrollbar{
- display: none;
- }
-}
-
-@media (min-width: @screen-md) {
- .app_layout_container{
- min-width: 750px;
- }
- .app_layout_content{
- padding: 0;
- }
-}
-
-@media (min-width: @screen-lg) {
- .app_layout_container´{
- min-width: 1112px;
- }
-}
-
-@media (min-width: @screen-xl) {
-
-}
-
-// @media (min-width: @screen-xxl) {
-
-// }
-
-
+// Layout
.app_layout_container {
background-color: transparent;
transition: all 150ms ease-in-out;
@@ -159,3 +143,165 @@ body {
padding: @__app_layout_content_padding;
transition: all 150ms ease-in-out;
}
+
+
+// Right Sidebar
+@__app_overlay_padding: 30px 30px 30px 35px;
+.app_right_sidebar_wrapper {
+ height: 100%;
+ width: 100%;
+
+ max-width: @Overlay_wrapper_maxwidth;
+ min-width: 200px;
+
+ display: flex;
+ z-index: 50;
+
+ padding: @__app_overlay_padding;
+
+ @media (max-width: @screen-md) {
+ padding: 30px 5px;
+ }
+
+ transition: all @__app_SwapDuration ease-in-out;
+
+ &.swapped {
+ transform: translate(100%, 0);
+ }
+}
+
+.app_right_sidebar_content{
+ height: 100%;
+ width: 100%;
+ > div {
+ margin-bottom: 35px;
+ }
+}
+
+// Overlay
+.app_overlay_wrapper {
+ user-select: none;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 50;
+
+ height: 100%;
+ width: 0;
+ backdrop-filter: blur(2px);
+
+ &.half {
+ padding: @__app_overlay_padding;
+ background-color: #2d2d2d;
+ color: @Overlay_container1_active_color;
+ width: 26vw;
+ }
+
+ &.full{
+ padding: @__app_overlay_padding;
+ max-width: none;
+ background-color: transparent;
+ position: absolute;
+ width: 100vw;
+ height: 100vh;
+ }
+
+ transition: all @__app_SwapDuration ease-in-out;
+ border-radius: @__Global_layout_border-rd;
+}
+
+.app_overlay_content {
+ height: 100%;
+ width: 100%;
+
+ max-width: @Overlay_wrapper_maxwidth;
+ min-width: 200px;
+
+ display: flex;
+ z-index: 50;
+
+ right: 0;
+ padding: @__app_overlay_padding;
+
+ color: @Overlay_container1_def_color;
+
+
+
+ transition: all @__app_SwapDuration ease-in-out;
+}
+
+.app_overlay_content_body{
+ height: 100%;
+ width: 100%;
+ > div {
+ margin-bottom: 35px;
+ }
+}
+
+.app_overlay_backButton{
+ margin: 0 0 15px 0;
+ background-color: #fff;
+ border-radius: 8px;
+ color: @Overlay_container_1_btn_color;
+ background-color: @Overlay_container_1_btn_backgroud;
+ border-color: transparent;
+ border-radius: 12px;
+}
+
+.app_overlay_backButton:hover {
+ box-shadow: @Overlay_container_1_btn_shadow;
+ transition: all @__Global_Components_transitions_dur linear;
+}
+
+
+// CardComponent (External Module)
+.cardComponent_wrapper {
+ width: 100%;
+ height: 100%;
+
+ background-color: #fff;
+ border-radius: 8px;
+ padding: 10px;
+
+
+ h2,h3,h4{
+ color: #9597A1;
+ font-family: Netflix Sans;
+ font-style: normal;
+ font-weight: 300;
+ font-size: 12px;
+ line-height: 15px;
+ }
+}
+
+
+
+// Media queries
+@media (min-width: @screen-sm){
+ ::-webkit-scrollbar{
+ display: none;
+ }
+}
+
+@media (min-width: @screen-md) {
+ .app_layout_container{
+ min-width: 750px;
+ }
+ .app_layout_content{
+ padding: 0;
+ }
+}
+
+@media (min-width: @screen-lg) {
+ .app_layout_container{
+ min-width: 1112px;
+ }
+}
+
+// @media (min-width: @screen-xl) {
+
+// }
+
+// @media (min-width: @screen-xxl) {
+
+// }
diff --git a/src/theme/base/layout/Overlay.less b/src/theme/base/layout/Overlay.less
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/theme/base/vars.less b/src/theme/base/vars.less
index eb915058..01cf6ff6 100644
--- a/src/theme/base/vars.less
+++ b/src/theme/base/vars.less
@@ -10,7 +10,6 @@
@__app_SwapDuration: 170ms;
-
@__app_layout_content_padding: 0 40px 20px 0;
diff --git a/src/theme/index.js b/src/theme/index.js
index 77b4b0cf..227d19fd 100644
--- a/src/theme/index.js
+++ b/src/theme/index.js
@@ -4,4 +4,4 @@ const fs = require('fs');
const convToVars = file => lessToJs(fs.readFileSync(resolve(__dirname, file), 'utf8'))
-module.exports = convToVars('./antd-theme.less')
\ No newline at end of file
+module.exports = convToVars('./index.less')
\ No newline at end of file