Merge pull request #44 from piwats/master

Convert menu to horizontal top menu

css/base.css

@@ -3,6 +3,7 @@ body, html {
     padding:0;
     color:#000;
     background:#ffffff;
+    font-family: 'Segoe UI Semilight','Open Sans',Verdana,Arial,Helvetica,sans-serif;
 }
 
 .lightgrey {
@@ -11,14 +12,14 @@ body, html {
 #wrap {
 }
 #menu {
-    width: 10%;
-    float: left;
     border: 1px solid #DDD;
     font-family: 'Segoe UI Semilight','Open Sans',Verdana,Arial,Helvetica,sans-serif;
     font-weight: 300;
     font-size: 14px;
     line-height: 1.3;
+    width: 10%;
 }
+
 #ImportZone {
     height: 0px;
     width: 0px;

css/horizontal-menu.css

@@ -0,0 +1,50 @@
+.menu-title {
+  display: block;
+  float: left;
+  padding: 0;
+  margin: 0;
+}
+
+#menu {
+  border: none;
+}
+
+#menu.horizontal {
+  width: 100%;
+  display: inline-block;
+  margin-bottom: 5px;
+  border-bottom: 1px solid #DDD;
+}
+
+#menu.horizontal ul {
+  padding: 0;
+  margin: 0;
+  float: right;
+}
+
+#menu.horizontal ul li {
+  float: left;
+  margin: 0;
+}
+
+#menu.horizontal ul li a{
+  margin-left: 5px;
+  padding: 6px;
+  color: #FFF;
+  background: #000;
+  border-radius: 8px 8px 0px 0px;
+  display: inline-block;
+}
+
+#menu.horizontal ul li a:hover {
+  background: #1C78DE;
+}
+
+#menu div.jtable-title-text {
+  line-height: inherit !important;
+  color: #1C78DE;
+}
+
+.tables {
+  width: 100% !important;
+}

includes/config.inc.php-dist

@@ -53,3 +53,6 @@ $defaults['defaulttype'] = 'Master';                    # Choose between 'Native
 $defaults['primaryns']   = 'unconfigured.primaryns';    # The value of the first NS-record
 $defaults['secondaryns'] = 'unconfigured.secondaryns';  # The value of the second NS-record
 $defaults['ttl']         = 3600;                        # Default TTL for records
+
+## UI Options
+$menutype = horizontal; # horizontal|vertical - use a horizontal or vertical menu

index.php

@@ -26,6 +26,9 @@ if (!is_logged_in() and isset($_POST['formname']) and $_POST['formname'] === "lo
     <link href="jquery-ui/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
     <link href="jtable/lib/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css"/>
     <link href="css/base.css" rel="stylesheet" type="text/css"/>
+    <?php if ($menutype === horizontal) { ?>
+    <link href="css/horizontal-menu.css" rel="stylesheet" type="text/css"/>
+    <?php } ?>
     <script src="jquery-ui/jquery-1.10.2.js" type="text/javascript"></script>
     <script src="jquery-ui/ui/jquery.ui.core.js" type="text/javascript"></script>
     <script src="jquery-ui/ui/jquery.ui.widget.js" type="text/javascript"></script>
@@ -100,10 +103,10 @@ if ($blocklogin === TRUE) {
 <div id="wrap">
     <div id="dnssecinfo">
     </div>
-    <div id="menu" class="jtable-main-container">
+    <div id="menu" class="jtable-main-container <?php if ($menutype === horizontal) { ?>horizontal<?php } ?>">
-        <div class="jtable-title">
+        <div class="jtable-title menu-title">
             <div class="jtable-title-text">
-                Menu
+                NSEdit!
             </div>
         </div>
         <ul>