Fix container width and spacing
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good

This commit is contained in:
Willem Dantuma 2020-01-23 12:20:35 +01:00
parent 63ffdf2519
commit af1a54ae07
6 changed files with 95 additions and 95 deletions

View File

@ -1,14 +1,14 @@
<div *ngIf="features;let features"> <div *ngIf="features;let features">
<div class="card border-0"> <div class="card border-0">
<div class="card-body" *ngIf="(schemeItem|async);let schemeItem"> <div class="card-body" *ngIf="(schemeItem|async);let schemeItem">
<div><a href="#" (click)="handleBackClick($event)" i18n>back</a></div> <div><a href="#" (click)="handleBackClick($event)" i18n>back</a></div>
<h4 i18n>Farm</h4> <h4 i18n>Farm</h4>
<h3>{{schemeItem.name}}</h3> <h3>{{schemeItem.name}}</h3>
<div class="cropfields"> <div class="cropfields">
<div class="row m-0" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)"> <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
<fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container> <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,23 +1,23 @@
@import "../../_theme.scss"; @import "../../_theme.scss";
@import "~bootstrap/scss/bootstrap.scss"; @import "~bootstrap/scss/bootstrap.scss";
feature-list-feature-container { fm-map-feature-list-feature-container {
width:100%; width:100%;
pointer-events:none; pointer-events:none;
} }
.row { .row {
border-bottom: 1px solid gray('500'); border-bottom: 1px solid gray('500');
user-select: none; user-select: none;
padding-left:1.5rem; padding-left:1.5rem;
} }
.row:hover { .row:hover {
background-color: gray('100'); background-color: gray('100');
} }
.cropfields { .cropfields {
border-top: 1px solid gray('500'); border-top: 1px solid gray('500');
margin-left: -1.5rem; margin-left: -1.25rem;
margin-right: -1.5rem; margin-right: -1.25rem;
} }

View File

@ -1,13 +1,13 @@
<div *ngIf="features;let features"> <div *ngIf="features;let features">
<div class="card border-0"> <div class="card border-0">
<div class="card-body"> <div class="card-body">
<div><a href="#" (click)="handleBackClick($event)" i18n>Back</a></div> <div><a href="#" (click)="handleBackClick($event)" i18n>Back</a></div>
<h3 i18n><i class="fm fm-farm"></i> Farms</h3> <h3 i18n><i class="fm fm-farm"></i> Farms</h3>
<div class="farms"> <div class="farms">
<div class="row m-0" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)"> <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
<fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container> <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,23 +1,23 @@
@import "../../_theme.scss"; @import "../../_theme.scss";
@import "~bootstrap/scss/bootstrap.scss"; @import "~bootstrap/scss/bootstrap.scss";
feature-list-feature-container { fm-map-feature-list-feature-container {
width:100%; width:100%;
pointer-events:none; pointer-events:none;
} }
.row { .row {
border-bottom: 1px solid gray('500'); border-bottom: 1px solid gray('500');
user-select: none; user-select: none;
padding-left:1.5rem; padding-left:1.5rem;
} }
.row:hover { .row:hover {
background-color: gray('100'); background-color: gray('100');
} }
.farms { .farms {
border-top: 1px solid gray('500'); border-top: 1px solid gray('500');
margin-left: -1.5rem; margin-left: -1.25rem;
margin-right: -1.5rem; margin-right: -1.25rem;
} }

View File

@ -1,6 +1,6 @@
<div *ngIf="features;let features"> <div *ngIf="features;let features">
<a href="#" (click)="handleBackClick($event)">Go back</a> <a href="#" (click)="handleBackClick($event)">Go back</a>
<div class="row m-0" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)"> <div class="row m-0 pl-3 pr-3" *ngFor="let feature of features" (click)="handleFeatureClick(feature)" (mouseenter)="handleFeatureMouseEnter(feature)" (mouseleave)="handleFeatureMouseLeave(feature)">
<fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container> <fm-map-feature-list-feature-container [feature]="feature"></fm-map-feature-list-feature-container>
</div> </div>
</div> </div>

View File

@ -1,16 +1,16 @@
@import "../../_theme.scss"; @import "../../_theme.scss";
@import "~bootstrap/scss/bootstrap.scss"; @import "~bootstrap/scss/bootstrap.scss";
feature-list-feature-container { fm-map-feature-list-feature-container {
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
} }
.row { .row {
border-bottom: 1px solid gray('500'); border-bottom: 1px solid gray('500');
user-select: none; user-select: none;
} }
.row:hover { .row:hover {
background-color: gray('100'); background-color: gray('100');
} }