summaryrefslogtreecommitdiffstats
path: root/client/src
diff options
context:
space:
mode:
authorGravatar Piotr Russ <mail@pruss.it> 2020-12-06 23:49:13 +0100
committerGravatar Piotr Russ <mail@pruss.it> 2020-12-06 23:49:13 +0100
commit4d642e312ed728ad51c454d1e2a0b7bb350fc174 (patch)
treee39b26a31b14fe34dced83669bf2844fa7c9752e /client/src
parent88c2fa63eb8c3ade93914f77d427219b3233ca02 (diff)
downloadwebsite_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.js11
-rw-r--r--client/src/admin/hocs/View.jsx9
-rw-r--r--client/src/admin/hocs/index.js3
-rw-r--r--client/src/admin/jsx/App.jsx8
-rw-r--r--client/src/admin/jsx/MainScreen.jsx6
-rw-r--r--client/src/admin/jsx/creator/Creator.jsx18
-rw-r--r--client/src/admin/jsx/creator/Step1.jsx67
-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.scss81
-rw-r--r--client/src/admin/scss/_forms.scss38
-rw-r--r--client/src/admin/scss/_globals.scss3
-rw-r--r--client/src/admin/scss/index.scss1
-rw-r--r--client/src/login/jsx/App.jsx4
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';