kopia lustrzana https://github.com/OpenDroneMap/WebODM
Fix task list on mobile
Piero Toffanin
rodzic
1e78755dab
commit
825c638b16
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,9 +41,21 @@
|
|||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 2px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
margin-top: 5px;
|
||||
.actions{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px){
|
||||
.status-label {
|
||||
& > span{
|
||||
display: none;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue