[fix] CSS & appearance cosmetics

This commit is contained in:
Alban Crommer 2020-05-22 21:44:10 +00:00 committed by Alban Crommer
parent da12db27ac
commit dfb442c58b
3 changed files with 49 additions and 6 deletions

View File

@ -23,3 +23,27 @@
color: #003e80;
padding: 3px 8px;
}
.log .actions{
display:none;
}
.log div.col-2 p {
margin: 2px 0px 6px;
text-overflow: ellipsis;
overflow: hidden;
}
.log p.author {
font-size: .875rem;
}
.log p.server {
font-weight: bold;
}
.log a.actions-toggle.btn-link.btn-sm {
margin: 0;
padding: 0;
color: #007bff;
cursor: pointer;
}
.log pre {
font-size: 1.0rem;
color: #333;
}

View File

@ -31,6 +31,10 @@ var cmdRegex = /```([^`]*?)```/g
cmd = function(string) {
return ''+string.replace(cmdRegex, '<span class="cmd">$1</span>');
}
date = function(date){
var D = new Date(date);
return D.toLocaleDateString()+" "+D.toLocaleTimeString();
}
function updatePage(data){
var content = "";
@ -46,11 +50,24 @@ function updatePage(data){
id = v._id;
content += `
<div class="log row-fluid">
<div class="span9">
<p><a href="/log/${id}">${escape(item.created_at)} -- ${escape(item.author)} -- ${escape(item.server)}</a></p>
<div class="log row">
<div class="col-2 text-right">
<a href="/log/${id}">
${date(escape(item.created_at))} <br/>
</a>
<div class="d-none d-lg-block">
<p class="server"> ${escape(item.server)} </p>
<p class="author"> ${escape(item.author)} </p>
<a class="actions-toggle btn-link btn-sm">Actions</a>
</div>
<div class="actions btn-group btn-group-sm" role="group" aria-label="log actions">
<a class="destroy btn btn btn-outline-secondary" href="/destroy/${id}">Remove</a>
<a class="edit btn btn btn-outline-secondary" href="/edit/${id}">Edit</a>
</div>
</div>
<div class="col-lg">
<pre> ${cmd(title(url(escape(item.content))))}</pre>
</span>
</div>
</div>
`;
});
@ -79,3 +96,6 @@ $("input").on("keyup",function(e){
});
updatePage( initData );
$(".actions-toggle").on("click",(e) => { var el=e.target; $(el).next().show(); $(el).hide(); } )

View File

@ -17,13 +17,12 @@ html(lang="en")
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 my-lg-2">
input.form-control.mr-sm-2(type='search', name='q', value='',aria-label="Search",placeholder='Search')
</form>
</div>
</nav>
#content.container-fluid
#content.container-sm
hr