Merge remote-tracking branch 'upstream/master' into feature/add-thunderforest-source

Conflicts:
	src/components/App.jsx

src/styles/_base.scss

@@ -18,6 +18,11 @@ html {
   box-sizing: border-box;
 }
 
+body {
+  // The UI is 100% height so prevent bounce scroll on OSX
+  overflow: hidden;
+}
+
 *,
 *::before,
 *::after {
@@ -76,3 +81,7 @@ label:hover {
 a {
   color: white;
 }
+
+.hide {
+  display: none !important;
+}

src/styles/_components.scss

@@ -5,7 +5,11 @@
   right: 0;
   bottom: 0;
   height: calc(100% - #{$toolbar-height + $toolbar-offset});
-  width: 75%;
+  width: calc(
+    100%
+    - 200px /* layer list */
+    - 350px /* layer editor */
+  );
 }
 
 // DOC LABEL
@@ -53,8 +57,10 @@
   font-size: $font-size-6;
   padding: $margin-2;
   user-select: none;
+  border-width: 0;
   border-radius: 2px;
   box-sizing: border-box;
+  text-decoration: none;
 
   &:hover {
     background-color: lighten($color-midgray, 12);
@@ -69,6 +75,20 @@
   font-size: $font-size-5;
 }
 
+.maputnik-wide-button {
+  padding: $margin-2 $margin-3;
+}
+
+.maputnik-green-button {
+  background-color: $color-green;
+  color: $color-black;
+}
+
+.maputnik-white-button {
+  background-color: $color-white;
+  color: $color-black;
+}
+
 .maputnik-icon-button {
   background-color: transparent;
 

src/styles/_filtereditor.scss

@@ -3,24 +3,34 @@
 }
 
 .maputnik-filter-editor {
+  @extend .clearfix;
   color: $color-lowgray;
 }
 
 .maputnik-filter-editor-property {
   display: inline-block;
-  width: '22%';
+  width: 25%;
 }
 
 .maputnik-filter-editor-operator {
-  display: inline-block;
-  width: 19%;
   margin-left: 2%;
+  display: inline-block;
+  width: 17%;
+
+  .maputnik-select {
+    width: 100%;
+  }
 }
 
 .maputnik-filter-editor-args {
   display: inline-block;
   width: 54%;
   margin-left: 2%;
+
+  .maputnik-string,
+  .maputnik-number {
+    width: 100%;
+  }
 }
 
 .maputnik-filter-editor-compound-select {
@@ -40,10 +50,6 @@
   color: $color-midgray;
 }
 
-.maputnik-filter-editor {
-  @extend .clearfix;
-}
-
 .maputnik-add-filter {
   display: inline-block;
   float: right;
@@ -57,9 +63,6 @@
 .maputnik-filter-editor-block-action {
   margin-top: $margin-2;
   margin-bottom: $margin-2;
-}
-
-.maputnik-filter-editor-block-action {
   display: inline-block;
   width: 6%;
   margin-right: 1.5%;
@@ -70,27 +73,3 @@
   width: 92.5%;
 }
 
-.maputnik-filter-editor-property {
-  display: inline-block;
-  width: 25%;
-}
-
-.maputnik-filter-editor-operator {
-  display: inline-block;
-  width: 17%;
-
-  .maputnik-select {
-    width: 100%;
-  }
-}
-
-.maputnik-filter-editor-args {
-  display: inline-block;
-  width: 54%;
-
-  .maputnik-string,
-  .maputnik-number {
-    width: 100%;
-  }
-}
-

src/styles/_input.scss

@@ -41,7 +41,7 @@
 
 .maputnik-color-swatch {
   height: 26px;
-  width: 3px;
+  width: 14px;
   flex-shrink: 0;
   flex-grow: 0;
 }
@@ -91,7 +91,6 @@
 
 .maputnik-button-selected {
   background-color: lighten($color-midgray, 12);
-  outline: 1px $color-white;
   color: white;
 }
 
@@ -126,6 +125,10 @@
     border-width: 2px;
     border-color: $color-gray;
     transition: background-color 0.1s ease-out;
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition-duration: 0ms;
+    }
   }
 
   &-icon {

src/styles/_layer.scss

@@ -43,17 +43,32 @@
     -webkit-transition: opacity 600ms, visibility 600ms;
     transition: opacity 600ms, visibility 600ms;
 
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition-duration: 0;
+    }
+
     @include flex-row;
   }
 
