diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e120ddbb61675bd24ed864f41d77adf13aa0b98..ce592e31cb708d0e63f9f9deb2d32f9c1ed46d78 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/app/search/components/criteria/cone-search-tab.component.html b/src/app/search/components/criteria/cone-search-tab.component.html
index 694e0e3fc33ab9760868daff801c9e235e04ef1a..4885526b9f7d05cff03e4e42063f36a9e8af3f1c 100644
--- a/src/app/search/components/criteria/cone-search-tab.component.html
+++ b/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"
diff --git a/src/app/search/components/criteria/cone-search/dec.component.html b/src/app/search/components/criteria/cone-search/dec.component.html
index a1cfa6f44bcc9441c070542088dd31938b292d8d..0f870365967f7f517efbbfabc6cce66e08a44fd9 100644
--- a/src/app/search/components/criteria/cone-search/dec.component.html
+++ b/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">
diff --git a/src/app/search/components/criteria/cone-search/dec.component.ts b/src/app/search/components/criteria/cone-search/dec.component.ts
index a1eb936f6b5bfcdf86dc4c63cb4203f22b9609b1..a48063eec9bb779c318156b5cb917e145cccd9fe 100644
--- a/src/app/search/components/criteria/cone-search/dec.component.ts
+++ b/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 {
diff --git a/src/app/search/components/criteria/cone-search/input-group.component.css b/src/app/search/components/criteria/cone-search/input-group.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..f69290d5f1c9fa87d9f08f8a98523106574b1583
--- /dev/null
+++ b/src/app/search/components/criteria/cone-search/input-group.component.css
@@ -0,0 +1,3 @@
+.input-group-text {
+ width: 36px;
+}
\ No newline at end of file
diff --git a/src/app/search/components/criteria/cone-search/ra.component.html b/src/app/search/components/criteria/cone-search/ra.component.html
index 25c68aaf0b8035a3f0f3b7cd70a9bf3b543bbb63..0fcb2db3cc4f21e992df622c4d5bf1121b265014 100644
--- a/src/app/search/components/criteria/cone-search/ra.component.html
+++ b/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">
diff --git a/src/app/search/components/criteria/cone-search/ra.component.ts b/src/app/search/components/criteria/cone-search/ra.component.ts
index c0a14052bb3cb8038ed086371c6e02e2a260a91e..1292c11d849a7d8b4b8072080c67dcf2c6475db8 100644
--- a/src/app/search/components/criteria/cone-search/ra.component.ts
+++ b/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 {
diff --git a/src/app/search/components/criteria/cone-search/radius.component.css b/src/app/search/components/criteria/cone-search/radius.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..64672f0bda91491e41a34fe3a09a49abc5a50790
--- /dev/null
+++ b/src/app/search/components/criteria/cone-search/radius.component.css
@@ -0,0 +1,5 @@
+@media (min-width: 992px) {
+ #radius-field {
+ width: 100px;
+ }
+}
\ No newline at end of file
diff --git a/src/app/search/components/criteria/cone-search/radius.component.html b/src/app/search/components/criteria/cone-search/radius.component.html
index 599b31804c80dc2923c792007d7e64b24f04635d..522f37d5f5a147415569a416efc583424696b936 100644
--- a/src/app/search/components/criteria/cone-search/radius.component.html
+++ b/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>
diff --git a/src/app/search/components/criteria/cone-search/radius.component.ts b/src/app/search/components/criteria/cone-search/radius.component.ts
index 9ede88c878cead1bcf2d85aa403676ffaecf6ccc..fd7bc34382808b179aea049a73282429125278ae 100644
--- a/src/app/search/components/criteria/cone-search/radius.component.ts
+++ b/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 {