Restore overwritten plugin manager UI

This commit is contained in:
0ip 2012-04-19 17:00:29 +02:00
parent fc6e5177a9
commit ef88d2798e
2 changed files with 209 additions and 222 deletions

View file

@ -1,138 +1,123 @@
body { body {
margin: 0; margin: 0;
height: 100%; height: 100%;
color: #333; color: #333;
font: 14px helvetica, sans-serif; font: 14px helvetica, sans-serif;
background: #ddd; background: #ddd;
background: -webkit-radial-gradient(circle,#aaa,#eee 60%) center fixed; background: -webkit-radial-gradient(circle,#aaa,#eee 60%) center fixed;
background: -moz-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: -ms-radial-gradient(circle,#aaa,#eee 60%) center fixed;
background: -o-radial-gradient(circle,#aaa,#eee 60%) center fixed; background: -o-radial-gradient(circle,#aaa,#eee 60%) center fixed;
border-top: 8px solid rgba(51,51,51,.8); border-top: 8px solid rgba(51,51,51,.8);
} }
#wrapper { #wrapper {
border-top: 1px solid #999; margin-top: 160px;
margin-top: 160px; padding: 15px;
padding: 15px; background: #fff;
background: #eee; opacity: .9;
background: -webkit-linear-gradient(#fff,#ccc); box-shadow: 0px 1px 8px rgba(0,0,0,0.3);
background: -moz-linear-gradient(#fff,#ccc); max-width: 700px;
background: -ms-linear-gradient(#fff,#ccc); margin: auto;
background: -o-linear-gradient(#fff,#ccc); border-radius: 0 0 7px 7px;
opacity: .9; }
box-shadow: 0px 1px 8px rgba(0,0,0,0.3); h1 {
max-width: 1200px; font-size: 29px;
margin: auto; }
} h2 {
#inner { font-size: 24px;
width: 300px; }
margin: 0 auto; .seperator {
} margin: 10px 0;
#button:hover { height: 1px;
cursor: pointer; background: #aaa;
background: #666; background: -webkit-linear-gradient(left, #fff, #aaa 20%, #aaa 80%, #fff);
background: -webkit-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); background: -moz-linear-gradient(left, #fff, #aaa 20%, #aaa 80%, #fff);
background: -moz-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); background: -ms-linear-gradient(left, #fff, #aaa 20%, #aaa 80%, #fff);
background: -ms-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); background: -o-linear-gradient(left, #fff, #aaa 20%, #aaa 80%, #fff);
background: -o-linear-gradient(#707070,#666666 50%,#5B5B5B 51%,#474747); }
} form {
#button:active { margin-bottom: 0;
box-shadow: inset 0 1px 12px rgba(0,0,0,0.9); }
background: #444; #inner {
} width: 300px;
#label { margin: 0 auto;
text-align: left; }
text-shadow: 0 1px 1px #fff; input {
margin: 16px auto 0; font-weight: bold;
} font-size: 15px;
form { }
border: 1px solid #bbb; input[type="button"] {
border-radius: 3px; padding: 4px 6px;
position: relative; margin: 0;
} }
button, input { input[type="button"].do-install, input[type="button"].do-uninstall {
font-weight: bold; float: right;
font-size: 15px; width: 100px;
} }
input[type="button"] { input[type="button"]#do-search {
height:30px; display: block;
} }
input[type="text"] { input[type="text"] {
border-radius: 3px; border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
padding: 10px 45px 10px 10px; padding: 10px;
*padding: 0; /* IE7 hack */ *padding: 0; /* IE7 hack */
width: 100%; width: 100%;
outline: none; outline: none;
border: none; border: 1px solid #ddd;
} margin: 0 0 5px 0;
button{ max-width: 500px;
display:block; }
} table {
@media only screen and (min-device-width: 320px) and (max-device-width: 720px) { border: 1px solid #ddd;
body { border-radius: 3px;
background: #bbb; border-spacing: 0;
background: -webkit-linear-gradient(#aaa,#eee 60%) center fixed; width: 100%;
background: -moz-linear-gradient(#aaa,#eee 60%) center fixed; margin: 20px 0;
background: -ms-linear-gradient(#aaa,#eee 60%) center fixed; }
} table thead tr {
#wrapper { background: #eee;
margin-top: 0; }
} td, th {
#inner { padding: 5px;
width: 95%; }
} .template {
#label { display: none;
text-align: center; }
} .dialog {
} display: none;
position: absolute;
table { left: 50%;
border-collapse: collapse; top: 50%;
} width: 700px;
td, th { height: 500px;
border: 1px solid black; margin-left: -350px;
padding-left: 10px; margin-top: -250px;
padding-right: 10px; border: 3px solid #999;
padding-top: 2px; background: #eee;
padding-bottom: 2px; }
} .dialog .title {
.template { margin: 0;
display: none; padding: 2px;
} border-bottom: 3px solid #999;
.dialog { font-size: 24px;
display: none; line-height: 24px;
position: absolute; height: 24px;
left: 50%; overflow: hidden;
top: 50%; }
width: 700px; .dialog .title .close {
height: 500px; float: right;
margin-left: -350px; padding: 1px 10px;
margin-top: -250px; }
border: 3px solid #999999; .dialog .history {
background: #eeeeee; background: #222;
} color: #eee;
.dialog .title { position: absolute;
margin: 0; top: 41px;
padding: 2px; bottom: 10px;
border-bottom: 3px solid #999999; left: 10px;
font-size: 24px; right: 10px;
line-height: 24px; padding: 2px;
height: 24px; overflow: auto;
overflow: hidden; }
}
.dialog .title .close {
float: right;
}
.dialog .history {
background: #222222;
color: #eeeeee;
position: absolute;
top: 41px;
bottom: 10px;
left: 10px;
right: 10px;
padding: 2px;
overflow: auto;
}

