From 54fa0bff92998f4888f6ce7e816a5b39b5fb074f Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Wed, 22 Sep 2021 01:03:50 +0300
Subject: [PATCH] styling
---
editors/demo/src/Editors.js | 42 +++++++++++++++++++++++++++++------
editors/demo/src/HHMI/HHMI.js | 6 +++--
2 files changed, 39 insertions(+), 9 deletions(-)
diff --git a/editors/demo/src/Editors.js b/editors/demo/src/Editors.js
index 977ed5cc4..a2c811d49 100644
--- a/editors/demo/src/Editors.js
+++ b/editors/demo/src/Editors.js
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
import { createGlobalStyle } from 'styled-components';
import Editoria from './Editoria/Editoria';
@@ -18,9 +18,15 @@ const GlobalStyle = createGlobalStyle`
}
`;
+const activeStyles = css`
+ background: #fff;
+ color: #535e76;
+ border: 1px solid#535E76;
+`;
+
const ProjectContainer = styled.div`
display: flex;
- height: calc(100% - 55px);
+ height: calc(100% - 65px);
`;
const ChooseProject = styled.div`
@@ -28,7 +34,7 @@ const ChooseProject = styled.div`
display: flex;
flex-direction: row;
align-items: center;
- height: 50px;
+ height: 60px;
span {
margin-right: 20px;
@@ -37,11 +43,20 @@ const ChooseProject = styled.div`
const Projects = styled.div`
margin-left: 10px;
+
+ span {
+ font-size: 16px;
+ }
`;
const ProjectButton = styled.button`
cursor: pointer;
margin-right: 20px;
+ border: none;
+ background: #535e76;
+ padding: 5px 15px 5px 15px;
+ color: #fff;
+ ${props => props.isActive && activeStyles}
`;
const Editors = () => {
@@ -54,7 +69,7 @@ const Editors = () => {
case 'ncbi':
break;
default:
- return <HHMI />;
+ return <Editoria />;
}
};
@@ -64,11 +79,24 @@ const Editors = () => {
<ChooseProject>
<Projects>
<span>Select Project:</span>
- <ProjectButton onClick={() => setProject('editoria')}>
+ <ProjectButton
+ isActive={project === 'editoria'}
+ onClick={() => setProject('editoria')}
+ >
Editoria
</ProjectButton>
- <ProjectButton onClick={() => setProject('hhmi')}>HHMI</ProjectButton>
- {/* <ProjectButton onClick={() => setProject('ncbi')}>NCBI</ProjectButton> */}
+ <ProjectButton
+ isActive={project === 'hhmi'}
+ onClick={() => setProject('hhmi')}
+ >
+ Widget Example
+ </ProjectButton>
+ <ProjectButton
+ isActive={project === 'ncbi'}
+ onClick={() => setProject('ncbi')}
+ >
+ NCBI
+ </ProjectButton>
</Projects>
</ChooseProject>
<ProjectContainer>{displayProject()}</ProjectContainer>
diff --git a/editors/demo/src/HHMI/HHMI.js b/editors/demo/src/HHMI/HHMI.js
index 3de249ab0..640ea0ef7 100644
--- a/editors/demo/src/HHMI/HHMI.js
+++ b/editors/demo/src/HHMI/HHMI.js
@@ -15,6 +15,8 @@ const renderImage = file => {
});
};
+const t = `<p class="paragraph">Based on the equation below</p><math-display class="math-node">x + y = 5</math-display><p class="paragraph">Which ones are correct?</p><p class="paragraph"></p><div id="" class="mutiple-choice"><div class="mutiple-choice-option" id="d7b65415-ff82-446f-afa4-accaa3837f4a" correct="false" feedback=""><p class="paragraph">answer 1</p><p class="paragraph"><math-inline class="math-node">x+y=1</math-inline></p></div><div class="mutiple-choice-option" id="e7d6bb2f-7cd7-44f1-92a0-281e72157538" correct="true" feedback=""><p class="paragraph">answer 2</p></div><div class="mutiple-choice-option" id="d6fc749f-afae-4203-9562-d68c380a86e5" correct="false" feedback=""><p class="paragraph">answer 3</p></div></div>`;
+
const Hhmi = () => {
return (
<>
@@ -22,10 +24,10 @@ const Hhmi = () => {
config={config}
autoFocus
fileUpload={file => renderImage(file)}
- value=""
+ value={t}
// readonly
layout={HhmiLayout}
- // onChange={source => console.log(source)}
+ onChange={source => console.log(source)}
/>
</>
);
--
GitLab