[fix] rework the appearance

This commit is contained in:
Alban Crommer 2020-05-23 12:58:35 +00:00 committed by Alban Crommer
parent dfb442c58b
commit 8ecf1dfb7c
2 changed files with 36 additions and 34 deletions

View File

@ -9,12 +9,6 @@
border-top: 1px solid #eee;
padding-top: 6px;
}
.log h4 {
white-space: pre;
font-family: monospace;
}
.log p {
color: #666;
}
@ -23,27 +17,33 @@
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;
}
.log .meta a {
color: #666;
font-size: .875rem;
}
.log .meta p {
font-size: .875rem;
line-height:1em;
margin: 0px;
overflow: hidden;
text-overflow: ellipsis;
}
.log .meta p.server {
color:#333;
}
.log .meta .actions-toggle {
margin: 0;
padding: 0;
color: #666;
cursor: pointer;
line-height:1em;
}
.log .meta .actions{
display:none;
}

View File

@ -51,20 +51,22 @@ function updatePage(data){
content += `
<div class="log row">
<div class="col-2 text-right">
<div class="meta col-lg-2 text-right">
<p class="server"> ${escape(item.server)} </p>
<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>
<p>
<a class="actions-toggle btn-link btn-sm">Actions</a>
</div>
</p>
<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>
<div class="col-lg">
<pre> ${cmd(title(url(escape(item.content))))}</pre>
</div>
@ -97,5 +99,5 @@ $("input").on("keyup",function(e){
updatePage( initData );
$(".actions-toggle").on("click",(e) => { var el=e.target; $(el).next().show(); $(el).hide(); } )
$(".actions-toggle").on("click",(e) => { var el=e.target; $(el).parent().siblings('.actions').show(); $(el).hide(); } )