add list of loaded local photos

css/60_photos.css

@@ -471,3 +471,98 @@ label.streetside-hires {
         color: #fff;
     }
 }
+
+/* local georeferenced photos */
+.local-photos {
+    display: flex;
+}
+.local-photos > div {
+    width: 50%;
+}
+.local-photos > div:first-child {
+    margin-right: 20px;
+}
+
+.preview-local-photos {
+    max-height: 40vh;
+    overflow-y: scroll;
+    overflow-x: auto;
+    /* workaround for something like "overflow-x: visible"
+       see https://stackoverflow.com/a/39554003 */
+    margin-left: -100px;
+    padding-left: 100px;
+}
+.preview-local-photos::-webkit-scrollbar {
+    border-left: none;
+}
+.preview-local-photos li {
+    list-style: none;
+    display: flex;
+    justify-content: space-between;
+    height: 30px;
+}
+.preview-local-photos span.filename {
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 30px;
+    padding-left: 8px;
+    border-bottom: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    border-right: 1px solid #ccc;
+}
+.preview-local-photos li:first-child span.filename {
+    border-top: 1px solid #ccc;
+    border-top-left-radius: 4px;
+}
+.preview-local-photos li:first-child button {
+    border-top: 1px solid #ccc;
+}
+.preview-local-photos li:first-child button.remove {
+    border-top-right-radius: 4px;
+}
+.preview-local-photos li:last-child span.filename {
+    border-bottom-left-radius: 4px;
+}
+.preview-local-photos li:last-child button.remove {
+    border-bottom-right-radius: 4px;
+}
+.preview-local-photos li.invalid span.filename {
+    color: #ccc;
+}
+/*.preview-local-photos li.invalid span.filename::before {
+    content: "! ";
+    color: red;
+}*/
+.preview-local-photos li.invalid button.zoom-to-data {
+    display: none;
+}
+.preview-local-photos li button.no-geolocation {
+    display: none;
+}
+.preview-local-photos li.invalid button.no-geolocation {
+    display: block;
+}
+.preview-local-photos .placeholder div {
+    display: block;
+    height: 40px;
+    width: 40px;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-image: url(img/loader-black.gif);
+    filter: invert(1);
+}
+.local-photos label.button {
+    background: #7092ff;
+    color: #fff;
+    font-weight: bold;
+    padding: 10px 25px;
+    text-align: center;
+    font-size: 12px;
+    display: inline-block;
+    border-radius: 4px;
+    cursor: pointer;
+}

css/80_app.css

@@ -5650,7 +5650,7 @@ li.hide + li.version .badge .tooltip .popover-arrow {
 /* Scrollbars
  ----------------------------------------------------- */
 ::-webkit-scrollbar {
-    height: 20px;
+    height: 10px;
     overflow: visible;
     width: 10px;
     border-left: 1px solid #DDD;
@@ -5677,6 +5677,9 @@ li.hide + li.version .badge .tooltip .popover-arrow {
         background-color: rgba(0,0,0,.05);
     }
 }
+body {
+    scrollbar-width: 10px;
+}
 
 
 /* Intro walkthrough