Improve control layout and description spacing.

Author: adamfranco

OpenMapSamplesControl.css

@@ -7,6 +7,7 @@
   padding: 0.5em;
   min-width: 10em;
   min-height: 10em;
+  max-width: 25em;
 }
 
 .openmapsamples-control-button  {
@@ -27,3 +28,11 @@
 .openmapsamples-control-samples-menu {
   min-width: 15em;
 }
+
+.openmapsamples-sample-controls {
+  margin-top: 0.5em;
+}
+
+.openmapsamples-sample-description {
+  margin-top: 1em;
+}

OpenMapSamplesControl.js

@@ -226,10 +226,6 @@ export default class SampleControl {
 
   displaySample(sample) {
     this._sampleControls.innerHTML = '';
-    var description = document.createElement('div');
-    description.className = 'openmapsamples-sample-description';
-    description.innerHTML = sample.getDescription();
-    this._sampleControls.appendChild(description);
 
     var label = document.createElement('label');
     label.htmlFor = 'openmapsamples-variant-select';
@@ -267,6 +263,11 @@ export default class SampleControl {
     this._nextVariantButton.onclick = this.incrementVariant.bind(this, sample);
     this._sampleControls.appendChild(this._nextVariantButton);
 
+    var description = document.createElement('div');
+    description.className = 'openmapsamples-sample-description';
+    description.innerHTML = sample.getDescription();
+    this._sampleControls.appendChild(description);
+
     // Save default source data and replace with sample data.
     this.restoreOriginalStyle();
     this.saveOriginalStyle();