diff options
author | 2020-12-06 23:49:13 +0100 | |
---|---|---|
committer | 2020-12-06 23:49:13 +0100 | |
commit | 4d642e312ed728ad51c454d1e2a0b7bb350fc174 (patch) | |
tree | e39b26a31b14fe34dced83669bf2844fa7c9752e /client/src | |
parent | 88c2fa63eb8c3ade93914f77d427219b3233ca02 (diff) | |
download | website_creator-4d642e312ed728ad51c454d1e2a0b7bb350fc174.tar.gz website_creator-4d642e312ed728ad51c454d1e2a0b7bb350fc174.tar.bz2 website_creator-4d642e312ed728ad51c454d1e2a0b7bb350fc174.zip |
first creator page
Diffstat (limited to 'client/src')
-rw-r--r-- | client/src/admin/data/translations.js | 11 | ||||
-rw-r--r-- | client/src/admin/hocs/View.jsx | 9 | ||||
-rw-r--r-- | client/src/admin/hocs/index.js | 3 | ||||
-rw-r--r-- | client/src/admin/jsx/App.jsx | 8 | ||||
-rw-r--r-- | client/src/admin/jsx/MainScreen.jsx | 6 | ||||
-rw-r--r-- | client/src/admin/jsx/creator/Creator.jsx | 18 | ||||
-rw-r--r-- | client/src/admin/jsx/creator/Step1.jsx | 67 | ||||
-rw-r--r-- | client/src/admin/jsx/layout/Info.jsx (renamed from client/src/admin/jsx/Info.jsx) | 2 | ||||
-rw-r--r-- | client/src/admin/jsx/layout/LangSwitch.jsx (renamed from client/src/admin/jsx/LangSwitch.jsx) | 4 | ||||
-rw-r--r-- | client/src/admin/jsx/layout/TopBar.jsx (renamed from client/src/admin/jsx/TopBar.jsx) | 4 | ||||
-rw-r--r-- | client/src/admin/jsx/layout/UserSwitch.jsx (renamed from client/src/admin/jsx/User.jsx) | 4 | ||||
-rw-r--r-- | client/src/admin/scss/_creator.scss | 81 | ||||
-rw-r--r-- | client/src/admin/scss/_forms.scss | 38 | ||||
-rw-r--r-- | client/src/admin/scss/_globals.scss | 3 | ||||
-rw-r--r-- | client/src/admin/scss/index.scss | 1 | ||||
-rw-r--r-- | client/src/login/jsx/App.jsx | 4 |
16 files changed, 239 insertions, 24 deletions
diff --git a/client/src/admin/data/translations.js b/client/src/admin/data/translations.js index 732e311..b7a8161 100644 --- a/client/src/admin/data/translations.js +++ b/client/src/admin/data/translations.js @@ -21,6 +21,17 @@ export const translations = { "click-to-logout": "Click to logout current user", "user-settings": "User settings", "click-to-change-user-settings": "Click to change user name, password or to completely remove current user", + "main-information": "Main information", + "website-title": "Website title", + "website-title-hover": "Website title should have less than 55 characters, it will be displayed on the browser tab and will help search engines find your page", + "website-description": "Website description", + "website-description-hover": "Website description should have around 150 characters, it will be displayed on search results under website title", + "upload-favicon": "Website's favicon", + "upload-favicon-hover": "Click to add favicon for your website (32x32px)", + "next": "Next", + "creator-next-hover": "Click to navigate to next screen", + "cancel": "Cancel", + "creator-cancel-hover": "Click to exit creator without saving changes", }, "de": { "main-title": "Website Manager", diff --git a/client/src/admin/hocs/View.jsx b/client/src/admin/hocs/View.jsx new file mode 100644 index 0000000..3c654c2 --- /dev/null +++ b/client/src/admin/hocs/View.jsx @@ -0,0 +1,9 @@ +import React, { useContext } from 'react'; +import Context from '../context'; + +const View = (view) => { + const { setView } = useContext(Context); + return () => setView(view); +}; + +export default View; diff --git a/client/src/admin/hocs/index.js b/client/src/admin/hocs/index.js index df8c0c7..4abd050 100644 --- a/client/src/admin/hocs/index.js +++ b/client/src/admin/hocs/index.js @@ -1,4 +1,5 @@ import WithHover from './WithHover.jsx'; import WithTranslation from './WithTranslation.jsx'; +import View from './View.jsx'; -export { WithHover, WithTranslation as t }; +export { WithHover, WithTranslation as t, View as goTo }; diff --git a/client/src/admin/jsx/App.jsx b/client/src/admin/jsx/App.jsx index 1bb224f..cb82e90 100644 --- a/client/src/admin/jsx/App.jsx +++ b/client/src/admin/jsx/App.jsx @@ -3,9 +3,10 @@ import ReactDOM from 'react-dom'; import "../scss/index.scss"; -import TopBar from './TopBar.jsx'; -import Info from './Info.jsx'; +import TopBar from './layout/TopBar.jsx'; +import Info from './layout/Info.jsx'; import MainScreen from './MainScreen.jsx'; +import Creator from './creator/Creator.jsx'; import Context from '../context'; import { defaultLanguage } from '../data/translations'; import { getUser, setDbLang } from '../api'; @@ -33,11 +34,12 @@ const App = () => { }, [user]); return ( - <Context.Provider value={{ lang, setHover, setInfo }}> + <Context.Provider value={{ lang, setHover, setInfo, setView }}> <div className="main"> <TopBar lang={lang} setLang={setLangWithDb} user={user} setUser={setUser} /> <div className="main__content"> { view === 'main' && <MainScreen projects={projects} /> } + { view === 'creator' && <Creator projects={projects} /> } </div> <Info info={info} hover={hover} /> </div> diff --git a/client/src/admin/jsx/MainScreen.jsx b/client/src/admin/jsx/MainScreen.jsx index 3d65384..ea2def5 100644 --- a/client/src/admin/jsx/MainScreen.jsx +++ b/client/src/admin/jsx/MainScreen.jsx @@ -1,5 +1,5 @@ import React, { Fragment } from 'react'; -import { WithHover, t } from '../hocs'; +import { WithHover, t, goTo } from '../hocs'; const MainScreen = ({ projects }) => ( <div className="main-screen"> @@ -16,7 +16,9 @@ const MainScreen = ({ projects }) => ( </WithHover> )} <WithHover message="create-new-project-hover"> - <p className="main-screen__item">{ t('create-new-project') }</p> + <p className="main-screen__item" onClick={ goTo('creator') }> + { t('create-new-project') } + </p> </WithHover> </div> </div> diff --git a/client/src/admin/jsx/creator/Creator.jsx b/client/src/admin/jsx/creator/Creator.jsx new file mode 100644 index 0000000..896235e --- /dev/null +++ b/client/src/admin/jsx/creator/Creator.jsx @@ -0,0 +1,18 @@ +import React, { useState } from 'react'; +import Step1 from './Step1'; +import { t, goTo } from '../../hocs'; + +const Creator = ({projects}) => { + const [step, setStep] = useState('step1'); + + switch(step) { + case 'step1': + return <Step1 setStep={setStep} />; + case 'step2': + return null; + default: + return null; + } +}; + +export default Creator; diff --git a/client/src/admin/jsx/creator/Step1.jsx b/client/src/admin/jsx/creator/Step1.jsx new file mode 100644 index 0000000..647661e --- /dev/null +++ b/client/src/admin/jsx/creator/Step1.jsx @@ -0,0 +1,67 @@ +import React, { useState } from 'react'; +import { WithHover, t, goTo } from '../../hocs'; + +const Step1 = () => { + const [websiteTitle, setWebsiteTitle] = useState(''); + const [websiteDescription, setWebsiteDescription] = useState(''); + const isNextActive = websiteTitle.length > 2 && websiteDescription.length > 2 ? 'active' : ''; + + return ( + <div className="creator"> + <div className="creator__header">{ t('main-information') }</div> + <div className="creator__input-line"> + <WithHover message="website-title-hover"> + <div className="text-input"> + <input + onChange={e => setWebsiteTitle(e.target.value)} + placeholder={t('website-title')} + id="website-title" + name="website-title" + type="text" + className="text-input-field" + value={websiteTitle} + /> + <label htmlFor="website-title" className="text-input-label">{`${t('website-title')} (${websiteTitle.length})`}</label> + </div> + </WithHover> + </div> + <div className="creator__input-line"> + <WithHover message="website-description-hover"> + <div className="text-area"> + <textarea + onChange={e => setWebsiteDescription(e.target.value)} + id="website-description" + name="website-description" + placeholder={t('website-description')}> + </textarea> + <label htmlFor="website-description" className="text-area-label">{`${t('website-description')} (${websiteDescription.length})`}</label> + </div> + </WithHover> + </div> + <div className="creator__input-line"> + <div className='creator__favicon'> + <WithHover message="upload-favicon-hover"> + <div className="creator__favicon-ico">+</div> + </WithHover> + <span className="creator__favicon-text"> + {t('upload-favicon')} + </span> + </div> + </div> + <div className="creator__btns"> + <WithHover message="creator-cancel-hover"> + <div onClick={goTo('main')} className="creator__btns-cancel"> + {t('cancel')} + </div> + </WithHover> + <WithHover message="creator-next-hover"> + <div className={`creator__btns-next ${isNextActive}`}> + {t('next')} + </div> + </WithHover> + </div> + </div> + ) +}; + +export default Step1; diff --git a/client/src/admin/jsx/Info.jsx b/client/src/admin/jsx/layout/Info.jsx index 75294e1..0ea8686 100644 --- a/client/src/admin/jsx/Info.jsx +++ b/client/src/admin/jsx/layout/Info.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { t } from '../hocs'; +import { t } from '../../hocs'; const Info = ({ info, hover }) => ( <p className="info"> diff --git a/client/src/admin/jsx/LangSwitch.jsx b/client/src/admin/jsx/layout/LangSwitch.jsx index 2494bef..684d432 100644 --- a/client/src/admin/jsx/LangSwitch.jsx +++ b/client/src/admin/jsx/layout/LangSwitch.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import { WithHover } from '../hocs'; -import { languages } from '../data/translations.js' +import { WithHover } from '../../hocs'; +import { languages } from '../../data/translations.js' const LangSwitch = ({ lang, setLang, opened, setOpened}) => { const handleSetLang = (key) => { diff --git a/client/src/admin/jsx/TopBar.jsx b/client/src/admin/jsx/layout/TopBar.jsx index e9be676..b6564f7 100644 --- a/client/src/admin/jsx/TopBar.jsx +++ b/client/src/admin/jsx/layout/TopBar.jsx @@ -1,6 +1,6 @@ import React, {useState} from 'react'; import LangSwitch from './LangSwitch.jsx'; -import User from './User.jsx'; +import UserSwitch from './UserSwitch.jsx'; const TopBar = ({ user, setUser, lang, setLang }) => { const [opened, setOpened] = useState(false); @@ -20,7 +20,7 @@ const TopBar = ({ user, setUser, lang, setLang }) => { setOpened={setOpened} /> { user && ( - <User + <UserSwitch user={user} setUser={setUser} opened={opened} diff --git a/client/src/admin/jsx/User.jsx b/client/src/admin/jsx/layout/UserSwitch.jsx index eb596bf..403783c 100644 --- a/client/src/admin/jsx/User.jsx +++ b/client/src/admin/jsx/layout/UserSwitch.jsx @@ -1,6 +1,6 @@ import React from 'react'; -import { WithHover, t } from '../hocs'; -import { logout } from '../api'; +import { WithHover, t } from '../../hocs'; +import { logout } from '../../api'; const User = ({ user, setUser, opened, setOpened }) => { const handleLogout = () => { diff --git a/client/src/admin/scss/_creator.scss b/client/src/admin/scss/_creator.scss new file mode 100644 index 0000000..0bf267e --- /dev/null +++ b/client/src/admin/scss/_creator.scss @@ -0,0 +1,81 @@ +.creator { + text-align: center; + width: 100%; + + &__header { + color: $text; + text-align: center; + font-size: 1.5em; + padding-bottom: 1.5em; + } + + &__input-line { + max-width: 600px; + margin: 0 auto; + align-items: center; + padding: 1em 0; + } + + &__favicon { + display: flex; + + &-ico { + height: 32px; + width: 32px; + line-height: 32px; + background: $text-inactive; + color: $background-menu; + border: 1px solid $background-menu; + transition: .3s background; + cursor: pointer; + + &:hover { + background: $text-selected; + } + } + + &-text { + color: $text-inactive; + font-size: 1em; + line-height: 32px; + padding-left: 1em; + } + } + + &__btns { + padding-top: 3em; + font-size: 1.5em; + margin: 0 auto; + text-align: center; + display: flex; + justify-content: center; + + &-next { + color: $text-inactive; + display: inline-block; + padding: 1em; + + &.active { + color: $text; + transition: .3s color; + cursor: pointer; + + &:hover { + color: $text-selected; + } + } + } + + &-cancel { + display: inline-block; + color: $text; + transition: .3s color; + cursor: pointer; + padding: 1em; + + &:hover { + color: $text-selected; + } + } + } +} diff --git a/client/src/admin/scss/_forms.scss b/client/src/admin/scss/_forms.scss index e74c343..3e98014 100644 --- a/client/src/admin/scss/_forms.scss +++ b/client/src/admin/scss/_forms.scss @@ -1,6 +1,7 @@ // Text Input -.text-input { +.text-input, +.text-area { text-align: left; margin-bottom: 1.5em; transition: all .3s; @@ -11,12 +12,12 @@ } } -.text-input-label { +.text-input-label, +.text-area-label { font-size: 1em; width: 100%; color: #aaa; display:block; - transform:translateY(-1.75em); transform-origin: 0 0; transition: all .3s; z-index: -1; @@ -24,17 +25,28 @@ pointer-events: none; } -.text-input-field { - font-size: 1.25rem; +.text-input-label { + transform:translateY(-1.75em); +} + +.text-area-label { + transform:translateY(-2em); +} + +.text-input-field, +.text-area textarea { + font-size: 1.25em; box-shadow: none; background: $background; - color: $text; + color: $text-selected; border-radius: 0; border-color: #ccc; border-style: none none solid none; width: 100%; transition: all .5s; padding: 5px; + -webkit-user-select: auto; + user-select: auto; &::placeholder { color: transparent; @@ -46,8 +58,22 @@ border-color: $text-selected; } +} + +.text-input-field { &:focus + .text-input-label, &:not(:placeholder-shown) + .text-input-label { transform: translateY(-3em) scale(0.8); } } + +.text-area textarea { + height: 6em; + resize: none; + overflow:hidden; + + &:focus + .text-area-label, + &:not(:placeholder-shown) + .text-area-label { + transform: translateY(-6.5em) scale(0.8); + } +} diff --git a/client/src/admin/scss/_globals.scss b/client/src/admin/scss/_globals.scss index d15363f..1039f4b 100644 --- a/client/src/admin/scss/_globals.scss +++ b/client/src/admin/scss/_globals.scss @@ -4,9 +4,6 @@ html { * { -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: -moz-none; - -o-user-select: none; user-select: none; } diff --git a/client/src/admin/scss/index.scss b/client/src/admin/scss/index.scss index ab61dd9..8290be8 100644 --- a/client/src/admin/scss/index.scss +++ b/client/src/admin/scss/index.scss @@ -6,3 +6,4 @@ @import 'info'; @import 'topBar'; @import 'mainScreen'; +@import 'creator'; diff --git a/client/src/login/jsx/App.jsx b/client/src/login/jsx/App.jsx index 58256a8..e5921fc 100644 --- a/client/src/login/jsx/App.jsx +++ b/client/src/login/jsx/App.jsx @@ -3,8 +3,8 @@ import ReactDOM from 'react-dom'; import "../scss/index.scss"; -import TopBar from '../../admin/jsx/TopBar.jsx'; -import Info from '../../admin/jsx/Info.jsx'; +import TopBar from '../../admin/jsx/layout/TopBar.jsx'; +import Info from '../../admin/jsx/layout/Info.jsx'; import LoginPanel from './LoginPanel.jsx'; import Context from '../../admin/context'; import { defaultLanguage } from '../../admin/data/translations'; |