adjustments to elements in the candidate profile item page

jsx/CSSGrid.js → jsx/CSSGrid/index.js

@@ -1,6 +1,7 @@
 import Card from 'Card';
 import React, {useState, useEffect, useRef} from 'react';
 import PropTypes from 'prop-types';
+import './styles.css';
 
 /**
  * Create a three column grid of cards using a CSS grid.
@@ -51,13 +52,6 @@ function CSSGrid(props) {
     );
     setPanelHeights(heights);
   });
-  const grid = {
-    display: 'grid',
-    gridTemplateColumns: '33% 33% 33%',
-    gridAutoFlow: 'row dense',
-    gridRowGap: '1em',
-    rowGap: '1em',
-  };
 
   let orderedCards = [];
   for (let i = 0; i < props.Cards.length; i++) {
@@ -117,7 +111,7 @@ function CSSGrid(props) {
   });
 
   return (
-    <div ref={cardsRef} style={grid}>{cards}</div>
+    <div ref={cardsRef} className='CSSGrid'>{cards}</div>
   );
 }
 CSSGrid.propTypes = {

jsx/CSSGrid/styles.css

@@ -0,0 +1,14 @@
+.CSSGrid {
+    display: grid; 
+    grid-template-columns: 33% 33% 33%;
+    grid-auto-flow: row dense; 
+    gap: 1rem;
+}
+
+@media (max-width: 576px) {
+    .CSSGrid {
+        display: flex;
+        flex-direction: column;
+        gap: 3rem;
+    }
+}

jsx/Panel.js

@@ -122,7 +122,7 @@ const Panel = (props) => {
    */
   return (
     <div className={`panel ${props.class}`}
-      style={{height: props.panelSize}}>
+      style={{height: props.panelSize, maxHeight: props.maxHeight}}>
       {panelHeading}
       <div id={props.id}
         className={props.collapsed ?
@@ -154,6 +154,7 @@ Panel.propTypes = {
   panelSize: PropTypes.string,
   style: PropTypes.object,
   children: PropTypes.node,
+  maxHeight: PropTypes.string,
 };
 Panel.defaultProps = {
   initCollapsed: false,
@@ -162,6 +163,7 @@ Panel.defaultProps = {
   height: '100%',
   class: 'panel-primary',
   collapsing: true,
+  maxHeight: '85vh',
 };
 
 export default Panel;

modules/candidate_profile/jsx/CandidateInfo.js

@@ -166,9 +166,11 @@ class CandidateInfo extends Component {
     const renderTerm = (label, value, info) => {
       const cardStyle = {
         width: info.width || '6em',
-        padding: '1em',
-        marginLeft: '1ex',
-        marginRight: '1ex',
+        padding: '1rem 0',
+        marginLeft: '0.5rem',
+        marginRight: '0.5rem',
+        wordBreak: 'break-word',
+        flexGrow: 1,
       };
       let valueStyle = {};
       if (info.valueWhitespace) {

modules/instruments/jsx/VisitInstrumentList.js

@@ -156,15 +156,16 @@ class VisitInstrumentList extends Component {
     };
     flexcontainer.justifyContent = 'flex-start';
 
-    let center = {
+    let titleText = {
       display: 'flex',
-      width: '12%',
-      height: '100%',
+      width: '100%',
       alignItems: 'center',
-      justifyContent: 'center',
+      textAlign: 'left',
+      wordBreak: 'break-word',
+      padding: '1rem',
     };
 
-    const termstyle = {paddingLeft: '2em', paddingRight: '2em'};
+    const termstyle = {padding: '1rem 1.5em', flexGrow: 1};
 
     let instruments = null;
     if (!this.state.instruments) {
@@ -281,37 +282,38 @@ class VisitInstrumentList extends Component {
         onMouseLeave={this.toggleHover}
       >
         <div style={flexcontainer}>
-          <div style={{background: bg, width: '1%', height: '100%'}}>
-          </div>
-          <div style={center}>
-            <h4 style={{width: '100%', padding: 0, margin: 0}}>
-              <a href={this.props.BaseURL
-                            + '/instrument_list/?candID='
-                            + this.props.Candidate.Meta.CandID
-                            + '&sessionID='
-                            + this.props.VisitMap[this.props.Visit.Meta.Visit]}>
-                {this.props.Visit.Meta.Visit}
-              </a>
-            </h4>
-          </div>
-          <div>
-            <dl style={defliststyle}>
-              <div style={termstyle}>
-                <dt>{this.props.t('Cohort', {ns: 'loris', count: 1})}</dt>
-                <dd>{this.props.Visit.Meta.Battery}</dd>
-              </div>
-              <div style={termstyle}>
-                <dt>{this.props.t('Site', {ns: 'loris'})}</dt>
-                <dd>{this.props.Visit.Meta.Site}</dd>
-              </div>
-              {vdate}
-              {vage}
-              <div style={termstyle}>
-                <dt>{this.props.t('Status', {ns: 'loris'})}</dt>
-                <dd>{vstatus}</dd>
-              </div>
-            </dl>
-            {instruments}
+          <div style={{background: bg, width: '1%', height: '100%'}}></div>
+          <div style={{width: '100%'}}>
+            <div style={titleText}>
+              <h4 style={{width: '100%', padding: 0, margin: 0}}>
+                <a href={this.props.BaseURL
+                        + '/instrument_list/?candID='
+                        + this.props.Candidate.Meta.CandID
+                        + '&sessionID='
+                        + this.props.VisitMap[this.props.Visit.Meta.Visit]}>
+                  {this.props.Visit.Meta.Visit}
+                </a>
+              </h4>
+            </div>
+            <div>
+              <dl style={defliststyle}>
+                <div style={termstyle}>
+                  <dt>{this.props.t('Cohort', {ns: 'loris', count: 1})}</dt>
+                  <dd>{this.props.Visit.Meta.Battery}</dd>
+                </div>
+                <div style={termstyle}>
+                  <dt>{this.props.t('Site', {ns: 'loris'})}</dt>
+                  <dd>{this.props.Visit.Meta.Site}</dd>
+                </div>
+                {vdate}
+                {vage}
+                <div style={termstyle}>
+                  <dt>{this.props.t('Status', {ns: 'loris'})}</dt>
+                  <dd>{vstatus}</dd>
+                </div>
+              </dl>
+              {instruments}
+            </div>
           </div>
         </div>
       </div>

modules/media/jsx/CandidateMediaWidget.js

@@ -25,7 +25,7 @@ function CandidateMediaWidget(props) {
     const file = props.Files[i];
     const dateStr = dateFormatter.format(new Date(file.LastModified));
     files.push(
-      <a className="list-group-item" key={i}
+      <a className="list-group-item" style={{wordBreak: 'break-word'}} key={i}
         href={props.BaseURL
                     + '/media/files/'
                     + encodeURIComponent(file.Filename)}>

webpack.config.ts

@@ -351,7 +351,7 @@ configs.push({
     MultiSelectDropdown: './jsx/MultiSelectDropdown.js',
     Breadcrumbs: './jsx/Breadcrumbs.js',
     PolicyButton: './jsx/PolicyButton.js',
-    CSSGrid: './jsx/CSSGrid.js',
+    CSSGrid: './jsx/CSSGrid',
     Help: './jsx/Help.js',
     ...getModulesEntries(),
   },