examples: change view source button style

Author: mgermerie

examples/css/example.css

@@ -75,8 +75,28 @@ body {
 
 #view-source {
     position: fixed;
-    right: 10px;
+    right: 25px;
     bottom: 10px;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    box-sizing: border-box;
+
+    border: 1px solid #222222;
+    border-radius: 7px;
+    background-color: #313336bb;
+
+    background-image: url('../images/code-logo.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 90%;
+}
+
+#view-source:hover {
+    cursor: pointer;
+}
+#view-source:active {
+    background-color: #222222;
 }
 
 /* NAVIGATION (LEFT) */

examples/images/code-logo.svg

@@ -11,7 +11,7 @@
 
 <div id="main">
     <iframe id="content" class="scroll-section" frameborder="0" height="100%"></iframe>
-    <div id="view-source" class="text"></div>
+    <button id="view-source" class="text" title="View source"></button>
 </div>
 
 <nav class="scroll-section">
@@ -50,10 +50,10 @@
         iframe.src = url.replace('index.html', '');
         iframe.focus();
 
-        var viewSrc = '<a href="https://github.com/iTowns/itowns/blob/master/examples/';
-        viewSrc += window.location.hash.substr(1) || 'view_3d_map';
-        viewSrc += '.html" target="_blank">View source</a>';
-        document.getElementById('view-source').innerHTML = viewSrc;
+        let viewSrc = `https://github.com/iTowns/itowns/blob/master/examples/${
+            window.location.hash.substr(1) || 'view_3d_map'
+        }.html`;
+        document.getElementById('view-source').onclick = () => { window.open(viewSrc); };
     }
 
     function initNavigation(list) {

examples/index.html

@@ -77,7 +77,7 @@
             // Add a scale :
             const scale = new itowns_widgets.Scale(view, {
                 position: 'bottom-right',
-                translate: { x: -120 },
+                translate: { x: -70 },
             });
 
             // request redraw

examples/misc_orthographic_camera.html

@@ -128,7 +128,7 @@
             // Add a scale :
             const scale = new itowns_widgets.Scale(view, {
                 position: 'bottom-right',
-                translate: { x: -120 },
+                translate: { x: -70 },
             });
 
             // Request redraw

examples/view_25d_map.html

@@ -70,7 +70,7 @@
             // Add a scale :
             const scale = new itowns_widgets.Scale(view, {
                 position: 'bottom-right',
-                translate: { x: -120 },
+                translate: { x: -70 },
             });
 
             // Request redraw

examples/view_2d_map.html

@@ -79,7 +79,7 @@
             // ---------- ADD SOME WIDGETS : ----------
 
             // ADD A SCALE :
-            const scale = new itowns_widgets.Scale(view, { position: 'bottom-right', translate: { x: -120 } });
+            const scale = new itowns_widgets.Scale(view, { position: 'bottom-right', translate: { x: -80 } });
 
             // ADD A MINIMAP :
             const minimap = new itowns_widgets.Minimap(

examples/view_3d_map.html

@@ -80,7 +80,7 @@
 
             const scale = new itowns_widgets.Scale(view, {
                 position: 'bottom-right',
-                translate: { x: -120 },
+                translate: { x: -70 },
             });