Skip to content

Commit

Permalink
Fix all kind of css stuff (#2054)
Browse files Browse the repository at this point in the history 
* Fix all kind of css stuff

* Add borders, remove more unused css
  • Loading branch information
@HarelM
HarelM authored Oct 31, 2024
1 parent 16e8cfa commit b1825ed
Show file tree
Hide file tree
Showing 8 changed files with 47 additions and 77 deletions.
14 changes: 7 additions & 7 deletions IsraelHiking.Web/src/application/components/drawing.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<div class="side-control maplibregl-ctrl" *ngIf="isShow()" [dir]="resources.direction">
<button mat-button (click)="toggleEditPoi()" [ngClass]="{active : isPoiEditActive()}" [ngStyle]="{'color': getRouteColor()}" matTooltip="{{resources.editPoi}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw POI toggle"><i class="fa icon-map-marker fa-lg"></i></button>
<button mat-button (click)="toggleEditRoute()" [ngClass]="{active : isRouteEditActive() }" [style.color]="getRouteColor()" matTooltip="{{resources.editRoute}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw route toggle"><i class="fa icon-pencil fa-lg"></i></button>
<button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('Hike')" [ngClass]="{active : getRoutingType() === 'Hike' }" matTooltip="{{resources.hikeRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing Hike"><i class="fa icon-hike fa-lg"></i></button>
<button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('Bike')" [ngClass]="{active : getRoutingType() === 'Bike' }" matTooltip="{{resources.bikeRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing Bike"><i class="fa icon-bike fa-lg"></i></button>
<button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('4WD')" [ngClass]="{active : getRoutingType() === '4WD' }" matTooltip="{{resources.fourWheelDriveRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing 4WD"><i class="fa icon-four-by-four fa-lg"></i></button>
<button mat-button *ngIf="isRouteEditActive()" (click)="setRouting('None')" [ngClass]="{active : getRoutingType() === 'None' }" matTooltip="{{resources.straightLines}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing None"><i class="fa icon-none fa-lg"></i></button>
<button mat-button (click)="undo()" [disabled]="(undoQueueLength$ | async) === 0" matTooltip="{{resources.undo}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw undo"><i class="fa icon-mail-reply fa-lg"></i></button>
<button mat-button class="mt-1" (click)="toggleEditPoi()" [ngClass]="{active : isPoiEditActive()}" [ngStyle]="{'color': getRouteColor()}" matTooltip="{{resources.editPoi}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw POI toggle"><i class="fa icon-map-marker fa-lg"></i></button>
<button mat-button class="mt-1" (click)="toggleEditRoute()" [ngClass]="{active : isRouteEditActive() }" [style.color]="getRouteColor()" matTooltip="{{resources.editRoute}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw route toggle"><i class="fa icon-pencil fa-lg"></i></button>
<button mat-button class="mt-1" *ngIf="isRouteEditActive()" (click)="setRouting('Hike')" [ngClass]="{active : getRoutingType() === 'Hike' }" matTooltip="{{resources.hikeRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing Hike"><i class="fa icon-hike fa-lg"></i></button>
<button mat-button class="mt-1" *ngIf="isRouteEditActive()" (click)="setRouting('Bike')" [ngClass]="{active : getRoutingType() === 'Bike' }" matTooltip="{{resources.bikeRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing Bike"><i class="fa icon-bike fa-lg"></i></button>
<button mat-button class="mt-1" *ngIf="isRouteEditActive()" (click)="setRouting('4WD')" [ngClass]="{active : getRoutingType() === '4WD' }" matTooltip="{{resources.fourWheelDriveRouting}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing 4WD"><i class="fa icon-four-by-four fa-lg"></i></button>
<button mat-button class="mt-1" *ngIf="isRouteEditActive()" (click)="setRouting('None')" [ngClass]="{active : getRoutingType() === 'None' }" matTooltip="{{resources.straightLines}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Routing None"><i class="fa icon-none fa-lg"></i></button>
<button mat-button class="mt-1" (click)="undo()" [disabled]="(undoQueueLength$ | async) === 0" matTooltip="{{resources.undo}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Draw undo"><i class="fa icon-mail-reply fa-lg"></i></button>
<mat-menu #appMenu="matMenu" overlapTrigger="false" [xPosition]="'before'">
<button mat-menu-item (click)="clearRoute()" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Clear route"><i class="fa icon-recordings"></i> {{resources.clearRoute}}</button>
<button mat-menu-item (click)="clearPois()" angulartics2On="click" angularticsCategory="Drawing" angularticsAction="Clear pois"><i class="fa icon-map-marker"></i> {{resources.clearPois}}</button>
Expand Down
6 changes: 3 additions & 3 deletions IsraelHiking.Web/src/application/components/main-menu.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<div class="side-control maplibregl-ctrl">
<div class="control-container">
<button mat-button class="pull-right high-button" [matMenuTriggerFor]="appMenu" angulartics2On="click" angularticsCategory="Menu" angularticsAction="Toggle main menu"><i class="fa fa-lg icon-bars"></i></button>
<div class="pull-right relative">
<div class="flex flex-row relative">
<button mat-button class="high-button" *ngIf="isLoggedIn()" [matMenuTriggerFor]="userMenu" angulartics2On="click" angularticsCategory="Menu" angularticsAction="Toggle user menu">
<img *ngIf="userInfo?.imageUrl" class="pull-right space-after profile-image" [src]="userInfo.imageUrl | offlineImage:true | async" alt=""/>
<img *ngIf="userInfo?.imageUrl" class="space-after profile-image" [src]="userInfo.imageUrl | offlineImage:true | async" alt=""/>
<i *ngIf="!userInfo.imageUrl" class="fa icon-user fa-lg"></i>
</button>
<button mat-button class="high-button" *ngIf="!isLoggedIn() && !isIFrame()" (click)="login()" angulartics2On="click" angularticsCategory="Menu" angularticsAction="Login">
<i class="fa icon-frown-o fa-lg"></i>
</button>
<span class="circle" [ngClass]="{'offline': isOffline(), 'online': !isOffline()}">{{getQueueText()}}</span>
<button mat-button class="high-button" [matMenuTriggerFor]="appMenu" angulartics2On="click" angularticsCategory="Menu" angularticsAction="Toggle main menu"><i class="fa fa-lg icon-bars"></i></button>
</div>
<mat-menu #appMenu="matMenu" xPosition="before">
<ng-template matMenuContent>
Expand Down
2 changes: 1 addition & 1 deletion IsraelHiking.Web/src/application/components/main-menu.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@

.profile-image {
max-width: 80%;
margin: 10%;
margin: 20% 10%;
}

.eye-end {
Expand Down
44 changes: 27 additions & 17 deletions IsraelHiking.Web/src/application/components/route-statistics.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,37 +81,47 @@
</div>
</div>
</div>
<button mat-button class="chart-button chart-table-button" *ngIf="!isExpanded" (click)="changeState('table')" [class.active]="isTable" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle table view"><i class="fa icon-table fa-lg"></i></button>
<button mat-button class="chart-button chart-graph-button" (click)="changeState('graph')" [class.active]="!isTable" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle graph view"><i class="fa icon-area-chart fa-lg"></i></button>
<button mat-button class="chart-button chart-close-button" (click)="toggle()" angularticsCategory="Route statistics" angularticsAction="Route statistics close"><i class="fa icon-close fa-lg"></i></button>
<button mat-button class="chart-button chart-expand-button hidden-xs" *ngIf="!isTable" (click)="toggleExpand()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle expand view"><i class="fa fa-lg" [ngClass]="{ 'icon-chevron-right' : isExpanded, 'icon-chevron-left' : !isExpanded }"></i></button>
<mat-menu #appMenu="matMenu" overlapTrigger="false" xPosition="before">
<button mat-menu-item (click)="toggleKmMarker()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle KM markers"><i [class.active]="isKmMarkersOn" class="fa icon-map-marker"></i> {{resources.kmPoi}}</button>
<button mat-menu-item (click)="toggleSlope()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle Slope"><i [class.active]="isSlopeOn" class="fa icon-line-chart"></i> {{resources.showSlopes}}</button>
</mat-menu>
<button mat-button class="chart-button chart-more-button" [matMenuTriggerFor]="appMenu" matTooltip="{{resources.more}}" matTooltipPosition="above" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="More"><i class="fa icon-ellipsis-v fa-lg"></i></button>
<div class="absolute right-0 bottom-0 flex flex-col m-1">
<button mat-button *ngIf="!isExpanded" (click)="changeState('table')" [class.active]="isTable" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle table view"><i class="fa icon-table fa-lg"></i></button>
<button mat-button (click)="changeState('graph')" [class.active]="!isTable" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle graph view"><i class="fa icon-area-chart fa-lg"></i></button>
</div>
<div class="absolute top-0 left-0 flex flex-col">
<button mat-button class="m-1" (click)="toggle()" angularticsCategory="Route statistics" angularticsAction="Route statistics close"><i class="fa icon-close fa-lg"></i></button>
<button mat-button class="m-1 max-sm:!hidden" *ngIf="!isTable" (click)="toggleExpand()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle expand view"><i class="fa fa-lg" [ngClass]="{ 'icon-chevron-right' : isExpanded, 'icon-chevron-left' : !isExpanded }"></i></button>
<mat-menu #appMenu="matMenu" overlapTrigger="false" xPosition="before">
<button mat-menu-item (click)="toggleKmMarker()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle KM markers">
<i [class.active]="isKmMarkersOn" class="fa icon-map-marker p-1"></i>
<span class="ms-2">{{resources.kmPoi}}</span>
</button>
<button mat-menu-item (click)="toggleSlope()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Toggle Slope">
<i [class.active]="isSlopeOn" class="fa icon-line-chart p-1"></i>
<span class="ms-2">{{resources.showSlopes}}</span>
</button>
</mat-menu>
<button mat-button class="m-1" [matMenuTriggerFor]="appMenu" matTooltip="{{resources.more}}" matTooltipPosition="below" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="More"><i class="fa icon-ellipsis-v fa-lg"></i></button>
</div>
</div>
<div *ngIf="!isOpen" (click)="toggle()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Route statistics open">
<button mat-button class="pull-right" [class.active]="isOpen" matTooltip="{{resources.routeStatistics}}" matTooltipPosition="above"><i class="fa {{isTable ? 'icon-table' : 'icon-area-chart'}} fa-lg"></i></button>
<div class="flex flex-row" *ngIf="!isOpen" (click)="toggle()" angulartics2On="click" angularticsCategory="Route statistics" angularticsAction="Route statistics open">
<button mat-button [class.active]="isOpen" matTooltip="{{resources.routeStatistics}}" matTooltipPosition="above"><i class="fa {{isTable ? 'icon-table' : 'icon-area-chart'}} fa-lg"></i></button>
<ng-container *ngIf="!isFollowing">
<div class="pull-right" matTooltip="{{resources.gain}}" matTooltipPosition="above">
<div matTooltip="{{resources.gain}}" matTooltipPosition="above">
<span class="control-container-item gutters"><i class="fa icon-arrow-up"></i> {{toShortNumber(gain)}} <span class="units">{{getUnits(gain)}}</span></span>
</div>
<div class="pull-right" matTooltip="{{resources.loss}}" matTooltipPosition="above">
<div matTooltip="{{resources.loss}}" matTooltipPosition="above">
<span class="control-container-item gutters"><i class="fa icon-arrow-down"></i>&nbsp;<span dir="ltr">{{toShortNumber(loss)}}</span>&nbsp;<span class="units">{{getUnits(loss)}}</span></span>
</div>
<div class="pull-right" matTooltip="{{resources.length}}" matTooltipPosition="above">
<div matTooltip="{{resources.length}}" matTooltipPosition="above">
<span class="control-container-item gutters"><i class="fa icon-arrow-right"></i> {{toShortNumber(length)}} <span class="units">{{getUnits(length)}}</span></span>
</div>
</ng-container>
<ng-container *ngIf="isFollowing">
<div class="pull-right">
<div>
<span class="control-container-item gutters">ETA <span dir="ltr">{{ETA}}</span></span>
</div>
<div class="pull-right" matTooltip="{{resources.remainingDistance}}" matTooltipPosition="above">
<div matTooltip="{{resources.remainingDistance}}" matTooltipPosition="above">
<span class="control-container-item gutters"><i class="fa icon-arrow-circle-right"></i>&nbsp;<span dir="ltr">{{toShortNumber(remainingDistance)}}</span>&nbsp;<span class="units">{{getUnits(remainingDistance)}}</span></span>
</div>
<div class="pull-right" matTooltip="{{resources.traveledDistance}}" matTooltipPosition="above">
<div matTooltip="{{resources.traveledDistance}}" matTooltipPosition="above">
<span class="control-container-item gutters"><i class="fa icon-arrow-right"></i> {{toShortNumber(traveledDistance)}} <span class="units">{{getUnits(traveledDistance)}}</span></span>
</div>
</ng-container>
Expand Down
34 changes: 0 additions & 34 deletions IsraelHiking.Web/src/application/components/route-statistics.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,31 +65,6 @@ $buttons-margin: 5px;
min-width: unset !important;
}

.chart-close-button {
top: $buttons-margin;
left: $buttons-margin;
}

.chart-expand-button {
top: calc(#{$buttons-margin} + #{$button-size});
left: $buttons-margin;
}

.chart-more-button {
top: calc(#{$buttons-margin} + 2 * #{$button-size});
left: $buttons-margin;
}

.chart-graph-button {
bottom: $buttons-margin;
right: $buttons-margin;
}

.chart-table-button {
bottom: calc(#{$buttons-margin} + #{$button-size});
right: $buttons-margin;
}

.chart-container-tooltip {
top: 20px;
position: absolute
Expand All @@ -100,10 +75,6 @@ $buttons-margin: 5px;
}

@media (width <= 550px) {
.hidden-xs {
display: none !important
}

.chart-control-container {
width: calc(100vw - 2 * #{$control-border});
height: $container-height-small-screen;
Expand All @@ -116,9 +87,4 @@ $buttons-margin: 5px;
.chart-buttons .mat-mdc-button {
padding: 0 !important;
}

.chart-more-button {
top: calc(#{$buttons-margin} + #{$button-size});
left: $buttons-margin;
}
}
18 changes: 8 additions & 10 deletions IsraelHiking.Web/src/application/components/search.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="side-control maplibregl-ctrl !absolute align-next-to-menu">
<div class="flex flex-row">
<button mat-button class="pull-right" (click)="toggleDirectional()" matTooltip="{{resources.directionalSearch}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Search" angularticsAction="Toggle directional search"><i class="fa fa-lg" [ngClass]="{'icon-plus': !directional.isOn, 'icon-minus': directional.isOn}"></i></button>
<button mat-button (click)="toggleDirectional()" matTooltip="{{resources.directionalSearch}}" matTooltipPosition="left" angulartics2On="click" angularticsCategory="Search" angularticsAction="Toggle directional search"><i class="fa fa-lg" [ngClass]="{'icon-plus': !directional.isOn, 'icon-minus': directional.isOn}"></i></button>
<div [dir]="resources.direction">
<mat-form-field class="search-input-container" subscriptSizing="dynamic">
<input type="text" matInput #searchFromInput class="control-container-item" [formControl]="searchFrom" [matAutocomplete]="autoFrom" placeholder="{{resources.searchPlaceHolder}}" [dir]="resources.getDirection(fromContext.searchTerm)" (focus)="focusOnSearchInput()" (blur)="hasFocus = false">
Expand All @@ -14,18 +14,16 @@
</div>
</div>
<ng-container *ngIf="directional.isOn">
<div class="pull-left-important flex flex-row">
<button mat-button class="pull-right" (click)="setRouting('Hike')" [ngClass]="{active : routingType === 'Hike' }" matTooltip="{{resources.hikeRouting}}" matTooltipPosition="below"><i class="fa icon-hike fa-lg"></i></button>
<button mat-button class="pull-right" (click)="setRouting('Bike')" [ngClass]="{active : routingType === 'Bike' }" matTooltip="{{resources.bikeRouting}}" matTooltipPosition="below"><i class="fa icon-bike fa-lg"></i></button>
<button mat-button class="pull-right" (click)="setRouting('4WD')" [ngClass]="{active : routingType === '4WD' }" matTooltip="{{resources.fourWheelDriveRouting}}" matTooltipPosition="below"><i class="fa icon-four-by-four fa-lg"></i></button>
<button mat-button class="pull-right" (click)="setRouting('None')" [ngClass]="{active : routingType === 'None' }" matTooltip="{{resources.straightLines}}" matTooltipPosition="below"><i class="fa icon-none fa-lg"></i></button>
<div class="flex flex-row mt-1 mb-1">
<button mat-button (click)="setRouting('Hike')" [ngClass]="{active : routingType === 'Hike' }" matTooltip="{{resources.hikeRouting}}" matTooltipPosition="below"><i class="fa icon-hike fa-lg"></i></button>
<button mat-button (click)="setRouting('Bike')" [ngClass]="{active : routingType === 'Bike' }" matTooltip="{{resources.bikeRouting}}" matTooltipPosition="below"><i class="fa icon-bike fa-lg"></i></button>
<button mat-button (click)="setRouting('4WD')" [ngClass]="{active : routingType === '4WD' }" matTooltip="{{resources.fourWheelDriveRouting}}" matTooltipPosition="below"><i class="fa icon-four-by-four fa-lg"></i></button>
<button mat-button (click)="setRouting('None')" [ngClass]="{active : routingType === 'None' }" matTooltip="{{resources.straightLines}}" matTooltipPosition="below"><i class="fa icon-none fa-lg"></i></button>
</div>
<br />
<br />
<div class="flex flex-row">
<button mat-button class="pull-right" (click)="searchRoute()"><i class="fa icon-arrow-left fa-lg"></i></button>
<button mat-button (click)="searchRoute()"><i class="fa icon-arrow-left fa-lg"></i></button>
<div [dir]="resources.direction">
<mat-form-field class="pull-right search-input-container" subscriptSizing="dynamic">
<mat-form-field class="search-input-container" subscriptSizing="dynamic">
<input type="text" matInput #searchToInput [formControl]="searchTo" [matAutocomplete]="autoTo" class="control-container-item" placeholder="{{resources.searchPlaceHolder}}" [dir]="resources.getDirection(toContext.searchTerm)">
<mat-autocomplete positionY="below" #autoTo="matAutocomplete" [displayWith]="displayResults">
<mat-option *ngFor="let result of toContext.searchResults" [value]="result" [ngClass]="[resources.getTextAlignment(result.title), 'search-result-option']" [dir]="resources.getDirection(result.title)">
Expand Down
4 changes: 0 additions & 4 deletions IsraelHiking.Web/src/application/components/search.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@
right: 85px
}

.pull-left-important {
float: left !important;
}

.search-input-container {
width: calc(100vw - 178px);
@include mat.all-component-densities(-3);
Expand Down
Loading

0 comments on commit b1825ed

Please sign in to comment.