nakarte

commit 46e58bf6a1e687e5d68eca0a56993a5fa7404aec
parent 60d9dcdbbc341eef33ba4da6dc0851051c94f378
Author: Sergej Orlov <wladimirych@gmail.com>
Date:   Sat, 25 Mar 2017 00:48:35 +0300

[azimuth] replaced icon buttons with text (need cleanup)

Diffstat:
M
src/lib/leaflet.control.azimuth/control.html
 | 
14
++++++++++----
M
src/lib/leaflet.control.azimuth/style.css
 | 
57
++++++++++++++++++++++++++++++++++++++++++++-------------

2 files changed, 54 insertions(+), 17 deletions(-)
diff --git a/src/lib/leaflet.control.azimuth/control.html b/src/lib/leaflet.control.azimuth/control.html
@@ -1,4 +1,5 @@
 <div class="contents">
+    <div class="button-minimize" data-bind="click: onMinimizeButonClick"></div>
     <table>
         <tr>
             <td>True azimuth</td>
@@ -14,8 +15,13 @@
                 distance() > 2000 ? (distance() / 1000).toFixed(2) + ' km' : Math.round(distance()) + ' m'"></td>
         </tr>
     </table>
-    <a class="image-button icon-elevation" title="Display elevation porofile"
-       data-bind="click: onProfileButtonClick"></a>
-    <a class="image-button icon-arrow-left" title="Hide"
-       data-bind="click: onMinimizeButonClick"></a>
+
+    <div class="buttons">
+        <div class="button" data-bind="click: onReverseButtonClick">Reverse</div>
+        <div class="button" data-bind="click: onProfileButtonClick">Elevation / Sightline</div>
+    </div>
+    <!--<a class="image-button icon-elevation" title="Display elevation porofile"-->
+       <!--data-bind="click: onProfileButtonClick"></a>-->
+    <!--<a class="image-button icon-arrow-left" title="Hide"-->
+       <!--data-bind="click: onMinimizeButonClick"></a>-->
 </div>
 \ No newline at end of file
diff --git a/src/lib/leaflet.control.azimuth/style.css b/src/lib/leaflet.control.azimuth/style.css
@@ -20,14 +20,19 @@
     background-image: none;
     width: auto;
     height: auto;
-    padding: 4px 8px;
+    padding: 6px 6px;
     overflow: hidden;
 }
 
+.leaflet-control-azimuth .button-minimize {
+    float: left;
+}
+
 .leaflet-control-azimuth table{
     border-collapse: collapse;
     line-height: 16px;
     float: left;
+    margin-left: 4px;
 }
 
 .leaflet-control-azimuth td:last-child {
@@ -35,25 +40,51 @@
     text-align: center;
 }
 
-.icon-elevation {
-    background-image: url('elevation.png');
-    background-size: 30px;
+.leaflet-control-azimuth .buttons {
+    float: left;
+    margin-left: 8px;
 }
 
-.icon-arrow-left {
-    background-image: url('1490240499_Arrow_Back.svg');
-    background-size: 16px;
+.leaflet-control-azimuth .button {
+    height: 18px;
+    border-radius: 4px 4px 4px 4px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    padding: 0 8px;
+    line-height: 18px;
+    font-weight: bold;
+    color: #555;
+    text-align: center;
 }
 
+.leaflet-control-azimuth .button:hover {
+    background-color: #f4f4f4;
+}
 
-.leaflet-control-azimuth .image-button {
-    float: left;
-    margin-left: 6px;
-    vertical-align: middle;
-    top: 12px;
-    position: relative;
+.leaflet-control-azimuth .button:first-child {
+    margin-top: 2px;
+    margin-bottom: 8px;
 }
 
+/*.icon-elevation {*/
+    /*background-image: url('elevation.png');*/
+    /*background-size: 30px;*/
+/*}*/
+
+/*.icon-arrow-left {*/
+    /*background-image: url('1490240499_Arrow_Back.svg');*/
+    /*background-size: 16px;*/
+/*}*/
+
+
+/*.leaflet-control-azimuth .image-button {*/
+    /*float: left;*/
+    /*margin-left: 6px;*/
+    /*vertical-align: middle;*/
+    /*top: 12px;*/
+    /*position: relative;*/
+/*}*/
+
 .azimuth-control-active {
     cursor: crosshair;
 }