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++) {
@@ -110,14 +104,16 @@ function CSSGrid(props) {
     style.alignSelf = 'stretch';
     return (
       <Card title={value.Title} id={cardID} key={cardID} style={style}
-        cardSize={pSize} collapsing={value.collapsing}>
+        cardSize={pSize} collapsing={value.collapsing}
+        maxHeight={value?.MaxHeight}
+      >
         {value.Content}
       </Card>
     );
   });
 
   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/Card.js

@@ -68,6 +68,7 @@ class Card extends Component {
           style={{overflow: 'auto'}}
           panelSize={this.props.cardSize}
           collapsing={this.props.collapsing}
+          maxHeight={this.props?.maxHeight}
         >
           <div
             onClick={this.handleClick}
@@ -94,6 +95,7 @@ Card.propTypes = {
   cardSize: PropTypes.string,
   children: PropTypes.node,
   collapsing: PropTypes.bool,
+  maxHeight: PropTypes.string,
 };
 
 Card.defaultProps = {

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,

modules/candidate_profile/jsx/CandidateInfo.js

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

modules/candidate_profile/php/candidatewidget.class.inc

@@ -24,18 +24,20 @@ class CandidateWidget implements \LORIS\GUI\Widget
     private ?int $_width;
     private ?int $_height;
     private ?int $_order;
+    private ?string $_maxheight;
 
     /**
      * Construct a dashboard widget with the specified properties.
      *
-     * @param string $title         The title of the card to display.
-     * @param string $jsurl         The URL containing the React component.
-     * @param string $componentname The React component name for this widget.
-     * @param array  $props         Additional React props to pass to the React
-     *                              component.
-     * @param ?int   $width         The width in the CSS grid.
-     * @param ?int   $height        The height in the CSS grid.
-     * @param ?int   $order         The order in the CSS grid.
+     * @param string  $title         The title of the card to display.
+     * @param string  $jsurl         The URL containing the React component.
+     * @param string  $componentname The React component name for this widget.
+     * @param array   $props         Additional React props to pass to the React
+     *                               component.
+     * @param ?int    $width         The width in the CSS grid.
+     * @param ?int    $height        The height in the CSS grid.
+     * @param ?int    $order         The order in the CSS grid.
+     * @param ?string $maxheight     The max-height of the panel
      */
     public function __construct(
         string $title,
@@ -44,7 +46,8 @@ class CandidateWidget implements \LORIS\GUI\Widget
         array $props,
         ?int $width = null,
         ?int $height = null,
-        ?int $order = null
+        ?int $order = null,
+        ?string $maxheight = null
     ) {
         $this->_title         = $title;
         $this->_url           = $jsurl;
@@ -53,6 +56,7 @@ class CandidateWidget implements \LORIS\GUI\Widget
         $this->_componentname = $componentname;
         $this->_props         = $props;
         $this->_order         = $order;
+        $this->_maxheight     = $maxheight;
     }
 
     /**
@@ -138,4 +142,14 @@ class CandidateWidget implements \LORIS\GUI\Widget
     {
         return $this->_props;
     }
+
+    /**
+     * Return the Card max-height.
+     *
+     * @return ?string
+     */
+    public function getMaxHeight() : ?string
+    {
+        return $this->_maxheight;
+    }
 }

modules/candidate_profile/templates/form_candidate_profile.tpl

@@ -68,6 +68,7 @@ window.addEventListener('load', () => {
 		    {if $widget->getWidth()},Width: {$widget->getWidth()}{/if}
 		    {if $widget->getOrder()},Order: {$widget->getOrder()}{/if}
 		    {if $widget->getHeight()},Height: {$widget->getHeight()}{/if}
+		    {if $widget->getMaxHeight()},MaxHeight: "{$widget->getMaxHeight()}"{/if}
 		});
         } catch(err) {
              console.error(err);

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)}>

modules/media/php/module.class.inc

@@ -85,6 +85,8 @@ class Module extends \Module
                     [ 'Files' => iterator_to_array($media)],
                     1,
                     1,
+                    null,
+                    "85vh"
                 )
             ];
         }

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(),
   },