diff --git a/jsx/CSSGrid.js b/jsx/CSSGrid/index.js similarity index 93% rename from jsx/CSSGrid.js rename to jsx/CSSGrid/index.js index b678901d60a..9bf35223ec4 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++) { @@ -110,14 +104,16 @@ function CSSGrid(props) { style.alignSelf = 'stretch'; return ( + cardSize={pSize} collapsing={value.collapsing} + maxHeight={value?.MaxHeight} + > {value.Content} ); }); 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/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} >
{ */ return (
+ style={{height: props.panelSize, maxHeight: props.maxHeight}}> {panelHeading}
{ 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) { diff --git a/modules/candidate_profile/php/candidatewidget.class.inc b/modules/candidate_profile/php/candidatewidget.class.inc index d3646eb2ef2..4e97eed2053 100644 --- a/modules/candidate_profile/php/candidatewidget.class.inc +++ b/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; + } } 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/instruments/jsx/VisitInstrumentList.js b/modules/instruments/jsx/VisitInstrumentList.js index 90f1ed20e49..c8cefea969d 100644 --- a/modules/instruments/jsx/VisitInstrumentList.js +++ b/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} >
-
-
-
-

- -
{this.props.Visit.Meta.Battery}
-

-
-
{this.props.t('Site', {ns: 'loris'})}
-
{this.props.Visit.Meta.Site}
-
- {vdate} - {vage} -
-
{this.props.t('Status', {ns: 'loris'})}
-
{vstatus}
-
- - {instruments} +
+
+ +
+
{this.props.t('Site', {ns: 'loris'})}
+
{this.props.Visit.Meta.Site}
+
+ {vdate} + {vage} +
+
{this.props.t('Status', {ns: 'loris'})}
+
{vstatus}
+
+ + {instruments} +
diff --git a/modules/media/jsx/CandidateMediaWidget.js b/modules/media/jsx/CandidateMediaWidget.js index 3d51688c638..a5fb38fb942 100644 --- a/modules/media/jsx/CandidateMediaWidget.js +++ b/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( - 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" ) ]; } diff --git a/webpack.config.ts b/webpack.config.ts index c4d5bfcb740..d9fb31089a5 100644 --- a/webpack.config.ts +++ b/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(), },