fix: margins and styling on app item in fullscreen

dhis2 · Nov 21, 2024 · b5793b6 · b5793b6
1 parent 05c7893
commit b5793b6
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 28 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-12T15:09:25.555Z\n"
-"PO-Revision-Date: 2024-11-12T15:09:25.556Z\n"
+"POT-Creation-Date: 2024-11-21T14:44:35.575Z\n"
+"PO-Revision-Date: 2024-11-21T14:44:35.577Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -26,6 +26,9 @@ msgstr "Show fewer dashboards"
 msgid "Show more dashboards"
 msgstr "Show more dashboards"
 
+msgid "{{appKey}} app not found"
+msgstr "{{appKey}} app not found"
+
 msgid "Remove this item"
 msgstr "Remove this item"
 

diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.js
@@ -1,4 +1,6 @@
+import i18n from '@dhis2/d2-i18n'
 import { Divider, colors, spacers, IconQuestion24 } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
@@ -9,8 +11,7 @@ import {
 } from '../../../reducers/itemFilters.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
 import { getIframeSrc } from './getIframeSrc.js'
-
-const FS_CONTROLS_BUFFER = '40px' // space for the fullscreen controls at bottom
+import styles from './styles/AppItem.module.css'
 
 const AppItem = ({ dashboardMode, item, itemFilters, apps, isFS }) => {
     let appDetails
@@ -41,27 +42,24 @@ const AppItem = ({ dashboardMode, item, itemFilters, apps, isFS }) => {
             <iframe
                 title={appDetails.name}
                 src={getIframeSrc(appDetails, item, itemFilters)}
-                className={
-                    !hideTitle
-                        ? 'dashboard-item-content'
-                        : 'dashboard-item-content-hidden-title'
-                }
+                className={cx(styles.dashboardItemContent, {
+                    [styles.hiddenTitle]: hideTitle,
+                    [styles.fs]: isFS,
+                })}
                 style={{ border: 'none' }}
             />
-            {isFS && <div style={{ height: FS_CONTROLS_BUFFER }} />}
+            {isFS && <div className={styles.fsControlsBuffer} />}
         </>
     ) : (
         <>
-            <ItemHeader title={`${appKey} app not found`} />
+            <ItemHeader
+                title={i18n.t('{{appKey}} app not found', { appKey })}
+            />
             <Divider margin={`0 0 ${spacers.dp4} 0`} />
             <div
-                className="dashboard-item-content"
-                style={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    height: '90%',
-                }}
+                className={cx(styles.dashboardItemContent, styles.centered, {
+                    [styles.fs]: isFS,
+                })}
             >
                 <IconQuestion24 color={colors.grey500} />
             </div>

diff --git a/src/components/Item/AppItem/styles/AppItem.module.css b/src/components/Item/AppItem/styles/AppItem.module.css
@@ -0,0 +1,33 @@
+.dashboardItemContent {
+    margin-block-start: 0;
+    margin-block-end: var(--item-content-padding);
+    margin-inline-start: var(--item-content-padding);
+    margin-inline-end: var(--item-content-padding);
+    overflow: auto;
+    flex: 1;
+}
+
+.hiddenTitle {
+    margin-block-start: 5px;
+    margin-block-end: 4px;
+    margin-inline-start: 4px;
+    margin-inline-end: 4px;
+}
+
+.fs {
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+}
+
+.fsControlsBuffer {
+    block-size: 40px;
+}
+
+.centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    block-size: 90%;
+}
diff --git a/src/components/styles/ItemGrid.css b/src/components/styles/ItemGrid.css
@@ -70,13 +70,6 @@
     margin-inline-start: 0;
     margin-inline-end: 0;
 }
-.dashboard-item-content-hidden-title {
-    margin-block-start: 5px;
-    margin-block-end: 4px;
-    margin-inline-start: 4px;
-    margin-inline-end: 4px;
-    overflow: auto;
-}
 
 .TEXT .dashboard-item-content {
     padding-block-end: var(--item-content-padding);
@@ -101,8 +94,6 @@
 .react-grid-item.edit .dashboard-item-content,
 .react-grid-item.RESOURCES .dashboard-item-content,
 .react-grid-item.TEXT .dashboard-item-content,
-.react-grid-item.MESSAGES .dashboard-item-content,
-.react-grid-item.APP .dashboard-item-content,
-.react-grid-item.APP .dashboard-item-content-hidden-title {
+.react-grid-item.MESSAGES .dashboard-item-content {
     flex: 1;
 }