* use short date format

* use labels instead of headline above filter fields * interpolate gettext strings for translation
rdmorganiser · Apr 18, 2024 · 9b916f5 · 9b916f5
1 parent b03c961
commit 9b916f5
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/rdmo/core/assets/js/hooks/useFormattedDateTime.js b/rdmo/core/assets/js/hooks/useFormattedDateTime.js
@@ -6,8 +6,8 @@ const getLocaleObject = (language) => {
 }
 
 const FORMAT_STRINGS = {
-  en: 'MMMM d, yyyy, h:mm a',
-  de: 'd. MMMM yyyy, H:mm',
+  en: 'MMM d, yyyy, h:mm a',
+  de: 'd. MMM yyyy, H:mm',
 }
 
 export const useFormattedDateTime  = (date, language) => {

diff --git a/rdmo/projects/assets/js/components/helper/ProjectFilters.js b/rdmo/projects/assets/js/components/helper/ProjectFilters.js
@@ -28,7 +28,7 @@ const ProjectFilters = ({ catalogs, config, configActions, isManager, projectsAc
   return (
     <div className="filter-container-group">
       <div className="filter-group">
-        <h6>{gettext('Filter by catalog')}</h6>
+        <label className="control-label">{gettext('Filter by catalog')}</label>
         <div className="search-container">
           <Select
             className="select-custom"
@@ -41,7 +41,7 @@ const ProjectFilters = ({ catalogs, config, configActions, isManager, projectsAc
       </div>
       {isManager && (
         <div className="filter-group">
-          <h6>{gettext('Filter by created date')}</h6>
+          <label className="control-label">{gettext('Filter by created date')}</label>
           <div className="filter-fields-container">
             <DatePicker
               autoComplete="off"
@@ -85,7 +85,7 @@ const ProjectFilters = ({ catalogs, config, configActions, isManager, projectsAc
         </div>
       )}
       <div className="filter-group">
-        <h6>{gettext('Filter by last changed date')}</h6>
+        <label className="control-label">{gettext('Filter by last changed date')}</label>
         <div className="filter-fields-container">
           <DatePicker
             autoComplete="off"

diff --git a/rdmo/projects/assets/js/components/main/Projects.js b/rdmo/projects/assets/js/components/main/Projects.js
@@ -100,7 +100,7 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
       return rolesString
     },
     owner: (_content, row) => row.owners.map(owner => `${owner.first_name} ${owner.last_name}`).join('; '),
-    progress: (_content, row) => row.progress_total ? `${row.progress_count ?? 0} ${gettext('of')} ${row.progress_total}` : null,
+    progress: (_content, row) => row.progress_total ?  interpolate(gettext('%s of %s'), [row.progress_count ?? 0, row.progress_total]) : null,
     created: content => useFormattedDateTime(content, language),
     updated: content => useFormattedDateTime(content, language),
     actions: (_content, row) => {
@@ -161,7 +161,7 @@ const Projects = ({ config, configActions, currentUserObject, projectsActions, p
       </div>
       <div className="panel">
         <div className="panel-group text-muted">
-          {parseInt(displayedRows) > projects.length ? projects.length : displayedRows} {gettext('of')} {projects.length} {gettext('projects are displayed')}
+          {interpolate(gettext('%s of %s projects are displayed'), [parseInt(displayedRows) > projects.length ? projects.length : displayedRows, projects.length])}
         </div>
         <div className="search-container">
           <SearchField