ACP header and all admin pages BS3'd

v1.18.x
psychobunny 12 years ago
parent 7636e09284
commit c9387313e2

@ -13,41 +13,29 @@
} }
.admin-categories { .admin-categories {
margin-top: 20px;
form { form {
margin: 0 0 0px; margin: 0 0 0px;
} }
input { input, select {
height: 20px;
padding: 5px;
margin-left: 10px;
width: 150px; width: 150px;
border: 0;
border-radius: 5px;
margin-top: -8px;
} }
.category_description { .category_description {
width: 300px; width: 300px;
} }
select {
border: 0;
margin-left: 10px;
padding: 5px;
margin-top: -8px;
}
button {
margin-top: -7px;
}
.icon{ .icon{
width: 30px; width: 30px;
height: 30px; height: 30px;
text-align: center; text-align: center;
line-height: 35px; line-height: 40px;
display: inline-block; display: inline-block;
margin: 0 5px 0 5px;
i {
vertical-align: -20%;
}
} }
} }
@ -119,7 +107,7 @@
.icon-container { .icon-container {
.row { .row {
margin: 0; margin: 0;
.span3 { .col-md-3 {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin: 1px; margin: 1px;

@ -7,4 +7,6 @@
@import "header"; @import "header";
@import "account"; @import "account";
@import "search"; @import "search";
@import "unread"; @import "unread";
@import "admin";
@import "users";

@ -18,7 +18,7 @@ var nodebb_admin = (function(nodebb_admin) {
'<div>' + '<div>' +
'<div class="pull-right">' + '<div class="pull-right">' +
'<button class="btn btn-primary" data-action="use">Use</button> ' + '<button class="btn btn-primary" data-action="use">Use</button> ' +
'<button class="btn" data-action="preview">Preview</button>' + '<button class="btn btn-default" data-action="preview">Preview</button>' +
'</div>' + '</div>' +
'<h4>' + theme.name + '</h4>' + '<h4>' + theme.name + '</h4>' +
'<p>' + theme.description + '</p>' + '<p>' + theme.description + '</p>' +
@ -29,11 +29,11 @@ var nodebb_admin = (function(nodebb_admin) {
themeContainer.innerHTML = ''; themeContainer.innerHTML = '';
themeContainer.appendChild(themeFrag); themeContainer.appendChild(themeFrag);
} }
nodebb_admin.themes = themes; nodebb_admin.themes = themes;
return nodebb_admin; return nodebb_admin;
}(nodebb_admin || {})); }(nodebb_admin || {}));

@ -18,23 +18,22 @@
<div class="icon"> <div class="icon">
<i data-name="icon" value="{categories.icon}" class="{categories.icon} icon-2x"></i> <i data-name="icon" value="{categories.icon}" class="{categories.icon} icon-2x"></i>
</div> </div>
<input placeholder="Category Name" data-name="name" value="{categories.name}" class="category_name input-medium"></input> <input placeholder="Category Name" data-name="name" value="{categories.name}" class="form-control category_name"></input>
<select class="blockclass input-medium" data-name="blockclass" data-value="{categories.blockclass}"> <select class="form-control blockclass" data-name="blockclass" data-value="{categories.blockclass}">
<option value="category-purple">category-purple</option> <option value="category-purple">category-purple</option>
<option value="category-darkblue">category-darkblue</option> <option value="category-darkblue">category-darkblue</option>
<option value="category-blue">category-blue</option> <option value="category-blue">category-blue</option>
<option value="category-darkgreen">category-darkgreen</option> <option value="category-darkgreen">category-darkgreen</option>
<option value="category-orange">category-orange</option> <option value="category-orange">category-orange</option>
</select> </select>
<input data-name="description" placeholder="Category Description" value="{categories.description}" class="category_description input-medium description"></input> <input data-name="description" placeholder="Category Description" value="{categories.description}" class="form-control category_description description"></input>
<button type="submit" class="btn" data-disabled="{categories.disabled}">Disable</button> <button type="submit" class="btn btn-default" data-disabled="{categories.disabled}">Disable</button>
</form> </form>
</li> </li>
<!-- END categories --> <!-- END categories -->
<button class="btn btn-lg btn-primary" id="save">Save</button>
</ul> </ul>
<button class="btn btn-lg btn-primary" id="save">Save</button>
</div> </div>
<div id="icons" style="display:none;"><div class="icon-container"><div class="row"> <div id="icons" style="display:none;"><div class="icon-container"><div class="row">

@ -2,15 +2,15 @@
<hr /> <hr />
<form> <form>
<div class="alert alert-notify"> <div class="alert alert-warning">
<p> <p>
Create a <strong>Facebook Application</strong> via the Create a <strong>Facebook Application</strong> via the
<a href="https://developers.facebook.com/">Facebook Developers Page</a> and <a href="https://developers.facebook.com/">Facebook Developers Page</a> and
then paste your application details here. then paste your application details here.
</p> </p>
<br /> <br />
<input type="text" data-field="social:facebook:app_id" title="Application ID" class="input-medium" placeholder="App ID"><br /> <input type="text" data-field="social:facebook:app_id" title="Application ID" class="form-control input-lg" placeholder="App ID"><br />
<input type="text" data-field="social:facebook:secret" title="Application Secret" class="input-large" placeholder="App Secret"><br /> <input type="text" data-field="social:facebook:secret" title="Application Secret" class="form-control input-md" placeholder="App Secret"><br />
</div> </div>
</form> </form>

@ -2,15 +2,15 @@
<hr /> <hr />
<form> <form>
<div class="alert alert-notify"> <div class="alert alert-warning">
<p> <p>
Create a <strong>Google Application</strong> via the Create a <strong>Google Application</strong> via the
<a href="https://code.google.com/apis/console/">API Console</a> and then paste <a href="https://code.google.com/apis/console/">API Console</a> and then paste
your application details here. your application details here.
</p> </p>
<br /> <br />
<input type="text" data-field="social:google:id" title="Client ID" class="input-xxlarge" placeholder="Client ID"><br /> <input type="text" data-field="social:google:id" title="Client ID" class="form-control input-lg" placeholder="Client ID"><br />
<input type="text" data-field="social:google:secret" title="Client Secret" class="input-large" placeholder="Client Secret"><br /> <input type="text" data-field="social:google:secret" title="Client Secret" class="form-control" placeholder="Client Secret"><br />
</div> </div>
</form> </form>

@ -29,36 +29,36 @@
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="{relative_path}/src/utils.js"></script> <script src="{relative_path}/src/utils.js"></script>
<link rel="stylesheet" type="text/css" href="{relative_path}/css/style.css" /> <link rel="stylesheet" type="text/css" href="{relative_path}/css/nodebb.css" />
<link rel="stylesheet" type="text/css" href="{relative_path}/css/admin.css" /> <link rel="stylesheet" type="text/css" href="{relative_path}/css/admin.css" />
</head> </head>
<body class="admin"> <body class="admin">
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner"> <div class="container">
<div class="container"> <div class="navbar-header">
<a class="brand" href="/admin/index">NodeBB ACP</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<button type="button" class="btn navbar-btn" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<div class="nav-collapse collapse"> <a class="navbar-brand" href="/admin/index">NodeBB ACP</a>
<ul class="nav"> </div>
<li> <div class="collapse navbar-collapse">
<a href="/" target="_blank"><i class="icon-book"></i> Forum</a> <ul class="nav navbar-nav">
</li> <li>
<li> <a href="/" target="_blank"><i class="icon-book"></i> Forum</a>
<a href="/admin/index"><i class="icon-home"></i> Home</a> </li>
</li> <li>
<li> <a href="/admin/index"><i class="icon-home"></i> Home</a>
<a href="/admin/settings"><i class="icon-cogs"></i> Settings</a> </li>
</li> <li>
</ul> <a href="/admin/settings"><i class="icon-cogs"></i> Settings</a>
<ul class="nav pull-right" id="right-menu"> </li>
<li><a href="/users" id="user_label"></a></li> </ul>
</ul> <ul class="nav pull-right" id="right-menu">
</div> <li><a href="/users" id="user_label"></a></li>
</ul>
</div> </div>
</div> </div>
</div> </div>

@ -1,7 +1,7 @@
<h1>MOTD</h1> <h1>MOTD</h1>
<hr />
<div class="alert motd"> <div class="alert alert-warning motd">
<p> <p>
The <strong>Message of the Day</strong> (MOTD) is typically a message shown to users when they first log into a forum or chat room. The <strong>Message of the Day</strong> (MOTD) is typically a message shown to users when they first log into a forum or chat room.
In NodeBB, the MOTD is present at the top of the forum homepage, and can be customized much like a header. In NodeBB, the MOTD is present at the top of the forum homepage, and can be customized much like a header.
@ -9,9 +9,15 @@
<p> <p>
You can enter either full HTML or Markdown text. You can enter either full HTML or Markdown text.
</p> </p>
<textarea placeholder="Welcome to NodeBB!" data-field="motd" rows="10"></textarea> <br />
<textarea class="form-control" placeholder="Welcome to NodeBB!" data-field="motd" rows="10"></textarea>
<br />
<form class="form-inline"> <form class="form-inline">
<label class="checkbox" for="show_motd"><input type="checkbox" id="show_motd" data-field="show_motd" /> Show the Message of the Day</label> <div class="checkbox">
<label for="show_motd">
<input type="checkbox" id="show_motd" data-field="show_motd" /> Show the Message of the Day
</label>
</div>
</form> </form>
</div> </div>

@ -2,61 +2,61 @@
<hr /> <hr />
<h3>General Settings</h3> <h3>General Settings</h3>
<div class="alert"> <div class="alert alert-warning">
<form> <form>
<label>Site Title</label> <label>Site Title</label>
<input type="text" placeholder="Your Community Name" data-field="title" /> <input class="form-control" type="text" placeholder="Your Community Name" data-field="title" /><br />
<label>Site Description</label> <label>Site Description</label>
<input type="text" class="input-xxlarge" placeholder="A short description about your community" data-field="description" /> <input type="text" class="form-control" placeholder="A short description about your community" data-field="description" /><br />
<label>Imgur Client ID</label> <label>Imgur Client ID</label>
<input type="text" class="input-xxlarge" placeholder="Imgur ClientID for image uploads" data-field="imgurClientID" /> <input type="text" class="form-control" placeholder="Imgur ClientID for image uploads" data-field="imgurClientID" />
</form> </form>
</div> </div>
<form> <form>
<h3>Privilege Thresholds</h3> <h3>Privilege Thresholds</h3>
<div class="alert alert-notify"> <div class="alert alert-warning">
<p>Use <strong>privilege thresholds</strong> to manage how much reputation a user must gain to receive moderator access.</p><br /> <p>Use <strong>privilege thresholds</strong> to manage how much reputation a user must gain to receive moderator access.</p><br />
<strong>Manage Thread</strong><br /> <input type="text" class="" value="1000"><br /> <strong>Manage Thread</strong><br /> <input type="text" class="form-control" value="1000"><br />
<strong>Moderate Users</strong><br /> <input type="text" class="" value="10000"><br /> <strong>Moderate Users</strong><br /> <input type="text" class="form-control" value="10000"><br />
<strong>Create Pinned Topics</strong><br /> <input type="text" class="" value="100000"><br /> <strong>Create Pinned Topics</strong><br /> <input type="text" class="form-control" value="100000"><br />
</div> </div>
</form> </form>
<form> <form>
<h3>Email Settings</h3> <h3>Email Settings</h3>
<div class="alert alert-notify"> <div class="alert alert-warning">
<div> <div>
<p> <p>
<strong>Email Address</strong><br /> <strong>Email Address</strong><br />
The following email address refers to the email that the recipient will see in the "From" and "Reply To" fields. The following email address refers to the email that the recipient will see in the "From" and "Reply To" fields.
</p> </p>
<input type="text" class="input-large" data-field="email:from" placeholder="info@example.org" /> <input type="text" class="form-control input-lg" data-field="email:from" placeholder="info@example.org" /><br />
</div> </div>
<div> <div>
<p> <p>
<strong>SMTP Server Host</strong><br /> <strong>SMTP Server Host</strong><br />
(Default: <em>127.0.0.1</em>) (Default: <em>127.0.0.1</em>)
</p> </p>
<input type="text" class="input-medium" data-field="email:smtp:host" placeholder="127.0.0.1" /> <input type="text" class="form-control input-md" data-field="email:smtp:host" placeholder="127.0.0.1" /><br />
</div> </div>
<div> <div>
<p> <p>
<strong>SMTP Server Port</strong> <strong>SMTP Server Port</strong>
</p> </p>
<input type="text" class="input-mini" data-field="email:smtp:port" placeholder="25" /> <input type="text" class="form-control input-md" data-field="email:smtp:port" placeholder="25" /><br />
</div> </div>
</div> </div>
</form> </form>
<form> <form>
<h3>Post Settings</h3> <h3>Post Settings</h3>
<div class="alert alert-notify"> <div class="alert alert-warning">
<strong>Post Delay</strong><br /> <input type="text" class="" value="10000" data-field="postDelay"><br /> <strong>Post Delay</strong><br /> <input type="text" class="form-control" value="10000" data-field="postDelay"><br />
<strong>Minimum Title Length</strong><br /> <input type="text" class="" value="3" data-field="minimumTitleLength"><br /> <strong>Minimum Title Length</strong><br /> <input type="text" class="form-control" value="3" data-field="minimumTitleLength"><br />
<strong>Minimum Post Length</strong><br /> <input type="text" class="" value="8" data-field="minimumPostLength"><br /> <strong>Minimum Post Length</strong><br /> <input type="text" class="form-control" value="8" data-field="minimumPostLength"><br />
</div> </div>
</form> </form>

@ -2,15 +2,15 @@
<hr /> <hr />
<form> <form>
<div class="alert alert-notify"> <div class="alert alert-warning">
<p> <p>
Create a <strong>Twitter Application</strong> via the Create a <strong>Twitter Application</strong> via the
<a href="https://dev.twitter.com/">Twitter Developers Page</a> and then <a href="https://dev.twitter.com/">Twitter Developers Page</a> and then
paste your application details here. paste your application details here.
</p> </p>
<br /> <br />
<input type="text" data-field="social:twitter:key" title="Consumer Key" class="input-large" placeholder="Consumer Key"><br /> <input type="text" data-field="social:twitter:key" title="Consumer Key" class="form-control input-lg" placeholder="Consumer Key"><br />
<input type="text" data-field="social:twitter:secret" title="Consumer Secret" class="input-xlarge" placeholder="Consumer Secret"> <input type="text" data-field="social:twitter:secret" title="Consumer Secret" class="form-control input-md" placeholder="Consumer Secret">
</div> </div>
</form> </form>

@ -7,9 +7,9 @@
<li class=''><a href='/admin/users/search'>Search</a></li> <li class=''><a href='/admin/users/search'>Search</a></li>
</ul> </ul>
<br />
<div class="search {search_display} well"> <div class="search {search_display} well">
<input id="search-user" type="text" placeholder="Enter a username to search"/><br /> <input class="form-control" id="search-user" type="text" placeholder="Enter a username to search"/><br />
<i class="icon-spinner icon-spin none"></i> <i class="icon-spinner icon-spin none"></i>
<span id="user-notfound-notify" class="label label-danger hide">User not found!</span><br/> <span id="user-notfound-notify" class="label label-danger hide">User not found!</span><br/>
</div> </div>

Loading…
Cancel
Save