Fix hamburger icon & improve sharing button

More to come to the sharing button

Closes compiler-explorer#836

Author: AbrilRBS

static/explorer.css

@@ -11,15 +11,14 @@
     visibility: visible;
 }
 
-.navbar {
+.navbar-default {
+    border: none;
     border-radius: 0;
-    margin-bottom: 2px;
-    height: 50px; /* needed to override the darkly settings */
+    margin-bottom: 1px;
 }
 
 .navbar-brand {
-    padding-top: 0px;
-    padding-bottom: 0px;
+    padding: 0;
     position: relative;
     width: 185px;
 }
@@ -40,14 +39,6 @@
     display: block;
 }
 
-#lang-dropdown {
-    min-width: 5em;
-}
-
-.navbar-inverse .navbar-brand {
-    font-weight: bold;
-}
-
 .nav.nav-tabs {
     margin-bottom: 3px !important;
 }

static/themes/dark-theme.css

@@ -4,26 +4,10 @@ body {
     background-color: #333 !important;
 }
 
-.navbar-inverse {
+.navbar-default {
     background-color: #333 !important;
 }
 
-.navbar-inverse .navbar-brand {
-    color: #aaa !important;
-}
-
-.navbar .navbar-toggle {
-    background-color: #3e3e3e !important;
-}
-
-.navbar .navbar-toggle .icon-bar {
-    background-color: #f2f2f2 !important;
-}
-
-.nav.navbar-nav.navbar-left li:hover {
-    color: #ccc !important;
-}
-
 .navbar-brand img.inverse {
     display: block !important;
 }

static/themes/default-theme.css

@@ -1,19 +1,23 @@
 @import url("~golden-layout/src/css/goldenlayout-light-theme.css");
 
-.navbar-inverse {
-    background-color: #226;
+body {
+    background-color: #FFFFFF;
 }
 
-.navbar-inverse .navbar-brand {
-    color: #ddd;
+.navbar-default {
+    background-color: #FFFFFF;
 }
 
-.navbar .navbar-toggle {
-    background-color: #f2f2f2;
+.navbar-default .navbar-nav li a {
+    color: #337ab7;
+}
+
+.navbar-default .navbar-nav li a:hover {
+    color: #23527c;
 }
 
-.navbar .navbar-toggle .icon-bar {
-    background-color: black;
+.navbar-default ul.nav li:hover {
+    background-color: #eee;
 }
 
 .float-link {

views/index.pug

@@ -4,7 +4,7 @@ html(lang="en")
     include monaco.pug
     include head.pug
   body(class=extraBodyClass)
-    .navbar
+    .navbar-default
       .container-fluid
         .navbar-header
           a.navbar-brand(href="#" title="Compiler Explorer")
@@ -63,30 +63,4 @@ html(lang="en")
 
     include templates.pug
 
-    .gl_keep.template
-      .urls
-        .input-group.urls-container
-          .input-group-btn
-            .btn-group.btn-group-sm
-              button.btn.btn-sm.dropdown-toggle(
-              data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false")
-                span.current Short
-                span.caret
-              ul.dropdown-menu.sources
-                if gapiKey
-                  li: a(href="#" data-bind="Short") Short
-                li: a(href="#" data-bind="Full") Full
-                li: a(href="#" data-bind="Embed") Embed
-                li: a(href="#" data-bind="Embed (RO)") Embed (read only)
-          input.form-control.input-sm.permalink(
-          type="text" placeholder="Loading" readonly size="1024")
-          span.input-group-btn
-            button.btn.btn-sm.clippy(
-            type="button" data-clipboard-target=".popover .permalink"
-            title="Copy to clipboard")
-              img.clippy(
-              src = require("clippy.svg") width="13px"
-              alt="Copy to clipboard")
-      .lang
-
     include popups.pug

views/templates.pug

@@ -1,4 +1,27 @@
 .gl_keep.template
+  .urls
+    .input-group.urls-container
+      .input-group-btn
+        .btn-group.btn-group-sm
+          button.btn.btn-sm.dropdown-toggle(
+          data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false")
+            span.current Short
+            span.caret
+          ul.dropdown-menu.sources
+            if gapiKey
+              li: a(href="#" data-bind="Short") Short
+            li: a(href="#" data-bind="Full") Full
+            li: a(href="#" data-bind="Embed") Embed
+            li: a(href="#" data-bind="Embed (RO)") Embed (read only)
+      input.form-control.input-sm.permalink(
+      type="text" placeholder="Loading" readonly size="1024")
+      span.input-group-btn
+        button.btn.btn-sm.clippy(
+        type="button" data-clipboard-target=".popover .permalink"
+        title="Copy to clipboard")
+          img.clippy(
+          src = require("clippy.svg") width="13px"
+          alt="Copy to clipboard")
   #codeEditor
     .top-bar.btn-toolbar(role="toolbar")
       include font-size.pug