-  &-icon-action svg {
-    fill: $color-black;
+  &-icon-action {
+    display: none;
+
+    svg {
+      fill: $color-black;
+    }
   }
 
   .maputnik-layer-list-item:hover,
   .maputnik-layer-list-item-selected {
     background-color: lighten($color-black, 2);
 
+    .maputnik-layer-list-icon-action {
+      display: block;
+      background: initial;
+      border: none;
+      padding: 0 2px;
+    }
+
     .maputnik-layer-list-icon-action svg {
       fill: darken($color-lowgray, 0.5);
 
@@ -122,6 +137,7 @@
   user-select: none;
   padding: $margin-2;
   line-height: 20px;
+  border-top: solid 1px #36383e;
 
   @include flex-row;
 
@@ -164,3 +180,41 @@
     color: $color-lowgray;
   }
 }
+
+.more-menu {
+  position: relative;
+
+  &__menu {
+    position: absolute;
+    z-index: 9999;
+    background: $color-black;
+    border: solid 1px $color-midgray;
+    right: 0;
+    min-width: 120px;
+  }
+
+  &__button__svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  &__menu__item {
+    padding: 4px;
+  }
+}
+
+.layer-header {
+  display: flex;
+  padding: 6px;
+  background: $color-black;
+
+  &__title {
+    flex: 1;
+    margin: 0;
+    line-height: 24px;
+  }
+
+  &__info {
+    min-width: 28px;
+  }
+}

src/styles/_layout.scss

@@ -1,6 +1,6 @@
 //SCROLLING
 .maputnik-scroll-container {
-  overflow-x: visible;
+  overflow-x: hidden;
   overflow-y: scroll;
   bottom: 0;
   left: 0;

src/styles/_modal.scss

@@ -7,6 +7,7 @@
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
   z-index: 3;
   position: relative;
+  font-family: $font-family;
 }
 
 .maputnik-modal-section {
@@ -42,7 +43,10 @@
 }
 
 .maputnik-modal-header-toggle {
-  cursor: pointer;
+  border: none;
+  background: initial;
+  color: white;
+  padding: 0;
 }
 
 .maputnik-modal-scroller {
@@ -60,31 +64,6 @@
   @extend .maputnik-space;
 }
 
-//OVERLAY
-.maputnik-overlay-viewport {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-  opacity: 0.875;
-  background-color: rgb(28, 31, 36);
-}
-
-.maputnik-overlay {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  position: fixed;
-  align-items: center;
-  justify-content: center;
-  z-index: 9;
-
-  @include flex-row;
-}
-
 //OPEN MODAL
 .maputnik-upload-button {
   @extend .maputnik-big-button;
@@ -109,6 +88,7 @@
   background-color: $color-gray;
   padding: $margin-3;
   display: block;
+  width: 100%;
 
   &:hover {
     background-color: $color-midgray;
@@ -123,6 +103,9 @@
   display: block;
   margin-top: $margin-2;
   width: 100%;
+  padding-top: calc(400 / 600 * 100%);
+  background-size: cover;
+  background-color: $color-midgray;
 }
 
 .maputnik-add-layer {
@@ -160,6 +143,7 @@
   font-size: $font-size-5;
   color: $color-lowgray;
   background-color: transparent;
+  width: 100%;
 
   @include flex-row;
 }
@@ -243,3 +227,38 @@
   text-decoration: none;
   color: #ef5350;
 }
+
+.maputnik-modal-shortcuts {
+  code {
+    color: white;
+    background: #3c3c3c;
+    padding: 2px 6px;
+    display: inline-block;
+    text-align: center;
+    border-radius: 2px;
+    margin-right: 4px;
+    font-family: monospace;
+  }
+
+  li {
+    margin-bottom: 4px;
+  }
+}
+
+.maputnik-modal-survey {
+  width: 372px;
+}
+
+.maputnik-modal-survey__logo {
+  display: block;
+  margin: 0 auto;
+}
+
+.maputnik-modal-survey__description {
+  line-height: 1.5;
+}
+
+.maputnik-modal-survey__footnote {
+  color: $color-green;
+  margin-top: 16px;
+}

src/styles/_react-codemirror.scss

@@ -0,0 +1,3 @@
+.react-codemirror2 {
+  max-width: 100%;
+}

src/styles/_react-collapse.scss

@@ -0,0 +1,9 @@
+// See <https://github.com/nkbt/react-collapse/commit/4f4fbce7c6c07b082dc62062338c9294c656f9df>
+.react-collapse-container {
+  display: flex;
+  max-width: 100%;
+
+  > * {
+    flex: 1;
+  }
+}

src/styles/_toolbar.scss

@@ -9,15 +9,25 @@
   background-color: $color-black;
 }
 
