improve UX

Author: pietro909

app/app.component.ts

@@ -25,16 +25,16 @@ import {YouTubeService} from "./services/youtube.service";
             always be consistent and up to date.
             </p>
             <p class="state">{{ state | json }}</p>
-            <p class="state" *ngIf="disableSearch">O</p>
+            <p class="state" *ngIf="disableSearch">state is empty</p>
+            <h2 *ngIf="!disableSearch">Search results:</h2>
         </div>
-        <h2 *ngIf="!disableSearch">Search results:</h2>
         <h2 *ngIf="disableSearch || searchResults.length == 0">No results</h2>
         <div class="row col-md-8">
             <div *ngFor="let result of searchResults" class="thumbnail col-sm-6 col-md-4">
                 <div class="caption">
                 <h3>{{ result.title }}</h3>
                 </div>
-                <!--<img src="{{ result.thumbnailUrl }}" />-->
+                <img src="{{ result.thumbnailUrl }}" />
             </div>
         </div>
         </section>

app/components/proximity-selector.component.ts

@@ -5,14 +5,22 @@ import {Store} from '@ngrx/store';
     selector: 'proximity-selector',
     template: `
     <div class="input-group">
-        <label for="useLocation">Use current location</label>
-        <input type="checkbox" 
+        <label for="useLocation"
+            [ngClass]="{'disabled': disabled}">
+            Use current location
+        </label>
+        <input type="checkbox"
+            id="useLocation"
             [disabled]="disabled"
             (change)="onLocation($event)">
     </div>
     <div class="input-group">
-        <label for="locationRadius">Radius</label>
+        <label for="locationRadius"
+            [ngClass]="{'disabled': !active || disabled}">
+            Radius
+        </label>
         <input type="range" min="1" max="100" value="50"
+            id="locationRadius"
             [disabled]="!active || disabled"
             (change)="onRadius($event)">
     </div>

app/styles.css

@@ -1,4 +1,3 @@
-/* Master Styles */
 h1 {
     color: #369;
     font-family: Arial, Helvetica, sans-serif;
@@ -12,3 +11,18 @@ h2, h3 {
 body {
     margin: 2em;
 }
+search-box, proximity-selector {
+    display: block;
+    margin-top: 1.2rem;
+    }
+.state {
+    font-family: monospace;
+    font-size: smaller;
+}
+.row {
+    margin-bottom: 1.6rem;
+    margin-top: 1.6rem;
+}
+label.disabled {
+    color: darkgray;
+}