Merge branch '99-mobile-cone-search-design' into 'develop'

Resolve "Mobile cone search design"

Closes #99

See merge request !111

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.4.0] - 2020-xx
+### Added
+- #99 => Improve cone search design for small screens and mobiles
+
+
 ## [3.3.0] - 2020-06
 ### Added
 - #88 => Search by cone search

src/app/search/components/criteria/cone-search-tab.component.html

@@ -25,14 +25,7 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-auto mt-2 pt-4">
-                        <button class="btn btn-outline-secondary"
-                            [disabled]="coneSearch"
-                            (click)="unit === 'degree' ? unit = 'hms' : unit = 'degree'">
-                            Switch unit
-                        </button>
-                    </div>
-                    <div class="col">
+                    <div class="col pb-4">
                         <app-ra
                             [coneSearch]="coneSearch"
                             [resolver]="resolved"
@@ -40,6 +33,14 @@
                             (changeRa)="csChange('ra', $event)">
                         </app-ra>
                     </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">
                         <app-dec
                             [coneSearch]="coneSearch"

src/app/search/components/criteria/cone-search/dec.component.html

@@ -9,17 +9,18 @@
 </div>
 
 <div class="row mt-2 px-3">
-    <div class="col pl-0">
+    <div class="col px-0 pr-xl-1">
         <div class="input-group">
             <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>
             </select>
             <div class="input-group-append">
-                <span class="input-group-text">H</span>
+                <span class="input-group-text">°</span>
             </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">
             <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>
@@ -29,7 +30,8 @@
             </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">
             <input type="text" class="form-control" [formControl]="decS" (input)="decChange('hms')" autocomplete="off">
             <div class="input-group-append">

src/app/search/components/criteria/cone-search/dec.component.ts

@@ -7,6 +7,7 @@ import { ConeSearch, Resolver } from "../../../store/model";
 @Component({
     selector: 'app-dec',
     templateUrl: 'dec.component.html',
+    styleUrls: ['input-group.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DecComponent {

src/app/search/components/criteria/cone-search/input-group.component.css

+.input-group-text {
+    width: 36px;
+}
\ No newline at end of file

src/app/search/components/criteria/cone-search/ra.component.html

@@ -9,7 +9,7 @@
 </div>
 
 <div class="row mt-2 px-3">
-    <div class="col pl-0">
+    <div class="col px-0 pr-xl-1">
         <div class="input-group">
             <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>
@@ -19,7 +19,8 @@
             </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">
             <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>
@@ -29,7 +30,8 @@
             </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">
             <input type="text" class="form-control" [formControl]="raS" (input)="raChange('hms')" autocomplete="off">
             <div class="input-group-append">

src/app/search/components/criteria/cone-search/ra.component.ts

@@ -7,6 +7,7 @@ import { ConeSearch, Resolver } from "../../../store/model";
 @Component({
     selector: 'app-ra',
     templateUrl: 'ra.component.html',
+    styleUrls: ['input-group.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RaComponent {

src/app/search/components/criteria/cone-search/radius.component.css

+@media (min-width: 992px) {
+    #radius-field {
+        width: 100px;
+    }
+}
\ No newline at end of file

src/app/search/components/criteria/cone-search/radius.component.html

@@ -10,9 +10,10 @@
             class="form-control-range mt-2"
             autocomplete="off">
     </div>
-    <div class="col-3 form-group mb-0">
+    <div class="w-100 d-block d-lg-none"></div>
+    <div class="col col-lg-auto form-group mb-0">
         <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">
                 <span class="input-group-text">arcsecond</span>
             </div>

src/app/search/components/criteria/cone-search/radius.component.ts

@@ -7,6 +7,7 @@ import { ConeSearch } from "../../../store/model";
 @Component({
     selector: 'app-radius',
     templateUrl: 'radius.component.html',
+    styleUrls: ['radius.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class RadiusComponent {