View file

@ -1,84 +1,86 @@
<html> <html>
<head> <head>
<title>Plugin manager</title> <title>Plugin manager</title>
<link href="../../static/css/admin.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="../../static/css/admin.css">
<script src="../../static/js/jquery.js"></script> <script src="../../static/js/jquery.js"></script>
<script src="../../socket.io/socket.io.js"></script> <script src="../../socket.io/socket.io.js"></script>
<script src="../../static/js/admin/plugins.js"></script> <script src="../../static/js/admin/plugins.js"></script>
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<% if (errors.length) { %> <% if (errors.length) { %>
<div class="errors"> <div class="errors">
<% errors.forEach(function (item) { %> <% errors.forEach(function (item) { %>
<div class="error"><%= item.toString() %></div> <div class="error"><%= item.toString() %></div>
<% }) %> <% }) %>
</div> </div>
<% } %> <% } %>
<h1>Installed plugins</h1> <h1>Etherpad Lite</h1>
<table> <div class="seperator"></div>
<thead> <h2>Installed plugins</h2>
<tr> <table>
<th>Name</th> <thead>
<th>Description</th> <tr>
<td></td> <th>Name</th>
</tr> <th>Description</th>
</thead> <td></td>
<tbody class="template"> </tr>
<tr id="installed-plugin-template"> </thead>
<td class="name"></td> <tbody class="template">
<td class="description"></td> <tr id="installed-plugin-template">
<td class="actions"> <td class="name"></td>
<input type="button" value="Uninstall" class="do-uninstall"> <td class="description"></td>
</td> <td class="actions">
</tr> <input type="button" value="Uninstall" class="do-uninstall">
</tbody> </td>
<tbody id="installed-plugins"> </tr>
</tbody> </tbody>
</table> <tbody id="installed-plugins">
</tbody>
<div class="paged listing search-results"> </table>
<h1>Search for plugins to install</h1>
<form> <div class="paged listing search-results">
<input type="text" name="search" value="" id="search-query"> <div class="seperator"></div>
<input type="button" value="Search" id="do-search"> <h2>Search for plugins to install</h2>
</form> <form>
<table> <input type="text" name="search" placeholder="Search term" id="search-query">
<thead> <input type="button" value="Search" id="do-search">
<tr> </form>
<th>Name</th> <table>
<th>Description</th> <thead>
<td></td> <tr>
</tr> <th>Name</th>
</thead> <th>Description</th>
<tbody class="template"> <td></td>
<tr> </tr>
<td class="name"></td> </thead>
<td class="description"></td> <tbody class="template">
<td class="actions"> <tr>
<input type="button" value="Install" class="do-install"> <td class="name"></td>
</td> <td class="description"></td>
</tr> <td class="actions">
</tbody> <input type="button" value="Install" class="do-install">
<tbody class="results"> </td>
</tbody> </tr>
</table> </tbody>
<input type="button" value="<<" class="do-prev-page"> <tbody class="results">
<span class="offset"></span>..<span class="limit"></span> of <span class="total"></span>. </tbody>
<input type="button" value=">>" class="do-next-page"> </table>
</div> <input type="button" value="<<" class="do-prev-page">
<span class="offset"></span>..<span class="limit"></span> of <span class="total"></span>.
<input type="button" value=">>" class="do-next-page">
<div id="progress" class="dialog"> </div>
<h1 class="title">
Please wait: <span class="message"></span> <div id="progress" class="dialog">
<input type="button" class="close" value="Close"> <h1 class="title">
</h1> Please wait: <span class="message"></span>
<div class="history"></div> <input type="button" class="close" value="Close">
</div> </h1>
</div> <div class="history"></div>
</body> </div>
</html> </div>
</body>
</html>