Knah-Tsaeb/MyShaarli
Knah-Tsaeb/MyShaarli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Theme improvements: move thumbnails to the right and reduce margins overall

Browse source 
* 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 2017-09-30 14:14:40 +02:00
parent 0926d26390
commit 94c1756562
3 changed files with 114 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

102
tpl/default/css/shaarli.css
View file

@ -433,7 +433,7 @@ body, .pure-g [class*="pure-u"] {
* 64em -> lg * 64em -> lg
*/ */
.linklist-filters { .linklist-filters {
margin: 10px 0; margin: 5px 0;
color: #252525; color: #252525;
font-size: 0.9em; font-size: 0.9em;
} }
@ -454,7 +454,7 @@ body, .pure-g [class*="pure-u"] {
} }
.linklist-pages { .linklist-pages {
margin: 10px 0; margin: 5px 0;
color: #252525; color: #252525;
text-align: center; text-align: center;
} }
@ -469,7 +469,7 @@ body, .pure-g [class*="pure-u"] {
} }
.linksperpage { .linksperpage {
margin: 10px 0; margin: 5px 0;
text-align: right; text-align: right;
color: #252525; color: #252525;
font-size: 0.9em; font-size: 0.9em;
@ -506,9 +506,29 @@ body, .pure-g [class*="pure-u"] {
* CONTENT - LINKLIST ITEMS * CONTENT - LINKLIST ITEMS
*/ */
.linklist-item { .linklist-item {
margin: 0 0 15px 0; margin: 0 0 10px 0;
background: #f5f5f5; 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 { .linklist-item-title, .linklist-item-title h2 {
@ -526,7 +546,7 @@ body, .pure-g [class*="pure-u"] {
line-height: 30px; line-height: 30px;
} }
.linklist-item-title a { .linklist-item-title h2 a {
font-size: 0.7em; font-size: 0.7em;
color: #252525; color: #252525;
text-decoration: none; text-decoration: none;
@ -538,11 +558,11 @@ body, .pure-g [class*="pure-u"] {
color: #1b926c; color: #1b926c;
} }
.linklist-item-title a:visited .linklist-link { .linklist-item-title h2 a:visited .linklist-link {
color: #2a4c41; 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; color: #252525;
} }
@ -554,8 +574,9 @@ body, .pure-g [class*="pure-u"] {
color: #F89406; color: #F89406;
} }
.linklist-item-title .fold-button { .fold-button {
display: none; display: none;
color: #252525;
} }
.linklist-item-editbuttons { .linklist-item-editbuttons {
@ -585,24 +606,12 @@ body, .pure-g [class*="pure-u"] {
.linklist-item-description { .linklist-item-description {
position: relative; position: relative;
padding: 10px; padding: 0 10px;
word-wrap: break-word; word-wrap: break-word;
color: #252525; color: #252525;
line-height: 1.3em; 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 { .linklist-item-description a {
text-decoration: none; text-decoration: none;
color: #1b926c; color: #1b926c;
@ -618,32 +627,36 @@ body, .pure-g [class*="pure-u"] {
.linklist-item-thumbnail { .linklist-item-thumbnail {
position: relative; position: relative;
margin-top: 10px; padding: 0 0 0 5px;
padding: 10px; margin: 0;
float: left; float: right;
z-index: 50; z-index: 50;
height: 90px;
} }
.linklist-item.private .linklist-item-title::before, .linklist-item.private .linklist-item-title::before,
.linklist-item.private .linklist-item-description::before, .linklist-item.private .linklist-item-description::before {
.linklist-item.private .linklist-item-thumbnail::before {
position: absolute; position: absolute;
left: 3px; left: 3px;
top: 0; top: 0;
display: block; display: block;
content:""; content:"";
background: #F89406; background: #F89406;
height: 95%; height: 96%;
width: 2px; width: 2px;
z-index: 1; z-index: 1;
} }
.linklist-item.private .linklist-item-description::before {
height: 100%;
}
.linklist-item.private .linklist-item-title::before { .linklist-item.private .linklist-item-title::before {
margin-top: 3px; margin-top: 3px;
} }
.linklist-item-infos { .linklist-item-infos {
padding: 8px 8px 5px 8px; padding: 4px 8px 4px 8px;
background: #ddd; background: #ddd;
color: #252525; color: #252525;
} }
@ -680,6 +693,8 @@ body, .pure-g [class*="pure-u"] {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 0.8em; font-size: 0.8em;
height:23px;
line-height:23px;
} }
.linklist-item-infos .mobile-buttons { .linklist-item-infos .mobile-buttons {
@ -693,6 +708,16 @@ body, .pure-g [class*="pure-u"] {
height: 16px; 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 **/ /** 64em -> lg **/
@media screen and (max-width: 64em) { @media screen and (max-width: 64em) {
.linklist-item-infos-url { .linklist-item-infos-url {
@ -1284,3 +1309,22 @@ form[name="linkform"].page-form {
text-decoration: none; text-decoration: none;
font-weight: bold; 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;
}

2
tpl/default/js/shaarli.js
View file

@ -378,7 +378,7 @@ window.onload = function () {
var linkCheckboxes = document.querySelectorAll('.delete-checkbox'); var linkCheckboxes = document.querySelectorAll('.delete-checkbox');
var bar = document.getElementById('actions'); var bar = document.getElementById('actions');
[].forEach.call(linkCheckboxes, function(checkbox) { [].forEach.call(linkCheckboxes, function(checkbox) {
checkbox.style.display = 'block'; checkbox.style.display = 'inline-block';
checkbox.addEventListener('click', function(event) { checkbox.addEventListener('click', function(event) {
var count = 0; var count = 0;
var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked'); var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked');

69
tpl/default/linklist.html
View file

@ -53,9 +53,9 @@
{/loop} {/loop}
<div id="linklist"> <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-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"> <div class="linkcount pure-u-lg-0 center">
{if="!empty($linkcount)"} {if="!empty($linkcount)"}
<span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"} <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
@ -76,16 +76,16 @@
</div> </div>
{if="count($links)==0"} {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-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 id="searchcriteria">{'Nothing found.'|t}</div>
</div> </div>
</div> </div>
{elseif="!empty($search_term) or $search_tags !== '' or !empty($visibility) or $untaggedonly"} {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-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)"} {function="sprintf(t('%s result', '%s results', $result_count), $result_count)"}
{if="!empty($search_term)"} {if="!empty($search_term)"}
{'for'|t} <em><strong>{$search_term}</strong></em> {'for'|t} <em><strong>{$search_term}</strong></em>
@ -114,9 +114,9 @@
</div> </div>
{/if} {/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-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} {ignore}Set translation here, for performances{/ignore}
{$strPrivate=t('Private')} {$strPrivate=t('Private')}
{$strEdit=t('Edit')} {$strEdit=t('Edit')}
@ -129,18 +129,19 @@
{ignore}End of translations{/ignore} {ignore}End of translations{/ignore}
{loop="links"} {loop="links"}
<div class="anchor" id="{$value.shorturl}"></div> <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"> <div class="linklist-item-title">
{$thumb=thumbnail($value.url)}
{if="$thumb!=false"}
<div class="linklist-item-thumbnail">{$thumb}</div>
{/if}
{if="isLoggedIn()"} {if="isLoggedIn()"}
<div class="linklist-item-editbuttons"> <div class="linklist-item-editbuttons">
{if="$value.private"} {if="$value.private"}
<span class="label label-private">{$strPrivate}</span> <span class="label label-private">{$strPrivate}</span>
{/if} {/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> </div>
{/if} {/if}
@ -157,11 +158,6 @@ <h2>
</h2> </h2>
</div> </div>
{$thumb=thumbnail($value.url)}
{if="$thumb!=false"}
<div class="linklist-item-thumbnail">{$thumb}</div>
{/if}
{if="$value.description"} {if="$value.description"}
<div class="linklist-item-description"> <div class="linklist-item-description">
{$value.description} {$value.description}
@ -182,8 +178,24 @@ <h2>
</div> </div>
{/if} {/if}
<div class="pure-g"> <div class="linklist-item-infos-date-url-block pure-g">
<div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-1"> <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&amp;lf_linkdate={$value.id}&amp;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}"> <a href="?{$value.shorturl}" title="{$strPermalink}">
{if="!$hide_timestamps || isLoggedIn()"} {if="!$hide_timestamps || isLoggedIn()"}
{$updated=$value.updated_timestamp ? $strEdited. format_date($value.updated) : $strPermalink} {$updated=$value.updated_timestamp ? $strEdited. format_date($value.updated) : $strPermalink}
@ -209,16 +221,13 @@ <h2>
</div> </div>
</div><div </div><div
{ignore}do not add space or line break between these div - Firefox issue{/ignore} {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}"> <a href="{$value.real_url}" title="{$value.title}">
<i class="fa fa-link"></i> {$value.url} <i class="fa fa-link"></i> {$value.url}
</a> </a>
{if="isLoggedIn()"} <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible">
<a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}" <a href="#" title="{$strFold}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
title="{$strDelete}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete"> </div>
<i class="fa fa-trash"></i>
</a>
{/if}
</div> </div>
<div class="mobile-buttons pure-u-1 pure-u-lg-0"> <div class="mobile-buttons pure-u-1 pure-u-lg-0">
{if="isset($value.link_plugin)"} {if="isset($value.link_plugin)"}
@ -234,6 +243,8 @@ <h2>
title="{$strDelete}" class="delete-link confirm-delete"> title="{$strDelete}" class="delete-link confirm-delete">
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</a> </a>
&middot;
<a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
{/if} {/if}
</div> </div>
</div> </div>
@ -250,9 +261,9 @@ <h2>
{/loop} {/loop}
</div> </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-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"} {include="linklist.paging"}
</div> </div>
</div> </div>