Theme improvements: move thumbnails to the right and reduce margins overall
* Reduce multiple margins (markdown, space between block, etc.) * Move thumbnails to the right in the same line as the title * Move edit button as floating to the left * Move fold/collapse and checkbox buttons as floating to the right * Add a bunch of HTML ID in the linklist template Relates to #877
This commit is contained in:
ArthurHoaro
parent
0926d26390
commit
94c1756562
3 changed files with 114 additions and 59 deletions
|
|
@ -433,7 +433,7 @@ body, .pure-g [class*="pure-u"] {
|
|||
* 64em -> lg
|
||||
*/
|
||||
.linklist-filters {
|
||||
margin: 10px 0;
|
||||
margin: 5px 0;
|
||||
color: #252525;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
|
@ -454,7 +454,7 @@ body, .pure-g [class*="pure-u"] {
|
|||
}
|
||||
|
||||
.linklist-pages {
|
||||
margin: 10px 0;
|
||||
margin: 5px 0;
|
||||
color: #252525;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -469,7 +469,7 @@ body, .pure-g [class*="pure-u"] {
|
|||
}
|
||||
|
||||
.linksperpage {
|
||||
margin: 10px 0;
|
||||
margin: 5px 0;
|
||||
text-align: right;
|
||||
color: #252525;
|
||||
font-size: 0.9em;
|
||||
|
|
@ -506,9 +506,29 @@ body, .pure-g [class*="pure-u"] {
|
|||
* CONTENT - LINKLIST ITEMS
|
||||
*/
|
||||
.linklist-item {
|
||||
margin: 0 0 15px 0;
|
||||
margin: 0 0 10px 0;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 2px 2px 0.5em #797979;
|
||||
box-shadow: 1px 1px 3px #797979;
|
||||
}
|
||||
|
||||
.linklist-item-buttons {
|
||||
background: transparent;
|
||||
position: relative;
|
||||
width: 23px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.linklist-item-buttons-right {
|
||||
float: right;
|
||||
margin-right: -25px;
|
||||
}
|
||||
|
||||
.linklist-item-buttons * {
|
||||
display: block;
|
||||
float: left;
|
||||
width:100%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.linklist-item-title, .linklist-item-title h2 {
|
||||
|
|
@ -526,7 +546,7 @@ body, .pure-g [class*="pure-u"] {
|
|||
line-height: 30px;
|
||||
}
|
||||
|
||||
.linklist-item-title a {
|
||||
.linklist-item-title h2 a {
|
||||
font-size: 0.7em;
|
||||
color: #252525;
|
||||
text-decoration: none;
|
||||
|
|
@ -538,11 +558,11 @@ body, .pure-g [class*="pure-u"] {
|
|||
color: #1b926c;
|
||||
}
|
||||
|
||||
.linklist-item-title a:visited .linklist-link {
|
||||
.linklist-item-title h2 a:visited .linklist-link {
|
||||
color: #2a4c41;
|
||||
}
|
||||
|
||||
.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{
|
||||
.linklist-item-title h2 a:hover, .linklist-item-title .linklist-link:hover{
|
||||
color: #252525;
|
||||
}
|
||||
|
||||
|
|
@ -554,8 +574,9 @@ body, .pure-g [class*="pure-u"] {
|
|||
color: #F89406;
|
||||
}
|
||||
|
||||
.linklist-item-title .fold-button {
|
||||
.fold-button {
|
||||
display: none;
|
||||
color: #252525;
|
||||
}
|
||||
|
||||
.linklist-item-editbuttons {
|
||||
|
|
@ -585,24 +606,12 @@ body, .pure-g [class*="pure-u"] {
|
|||
|
||||
.linklist-item-description {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding: 0 10px;
|
||||
word-wrap: break-word;
|
||||
color: #252525;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
{
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 0;
|
||||
display: block;
|
||||
content:"";
|
||||
background: #F89406;
|
||||
height: 95%;
|
||||
width: 2px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.linklist-item-description a {
|
||||
text-decoration: none;
|
||||
color: #1b926c;
|
||||
|
|
@ -618,32 +627,36 @@ body, .pure-g [class*="pure-u"] {
|
|||
|
||||
.linklist-item-thumbnail {
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
float: left;
|
||||
padding: 0 0 0 5px;
|
||||
margin: 0;
|
||||
float: right;
|
||||
z-index: 50;
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
.linklist-item.private .linklist-item-title::before,
|
||||
.linklist-item.private .linklist-item-description::before,
|
||||
.linklist-item.private .linklist-item-thumbnail::before {
|
||||
.linklist-item.private .linklist-item-description::before {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
top: 0;
|
||||
display: block;
|
||||
content:"";
|
||||
background: #F89406;
|
||||
height: 95%;
|
||||
height: 96%;
|
||||
width: 2px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.linklist-item.private .linklist-item-description::before {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.linklist-item.private .linklist-item-title::before {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.linklist-item-infos {
|
||||
padding: 8px 8px 5px 8px;
|
||||
padding: 4px 8px 4px 8px;
|
||||
background: #ddd;
|
||||
color: #252525;
|
||||
}
|
||||
|
|
@ -680,6 +693,8 @@ body, .pure-g [class*="pure-u"] {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.8em;
|
||||
height:23px;
|
||||
line-height:23px;
|
||||
}
|
||||
|
||||
.linklist-item-infos .mobile-buttons {
|
||||
|
|
@ -693,6 +708,16 @@ body, .pure-g [class*="pure-u"] {
|
|||
height: 16px;
|
||||
}
|
||||
|
||||
.linklist-item-infos-controls-group {
|
||||
display: inline-block;
|
||||
border-right: 1px solid #5d5d5d;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.ctrl-edit {
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
/** 64em -> lg **/
|
||||
@media screen and (max-width: 64em) {
|
||||
.linklist-item-infos-url {
|
||||
|
|
@ -1284,3 +1309,22 @@ form[name="linkform"].page-form {
|
|||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Markdown
|
||||
*/
|
||||
.markdown p {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.markdown p + p {
|
||||
margin: 0.5em 0 0 0 !important;
|
||||
}
|
||||
|
||||
.markdown *:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.markdown *:last-child {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
|
@ -378,7 +378,7 @@ window.onload = function () {
|
|||
var linkCheckboxes = document.querySelectorAll('.delete-checkbox');
|
||||
var bar = document.getElementById('actions');
|
||||
[].forEach.call(linkCheckboxes, function(checkbox) {
|
||||
checkbox.style.display = 'block';
|
||||
checkbox.style.display = 'inline-block';
|
||||
checkbox.addEventListener('click', function(event) {
|
||||
var count = 0;
|
||||
var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked');
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@
|
|||
{/loop}
|
||||
|
||||
<div id="linklist">
|
||||
<div class="pure-g">
|
||||
<div id="link-count-block" class="pure-g">
|
||||
<div class="pure-u-lg-2-24 pure-u-1-24"></div>
|
||||
<div class="pure-u-lg-20-24 pure-u-22-24">
|
||||
<div id="link-count-content" class="pure-u-lg-20-24 pure-u-22-24">
|
||||
<div class="linkcount pure-u-lg-0 center">
|
||||
{if="!empty($linkcount)"}
|
||||
<span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
|
||||
|
|
@ -76,16 +76,16 @@
|
|||
</div>
|
||||
|
||||
{if="count($links)==0"}
|
||||
<div class="pure-g pure-alert pure-alert-error search-result">
|
||||
<div id="search-result-block" class="pure-g pure-alert pure-alert-error search-result">
|
||||
<div class="pure-u-2-24"></div>
|
||||
<div class="pure-u-20-24">
|
||||
<div id="search-result-content" class="pure-u-20-24">
|
||||
<div id="searchcriteria">{'Nothing found.'|t}</div>
|
||||
</div>
|
||||
</div>
|
||||
{elseif="!empty($search_term) or $search_tags !== '' or !empty($visibility) or $untaggedonly"}
|
||||
<div class="pure-g pure-alert pure-alert-success search-result">
|
||||
<div id="search-result-block" class="pure-g pure-alert pure-alert-success search-result">
|
||||
<div class="pure-u-2-24"></div>
|
||||
<div class="pure-u-20-24">
|
||||
<div id="search-result-content" class="pure-u-20-24 search-result-main">
|
||||
{function="sprintf(t('%s result', '%s results', $result_count), $result_count)"}
|
||||
{if="!empty($search_term)"}
|
||||
{'for'|t} <em><strong>{$search_term}</strong></em>
|
||||
|
|
@ -114,9 +114,9 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="pure-g">
|
||||
<div id="linklist-loop-block" class="pure-g">
|
||||
<div class="pure-u-lg-2-24 pure-u-1-24"></div>
|
||||
<div class="pure-u-lg-20-24 pure-u-22-24">
|
||||
<div id="linklist-loop-content" class="pure-u-lg-20-24 pure-u-22-24">
|
||||
{ignore}Set translation here, for performances{/ignore}
|
||||
{$strPrivate=t('Private')}
|
||||
{$strEdit=t('Edit')}
|
||||
|
|
@ -129,18 +129,19 @@
|
|||
{ignore}End of translations{/ignore}
|
||||
{loop="links"}
|
||||
<div class="anchor" id="{$value.shorturl}"></div>
|
||||
<div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
|
||||
|
||||
<div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
|
||||
<div class="linklist-item-title">
|
||||
{$thumb=thumbnail($value.url)}
|
||||
{if="$thumb!=false"}
|
||||
<div class="linklist-item-thumbnail">{$thumb}</div>
|
||||
{/if}
|
||||
|
||||
{if="isLoggedIn()"}
|
||||
<div class="linklist-item-editbuttons">
|
||||
{if="$value.private"}
|
||||
<span class="label label-private">{$strPrivate}</span>
|
||||
{/if}
|
||||
<input type="checkbox" class="delete-checkbox" value="{$value.id}">
|
||||
<!-- FIXME! JS translation -->
|
||||
<a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
|
||||
<a href="#" title="{$strFold}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
@ -157,11 +158,6 @@ <h2>
|
|||
</h2>
|
||||
</div>
|
||||
|
||||
{$thumb=thumbnail($value.url)}
|
||||
{if="$thumb!=false"}
|
||||
<div class="linklist-item-thumbnail">{$thumb}</div>
|
||||
{/if}
|
||||
|
||||
{if="$value.description"}
|
||||
<div class="linklist-item-description">
|
||||
{$value.description}
|
||||
|
|
@ -182,8 +178,24 @@ <h2>
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-1">
|
||||
<div class="linklist-item-infos-date-url-block pure-g">
|
||||
<div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1">
|
||||
{if="isLoggedIn()"}
|
||||
<div class="linklist-item-infos-controls-group pure-u-0 pure-u-lg-visible">
|
||||
<span class="linklist-item-infos-controls-item ctrl-checkbox">
|
||||
<input type="checkbox" class="delete-checkbox" value="{$value.id}">
|
||||
</span>
|
||||
<span class="linklist-item-infos-controls-item ctrl-edit">
|
||||
<a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
|
||||
</span>
|
||||
<span class="linklist-item-infos-controls-item ctrl-delete">
|
||||
<a href="?delete_link&lf_linkdate={$value.id}&token={$token}"
|
||||
title="{$strDelete}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete">
|
||||
<i class="fa fa-trash"></i>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<a href="?{$value.shorturl}" title="{$strPermalink}">
|
||||
{if="!$hide_timestamps || isLoggedIn()"}
|
||||
{$updated=$value.updated_timestamp ? $strEdited. format_date($value.updated) : $strPermalink}
|
||||
|
|
@ -209,16 +221,13 @@ <h2>
|
|||
</div>
|
||||
</div><div
|
||||
{ignore}do not add space or line break between these div - Firefox issue{/ignore}
|
||||
class="linklist-item-infos-url pure-u-lg-5-8 pure-u-1">
|
||||
class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1">
|
||||
<a href="{$value.real_url}" title="{$value.title}">
|
||||
<i class="fa fa-link"></i> {$value.url}
|
||||
</a>
|
||||
{if="isLoggedIn()"}
|
||||
<a href="?delete_link&lf_linkdate={$value.id}&token={$token}"
|
||||
title="{$strDelete}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete">
|
||||
<i class="fa fa-trash"></i>
|
||||
</a>
|
||||
{/if}
|
||||
<div class="linklist-item-buttons pure-u-0 pure-u-lg-visible">
|
||||
<a href="#" title="{$strFold}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-buttons pure-u-1 pure-u-lg-0">
|
||||
{if="isset($value.link_plugin)"}
|
||||
|
|
@ -234,6 +243,8 @@ <h2>
|
|||
title="{$strDelete}" class="delete-link confirm-delete">
|
||||
<i class="fa fa-trash"></i>
|
||||
</a>
|
||||
·
|
||||
<a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -250,9 +261,9 @@ <h2>
|
|||
{/loop}
|
||||
</div>
|
||||
|
||||
<div class="pure-g">
|
||||
<div id="linklist-paging-bottom-block" class="pure-g">
|
||||
<div class="pure-u-lg-2-24 pure-u-1-24"></div>
|
||||
<div class="pure-u-lg-20-24 pure-u-22-24">
|
||||
<div id="linklist-paging-bottom-content" class="pure-u-lg-20-24 pure-u-22-24">
|
||||
{include="linklist.paging"}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue