Skip to content
Snippets Groups Projects
Commit c3183864 authored by Tifenn Guillas's avatar Tifenn Guillas
Browse files

Update design => DONE

parent a33643b6
No related branches found
No related tags found
2 merge requests!147Develop,!111Resolve "Mobile cone search design"
...@@ -14,13 +14,6 @@ ...@@ -14,13 +14,6 @@
</button> </button>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="row">
<div style="background:#c2c1c2;" class="col d-block d-sm-none">XS</div>
<div style="background:#eec643;" class="col d-none d-sm-block d-md-none">SM</div>
<div style="background:#f4ab42;" class="col d-none d-md-block d-lg-none">MD</div>
<div style="background:#be0c02;" class="col d-none d-lg-block d-xl-none text-white">LG</div>
<div style="background:#5f021f;" class="col d-none d-xl-block text-white">XL</div>
</div>
<div class="row pb-4"> <div class="row pb-4">
<div class="col"> <div class="col">
<app-resolver <app-resolver
...@@ -32,14 +25,7 @@ ...@@ -32,14 +25,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-auto mt-2 pt-4"> <div class="col pb-4">
<button class="btn btn-outline-secondary"
[disabled]="coneSearch"
(click)="unit === 'degree' ? unit = 'hms' : unit = 'degree'">
Switch unit
</button>
</div>
<div class="col">
<app-ra <app-ra
[coneSearch]="coneSearch" [coneSearch]="coneSearch"
[resolver]="resolved" [resolver]="resolved"
...@@ -47,6 +33,14 @@ ...@@ -47,6 +33,14 @@
(changeRa)="csChange('ra', $event)"> (changeRa)="csChange('ra', $event)">
</app-ra> </app-ra>
</div> </div>
<div class="col-auto p-0 align-self-center">
<button class="btn btn-outline-secondary"
[disabled]="coneSearch"
(click)="unit === 'degree' ? unit = 'hms' : unit = 'degree'"
title="Change unit">
<span class="fas fa-sync-alt"></span>
</button>
</div>
<div class="col"> <div class="col">
<app-dec <app-dec
[coneSearch]="coneSearch" [coneSearch]="coneSearch"
......
...@@ -9,17 +9,18 @@ ...@@ -9,17 +9,18 @@
</div> </div>
<div class="row mt-2 px-3"> <div class="row mt-2 px-3">
<div class="col pl-0"> <div class="col px-0 pr-xl-1">
<div class="input-group"> <div class="input-group">
<select class="custom-select" name="operator" [formControl]="decH" (input)="decChange('hms')"> <select class="custom-select" name="operator" [formControl]="decH" (input)="decChange('hms')">
<option *ngFor="let d of degrees" [value]="d" [selected]="d === decH.value">{{ d }}</option> <option *ngFor="let d of degrees" [value]="d" [selected]="d === decH.value">{{ d }}</option>
</select> </select>
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text">H</span> <span class="input-group-text">°</span>
</div> </div>
</div> </div>
</div> </div>
<div class="col pl-0"> <div class="w-100 d-block d-xl-none"></div>
<div class="col mt-1 mt-xl-auto px-0 pr-xl-1">
<div class="input-group"> <div class="input-group">
<select class="custom-select" name="operator" [formControl]="decM" (input)="decChange('hms')"> <select class="custom-select" name="operator" [formControl]="decM" (input)="decChange('hms')">
<option *ngFor="let m of minutes" [value]="m" [selected]="m === decM.value"> {{ m }}</option> <option *ngFor="let m of minutes" [value]="m" [selected]="m === decM.value"> {{ m }}</option>
...@@ -29,7 +30,8 @@ ...@@ -29,7 +30,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col px-0"> <div class="w-100 d-block d-xl-none"></div>
<div class="col mt-1 mt-xl-auto px-0">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" [formControl]="decS" (input)="decChange('hms')" autocomplete="off"> <input type="text" class="form-control" [formControl]="decS" (input)="decChange('hms')" autocomplete="off">
<div class="input-group-append"> <div class="input-group-append">
......
...@@ -7,6 +7,7 @@ import { ConeSearch, Resolver } from "../../../store/model"; ...@@ -7,6 +7,7 @@ import { ConeSearch, Resolver } from "../../../store/model";
@Component({ @Component({
selector: 'app-dec', selector: 'app-dec',
templateUrl: 'dec.component.html', templateUrl: 'dec.component.html',
styleUrls: ['input-group.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class DecComponent { export class DecComponent {
......
.input-group-text {
width: 36px;
}
\ No newline at end of file
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</div> </div>
<div class="row mt-2 px-3"> <div class="row mt-2 px-3">
<div class="col pl-0"> <div class="col px-0 pr-xl-1">
<div class="input-group"> <div class="input-group">
<select class="custom-select" name="operator" [formControl]="raH" (input)="raChange('hms')"> <select class="custom-select" name="operator" [formControl]="raH" (input)="raChange('hms')">
<option *ngFor="let h of hours" [value]="h" [selected]="h === raH.value">{{ h }}</option> <option *ngFor="let h of hours" [value]="h" [selected]="h === raH.value">{{ h }}</option>
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col pl-0"> <div class="w-100 d-block d-xl-none"></div>
<div class="col mt-1 mt-xl-auto px-0 pr-xl-1">
<div class="input-group"> <div class="input-group">
<select class="custom-select" name="operator" [formControl]="raM" (input)="raChange('hms')"> <select class="custom-select" name="operator" [formControl]="raM" (input)="raChange('hms')">
<option *ngFor="let m of minutes" [value]="m" [selected]="m === raM.value"> {{ m }}</option> <option *ngFor="let m of minutes" [value]="m" [selected]="m === raM.value"> {{ m }}</option>
...@@ -29,7 +30,8 @@ ...@@ -29,7 +30,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col px-0"> <div class="w-100 d-block d-xl-none"></div>
<div class="col mt-1 mt-xl-auto px-0">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" [formControl]="raS" (input)="raChange('hms')" autocomplete="off"> <input type="text" class="form-control" [formControl]="raS" (input)="raChange('hms')" autocomplete="off">
<div class="input-group-append"> <div class="input-group-append">
......
...@@ -7,6 +7,7 @@ import { ConeSearch, Resolver } from "../../../store/model"; ...@@ -7,6 +7,7 @@ import { ConeSearch, Resolver } from "../../../store/model";
@Component({ @Component({
selector: 'app-ra', selector: 'app-ra',
templateUrl: 'ra.component.html', templateUrl: 'ra.component.html',
styleUrls: ['input-group.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class RaComponent { export class RaComponent {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment