Fix task list on mobile

OpenDroneMap · Jul 2, 2024 · 825c638 · 825c638
1 parent 1e78755
commit 825c638
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 50 deletions.
diff --git a/app/static/app/js/components/AssetDownloadButtons.jsx b/app/static/app/js/components/AssetDownloadButtons.jsx
@@ -53,7 +53,7 @@ class AssetDownloadButtons extends React.Component {
             : ""}
 
           <button type="button" className={"btn btn-sm " + this.props.buttonClass} disabled={this.props.disabled} data-toggle="dropdown">
-            <i className="glyphicon glyphicon-download"></i>{this.props.showLabel ? " " + _("Download Assets") : ""}
+            <i className="glyphicon glyphicon-download"></i><span className="hidden-xs hidden-sm">{this.props.showLabel ? " " + _("Download Assets") : ""}</span>
           </button>
           {this.props.showLabel ? 
           <button type="button" className={"btn btn-sm dropdown-toggle " + this.props.buttonClass} data-toggle="dropdown" disabled={this.props.disabled}>

diff --git a/app/static/app/js/components/EditProjectDialog.jsx b/app/static/app/js/components/EditProjectDialog.jsx
@@ -162,7 +162,7 @@ class EditProjectDialog extends React.Component {
                 getFormData={this.getFormData}
                 reset={this.reset}
                 onShow={this.onShow}
-                leftButtons={this.props.showDuplicate ? [<button key="duplicate" disabled={this.duplicating} onClick={this.handleDuplicate} className="btn btn-default"><i className={"fa " + (this.state.duplicating ? "fa-circle-notch fa-spin fa-fw" : "fa-copy")}></i> Duplicate</button>] : undefined}
+                leftButtons={this.props.showDuplicate ? [<button key="duplicate" disabled={this.duplicating} onClick={this.handleDuplicate} className="btn btn-default"><i className={"fa " + (this.state.duplicating ? "fa-circle-notch fa-spin fa-fw" : "fa-copy")}></i><span className="hidden-xs"> {_("Duplicate")}</span></button>] : undefined}
                 ref={(domNode) => { this.dialog = domNode; }}>
               <ErrorMessage bind={[this, "error"]} />
               <div className="form-group edit-project-dialog">

diff --git a/app/static/app/js/components/FormDialog.jsx b/app/static/app/js/components/FormDialog.jsx
@@ -166,10 +166,10 @@ class FormDialog extends React.Component {
                 onClick={this.handleDelete}>
                 {this.state.deleting ? 
                     <span>
-                        <i className="fa fa-circle-notch fa-spin"></i> {_("Deleting...")}
+                        <i className="fa fa-circle-notch fa-spin"></i><span className="hidden-xs"> {_("Deleting...")}</span>
                     </span>
                 :   <span>
-                        <i className="fa fa-trash"></i> {_("Delete")}
+                        <i className="fa fa-trash"></i><span className="hidden-xs"> {_("Delete")}</span>
                     </span>}
             </button>);
         }

diff --git a/app/static/app/js/components/ProjectListItem.jsx b/app/static/app/js/components/ProjectListItem.jsx
@@ -638,12 +638,12 @@ class ProjectListItem extends React.Component {
                       onClick={this.handleUpload}
                       ref={this.setRef("uploadButton")}>
                   <i className="glyphicon glyphicon-upload"></i>
-                  {_("Select Images and GCP")}
+                  <span className="hidden-xs">{_("Select Images and GCP")}</span>
                 </button>
                 <button type="button" 
                       className="btn btn-default btn-sm"
                       onClick={this.handleImportTask}>
-                  <i className="glyphicon glyphicon-import"></i> {_("Import")}
+                  <i className="glyphicon glyphicon-import"></i> <span className="hidden-xs">{_("Import")}</span>
                 </button>
                 {this.state.buttons.map((button, i) => <React.Fragment key={i}>{button}</React.Fragment>)}
               </div>

diff --git a/app/static/app/js/components/TaskListItem.jsx b/app/static/app/js/components/TaskListItem.jsx
@@ -507,7 +507,7 @@ class TaskListItem extends React.Component {
 
               let buttonHtml = (<button type="button" className={"btn btn-sm " + button.className} onClick={button.onClick} disabled={disabled}>
                                 <i className={button.icon}></i>
-                                {button.label}
+                                <span className="hidden-xs">{button.label}</span>
                             </button>);
               if (subItems.length > 0){
                   // The button expands sub items
@@ -654,7 +654,7 @@ class TaskListItem extends React.Component {
       return (<div 
             className={"status-label theme-border-primary " + type} 
             style={{background: `linear-gradient(90deg, ${color} ${progress}%, rgba(255, 255, 255, 0) ${progress}%)`}}
-            title={text}><i className={statusIcon}></i> {text}</div>);
+            title={text}><i className={statusIcon}></i><span> {text}</span></div>);
     }
 
     let statusLabel = "";
@@ -739,36 +739,22 @@ class TaskListItem extends React.Component {
             />
         : ""}
         <div className="row">
-          <div className="col-sm-5 col-xs-12 name">
+          <div className="col-xs-7 col-sm-6 col-md-5 name">
             <i onClick={this.toggleExpanded} className={"clickable far " + (this.state.expanded ? "fa-minus-square" : " fa-plus-square")}></i> <a href="javascript:void(0);" onClick={this.toggleExpanded} className="name-link">{name}</a>
             {userTags.length > 0 ? 
               userTags.map((t, i) => <div key={i} className="tag-badge small-badge" onClick={this.handleTagClick(t)}>{t}</div>)
               : ""}
           </div>
-          <div className="col-sm-1 col-xs-5 details">
+          <div className="col-md-1 hidden-xs hidden-sm details">
             <i className="far fa-image"></i> {task.images_count}
           </div>
-          <div className="col-sm-2 col-xs-5 details">
+          <div className="col-md-2 hidden-xs hidden-sm details">
             <i className="far fa-clock"></i> {this.hoursMinutesSecs(this.state.time)}
           </div>
-          <div className="col-xs-2 text-right visible-xs-block">
-            {taskActions.length > 0 ? 
-                <div className="btn-group">
-                <button disabled={disabled || actionLoading} className="btn task-actions btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    <i className={"fa " + taskActionsIcon}></i>
-                </button>
-                <ul className="dropdown-menu dropdown-menu-right">
-                    {taskActions}
-                </ul>
-                </div>
-            : ""}
-          </div>
-          <div className="col-sm-3 col-xs-12">
+          <div className="col-xs-5 col-sm-6 col-md-4 actions">
             {showEditLink ?
               <a href="javascript:void(0);" onClick={this.startEditing}>{statusLabel}</a>
               : statusLabel}
-          </div>
-          <div className="col-sm-1 text-right hidden-xs">
             {taskActions.length > 0 ? 
                 <div className="btn-group">
                 <button disabled={disabled || actionLoading} className="btn task-actions btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

diff --git a/app/static/app/js/css/ProjectListItem.scss b/app/static/app/js/css/ProjectListItem.scss
@@ -3,13 +3,6 @@
 
     .project-name{
         font-weight: bold;
-
-        @media screen and (max-width: 768px){
-            font-size: x-large;
-            text-align: center;
-            margin-top: 5px;
-            margin-bottom: 5px;
-        } 
     }
 
     .project-description{
@@ -85,21 +78,6 @@
 
     .project-buttons {
         float: right;
-
-        @media screen and (max-width: 768px){
-
-            .asset-download-buttons {
-                width: 100%;
-            }
-
-            float: none;      
-
-            width: 100%;
-
-            .btn {
-                width: 100%;
-            }
-        }
     }
 
     .task-filters{
@@ -168,4 +146,9 @@
     .quick-clear-filter{
         margin-right: 6px !important;
     }
+
+    .asset-download-buttons > button:last-child{
+        border-top-right-radius: 3px !important;
+        border-bottom-right-radius: 3px !important;
+    }
 }
diff --git a/app/static/app/js/css/TaskListItem.scss b/app/static/app/js/css/TaskListItem.scss
@@ -41,9 +41,21 @@
         border-style: solid;
         border-width: 1px;
         border-radius: 2px;
+        margin-right: 16px;
+    }
+
+    .actions{
+        display: flex;
+        align-items: center;
+        padding-right: 2px;
+    }
 
-        @media screen and (max-width: 768px){
-            margin-top: 5px;
+    @media screen and (max-width: 576px){
+        .status-label {
+            & > span{
+                display: none;
+            }
+            text-align: center;
         }
     }