+.maputnik-toolbar-logo-container {
+  position: relative;
+}
+
 .maputnik-toolbar-logo {
+  text-decoration: none;
+  display: block;
+  flex: 0 0 180px;
   width: 180px;
   text-align: left;
   background-color: $color-black;
   padding: $margin-2;
   height: $toolbar-height;
+  position: relative;
+  overflow: hidden;
 
   h1 {
     display: inline;
+    line-height: 26px;
   }
 
   img {
@@ -47,14 +57,38 @@
   }
 }
 
+.maputnik-toolbar-link--highlighted {
+  line-height: 1;
+  padding: $margin-2 $margin-3;
+
+  .maputnik-toolbar-link-wrapper {
+    background-color: $color-white;
+    border-radius: 2px;
+    padding: $margin-2;
+    margin-top: $margin-1;
+    color: $color-black;
+    display: block;
+  }
+
+  &:hover {
+    background-color: $color-black;
+  }
+
+  &:hover .maputnik-toolbar-link-wrapper {
+    background-color: lighten($color-midgray, 12);
+    color: $color-white;
+  }
+}
+
 .maputnik-toolbar-version {
-  position: absolute;
   font-size: 10px;
-  bottom: -2px;
   margin-left: 4px;
+  white-space: nowrap;
 }
 
 .maputnik-toolbar-action {
+  background: inherit;
+  border-width: 0;
   @extend .maputnik-toolbar-link;
 }
 
@@ -67,10 +101,6 @@
   margin-left: $margin-1;
 }
 
-.maputnik-toolbar-logo {
-  flex: 0 0 170px;
-}
-
 .maputnik-toolbar__inner {
   display: flex;
 }
@@ -80,3 +110,23 @@
   flex: 1;
   overflow-y: auto;
 }
+
+.maputnik-toolbar-skip {
+  position: absolute;
+  overflow: hidden;
+  width: 0px;
+  height: 100%;
+  text-align: center;
+  display: block;
+  background-color: $color-black;
+  z-index: 999;
+  line-height: 40px;
+  left: 0;
+  top: 0;
+
+  &:active,
+  &:focus {
+    width: 100%;
+  }
+}
+

src/styles/_zoomproperty.scss

@@ -64,10 +64,6 @@
   margin-right: $margin-3;
 }
 
-.maputnik-zoom-spec-property .maputnik-input-block:not(:first-child) .maputnik-input-block-label {
-  visibility: hidden;
-}
-
 // DATA FUNC
 .maputnik-make-data-function {
   background-color: transparent;
@@ -79,16 +75,15 @@
   @extend .maputnik-icon-button;
 }
 
-// DATA PROPERTY
-.maputnik-data-spec-block {
-  overflow: auto;
-}
-
 .maputnik-data-spec-property {
   .maputnik-input-block-label {
     width: 30%;
   }
 
+  .maputnik-input-block:not(:first-child) .maputnik-input-block-label {
+    visibility: hidden;
+  }
+
   .maputnik-input-block-content {
     width: 70%;
   }
@@ -117,6 +112,8 @@
 }
 
 .maputnik-data-spec-block {
+  overflow: auto;
+
   .maputnik-data-spec-property-stop-edit,
   .maputnik-data-spec-property-stop-data {
     display: inline-block;
@@ -129,6 +126,10 @@
   }
 
   .maputnik-data-spec-property-stop-data {
+    width: 100%;
+  }
+
+  .maputnik-data-spec-property-stop-edit + .maputnik-data-spec-property-stop-data {
     width: 78%;
   }
 }

src/styles/index.scss

@@ -4,6 +4,7 @@ $color-midgray: #36383e;
 $color-lowgray: #8e8e8e;
 $color-white: #f0f0f0;
 $color-red: #cf4a4a;
+$color-green: #53b972;
 $margin-1: 3px;
 $margin-2: 5px;
 $margin-3: 10px;
@@ -36,3 +37,16 @@ $toolbar-offset: 0;
 @import 'zoomproperty';
 @import 'popup';
 @import 'map';
+@import 'react-collapse';
+@import 'react-codemirror';
+
+/**
+ * Hacks for webdriverio isVisibleWithinViewport
+ */
+#app {
+  height: 100vh;
+}
+
+.maputnik-layout {
+  height: 100vh;
+}