Added instructions for keyboard users

For further information:
https://www.figma.com/file/qkeLtzegvyzE5uXwYrD9GJ/FixMyStreet?node-id=40%3A570

Fixes part of: #3321

templates/web/base/maps/_map_instructions.html

@@ -0,0 +1,18 @@
+<div class="keyboard-intructions-wrapper basic">
+    <div>
+        <div class="keyboard-key-icon zoom-in">Zoom in</div>
+        <div class="keyboard-key-icon zoom-out">Zoom out</div>
+        <div class="keyboard-key-icon left">Left</div>
+        <div class="keyboard-key-icon right">Right</div>
+    </div>
+    <span>You can move around with your keyboard</span>
+</div>
+
+<div class="keyboard-intructions-wrapper advanced">
+    <div>
+        <div class="keyboard-key-icon space">Space bar</div>
+    </div>
+    <span>Place/Remove pin pressing the space bar</span>
+</div>
+
+<div class="keyboard-pin"></div>

templates/web/base/maps/openlayers.html

@@ -79,3 +79,4 @@
 <p class="sub-map-links" id="sub_map_links">
     [% map_sub_links | safe %]
 </p>
+[% INCLUDE 'maps/_map_instructions.html' %]

web/cobrands/sass/_base.scss

@@ -2007,6 +2007,85 @@ html.js #map .noscript {
   @include svg-background-image("/cobrands/fixmystreet/images/map-tools");
 }
 
+// Map instructions for keyboard
+.keyboard-intructions-wrapper {
+  display:flex;
+  position: absolute;
+  padding: 10px 25px;
+  padding-top: 14px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  bottom: 35px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  span {
+    display: inline-block;
+    margin-left: 20px;
+    font-weight: 600;
+  }
+
+  &.basic {
+    opacity: 0;
+  }
+
+  @media only screen and (max-width:48em) {
+    display: none;
+  }
+}
+
+.keyboard-key-icon {
+  display: inline-block;
+  border-radius: 4px;
+  width: 30px;
+  height: 0;
+  padding-top: 22px;
+  overflow: hidden;
+  background-color: #ECEBEB;
+  box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
+  background-repeat: no-repeat;
+  background-position: center;
+
+  &.zoom-in {
+    background-image: url("data:image/svg+xml,%3Csvg fill='none' height='14' viewBox='0 0 13 14' width='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23222'%3E%3Crect height='13' rx='.3' width='3.25' x='4.875' y='.5'/%3E%3Crect height='13' rx='.3' transform='matrix(0 -1 1 0 -8.625 8.625)' width='3.25' y='8.625'/%3E%3C/g%3E%3C/svg%3E");
+    background-size: 13px;
+  }
+  &.zoom-out {
+    background-image: url("data:image/svg+xml,%3Csvg fill='none' height='4' viewBox='0 0 15 4' width='15' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%23222' height='14' rx='.3' transform='matrix(0 -1 1 0 -3.25 4.25)' width='3.5' x='.5' y='3.75'/%3E%3C/svg%3E");
+    background-size: auto 4px;
+  }
+  &.left {
+    background-image: url("data:image/svg+xml,%3Csvg fill='none' height='12' viewBox='0 0 17 12' width='17' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m1.72512 6.39261c-.25385-.20019-.25385-.58503 0-.78522l5.76151-4.54354c.03279-.02586.08096-.00251.08096.03926v3.74304h8.20511v2.3077h-8.20511v3.74305c0 .0418-.04817.0651-.08096.0393z' fill='%23222' stroke='%23222' stroke-linecap='round' stroke-width='2'/%3E%3C/svg%3E");
+    background-size: 14px auto;
+  }
+  &.right {
+    background-image: url("data:image/svg+xml,%3Csvg fill='none' height='12' viewBox='0 0 17 12' width='17' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15.2749 5.60739c.2538.20019.2538.58503 0 .78522l-5.76153 4.54359c-.03279.0258-.08096.0025-.08096-.0393v-3.74305h-8.20513v-2.3077h8.20513v-3.74304c0-.04177.04817-.06512.08096-.03926z' fill='%23222' stroke='%23222' stroke-linecap='round' stroke-width='2'/%3E%3C/svg%3E");
+    background-size: 14px auto;
+  }
+  &.space {
+    @include svg-background-image("/cobrands/fixmystreet/images/space-key");
+    background-size: 38px 15px;
+    width: 54px;
+  }
+}
+
+.keyboard-pin {
+  @include svg-background-image("/cobrands/fixmystreet/images/pin-keyboard");
+  background-size: contain;
+  background-repeat: no-repeat;
+  width: 108px;
+  height: 90px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  opacity: 90%;
+  @media only screen and (max-width:48em) {
+    display: none;
+  }
+}
+
 // Generic component for presenting a semi-transparent black toolbar
 // at the bottom of the window on map pages. When the window is wide
 // enough, the toolbar docks to the right edge of the screen.