Redesign body of the pages. Now they have a distiguished panel heading and panel body. Also added background colour to currently selected section.

1 files changed, 95 insertions, 86 deletions

diff --git a/modules/extra/webcpanel/templates/default/memoserv/memos.html b/modules/extra/webcpanel/templates/default/memoserv/memos.html
index dc82846c6..b3b54d948 100644
--- a/modules/extra/webcpanel/templates/default/memoserv/memos.html
+++ b/modules/extra/webcpanel/templates/default/memoserv/memos.html
@@ -1,103 +1,112 @@
 {INCLUDE header.html}
-		{FOR M IN MESSAGES}
-		<div class="alert alert-info">
-			{M}<br>
-		</div>
-		{END FOR}
+		<div class="panel-heading">Memos List</div>
+		<div class="panel-body">
+			{FOR M IN MESSAGES}
+			<div class="alert alert-info">
+				{M}<br>
+			</div>
+			{END FOR}
 
-		{IF EXISTS NUMBER}
-			<script>
-				$("#tableInfoMemos").ready(function() \{
-					$(".reply").click(function(e) \{
-						e.preventDefault();
-						var recv = $(this).attr('href');
-						$("#receiver").val(recv);
-						$("#message").focus();
+			{IF EXISTS NUMBER}
+				<script>
+					$("#tableInfoMemos").ready(function() \{
+						$(".reply").click(function(e) \{
+							e.preventDefault();
+							var recv = $(this).attr('href');
+							$("#receiver").val(recv);
+							$("#message").focus();
+						\});
 					\});
-				\});
-			</script>
+				</script>
 
-			<script>
-				$(function () \{
-					$('.table tbody tr td abbr').popover();
-				\});
-			</script>
+				<script>
+					$(function () \{
+						$('.table tbody tr td abbr').popover();
+					\});
+				</script>
 
-			<h2>Memos List</h2>
-			<table id="tableInfoMemos" class="table table-hover">
-				<thead>
-					<th>Number</th>
-					<th>Sender</th>
-					<th>Message <small>(hover: Time)</small></th>
-					<th></th>
-				</thead>
-				<tbody>
-				{FOR I,S,T,TXT,U IN NUMBER,SENDER,TIME,TEXT,UNREAD}
-					{IF EQ U YES}
-					<tr class="read">
-					{ELSE}
-					<tr class="unread">
-					{END IF}
-						<td>{I}</td>
-						<td>{S}</td>
-						<td><abbr data-container="body" data-trigger="hover" data-placement="top" data-content="{T}">{TXT}</abbr></td>
-						<td style="text-align: right;" nowrap="nowrap">
+				<table id="tableInfoMemos" class="table table-hover">
+					<thead>
+						<th>Number</th>
+						<th>Sender</th>
+						<th>Message <small>(hover: Time)</small></th>
+						<th></th>
+					</thead>
+					<tbody>
+					{FOR I,S,T,TXT,U IN NUMBER,SENDER,TIME,TEXT,UNREAD}
 						{IF EQ U YES}
-							<a class="label label-success reply" href="{S}" id="memo{I}">Reply</a>
-							<a class="label label-warning" href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&read=1">Mark as Read</a>
-							<a class="label label-danger" href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&del=1">Delete</a>
+						<tr class="read">
 						{ELSE}
-							<a class="label label-success reply" href="{S}" id="memo{I}">Reply</a>
-							<a class="label label-warning" href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&read=2">Mark as Unread</a>
-							<a class="label label-danger" href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&del=1">Delete</a>
+						<tr class="unread">
 						{END IF}
-						</td>
-					</tr>
-				{END FOR}
-				</tbody>
-			</table>
-		{ELSE}
-			<em>No memos to show.</em>
-		{END IF}
+							<td>{I}</td>
+							<td>{S}</td>
+							<td><abbr data-container="body" data-trigger="hover" data-placement="top" data-content="{T}">{TXT}</abbr></td>
+							<td style="text-align: right;" nowrap="nowrap">
+							{IF EQ U YES}
+								<a class="label label-success reply" href="{S}" id="memo{I}">Reply</a>
+								<a class="label label-warning" href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&read=1">Mark as Read</a>
+								<a class="label label-danger" href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&del=1">Delete</a>
+							{ELSE}
+								<a class="label label-success reply" href="{S}" id="memo{I}">Reply</a>
+								<a class="label label-warning" href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&read=2">Mark as Unread</a>
+								<a class="label label-danger" href="/memoserv/memos?channel={ESCAPED_CHANNEL_NAME}&number={I}&del=1">Delete</a>
+							{END IF}
+							</td>
+						</tr>
+					{END FOR}
+					</tbody>
+				</table>
+			{ELSE}
+				<em>No memos to show.</em>
+			{END IF}
 
-		<hr>
+			<hr>
 
-		<div class="row">
-			<div class="col-lg-5">
-				<h4>Memos for channel</h4>
-				<ul>
-				{FOR CH,ECH IN CHANNEL_NAMES,ESCAPED_CHANNEL_NAMES}
-					<li><a href="/memoserv/memos?channel={ECH}" class="channel">{CH}</a></li>
-				{END FOR}
-				</ul>
-			</div>
-			<div class="col-lg-7">
-				<h4>Send a new Memo</h4>
-				<form class="form-horizontal" method="post" action="/memoserv/memos?channel={ESCAPED_CHANNEL}">
-					<div class="form-group">
-						<label class="control-label col-lg-2" for="receiver">Receiver:</label>
-						<div class="col-lg-10">
-							<input class="form-control" type="text" name="receiver" id="receiver" placeholder="Nick or Channel" value="">
-						</div>
+			<div class="row">
+				<div class="col-lg-5">
+					<h4>Memos for channel</h4>
+					{IF EXISTS CHANNEL_NAMES}
+					<div>
+						<ul id="channelList">
+						{FOR CH,ECH IN CHANNEL_NAMES,ESCAPED_CHANNEL_NAMES}
+							<li><a href="/memoserv/memos?channel={ECH}">{CH}</a></li>
+						{END FOR}
+						</ul>
 					</div>
-					<div class="form-group">
-						<label class="control-label col-lg-2" for="message">Message:</label>
-						<div class="col-lg-10">
-							<input class="form-control" type="text" name="message" id="message" placeholder="Your message here">
+					{ELSE}
+					<em>You don't have access in any channel</em><br>
+					{END IF}
+
+				</div>
+				<div class="col-lg-7">
+					<h4>Send a new Memo</h4>
+					<form class="form-horizontal" method="post" action="/memoserv/memos?channel={ESCAPED_CHANNEL}">
+						<div class="form-group">
+							<label class="control-label col-lg-2" for="receiver">Receiver:</label>
+							<div class="col-lg-10">
+								<input class="form-control" type="text" name="receiver" id="receiver" placeholder="Nick or Channel" value="">
+							</div>
 						</div>
-					</div>
-					<div class="form-group">
-						<div class="col-lg-offset-2 col-lg-10">
-							<button type="submit" class="btn btn-primary">Send</button>
+						<div class="form-group">
+							<label class="control-label col-lg-2" for="message">Message:</label>
+							<div class="col-lg-10">
+								<input class="form-control" type="text" name="message" id="message" placeholder="Your message here">
+							</div>
 						</div>
-					</div>
-				</form>
+						<div class="form-group">
+							<div class="col-lg-offset-2 col-lg-10">
+								<button type="submit" class="btn btn-primary">Send</button>
+							</div>
+						</div>
+					</form>
+				</div>
 			</div>
-		</div>
 
-		{IF EXISTS CMDR}
-		<div class="alert alert-info">
-			{CMDR}
+			{IF EXISTS CMDR}
+			<div class="alert alert-info">
+				{CMDR}
+			</div>
+			{END IF}
 		</div>
-		{END IF}
 {INCLUDE footer.html}