hotosm · pantierra · Dec 13, 2019 · Dec 12, 2019
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -21,6 +21,7 @@ import { ListTeams, CreateTeam, EditTeam } from './views/teams';
 import { ListCampaigns, CreateCampaign, EditCampaign } from './views/campaigns';
 import { NotFound } from './views/notFound';
 import { SelectTask } from './views/taskSelection';
+import { MapTask, ValidateTask } from './views/taskAction';
 import { EmailVerification } from './views/verifyEmail';
 import { ProjectEdit } from './views/projectEdit';
 
@@ -63,7 +64,9 @@ function App() {
             <ProjectEdit path="manage/projects/:id" />
             <ManageProjectsPage path="manage/projects/" />
             <ManageProjectsPage path="projects/" />
-            <SelectTask path="projects/:id/map" />
+            <SelectTask path="projects/:id/tasks" />
+            <MapTask path="projects/:id/map" />
+            <ValidateTask path="projects/:id/validate" />
             <ProjectDetailPage path="projects/:id" />
             <Redirect from="project/:id" to="projects/:id" noThrow />
             <NotFound default />

diff --git a/frontend/src/assets/styles/_extra.scss b/frontend/src/assets/styles/_extra.scss
@@ -2,6 +2,9 @@
   .vh-minus-200-ns {
     height: calc(100vh - 200px);
   }
+  .vh-minus-122-ns {
+    height: calc(100vh - 122px);
+  }
 }
 
 @media screen and (min-width: 66rem) {

diff --git a/frontend/src/components/button.js b/frontend/src/components/button.js
@@ -1,12 +1,12 @@
 import React from 'react';
 
-export function Button({ onClick, children, className }: Object) {
+export function Button({ onClick, children, className, disabled }: Object) {
   return (
     <button
       onClick={onClick}
       aria-pressed="false"
       focusindex="0"
-      className={`${className || ''} br1 f5 bn pointer`}
+      className={`${className || ''} br1 f5 bn ${disabled ? 'o-50' : 'pointer'}`}
       style={{ padding: '.75rem 1.5rem' }}
     >
       {children}

diff --git a/frontend/src/components/footer.js b/frontend/src/components/footer.js
@@ -16,14 +16,14 @@ const socialNetworks = [
 ];
 
 export function Footer({ location }: Object) {
-  if (
-    location.pathname.endsWith('/map') ||
-    location.pathname.endsWith('/map/') ||
-    location.pathname.endsWith('/validate') ||
-    location.pathname.endsWith('/validate/') ||
-    location.pathname.endsWith('/new') ||
-    location.pathname.endsWith('/new/')
-  ) {
+  const noFooterViews = [
+    'tasks',
+    'map',
+    'validate',
+    'new'
+  ];
+  const activeView = location.pathname.split('/').filter(i => i !== "").splice(-1)[0];
+  if (noFooterViews.includes(activeView)) {
     return <></>;
   } else {
     return (

diff --git a/frontend/src/components/projectDetail/index.js b/frontend/src/components/projectDetail/index.js
@@ -11,11 +11,11 @@ import DueDateBox from '../projectcard/dueDateBox';
 import { MappingLevelMessage } from '../mappingLevel';
 
 import { TasksMap } from '../taskSelection/map.js';
-import { HeaderLine } from '../taskSelection';
+import { HeaderLine, TagLine } from '../taskSelection';
 import { MappingTypes } from '../mappingTypes';
 import { Imagery } from '../taskSelection/imagery';
 
-import { htmlFromMarkdown } from './htmlFromMarkdown';
+import { htmlFromMarkdown } from '../../utils/htmlFromMarkdown';
 import { NewMapperFlow } from './newMapperFlow';
 import { ShowReadMoreButton } from './showReadMoreButton';
 import { ProjectDetailFooter } from './projectDetailFooter';
@@ -81,7 +81,6 @@ const ProjectDetailMap = props => {
         taskBordersMap={taskBordersGeoJSON}
         taskCentroidMap={centroidGeoJSON}
         taskBordersOnly={taskBordersOnly}
-        projectId={props.project.projectId}
         disableScrollZoom={true}
         navigate={props.navigate}
         type={props.type}
@@ -138,13 +137,7 @@ export const ProjectDetailLeft = props => {
             <h3 className="f2 fw6 mt2 mb3 ttu barlow-condensed blue-dark">
               {props.project.projectInfo && props.project.projectInfo.name}
             </h3>
-            <span className="blue-light">{props.project.campaignTag}</span>
-            {props.project.countryTag && (
-              <span className="blue-light">
-                <span className="ph2">&#183;</span>
-                {props.project.countryTag.map(country => country).join(', ')}
-              </span>
-            )}
+            < TagLine campaigns={props.project.campaigns} countries={props.project.countryTag} />
           </div>
           <section className={`lh-copy h5 overflow-x-scroll`}>
             <div className="pr2" dangerouslySetInnerHTML={htmlShortDescription} />

diff --git a/frontend/src/components/projectDetail/newMapperFlow.js b/frontend/src/components/projectDetail/newMapperFlow.js
@@ -1,8 +1,9 @@
 import React from 'react';
-import { TaskSelectionIcon, AreaIcon, SubmitWorkIcon } from '../svgIcons';
-import messages from './messages';
 import { FormattedMessage } from 'react-intl';
 
+import messages from './messages';
+import { TaskSelectionIcon, AreaIcon, SubmitWorkIcon } from '../svgIcons';
+
 function MappingCard({ image, title, description }: Object) {
   return (
     <div className="db ph2-l pb3 w-100">

diff --git a/frontend/src/components/projectDetail/projectDetailFooter.js b/frontend/src/components/projectDetail/projectDetailFooter.js
@@ -39,7 +39,7 @@ export const ProjectDetailFooter = props => {
           <AddToFavorites projectId={props.projectId} />
         </div>
         <div className="dib w-40 tr fr">
-          <Link to={`./map`} className="">
+          <Link to={`./tasks`} className="">
             <Button className="white bg-red h3 w-100">
               <FormattedMessage {...messages.contribute} />
             </Button>

diff --git a/frontend/src/components/projectcard/dueDateBox.js b/frontend/src/components/projectcard/dueDateBox.js
@@ -5,7 +5,7 @@ import humanizeDuration from 'humanize-duration';
 import { ClockIcon } from '../svgIcons';
 import messages from './messages';
 
-export function DueDateBox({ intl, dueDate }: Object) {
+function DueDateBox({ intl, dueDate, align="right" }: Object) {
   if (dueDate === undefined) {
     return null;
   } else if (new Date(dueDate) === undefined) {
@@ -16,7 +16,7 @@ export function DueDateBox({ intl, dueDate }: Object) {
 
   if (milliDifference > 0) {
     return (
-      <span className="fr relative w-40 lh-solid f7 tr br1 link ph1 pv2 bg-grey-light blue-grey truncate mw4">
+      <span className={`relative w-40 lh-solid f7 tr br1 link ph1 pv2 bg-grey-light blue-grey truncate mw4 ${align === 'right' ? 'fr' : 'fl'}`}>
         <span>
           <ClockIcon className="absolute pl1 top-0 pt1 left-0" />
         </span>

diff --git a/frontend/src/components/projectcard/projectCard.js b/frontend/src/components/projectcard/projectCard.js
@@ -90,7 +90,7 @@ export function ProjectCard({
         <FormattedMessage {...messages.editProject} />
       </Link>
       <Link
-        to={`/projects/${projectId}/map`}
+        to={`/projects/${projectId}/tasks`}
         className={`fr f6 di w-50 tc bg-red white bn ${linkCombo}`}
       >
         <FormattedMessage {...messages.projectTasks} />