Update schema field unit layout

EUDAT-B2SHARE · Jan 8, 2021 · 73edbec · 73edbec
1 parent c5f8337
commit 73edbec
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git a/webui/app/css/app.css b/webui/app/css/app.css
@@ -807,10 +807,22 @@ a.navbar-brand {
   color: #333;
 }
 
+.schema-field {
+  font-weight: bold;
+}
+
+.schema-field span:nth-child(2) {
+  color: grey;
+}
+
 .required.property {
   color: #F45D00;
 }
 
+.required.property span:nth-child(2) {
+  color: #FF9D63;
+}
+
 /*****************************************************************************/
 /* help and about pages */
 

diff --git a/webui/src/components/editrecord.jsx b/webui/src/components/editrecord.jsx
@@ -386,13 +386,13 @@ const EditRecord = React.createClass({
                         <label htmlFor={id} className="col-sm-3 control-label" style={{fontWeight:'bold'}}>
                             <span style={{float:'right'}}>
                                 <span style={{color:isError?'red':'black'}}>
-                                    {title}&nbsp;
+                                    {title}
                                 </span>
                                 <span>
-                                    {schema.get('unit') ? <span style={{color: 'grey'}}> {'(' + schema.get('unit') + ')'} </span> : false }
+                                    {schema.get('unit') ? <span style={{color: 'grey'}}>&nbsp;{'(' + schema.get('unit') + ')'}</span> : false }
                                 </span>
                                 <span>
-                                    {schema.get('isRequired') ? "*" : ""}&nbsp;
+                                    &nbsp;{schema.get('isRequired') ? "*" : ""}
                                 </span>
                             </span>
                         </label> }

diff --git a/webui/src/components/schema.jsx b/webui/src/components/schema.jsx
@@ -37,7 +37,7 @@ export const Schema = React.createClass({
     mixins: [React.addons.PureRenderMixin],
 
     renderSchema([id, schema]) {
-        const requiredClass = schema.get('isRequired') ? "required property":"";
+        const requiredClass = schema.get('isRequired') ? "required property" : "";
 
         const type = schema.get('type');
         const title = schema.get('title');
@@ -70,8 +70,9 @@ export const Schema = React.createClass({
         return (
             <li key={id} className="row field-general">
                 <div className="col-sm-6">
-                    <p className={requiredClass}>
-                        <span className="bold">{title} {schema.get('unit') ? ' [' + schema.get('unit') + ']' : false }</span>
+                    <p className={"schema-field " + requiredClass}>
+                        <span>{title}</span>
+                        <span>{schema.get('unit') ? ' (' + schema.get('unit') + ')' : false }</span>
                         <span className="mono-style">
                             {title ? " :: " : ""}
                             {id}