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

A few improvements to the admin dashboard
2013-02-09 12:43:49 -08:00 · 2013-02-09 12:43:49 -08:00 · 56de6937e2
parent 43b2971a54 8a6b3c90e2
commit 56de6937e2
5 changed files with 150 additions and 71 deletions
--- a/src/static/css/admin.css
+++ b/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: -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%;
+  background: #eee;
 }

 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;
+  height: 100%;
+  padding: 15px;
+  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;
-  border-radius: 0 0 7px 7px;
-  margin-left:250px;
-  min-width:400px;
-  width:100%;
+  padding-left: 265px;
 }

 #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,34 +109,112 @@ 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;
-  width:100%;  
-  min-height:600px;
+
+#progress img {
+  vertical-align: top;
 }
-#response{
-  display:inline;
+
+.settings {
+  outline: none;
+  width: 100%;
+  min-height: 500px;
+}
+
+#response {
+  display: inline;
 }

 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;
+  }
+}
--- a/src/templates/admin/index.html
+++ b/src/templates/admin/index.html
@ -1,7 +1,8 @@
+<!doctype html> 
 <html>
  <head>
-    <title>Admin Dashboard - Etherpad lite</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Admin Dashboard - Etherpad</title>
+    <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="admin/settings">Settings</a> </li>
-          <li><a href="admin/plugins/info">Troubleshooting information</a> </li>
+          <li><a href="plugins">Plugin manager</a> </li>
+          <li><a href="settings">Settings</a> </li>
+          <li><a href="plugins/info">Troubleshooting information</a> </li>
          <% e.end_block(); %>
        </ul>
      </div>
    </div>
-    <div id="topborder"></div>
  </body>
 </html>
--- a/src/templates/admin/plugins-info.html
+++ b/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>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Plugin information - Etherpad</title>
+    <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>
--- a/src/templates/admin/plugins.html
+++ b/src/templates/admin/plugins.html
@ -1,7 +1,8 @@
+<!doctype html> 
 <html>
  <head>
-    <title>Plugin manager - Etherpad lite</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Plugin manager - Etherpad</title>
+    <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="description"></td>
-              <td class="version"></td>
+            <td class="name" data-label="Name"></td>
+            <td class="description" data-label="Description"></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="description"></td>
-              <td class="version"></td>
+              <td class="name" data-label="Name"></td>
+              <td class="description" data-label="Description"></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>
--- a/src/templates/admin/settings.html
+++ b/src/templates/admin/settings.html
@ -1,7 +1,8 @@
+<!doctype html>
 <html>
  <head>
-    <title>Settings - Etherpad lite</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
+    <title>Settings - Etherpad</title>
+    <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>
-        <a href='https://github.com/ether/etherpad-lite/wiki/Example-Development-Settings.JSON'>Example development settings template</a>
+        <h2>Current configuration</h2>
        <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>