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

WIP: design optimization for mobile on radius field

parent 7b4bee81
No related branches found
No related tags found
2 merge requests!147Develop,!111Resolve "Mobile cone search design"
...@@ -14,6 +14,13 @@ ...@@ -14,6 +14,13 @@
</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
......
#radius-field {
width: 100px;
}
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
class="form-control-range mt-2" class="form-control-range mt-2"
autocomplete="off"> autocomplete="off">
</div> </div>
<div class="col-3 form-group mb-0"> <div class="col-auto form-group mb-0">
<div class="input-group mt-4"> <div class="input-group mt-4">
<input #rf type="number" class="form-control" [formControl]="radiusField" (input)="radiusChange(rf.value)" autocomplete="off"> <input #rf id="radius-field" type="number" class="form-control" [formControl]="radiusField" (input)="radiusChange(rf.value)" autocomplete="off">
<div class="input-group-append"> <div class="input-group-append">
<span class="input-group-text">arcsecond</span> <span class="input-group-text">arcsecond</span>
</div> </div>
......
...@@ -7,6 +7,7 @@ import { ConeSearch } from "../../../store/model"; ...@@ -7,6 +7,7 @@ import { ConeSearch } from "../../../store/model";
@Component({ @Component({
selector: 'app-radius', selector: 'app-radius',
templateUrl: 'radius.component.html', templateUrl: 'radius.component.html',
styleUrls: ['radius.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class RadiusComponent { export class RadiusComponent {
......
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