summaryrefslogtreecommitdiffstats
path: root/client/src
diff options
context:
space:
mode:
Diffstat (limited to 'client/src')
-rw-r--r--client/src/admin/data/translations.js2
-rw-r--r--client/src/admin/helpers/index.js3
-rw-r--r--client/src/admin/helpers/onKeyPress.js7
-rw-r--r--client/src/admin/jsx/MainScreen.jsx22
-rw-r--r--client/src/admin/jsx/creator/Creator.jsx6
-rw-r--r--client/src/admin/jsx/creator/Step1.jsx51
-rw-r--r--client/src/admin/jsx/creator/Step2.jsx32
-rw-r--r--client/src/admin/scss/_creator.scss20
-rw-r--r--client/src/admin/scss/_mainScreen.scss5
9 files changed, 132 insertions, 16 deletions
diff --git a/client/src/admin/data/translations.js b/client/src/admin/data/translations.js
index b7a8161..e2dd628 100644
--- a/client/src/admin/data/translations.js
+++ b/client/src/admin/data/translations.js
@@ -28,10 +28,12 @@ export const translations = {
"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)",
+ "back": "Back",
"next": "Next",
"creator-next-hover": "Click to navigate to next screen",
"cancel": "Cancel",
"creator-cancel-hover": "Click to exit creator without saving changes",
+ "website-sections": "Website Sections",
},
"de": {
"main-title": "Website Manager",
diff --git a/client/src/admin/helpers/index.js b/client/src/admin/helpers/index.js
new file mode 100644
index 0000000..9b6d031
--- /dev/null
+++ b/client/src/admin/helpers/index.js
@@ -0,0 +1,3 @@
+import onKeyPress from './onKeyPress';
+
+export { onKeyPress };
diff --git a/client/src/admin/helpers/onKeyPress.js b/client/src/admin/helpers/onKeyPress.js
new file mode 100644
index 0000000..142a9cf
--- /dev/null
+++ b/client/src/admin/helpers/onKeyPress.js
@@ -0,0 +1,7 @@
+const onKeyPress = (e) => {
+ if (e.charCode === 13 || e.charCode === 32) {
+ e.target.click();
+ }
+}
+
+export default onKeyPress;
diff --git a/client/src/admin/jsx/MainScreen.jsx b/client/src/admin/jsx/MainScreen.jsx
index ea2def5..8808dc5 100644
--- a/client/src/admin/jsx/MainScreen.jsx
+++ b/client/src/admin/jsx/MainScreen.jsx
@@ -1,5 +1,6 @@
import React, { Fragment } from 'react';
import { WithHover, t, goTo } from '../hocs';
+import { onKeyPress } from '../helpers'
const MainScreen = ({ projects }) => (
<div className="main-screen">
@@ -7,16 +8,31 @@ const MainScreen = ({ projects }) => (
<div className="main-screen__list">
{ !projects.length && (
<WithHover message="edit-current-project-hover">
- <p className="main-screen__item">{ t('edit-current-project') }</p>
+ <p
+ className="main-screen__item"
+ tabIndex="0"
+ >
+ { t('edit-current-project') }
+ </p>
</WithHover>
)}
{ !projects.length && (
<WithHover message="show-saved-projects-hover">
- <p className="main-screen__item">{ t('show-saved-projects') }</p>
+ <p
+ className="main-screen__item"
+ tabIndex="0"
+ >
+ { t('show-saved-projects') }
+ </p>
</WithHover>
)}
<WithHover message="create-new-project-hover">
- <p className="main-screen__item" onClick={ goTo('creator') }>
+ <p
+ className="main-screen__item"
+ onClick={ goTo('creator') }
+ onKeyPress={onKeyPress}
+ tabIndex="0"
+ >
{ t('create-new-project') }
</p>
</WithHover>
diff --git a/client/src/admin/jsx/creator/Creator.jsx b/client/src/admin/jsx/creator/Creator.jsx
index 896235e..fa552b3 100644
--- a/client/src/admin/jsx/creator/Creator.jsx
+++ b/client/src/admin/jsx/creator/Creator.jsx
@@ -1,15 +1,17 @@
import React, { useState } from 'react';
import Step1 from './Step1';
+import Step2 from './Step2';
import { t, goTo } from '../../hocs';
const Creator = ({projects}) => {
const [step, setStep] = useState('step1');
+ const [data, setData] = useState({});
switch(step) {
case 'step1':
- return <Step1 setStep={setStep} />;
+ return <Step1 setStep={setStep} data={data} setData={setData} />;
case 'step2':
- return null;
+ return <Step2 setStep={setStep} data={data} setData={setData} />;
default:
return null;
}
diff --git a/client/src/admin/jsx/creator/Step1.jsx b/client/src/admin/jsx/creator/Step1.jsx
index 647661e..3e2e05d 100644
--- a/client/src/admin/jsx/creator/Step1.jsx
+++ b/client/src/admin/jsx/creator/Step1.jsx
@@ -1,11 +1,23 @@
import React, { useState } from 'react';
import { WithHover, t, goTo } from '../../hocs';
+import { onKeyPress } from '../../helpers'
-const Step1 = () => {
- const [websiteTitle, setWebsiteTitle] = useState('');
- const [websiteDescription, setWebsiteDescription] = useState('');
+const Step1 = ({ setStep, data, setData }) => {
+ const [websiteTitle, setWebsiteTitle] = useState(data.websiteTitle || '');
+ const [websiteDescription, setWebsiteDescription] = useState(data.websiteDescription || '');
const isNextActive = websiteTitle.length > 2 && websiteDescription.length > 2 ? 'active' : '';
+ const uploadFavicon = () => (
+ console.log('this will upload favicon')
+ )
+
+ const handleNext = () => {
+ if (isNextActive) {
+ setData({ ...data, websiteTitle, websiteDescription });
+ setStep('step2');
+ }
+ }
+
return (
<div className="creator">
<div className="creator__header">{ t('main-information') }</div>
@@ -21,7 +33,9 @@ const Step1 = () => {
className="text-input-field"
value={websiteTitle}
/>
- <label htmlFor="website-title" className="text-input-label">{`${t('website-title')} (${websiteTitle.length})`}</label>
+ <label htmlFor="website-title" className="text-input-label">
+ {`${t('website-title')} (${websiteTitle.length})`}
+ </label>
</div>
</WithHover>
</div>
@@ -32,16 +46,25 @@ const Step1 = () => {
onChange={e => setWebsiteDescription(e.target.value)}
id="website-description"
name="website-description"
- placeholder={t('website-description')}>
+ placeholder={t('website-description')}
+ value={websiteDescription}
+ >
</textarea>
- <label htmlFor="website-description" className="text-area-label">{`${t('website-description')} (${websiteDescription.length})`}</label>
+ <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>
+ <div
+ className="creator__favicon-ico"
+ onKeyPress={onKeyPress}
+ onClick={uploadFavicon}
+ tabIndex="0"
+ >+</div>
</WithHover>
<span className="creator__favicon-text">
{t('upload-favicon')}
@@ -50,12 +73,22 @@ const Step1 = () => {
</div>
<div className="creator__btns">
<WithHover message="creator-cancel-hover">
- <div onClick={goTo('main')} className="creator__btns-cancel">
+ <div
+ onClick={goTo('main')}
+ onKeyPress={onKeyPress}
+ className="creator__btns-cancel"
+ tabIndex="0"
+ >
{t('cancel')}
</div>
</WithHover>
<WithHover message="creator-next-hover">
- <div className={`creator__btns-next ${isNextActive}`}>
+ <div
+ className={`creator__btns-next ${isNextActive}`}
+ onClick={handleNext}
+ onKeyPress={onKeyPress}
+ tabIndex={isNextActive ? "0" : "-1"}
+ >
{t('next')}
</div>
</WithHover>
diff --git a/client/src/admin/jsx/creator/Step2.jsx b/client/src/admin/jsx/creator/Step2.jsx
new file mode 100644
index 0000000..d8ce009
--- /dev/null
+++ b/client/src/admin/jsx/creator/Step2.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { WithHover, t } from '../../hocs';
+
+const Step2 = ({ setStep, data, setData }) => {
+ console.log(data)
+ const isNextActive = () => {}
+ const handleNext = () => {}
+
+ return (
+ <div className="creator">
+ <div className="creator__header">{ t('website-sections') }</div>
+
+ <div className="creator__btns">
+ <WithHover message="creator-cancel-hover">
+ <div onClick={() => setStep('step1')} className="creator__btns-cancel">
+ {t('back')}
+ </div>
+ </WithHover>
+ <WithHover message="creator-next-hover">
+ <div
+ className={`creator__btns-next ${isNextActive}`}
+ onClick={handleNext}
+ >
+ {t('next')}
+ </div>
+ </WithHover>
+ </div>
+ </div>
+ )
+}
+
+export default Step2;
diff --git a/client/src/admin/scss/_creator.scss b/client/src/admin/scss/_creator.scss
index 0bf267e..696208c 100644
--- a/client/src/admin/scss/_creator.scss
+++ b/client/src/admin/scss/_creator.scss
@@ -32,6 +32,10 @@
&:hover {
background: $text-selected;
}
+
+ &:focus {
+ outline: 2px solid $text-selected;
+ }
}
&-text {
@@ -53,7 +57,9 @@
&-next {
color: $text-inactive;
display: inline-block;
- padding: 1em;
+ padding: .5em;
+ margin: 0 1em;
+ outline: none;
&.active {
color: $text;
@@ -63,6 +69,10 @@
&:hover {
color: $text-selected;
}
+
+ &:focus {
+ border-bottom: 2px solid $text-selected;
+ }
}
}
@@ -71,11 +81,17 @@
color: $text;
transition: .3s color;
cursor: pointer;
- padding: 1em;
+ padding: .5em;
+ margin: 0 1em;
+ outline-width: 0;
&:hover {
color: $text-selected;
}
+
+ &:focus {
+ border-bottom: 2px solid $text-selected;
+ }
}
}
}
diff --git a/client/src/admin/scss/_mainScreen.scss b/client/src/admin/scss/_mainScreen.scss
index e9eeeb3..051a037 100644
--- a/client/src/admin/scss/_mainScreen.scss
+++ b/client/src/admin/scss/_mainScreen.scss
@@ -39,10 +39,15 @@
cursor: pointer;
margin-top: 5vh;
margin-bottom: 5vh;
+ outline-width: 0;
&:hover {
color: $text-selected;
}
+
+ &:focus {
+ border-bottom: 2px solid $text-selected;
+ }
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-22 18:33:13 +0000