Upgraded OTM With New Features

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

.dockerignore

@@ -0,0 +1,3 @@
+# this is what we will be mounting for development
+#**/opentreemap
+**/node_modules

Dockerfile

@@ -0,0 +1,37 @@
+FROM python:3.8
+
+#RUN apt-get install -y software-properties-common && add-apt-repository -y ppa:ubuntu-toolchain-r/test
+
+#checkinstall \
+#libgdal1-dev \
+
+RUN apt-get update \
+    && apt-get install -y \
+        gettext \
+        libgeos-dev \
+        libproj-dev \
+        build-essential \
+        python3-dev \
+        python3-pip \
+        libfreetype6-dev \
+        binutils \
+        libproj-dev \
+        gdal-bin \
+        curl
+
+RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - && apt-get install -y nodejs
+
+RUN npm install -g yarn
+
+WORKDIR /usr/local/otm/app
+# only copy what we need
+COPY requirements.txt .
+RUN pip install -r requirements.txt
+# Bundle JS and CSS via webpack
+RUN yarn --force
+
+# then copy everything else
+COPY . . 
+COPY docker/local_settings.py /usr/local/otm/app/opentreemap/opentreemap/settings/local_settings.py 
+
+RUN mkdir -p /usr/local/otm/static && mkdir -p /usr/local/otm/media && mkdir -p /usr/local/otm/emails

MIGRATE-PYTHON3.md

@@ -0,0 +1,3 @@
+These are notes for migrating to python3
+
+https://github.com/coderholic/django-cities/issues/184

assets/css/sass/_base.scss

@@ -1,5 +1,6 @@
 // Where assets used in url(...) are
-$staticUrl: '../../' !default;
+//$staticUrl: '../../' !default;
+$staticUrl: '../../';
 
 // Fonts
 @import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:100,400,700);

assets/css/sass/partials/_header.scss

@@ -39,15 +39,15 @@
     position: relative;
 
     img {
-        max-width: 300px;
+        max-width: 700px;
         max-height: 78px;
     }
 }
 
 .instance-header .logo {
-    @media #{$screen-ltmd} {
-        display: none;
-    }
+    //@media #{$screen-ltmd} {
+    //    display: none;
+    //}
 }
 
 .toolbar-wrapper {

assets/css/sass/partials/_layout.scss

@@ -48,7 +48,7 @@ body {
         position: absolute;
         overflow: hidden;
         margin: 0;
-        top: 196px;
+        top: 210px;
         width: 100%;
 
         left: 0;
@@ -219,6 +219,14 @@ body {
     background: $light-gray-color;
     border-radius: 6px;
 
+    // this is from the old bootstrap
+    min-height: 20px;
+    padding: 19px;
+    margin-bottom: 20px;
+    border-radius: 4px;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+
     > :last-child {
         margin-bottom: 0;
     }
@@ -355,4 +363,14 @@ body {
             height: calc(100% - #{$navbar-height});
         }
     }
+
+    // with react, we cannot easily add the above to the DOM,
+    // so we solve that by adding to these elements
+    .header.hide-search {
+        margin-top: -90px;
+    }
+    .content.explore-map.hide-search {
+        margin-top: 9px;
+        height: calc(100% - #{$navbar-height});
+    }
 }

assets/css/sass/partials/_navbar.scss

@@ -39,6 +39,13 @@
             margin-right: 15px;
         }
 
+        &.mr-auto {
+            margin-left: 5px;
+        }
+        &.ml-auto {
+            margin-right: 30px;
+        }
+
         > li {
             margin-left: 20px;
             height: #{$navbar-height - 1px};

assets/css/sass/partials/pages/_addtree.scss

@@ -105,7 +105,7 @@
             }
 
             .add-step-header:before {
-                content: counter(steps) ". ";
+                //content: counter(steps) ". ";
                 counter-increment: steps;
             }
             .add-step-header {
@@ -256,6 +256,10 @@
                     }
                 }
 
+                .photo-success {
+                    background: $primary-color
+                }
+
                 @include checkboxes;
             }
             .add-step-footer {
@@ -315,3 +319,7 @@
          }
      }
  }
+
+.react-datepicker-popper {
+    z-index: 3 !important
+}

assets/css/sass/partials/pages/_map.scss

@@ -302,3 +302,39 @@ $light-to-dark-green: #ffffff 10%,
        }
    }
 }
+
+.leaflet-control-layers:nth-child(2) .leaflet-control-layers-toggle {
+    background-image: url(#{$staticUrl}img/map_layers_icon.png);
+}
+
+// for all our legend information
+.info
+{
+    padding: 6px 8px;
+    font: 13px/16px Verdana, Geneva, sans-serif;
+    background: white;
+    background: rgba(255,255,255,0.8);
+    box-shadow: 0 0 15px rgba(0,0,0,0.2);
+    border-radius: 10px;
+}
+
+.legend {
+    line-height: 19px;
+    padding:7px;
+    color: #555;
+}
+
+.legend i {
+    width: 15px;
+    height: 15px;
+    float: left;
+    margin-right: 8px;
+    opacity: 0.7;
+}
+
+.circle
+{
+    float: left;
+    border: 1px solid #222;
+    border-radius: 50%;
+}

assets/css/sass/partials/pages/_sidebar.scss

@@ -13,6 +13,8 @@
         width: 100%;
         position: static;
         flex: 0 1 auto;
+        // tzinckgraf
+        overflow-y: auto;
     }
 
     > div {

assets/css/sass/partials/pages/_treedetails.scss

@@ -177,9 +177,10 @@
         background: darken($light-gray-color, 5%);
         border-radius: 9px;
 
-        .item {
+        .carousel-item {
             .inspect-photo {
                 display: block;
+                text-align: center;
                 img {
                     width: auto;
                     height: auto;
@@ -192,14 +193,29 @@
                 font-size: 3rem;
                 opacity: 0;
                 position: absolute;
-                right: 0px;
+                right: 25px;
                 top: 0px;
 
             }
             &:hover .delete-photo {
                 display: block;
                 opacity: .9;
             }
+            .photo-label {
+                position: absolute;
+                left: 6px;
+                top: 6px;
+                opacity: 0.85;
+                width: auto;
+                background: black;
+                color: white;
+                border: none;
+                transition: opacity 0.3s;
+                z-index: 999;
+                padding: 5px 12px;
+                font-size: 1.2rem !important;
+                border-radius: 6px;
+            }
         }
     }
     > a.carousel-control {