fixing styling for filter dropdowns

maproulette · Oct 12, 2023 · fe75042 · fe75042
1 parent 1d43ee9
commit fe75042
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 44 deletions.
diff --git a/src/components/AdminPane/Manage/ViewChallengeTasks/Messages.js b/src/components/AdminPane/Manage/ViewChallengeTasks/Messages.js
@@ -64,6 +64,11 @@ export default defineMessages({
     defaultMessage: "Priority",
   },
 
+  filterListLabel: {
+    id: "Admin.manageTasks.controls.filterList.label",
+    defaultMessage: "Filter By:"
+  },
+
   clearFiltersLabel: {
     id: "Admin.manageTasks.controls.clearFilters.label",
     defaultMessage: "Clear Filters",

diff --git a/src/components/AdminPane/Manage/ViewChallengeTasks/ViewChallengeTasks.js b/src/components/AdminPane/Manage/ViewChallengeTasks/ViewChallengeTasks.js
@@ -216,7 +216,9 @@ export class ViewChallengeTasks extends Component {
         <SvgSymbol sym="close-icon"
           viewBox='0 0 20 20'
           className="mr-fill-current mr-w-5 mr-h-5 mr-mr-1" />
-        <FormattedMessage {...messages.clearFiltersLabel} />
+          <span>
+            <FormattedMessage {...messages.clearFiltersLabel} />
+          </span>
       </button>
     )
 
@@ -249,24 +251,31 @@ export class ViewChallengeTasks extends Component {
           </MapPane>
         </div>
 
-        <div className="mr-my-4 xl:mr-flex mr-justify-between">
-          <ul className="mr-mb-4 xl:mr-mb-0 md:mr-flex">
-            <li className="md:mr-mr-8">
-              <TaskStatusFilter {...this.props} />
-            </li>
-            <li className="md:mr-mr-8">
-              <TaskReviewStatusFilter {...this.props} />
-            </li>
-            <li className="md:mr-mr-8">
-              <TaskPriorityFilter {...this.props} />
-            </li>
-            <li>
-              <TaskPropertyFilter {...this.props} />
-            </li>
-          </ul>
-
-            {calculateTasksInChallenge(this.props) !== _get(this.props, 'taskInfo.totalCount', 0) ? clearFiltersControl : null}
+        <div className="mr-my-4 mr-space-y-3">
+            {/* <p className="mr-text-base mr-uppercase mr-text-mango">
+              <FormattedMessage {...messages.filterListLabel} />
+            </p> */}
+
+            <div className='mr-flex mr-justify-between mr-flex-1 mr-px-2 xl:mr-px-4'>
+              <ul className="mr-mb-4 xl:mr-mb-0 mr-flex mr-items-center mr-space-x-6 xl:mr-space-x-8">
+                <li>
+                  <TaskStatusFilter {...this.props} />
+                </li>
+                <li>
+                  <TaskReviewStatusFilter {...this.props} />
+                </li>
+                <li>
+                  <TaskPriorityFilter {...this.props} />
+                </li>
+                <li>
+                  <TaskPropertyFilter {...this.props} />
+                </li>
+              </ul>
+              <div>
+                {calculateTasksInChallenge(this.props) !== _get(this.props, 'taskInfo.totalCount', 0) ? clearFiltersControl : null}
+              </div>
           </div>
+        </div>
 
           <TaskAnalysisTable
             taskData={_get(this.props, 'taskInfo.tasks')}

diff --git a/src/components/TaskFilters/FilterDropdown.js b/src/components/TaskFilters/FilterDropdown.js
@@ -14,7 +14,7 @@ export default class FilterDropdown extends Component {
             onClick={dropdown.toggleDropdownVisible}
           >
             <span className="mr-text-base mr-uppercase mr-mr-1">
-              {this.props.title}
+              <span className='mr-hidden xl:mr-inline'>Filter By </span>{this.props.title}
             </span>
             <SvgSymbol
               sym="icon-cheveron-down"

diff --git a/src/components/TaskFilters/Messages.js b/src/components/TaskFilters/Messages.js
@@ -6,27 +6,26 @@ import { defineMessages } from 'react-intl'
 export default defineMessages({
   filterByPropertyLabel: {
     id: "TaskPropertyFilter.label",
-    defaultMessage: "Filter By Property",
+    defaultMessage: "Task Property",
   },
 
   filterByPriorityLabel: {
     id: "TaskPriorityFilter.label",
-    defaultMessage: "Filter by Priority",
+    defaultMessage: "Task Priority",
   },
 
   filterByStatusLabel: {
     id: "TaskStatusFilter.label",
-    defaultMessage: "Filter by Status",
+    defaultMessage: "Task Status",
   },
 
   filterByReviewStatusLabel: {
     id: "TaskReviewStatusFilter.label",
-    defaultMessage: "Filter by Review Status",
+    defaultMessage: "Task Review Status",
   },
 
   filterByMetaReviewStatusLabel: {
     id: "TaskReviewStatusFilter.metaReviewStatuses.label",
     defaultMessage: "Meta-Review Statuses",
   },
-
 })
diff --git a/src/components/TaskFilters/TaskFilterIndicator.js b/src/components/TaskFilters/TaskFilterIndicator.js
@@ -2,7 +2,7 @@ import React from 'react'
 
 function TaskFilterIndicator() {
   return (
-    <div className="mr-rounded-full mr-h-2 mr-w-2 mr-bg-green-lighter" content='' />
+    <div className="mr-rounded-full mr-h-1.5 mr-w-1.5 mr-bg-green-lighter" content='' />
   )  
 }
 

diff --git a/src/components/Widgets/TaskBundleWidget/Messages.js b/src/components/Widgets/TaskBundleWidget/Messages.js
@@ -24,6 +24,11 @@ export default defineMessages({
     defaultMessage: "Save Current Filters"
   },
 
+  filterListLabel: {
+    id: "Widgets.TaskBundleWidget.controls.filterList.label",
+    defaultMessage: "Filter By:"
+  },
+
   taskIdLabel: {
     id: "Widgets.TaskBundleWidget.popup.fields.taskId.label",
     defaultMessage: "Internal Id:",

diff --git a/src/components/Widgets/TaskBundleWidget/TaskBundleWidget.js b/src/components/Widgets/TaskBundleWidget/TaskBundleWidget.js
@@ -396,18 +396,23 @@ const BuildBundle = props => {
           <MapPane showLasso>{map}</MapPane>
         }
       </div>
-      <div className="mr-my-4 mr-px-4 xl:mr-flex mr-justify-between mr-items-center">
-        <ul className="mr-mb-4 xl:mr-mb-0 md:mr-flex">
-          <li className="md:mr-mr-8">
-            <TaskStatusFilter {...props} isUsedInTaskBundleContext={true} />
-          </li>
-          <li className="md:mr-mr-8">
-            <TaskPriorityFilter {...props} />
-          </li>
-          <li>
-            <TaskPropertyFilter {...props} />
-          </li>
-        </ul>
+      <div className="mr-my-4 mr-px-4 mr-flex mr-justify-between">
+        <div className='mr-flex'>
+          <p className="mr-text-base mr-uppercase mr-text-mango mr-mr-6">
+            <FormattedMessage {...messages.filterListLabel} />
+          </p>
+          <ul className="mr-mb-4 xl:mr-mb-0 md:mr-flex">
+            <li className="md:mr-mr-8">
+              <TaskStatusFilter {...props} isUsedInTaskBundleContext={true} />
+            </li>
+            <li className="md:mr-mr-8">
+              <TaskPriorityFilter {...props} />
+            </li>
+            <li>
+              <TaskPropertyFilter {...props} />
+            </li>
+          </ul>
+        </div>
         <div>
           <Dropdown
           className='mr-flex mr-items-center'
@@ -419,7 +424,7 @@ const BuildBundle = props => {
                 <SvgSymbol
                   sym="filter-icon"
                   viewBox="0 0 20 20"
-                  className="mr-fill-current mr-w-4 mr-h-4 xl:mr-w-5 xl:mr-h-5"
+                  className="mr-fill-current mr-w-5 mr-h-5"
                 />
               </button>
             )}

diff --git a/src/lang/en-US.json b/src/lang/en-US.json
@@ -1592,8 +1592,8 @@
   "TaskLatLon.latLon.value": "{lat}, {lon}",
   "TaskLatLon.lonLat.label": "Lon/Lat:",
   "TaskLatLon.lonLat.value": "{lon}, {lat}",
-  "TaskPriorityFilter.label": "Filter by Priority",
-  "TaskPropertyFilter.label": "Filter By Property",
+  "TaskPriorityFilter.label": "Priority",
+  "TaskPropertyFilter.label": "Property",
   "TaskPropertyQueryBuilder.commaSeparateValues.label": "Comma separate values",
   "TaskPropertyQueryBuilder.controls.addValue": "Add Value",
   "TaskPropertyQueryBuilder.controls.clear": "Clear",
@@ -1610,9 +1610,9 @@
   "TaskPropertyQueryBuilder.propertyType.compoundRuleType": "compound rule",
   "TaskPropertyQueryBuilder.propertyType.numberType": "number",
   "TaskPropertyQueryBuilder.propertyType.stringType": "text",
-  "TaskReviewStatusFilter.label": "Filter by Review Status",
+  "TaskReviewStatusFilter.label": "Review Status",
   "TaskReviewStatusFilter.metaReviewStatuses.label": "Meta-Review Statuses",
-  "TaskStatusFilter.label": "Filter by Status",
+  "TaskStatusFilter.label": "Status",
   "TasksTable.invert.abel": "invert",
   "TasksTable.inverted.label": "inverted",
   "Taxonomy.indicators.cooperative.label": "Cooperative",
@@ -1782,8 +1782,8 @@
   "Widgets.TagMetricsWidget.label": "Tag Metrics",
   "Widgets.TagMetricsWidget.title": "Tag Metrics",
   "Widgets.TaskBundleWidget.controls.bundleTasks.label": "Complete Together",
-  "Widgets.TaskBundleWidget.controls.clearFilters.label": "Clear Filters",
-  "Widgets.TaskBundleWidget.controls.saveFilters.label": "Save Filters",
+  "Widgets.TaskBundleWidget.controls.restoreDefaultFilters.label": "Restore Default Filters",
+  "Widgets.TaskBundleWidget.controls.saveCurrentFilters.label": "Save Current Filters",
   "Widgets.TaskBundleWidget.controls.unbundleTasks.label": "Unbundle",
   "Widgets.TaskBundleWidget.currentTask": "(current task)",
   "Widgets.TaskBundleWidget.disallowBundling": "You are working on a single task. Task bundles cannot be created on this step.",