Merge pull request #1516 from pierotofy/mobile

Mobile improvements
OpenDroneMap · Jul 2, 2024 · 0be7e5c · 0be7e5c
2 parents 96b94ed + 825c638
commit 0be7e5c
Show file tree

Hide file tree

Showing 17 changed files with 97 additions and 71 deletions.
diff --git a/app/static/app/css/main.scss b/app/static/app/css/main.scss
@@ -34,6 +34,7 @@ html, body, section.main, .content, #wrapper, #page-wrapper{
     }
     [data-mapview], .model-view{
         height: calc(100vh);
+        height: calc(100dvh);
     }
 }
 
@@ -110,13 +111,15 @@ ul#side-menu.nav{
 }
 
 .content{
-    clear: both;
     padding-top: 8px;
 
     h1,h2,h3,h4,h5{
         padding-top: 4px;
         margin-top: 0;
     }
+    h3{
+        font-size: 24px;
+    }
 }
 
 .top-buffer { 
@@ -147,6 +150,7 @@ ul#side-menu.nav{
 
 .modal-body {
     max-height: calc(100vh - 220px);
+    max-height: calc(100dvh - 220px);
     overflow-y: auto;
 }
 
@@ -216,7 +220,7 @@ button i.glyphicon{
     float: right;
     margin-right: 15px;
     padding: 9px 10px;
-    margin-top: 5px;
+    margin-top: 7px;
     margin-bottom: 5px;
 }
 
@@ -263,9 +267,16 @@ footer{
 
 .full-height{
     height: calc(100vh - 110px);
+    height: calc(100dvh - 110px);
     padding-bottom: 12px;
 }
 
 .floatfix{
     clear: both;
 }
+
+.model-title{
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
diff --git a/app/static/app/js/MapView.jsx b/app/static/app/js/MapView.jsx
@@ -112,18 +112,21 @@ class MapView extends React.Component {
     if (mapTypeButtons.length === 1) mapTypeButtons = [];
 
     return (<div className="map-view">
-        <div className="map-type-selector btn-group" role="group">
-          {mapTypeButtons.map(mapType =>
-            <button 
-              key={mapType.type}
-              onClick={this.handleMapTypeButton(mapType.type)}
-              className={"btn btn-sm " + (mapType.type === this.state.selectedMapType ? "btn-primary" : "btn-default")}><i className={mapType.icon}></i> {mapType.label}</button>
-          )}
+        <div className="map-view-header">
+          {this.props.title ? 
+            <h3 className="map-title" title={this.props.title}><i className="fa fa-globe"></i> {this.props.title}</h3>
+          : ""}
+
+          <div className="map-type-selector btn-group" role="group">
+            {mapTypeButtons.map(mapType =>
+              <button 
+                key={mapType.type}
+                onClick={this.handleMapTypeButton(mapType.type)}
+                title={mapType.label}
+                className={"btn btn-sm " + (mapType.type === this.state.selectedMapType ? "btn-primary" : "btn-default")}><i className={mapType.icon}></i><span className="hidden-sm hidden-xs"> {mapType.label}</span></button>
+            )}
+          </div>
         </div>
-
-        {this.props.title ? 
-          <h3><i className="fa fa-globe"></i> {this.props.title}</h3>
-        : ""}
 
         <div className="map-container">
             <Map 

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/Map.scss b/app/static/app/js/css/Map.scss
@@ -102,4 +102,8 @@
             right: 8px;
         }
     }
+
+    & > .leaflet-container{
+        width: 100%;
+    }
 }
diff --git a/app/static/app/js/css/MapView.scss b/app/static/app/js/css/MapView.scss
@@ -1,8 +1,14 @@
 [data-mapview]{
     height: calc(100vh - 100px);
+    height: calc(100dvh - 100px);
 }
 
 .map-view{
+    .map-title{
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
     height: calc(100% - 20px);
     position: relative;
 
@@ -14,15 +20,19 @@
         top: 6px;
     }
 
-    .map-type-selector{
-        float: right;
-    }
-
     .map-container{
         height: 100%;
         position: relative;
         .standby{
             z-index: 99999;
         }
     }
+
+    .map-view-header{
+        display: flex;
+        justify-content: space-between;
+        .map-type-selector{
+            flex: none;
+        }
+    }
 }
diff --git a/app/static/app/js/css/ModelView.scss b/app/static/app/js/css/ModelView.scss
@@ -116,6 +116,10 @@
         #show_2d_profile{
             color: initial !important;
         }
+
+        h3{
+            font-size: 14px;
+        }
     }
 
     #potree_map_header{

diff --git a/app/static/app/js/css/Paginator.scss b/app/static/app/js/css/Paginator.scss
@@ -13,7 +13,8 @@
         }
     }
     .btn-group.open > .dropdown-menu{
-        top: 22px;
+        top: 24px;
+        padding-right: 4px;
         a{
             border: none;
         }
@@ -31,6 +32,10 @@
         max-width: 210px;
     }
 
+    .pagination>li{
+        display: inline-block;
+    }
+
     .search-popup{
         min-width: 256px;
 
@@ -48,6 +53,12 @@
         }
     }
 
+    @media (max-width: 576px) { 
+        .search-popup{
+            min-width: 180px;
+        }
+    }
+
     .clear-search{
         margin-top: 1px;
         font-weight: bold;

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/TagsField.scss b/app/static/app/js/css/TagsField.scss
@@ -1,5 +1,6 @@
 .tags-field{
     height: auto;
+    min-height: 45px;
     padding-bottom: 2px;
 
     &:hover{
@@ -31,6 +32,7 @@
     }
     .inputText{
         display: inline-block;
+        position: fixed;
         outline: none;
         border: none;
         margin-bottom: 10px;

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;
         }
     }
 

diff --git a/app/templates/app/3d_model_display.html b/app/templates/app/3d_model_display.html
@@ -27,7 +27,7 @@
 	{% load render_bundle from webpack_loader %}
 	{% render_bundle 'ModelView' attrs='async' %}
 
-	<h3><i class="fa fa-cube"></i> {{title}}</h3>
+	<h3 class="model-title" title="{{title}}"><i class="fa fa-cube"></i> {{title}}</h3>
 
 	<div data-modelview class="full-height"
 		{% for key, value in params %}

diff --git a/app/templates/app/base.html b/app/templates/app/base.html
@@ -22,7 +22,7 @@
 
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <meta name="author" content="WebODM Contributors">
     <meta name="robots" content="noindex, nofollow">
     <link rel="icon" type="image/png" href="{% settings_image_url 'app_logo_favicon' %}" sizes="32x32">