Merge pull request #1480 from 0ip/admin-ui

A few improvements to the admin dashboard

src/static/css/admin.css

@@ -1,66 +1,59 @@
+html, body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   color: #333;
   font: 14px helvetica, sans-serif;
-  background: #ddd;
+  background: #eee;
-  background: -webkit-radial-gradient(circle,#aaa,#eee 60%) center fixed;
-  background: -moz-radial-gradient(circle,#aaa,#eee 60%) center fixed;
-  background: -ms-radial-gradient(circle,#aaa,#eee 60%) center fixed;
-  background: -o-radial-gradient(circle,#aaa,#eee 60%) center fixed;
-}
-
-#topborder {
-     border-top: 8px solid rgba(51, 51, 51, 0.8);
-     position: fixed;
-     top: 0px;
-     width: 100%;
 }
 
 div.menu {
-   background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.75);
-   box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.3);
-   display: block;
-   float: left;
   height: 100%;
   padding: 15px;
-   position: fixed;
   width: 220px;
+  border-right: 1px solid #ccc;
+  position: fixed;
+}
+
+div.menu ul {
+  padding: 0;
 }
 
 div.menu li {
   list-style: none;
   margin-left: 3px;
-  line-height: 1.6
+  line-height: 3;
+  border-top: 1px solid #ccc;
+}
+
+div.menu li:last-child {
+  border-bottom: 1px solid #ccc;
 }
 
 div.innerwrapper {
-  display: block;
-  float: right;
-  opacity: 0.9;
   padding: 15px;
-  max-width: 860px;
+  padding-left: 265px;
-  border-radius: 0 0 7px 7px;
-  margin-left:250px;
-  min-width:400px;
-  width:100%;
 }
 
 #wrapper {
   background: none repeat scroll 0px 0px #FFFFFF;
-  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
   margin: auto;
   max-width: 1150px;
   min-height: 100%;
-  overflow: auto;
-  padding-left: 15px;
-  opacity: .9;
 }
+
 h1 {
   font-size: 29px;
 }
+
 h2 {
   font-size: 24px;
 }
