From 810212f4d867375800f0e075019735a68425d5d4 Mon Sep 17 00:00:00 2001 From: Mario Martins Date: Fri, 31 Oct 2025 14:38:47 +0000 Subject: [PATCH 1/5] adjustments to elements in the candidate profile item page --- .../candidate_profile/jsx/CandidateInfo.js | 8 +- .../instruments/jsx/VisitInstrumentList.js | 74 ++++++++++--------- modules/media/jsx/CandidateMediaWidget.js | 2 +- 3 files changed, 44 insertions(+), 40 deletions(-) diff --git a/modules/candidate_profile/jsx/CandidateInfo.js b/modules/candidate_profile/jsx/CandidateInfo.js index 0cddef876d4..90598024f8c 100644 --- a/modules/candidate_profile/jsx/CandidateInfo.js +++ b/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) { diff --git a/modules/instruments/jsx/VisitInstrumentList.js b/modules/instruments/jsx/VisitInstrumentList.js index 46c32812ffb..31b84f8f6a0 100644 --- a/modules/instruments/jsx/VisitInstrumentList.js +++ b/modules/instruments/jsx/VisitInstrumentList.js @@ -135,15 +135,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) { @@ -252,37 +253,38 @@ class VisitInstrumentList extends Component { onMouseLeave={this.toggleHover} >
-
-
-
-

-

+
+
+

+ From fd85d4ea34da06a713f7778ab943ccb8fe78f7a5 Mon Sep 17 00:00:00 2001 From: Mario Martins Date: Mon, 3 Nov 2025 15:13:02 +0000 Subject: [PATCH 2/5] improved small screen viewing and added panel max height prop with default value --- jsx/{CSSGrid.js => CSSGrid/index.js} | 10 ++-------- jsx/CSSGrid/styles.css | 14 ++++++++++++++ jsx/Panel.js | 5 ++++- webpack.config.ts | 2 +- 4 files changed, 21 insertions(+), 10 deletions(-) rename jsx/{CSSGrid.js => CSSGrid/index.js} (94%) create mode 100644 jsx/CSSGrid/styles.css diff --git a/jsx/CSSGrid.js b/jsx/CSSGrid/index.js similarity index 94% rename from jsx/CSSGrid.js rename to jsx/CSSGrid/index.js index b678901d60a..b56e1ad841c 100644 --- a/jsx/CSSGrid.js +++ b/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 ( -
{cards}
+
{cards}
); } CSSGrid.propTypes = { diff --git a/jsx/CSSGrid/styles.css b/jsx/CSSGrid/styles.css new file mode 100644 index 00000000000..9d43f04267b --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/jsx/Panel.js b/jsx/Panel.js index 0fca9987bba..f8efdad753b 100644 --- a/jsx/Panel.js +++ b/jsx/Panel.js @@ -1,6 +1,7 @@ import React, {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; import {useTranslation} from 'react-i18next'; +import { max } from 'd3'; /** * Panel - a collapsible panel component with optional multiple views. @@ -122,7 +123,7 @@ const Panel = (props) => { */ return (
+ style={{height: props.panelSize, maxHeight: props.maxHeight}}> {panelHeading}
Date: Mon, 3 Nov 2025 15:32:29 +0000 Subject: [PATCH 3/5] removed unused import --- jsx/Panel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/jsx/Panel.js b/jsx/Panel.js index f8efdad753b..7d0c0399604 100644 --- a/jsx/Panel.js +++ b/jsx/Panel.js @@ -1,7 +1,6 @@ import React, {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; import {useTranslation} from 'react-i18next'; -import { max } from 'd3'; /** * Panel - a collapsible panel component with optional multiple views. From c45189629f7296cdd2f86e8e3ace9e236ca3f48c Mon Sep 17 00:00:00 2001 From: Mario Martins Date: Fri, 5 Dec 2025 16:58:35 +0000 Subject: [PATCH 4/5] pr fixes --- jsx/CSSGrid/index.js | 4 +++- jsx/Card.js | 2 ++ jsx/Panel.js | 1 - modules/candidate_profile/jsx/CandidateInfo.js | 2 +- .../php/candidatewidget.class.inc | 16 +++++++++++++++- .../templates/form_candidate_profile.tpl | 1 + modules/media/php/module.class.inc | 2 ++ 7 files changed, 24 insertions(+), 4 deletions(-) diff --git a/jsx/CSSGrid/index.js b/jsx/CSSGrid/index.js index b56e1ad841c..9bf35223ec4 100644 --- a/jsx/CSSGrid/index.js +++ b/jsx/CSSGrid/index.js @@ -104,7 +104,9 @@ function CSSGrid(props) { style.alignSelf = 'stretch'; return ( + cardSize={pSize} collapsing={value.collapsing} + maxHeight={value?.MaxHeight} + > {value.Content} ); diff --git a/jsx/Card.js b/jsx/Card.js index de2fb12f593..5171fac426b 100644 --- a/jsx/Card.js +++ b/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} >
{ const cardStyle = { - width: info.width || '6em', + width: info.width || 'unset', padding: '1rem 0', marginLeft: '0.5rem', marginRight: '0.5rem', diff --git a/modules/candidate_profile/php/candidatewidget.class.inc b/modules/candidate_profile/php/candidatewidget.class.inc index d3646eb2ef2..cf2af32d572 100644 --- a/modules/candidate_profile/php/candidatewidget.class.inc +++ b/modules/candidate_profile/php/candidatewidget.class.inc @@ -24,6 +24,7 @@ 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. @@ -36,6 +37,7 @@ class CandidateWidget implements \LORIS\GUI\Widget * @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; + } } diff --git a/modules/candidate_profile/templates/form_candidate_profile.tpl b/modules/candidate_profile/templates/form_candidate_profile.tpl index b8ce9bcff3d..d1ca8958a4e 100644 --- a/modules/candidate_profile/templates/form_candidate_profile.tpl +++ b/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); diff --git a/modules/media/php/module.class.inc b/modules/media/php/module.class.inc index 7ca25a976ba..a2aefa457f5 100644 --- a/modules/media/php/module.class.inc +++ b/modules/media/php/module.class.inc @@ -85,6 +85,8 @@ class Module extends \Module [ 'Files' => iterator_to_array($media)], 1, 1, + null, + "85vh" ) ]; } From e26fe6a1c1250199de4223059d67f3eee2b1a4a5 Mon Sep 17 00:00:00 2001 From: Mario Martins Date: Fri, 5 Dec 2025 17:07:41 +0000 Subject: [PATCH 5/5] lint fix --- .../php/candidatewidget.class.inc | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/modules/candidate_profile/php/candidatewidget.class.inc b/modules/candidate_profile/php/candidatewidget.class.inc index cf2af32d572..4e97eed2053 100644 --- a/modules/candidate_profile/php/candidatewidget.class.inc +++ b/modules/candidate_profile/php/candidatewidget.class.inc @@ -29,15 +29,15 @@ class CandidateWidget implements \LORIS\GUI\Widget /** * 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 $maxheight The max-height of the panel + * @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,