Merge pull request #50 from hotosm/feature/dropdowns

Feature/dropdowns

Author: danielfdsilva

app/assets/scripts/components/modals/info_modal.js

@@ -13,11 +13,14 @@ var InfoModal = React.createClass({
     return (
       <div className="prose">
         <h2>OpenAerialMap</h2>
-        <p>OpenAerialMap (OAM) is a set of tools for searching, sharing, and using openly licensed satellite and unmanned aerial vehicle (UAV) imagery. Built on top of the <a href="https://github.com/openimagerynetwork">Open Imagery Network (OIN)</a>, OAM is an open service that will provide search and access to this imagery.</p>
+        <p>OpenAerialMap (OAM) is a set of tools for searching, sharing, and using openly licensed satellite and unmanned aerial vehicle (UAV) imagery.</p>
+        <p>Built on top of the <a href="https://github.com/openimagerynetwork" title="Visit the GitHub repository">Open Imagery Network (OIN)</a>, OAM is an open service that will provide search and access to this imagery.</p>
         <h2>How to use?</h2>
-        <p>Use the map to pan and zoom to search available imagery. Available imagery can be previewed by selecting a tile and browsing the imagery in the sidebar. All imagery is publicly licensed and made available through the Humanitarian OpenStreetMap Team&#39;s Beta OIN Node.</p>
+        <p>Use the map to pan and zoom to search available imagery. Available imagery can be previewed by selecting a tile and browsing the imagery in the sidebar.</p>
+        <p>All imagery is publicly licensed and made available through the Humanitarian OpenStreetMap Team&#39;s Beta OIN Node.</p>
         <h2>Join in the Development</h2>
-        <p>OAM is releasing a beta version to preview and test functionality. There are plenty of ways to get involved in OpenAerialMap. Check out the <a href="https://github.com/hotosm/OpenAerialMap" title="Visit the GitHub repository">GitHub repository</a> to learn more about the design and how to get involved in the project.</p>
+        <p>OAM is releasing a beta version to preview and test functionality. There are plenty of ways to get involved in OpenAerialMap.</p>
+        <p>Check out the <a href="https://github.com/hotosm/OpenAerialMap" title="Visit the GitHub repository">GitHub repository</a> to learn more about the design and how to get involved in the project.</p>
       </div>
     );
   },

app/assets/scripts/components/results_item.js

@@ -31,6 +31,10 @@ var ResultsItem = React.createClass({
       tmsOptions = (<ZcInput value={d.properties.tms} />);
     }
 
+    var blurImage = {
+      backgroundImage: 'url(' + d.properties.thumbnail + ')'
+    };
+
     return (
       <article className={(d.properties.tms ? 'has-tms ' : '') + 'results-single'}>
         <header className="pane-header">
@@ -40,20 +44,21 @@ var ResultsItem = React.createClass({
         <div className="pane-body">
           <div className="pane-body-inner">
             <div className="single-media">
+              <div className="blur-media" style={blurImage}></div>
               <img alt="Result thumbnail" src={d.properties.thumbnail || "assets/graphics/layout/img-placeholder.svg" } />
             </div>
             <div className="single-actions">
               {tmsOptions}
               <a title="Download image" className="bttn-download" target="_blank" href={d.uuid}><span>Download</span></a>
             </div>
             <dl className="single-details">
-              <dt>Type</dt>
+              <dt><span>Type</span></dt>
               <dd>{d.properties.tms ? 'Multiscene TMS' : 'Single Scene'}</dd>
-              <dt>Date</dt>
+              <dt><span>Date</span></dt>
               <dd>{d.acquisition_start.slice(0,10)}</dd>
-              <dt>Resolution</dt>
+              <dt><span>Resolution</span></dt>
               <dd>{utils.gsdToUnit(d.gsd)}</dd>
-              <dt>Platform</dt>
+              <dt><span>Platform</span></dt>
               <dd className="cap">{d.platform}</dd>
             </dl>
           </div>

app/assets/scripts/components/shared/zc_input.js

@@ -37,6 +37,18 @@ var ZcInput = React.createClass({
       <div className="input-group">
         <input className="form-control input-m" type="text" value={this.props.value} readOnly  data-hook="copy:data" />
         <span className="input-group-bttn"><button data-title="" type="button" className="bttn-clipboard disabled" data-hook="copy:trigger"><span>Copy to clipboard</span></button></span>
+        {/* 
+        <span className="input-group-bttn drop dropdown open center">
+          <a href="#" title="Show options" className="bttn-uoptions" data-toggle="drop"><span>Options</span></a>
+          <div className="drop-content">
+            <ul className="drop-menu tms-options-menu" role="menu">
+              <li className="has-icon-bef clipboard disabled"><a href="" target="_blank" title="Open with iD editor">Open with iD editor</a></li>
+              <li className="has-icon-bef clipboard disabled"><a href="" target="_blank" title="Open with JOSM">Open with JOSM</a></li>
+              <li className="has-icon-bef clipboard"><a href="" title="Copy to clipboard" data-hook="copy:trigger">Copy to clipboard</a></li>
+            </ul>
+          </div>
+        </span>
+        */}
       </div>
     );
   }

app/assets/styles/_base.scss

@@ -73,9 +73,9 @@ a:active{
 #site-title {
   position: absolute;
   top: 1rem;
+  right: 6.5rem;
   z-index: 10;
-  left: 50%;
-  @include transform(translate(-50%, 0));
+  @include transition(all 0.64s ease 0s);
   span {
     @extend .visually-hidden;
   }
@@ -94,6 +94,10 @@ a:active{
     line-height: 1.25rem;
     text-transform: uppercase;
   }
+  @include media(large-up) {
+    right: 50%;
+    @include transform(translate(50%, 0));
+  }
 }
 
 .nav-block-prime,
@@ -193,8 +197,10 @@ a:active{
     .prose {
       @include columns(3);
       @include column-gap(2rem);
+      margin-bottom: -0.75rem;
       h2 {
-        margin-top: 0;
+        @include heading(1.25rem);   // 20
+        margin: 0 0 1rem 0;
         -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
           page-break-inside: avoid; /* Firefox */
                break-inside: avoid; /* IE 10+ */

app/assets/styles/_buttons.scss

@@ -129,6 +129,7 @@ input[type=submit] {
   &.download:before { @extend .icon-download; }
   &.clipboard:before { @extend .icon-clipboard; }
   &.history:before { @extend .icon-history; }
+  &.uoptions:before { @extend .icon-s-arr-down; }
 }
 
 .bttn-notxt {
@@ -255,4 +256,8 @@ input[type=submit] {
 
 .bttn-clipboard {
   @extend .bttn, .bttn-base-light, .bttn-m, .bttn-notxt, .clipboard;
+}
+
+.bttn-uoptions {
+  @extend .bttn, .bttn-base-light, .bttn-m, .bttn-notxt, .uoptions;
 }

app/assets/styles/_overlays.scss

@@ -92,15 +92,14 @@
 
 .drop-menu {
   list-style: none;
-  margin: 0 -1rem;
+  margin: -0.5rem -1rem;
   padding: 0;
   @extend .clearfix;
   white-space: nowrap;
   font-family: $base-font-family;
   font-weight: $base-font-regular;
   font-size: 0.875rem;
   line-height: 1.25rem;
-  text-transform: uppercase;
   .sep:not(:first-child) {
     box-shadow: inset 0 1px 0 0 $brdr-rgba;
     padding-top: 0.25rem;
@@ -150,6 +149,7 @@
   &.twitter a:before { @extend .icon-twitter; }
   &.facebook a:before { @extend .icon-facebook; }
   &.google-plus a:before { @extend .icon-google-plus; }
+  &.clipboard a:before { @extend .icon-clipboard; }
 }
 
 .drop-menu > .active > a,

app/assets/styles/_results-pane.scss

@@ -137,11 +137,12 @@
   text-align: center;
   background: tint($base-color, 80%);
   margin: -1rem -1rem 1rem -1rem;
-  padding: 1rem;
   height: 16rem;
   line-height: 16rem;
   font-size: 0;
   vertical-align: middle;
+  overflow: hidden;
+  padding: 1rem;
   &:after {
     position: absolute;
     bottom: 0;
@@ -150,11 +151,28 @@
     height: 1px;
     background: $brdr-rgba;
     content: "";
+    z-index: 3;
   }
   img {
+    position: relative;
+    z-index: 2;
     max-width: 100%;
     height: 100%;
     display: inline-block;
+    box-shadow: 0 2px 12px 2px $spread-shadow-rgba;
+    border-radius: $semi-radius;
+  }
+  .blur-media {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-size: cover;
+    display: block;
+    @include filter(blur(0.5rem));
+    opacity: 0.24;
   }
 }
 
@@ -171,10 +189,11 @@
   .single-actions {
     .input-group {
       float: left;
-      width: 60%;
+      width: calc(64% - 0.5rem);
     }
     .bttn-download {
       float: right;
+      width: 36%;
       min-width: initial;
     }
   }
@@ -184,6 +203,8 @@
   margin: 0 -1rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
+  box-shadow: inset 0 1px 0 0 $brdr-rgba;
+  @extend .clearfix;
   dt, dd {
     float: left;
     margin: 0;
@@ -198,7 +219,10 @@
     text-transform: uppercase;
     clear: left;
     padding-right: 0.5rem;
-    opacity: 0.64;
+    font-size: 0.775rem;
+    span {
+      opacity: 0.64;
+    }
   }
   dd {
     width: 68%;