+
 .separator {
   margin: 10px 0;
   height: 1px;
@@ -70,37 +63,45 @@ h2 {
   background: -ms-linear-gradient(left, #fff, #aaa 20%, #aaa 80%, #fff);
   background: -o-linear-gradient(left, #fff, #aaa 20%, #aaa 80%, #fff);
 }
+
 form {
   margin-bottom: 0;
 }
+
 #inner {
   width: 300px;
   margin: 0 auto;
 }
+
 input {
   font-weight: bold;
   font-size: 15px;
 }
+
 input[type="button"] {
   padding: 4px 6px;
   margin: 0;
 }
+
 table input[type="button"] {
   float: right;
   width: 100px;
 }
+
 input[type="text"] {
   border-radius: 3px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   padding: 10px;
-  *padding: 0; /* IE7 hack */
+  *padding: 0;
+ /* IE7 hack */
   width: 100%;
   outline: none;
   border: 1px solid #ddd;
   margin: 0 0 5px 0;
   max-width: 500px;
 }
+
 table {
   border: 1px solid #ddd;
   border-radius: 3px;
@@ -108,24 +109,34 @@ table {
   width: 100%;
   margin: 20px 0;
 }
+
 table thead tr {
   background: #eee;
 }
+
 td, th {
   padding: 5px;
 }
+
 .template {
   display: none;
 }
+
 #progress {
   position: absolute;
   bottom: 50px;
 }
-.settings {
+
-  margin-top:10px;
+#progress img {
-  width:100%;  
+  vertical-align: top;
-  min-height:600px;
 }
+
+.settings {
+  outline: none;
+  width: 100%;
+  min-height: 500px;
+}
+
 #response {
   display: inline;
 }
@@ -133,9 +144,77 @@ td, th {
 a:link, a:visited, a:hover, a:focus {
   color: #333333;
   text-decoration: none;
-  border-bottom: #333333 1px dotted;
 }
 
 a:focus, a:hover {
   border-bottom: #333333 1px solid;
 }
+
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+@media (max-width: 720px) {
+  div.innerwrapper {
+    padding: 0 15px 15px 15px;
+  }
+
+  div.menu {
+    padding: 1px 15px 0 15px;
+    position: static;
+    height: auto;
+    border-right: none;
+    width: auto;
+  }
+
+  table {
+    border: none;
+  }
+
+  table, thead, tbody, td, tr {
+    display: block;
+  }
+
+  thead tr {
+    display: none;
+  }
+
+  tr {
+    border: 1px solid #ccc;
+    margin-bottom: 5px;
+    border-radius: 3px;
+  }
+
+  td {
+    border: none;
+    border-bottom: 1px solid #eee;
+    position: relative;
+    padding-left: 50%;
+    white-space: normal;
+    text-align: left;
+  }
+
+  td.name {
+    word-wrap: break-word;
+  }
+
+  td:before {
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    text-align: left;
+    padding-right: 10px;
+    white-space: nowrap;
+    font-weight: bold;
+    content: attr(data-label);
+  }
+
+  td:last-child {
+    border-bottom: none;
+  }
+
+  table input[type="button"] {
+    float: none;
+  }
+}

src/templates/admin/index.html

@@ -1,7 +1,8 @@
+<!doctype html> 
 <html>
   <head>
-    <title>Admin Dashboard - Etherpad lite</title>
+    <title>Admin Dashboard - Etherpad</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="../static/css/admin.css">
     <script src="../static/js/jquery.js"></script>
     <script src="../socket.io/socket.io.js"></script>
@@ -9,16 +10,15 @@
   <body>
     <div id="wrapper">
       <div class="menu">
-        <h1>Etherpad lite</h1>
+        <h1>Etherpad</h1>
         <ul>
         <% e.begin_block("adminMenu");  %>
-          <li><a href="admin/plugins">Plugin manager</a> </li>
+          <li><a href="plugins">Plugin manager</a> </li>
-          <li><a href="admin/settings">Settings</a> </li>
+          <li><a href="settings">Settings</a> </li>
-          <li><a href="admin/plugins/info">Troubleshooting information</a> </li>
+          <li><a href="plugins/info">Troubleshooting information</a> </li>
           <% e.end_block(); %>
         </ul>
       </div>
     </div>
-    <div id="topborder"></div>
   </body>
 </html>

src/templates/admin/plugins-info.html

@@ -1,17 +1,17 @@
 <%
   var plugins = require("ep_etherpad-lite/static/js/pluginfw/plugins");
 %>
-
+<!doctype html> 
 <html>
   <head>
-    <title>Plugin information - Etherpad lite</title>
+    <title>Plugin information - Etherpad</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="../../static/css/admin.css">
   </head>
   <body>
     <div id="wrapper">
       <div class="menu">
-        <h1>Etherpad lite</h1> 
+        <h1>Etherpad</h1> 
         <ul>
           <% e.begin_block("adminMenu"); %>
           <li><a href="../plugins">Plugin manager</a> </li>
@@ -38,6 +38,5 @@
         
       </div>
     </div>
-    <div id="topborder"></div>
   </body>
 </html>

src/templates/admin/plugins.html

@@ -1,7 +1,8 @@
+<!doctype html> 
 <html>
   <head>
-    <title>Plugin manager - Etherpad lite</title>
+    <title>Plugin manager - Etherpad</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="../static/css/admin.css">
     <script src="../static/js/jquery.js"></script>
     <script src="../socket.io/socket.io.js"></script>
@@ -19,7 +20,7 @@
       <% } %>
 
        <div class="menu">
-        <h1>Etherpad lite</h1>
+        <h1>Etherpad</h1>
         <ul> 
           <% e.begin_block("adminMenu"); %>
           <li><a href="plugins">Plugin manager</a> </li>
@@ -27,7 +28,7 @@
           <li><a href="plugins/info">Troubleshooting information</a> </li>
           <% e.end_block(); %>
         </ul>
-        <div id="progress"><img src="../static/img/loading.gif" alt=""/>&nbsp;&nbsp;<span class="message"></span></div>
+        <div id="progress"><img src="../static/img/loading.gif">&nbsp;&nbsp;<span class="message"></span></div>
       </div>
 
       <div class="innerwrapper">
@@ -43,9 +44,9 @@
         </thead>
         <tbody class="template">
           <tr id="installed-plugin-template">
-            <td class="name"></td>
+            <td class="name" data-label="Name"></td>
-            <td class="description"></td>
+            <td class="description" data-label="Description"></td>
-              <td class="version"></td>
+            <td class="version" data-label="Version"></td>
             <td class="actions">
               <input type="button" value="Uninstall" class="do-uninstall">
             </td>
@@ -74,9 +75,9 @@
           </thead>
           <tbody class="template">
             <tr>
-              <td class="name"></td>
+              <td class="name" data-label="Name"></td>
-              <td class="description"></td>
+              <td class="description" data-label="Description"></td>
-              <td class="version"></td>
+              <td class="version" data-label="Version"></td>
               <td class="actions">
                 <input type="button" value="Install" class="do-install">
              </td>
@@ -92,6 +93,5 @@
       
       </div>
     </div>
-    <div id="topborder"></div>
   </body>
 </html>

src/templates/admin/settings.html

@@ -1,7 +1,8 @@
+<!doctype html>
 <html>
   <head>
-    <title>Settings - Etherpad lite</title>
+    <title>Settings - Etherpad</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="../static/css/admin.css">
     <script src="../static/js/jquery.js"></script>
     <script src="../socket.io/socket.io.js"></script>
@@ -23,7 +24,7 @@
 
 
       <div class="menu">
-        <h1>Etherpad lite</h1> 
+        <h1>Etherpad</h1> 
         <ul>
           <% e.begin_block("adminMenu"); %>
           <li><a href="plugins">Plugin manager</a> </li>
@@ -34,15 +35,15 @@
       </div>
 
       <div class="innerwrapper">
-        <a href='https://github.com/ether/etherpad-lite/wiki/Example-Production-Settings.JSON'>Example production settings template</a>
+        <h2>Current configuration</h2>
-        <a href='https://github.com/ether/etherpad-lite/wiki/Example-Development-Settings.JSON'>Example development settings template</a>
         <textarea class="settings"></textarea>
         <input type="button" class="settingsButton" id="saveSettings" value="Save Settings">
         <input type="button" class="settingsButton" id="restartEtherpad" value="Restart Etherpad">
         <div id="response"></div>
+        <div class="separator"></div>
+        <a href='https://github.com/ether/etherpad-lite/wiki/Example-Production-Settings.JSON'>Example production settings template</a>
+        <a href='https://github.com/ether/etherpad-lite/wiki/Example-Development-Settings.JSON'>Example development settings template</a>
       </div>
     </div>
-    
-    <div id="topborder"></div>
   </body>
 </html>