1 files changed, 89 insertions, 17 deletions

diff --git a/www/css/fms.css b/www/css/fms.css
index aa93acc..d800619 100644
--- a/www/css/fms.css
+++ b/www/css/fms.css
@@ -160,38 +160,37 @@
         background-color: rgba(0,0,0,0);
     }
 
-/* ios 7 tweaks to deal with different status bar behaviour */
-    .ios7 .ui-mobile-viewport {
+/* ios tweaks to deal with different status bar behaviour */
+    .ios .ui-mobile-viewport {
         background-color: none;
         background-image: none;
     }
 
-    .ios7 .ui-bar-a,
-    body.ios7 {
+    .ios .ui-bar-a,
+    body.ios {
         background-color: #F6BE41;
         background-image: none;
     }
 
-    .ios7 .ui-bar-a {
+    .ios .ui-bar-a {
         border-color: #F6BE41;
     }
 
-    .ios7 .ui-header-fixed .ui-btn-left,
-    .ios7 .ui-header-fixed .ui-btn-right {
+    .ios .ui-header-fixed .ui-btn-left,
+    .ios .ui-header-fixed .ui-btn-right {
         top: 4px;
     }
 
-    .ios7 #map_box {
-        top: 20px;
+    .ios #map_box {
         background-color: #534741;
         background-image: url('../images/mapbg.png');
     }
 
-    .ios7 #around-page #locating {
-        bottom: -22px;
+    .ios #around-page #locating {
+        bottom: -2px;
     }
 
-    .ios7 #map_box .olLayerDiv div {
+    .ios #map_box .olLayerDiv div {
         display: block !important;
     }
 
@@ -210,7 +209,7 @@
     #drafts,
     div[data-role='content'] {
         position: relative;
-        margin: 20px 10px;
+        margin: 10px 10px 20px 10px;
         background-color: rgba(255, 255, 255, 0.9);
     }
 
@@ -401,6 +400,10 @@
         text-align: center;
     }
 
+    #offline textarea {
+        min-height: 0;
+    }
+
 /* home screen */
 
     #front-page div[data-role='content'] {
@@ -424,6 +427,9 @@
         -webkit-filter: blur(3px);
         opacity: 0.9;
     }
+    #map_box.background-map .olControlAttribution{
+        display: none;
+    }
 
     #map{
         opacity: 0.85;
@@ -592,19 +598,31 @@
 
     }
 
-    #relocate {
-        display: block;
+    #relocate, #hidepins {
+        display: inline-block;
         height: 30px;
         width: 30px;
         padding: 5px;
         margin: 0px;
         background-color: rgba(248,248,248,0.9);
+    }
+
+    #relocate {
         background-image: url(../images/location@x2.png);
         background-repeat: no-repeat;
         background-position: center center;
         background-size: 50%;
     }
 
+    #hidepins {
+        background-image: url(../images/hide-pins-link.png);
+        background-image: url(../images/hide-pins-link.svg);
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 80%;
+        margin-left: .3em;
+    }
+
     #pc {
         padding-left: 0.2em;
         border-left: 1px solid #F6BE41;
@@ -726,11 +744,29 @@
     div.photo {
         position: relative;
         display: inline-block;
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: top center;
+        width: 100%;
+        margin: 0 0 1em 0;
+        -webkit-box-flex: 1;
+        flex: 1;
+    }
+
+    div.photo:nth-child(3) {
+        margin-bottom: 0;
     }
 
     div.photo-wrapper {
         margin: auto;
         text-align: center;
+        display: -webkit-box;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+                flex-direction: column;
+        -webkit-box-align: center;
+                align-items: center;
     }
 
     img.small {
@@ -744,9 +780,9 @@
         width: 270px;
     }
 
-    #id_del_photo_button.photo-corner-button {
+    .del_photo_button.photo-corner-button {
         position: absolute;
-        bottom: -15px;
+        top: -15px;
         right: 0px;
         -webkit-border-radius: 50%;
         border-radius: 50%;
@@ -758,6 +794,12 @@
         font-size: 30px;
     }
 
+    /* On the offline page the UI is ordered differently, so we want
+      to stop the button overlapping the 'add another photo' butto' */
+    #offline .del_photo_button.photo-corner-button {
+        top: 0;
+    }
+
     @media only screen and (max-width: 800px) and (min-width: 600px) {
         img.placeholder {
             height: 398px;
@@ -814,6 +856,11 @@
     }
     #category_meta {
         margin: 0px 15px 15px 15px;
+        padding: 1em 0;
+    }
+
+    #category_meta h2 {
+        line-height: 1em;
     }
 
     #category_meta h4 {
@@ -931,3 +978,28 @@
         top: 5px;
         right: 5px;
     }
+
+    .ui-content.hidden {
+        visibility: hidden;
+    }
+
+/* iPhone X has an 'unsafe' area occupied by the home
+indicator at the bottom of screen, which we need to stop UI controls
+clashing with. */
+body.iphone-x {
+    /* iOS 11–11.1 use constant(), 11.2 uses env() - assign whatever one is valid
+       to a CSS variable as this makes things simpler (e.g. with calc()) */
+    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+}
+
+/* The OpenLayers attribution control */
+body.iphone-x .olControlAttribution {
+    padding-bottom: var(--safe-area-inset-bottom);
+}
+
+/* The "new report here" button  */
+body.iphone-x .map-bottom-btn {
+    /* Can't use env() inside calc(), so assign value to a CSS variable instead */
+    bottom: calc(20px + var(--safe-area-inset-bottom));
+}