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

Merge pull request #978 from ArthurHoaro/theme/improvements

Browse source 
Theme improvements: move thumbnails to the right and reduce margins overall
This commit is contained in:
ArthurHoaro 2017-10-28 15:23:54 +02:00 committed by GitHub
commit b7fdbfa789
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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
*/
.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;
}

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

@ -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');

69
tpl/default/linklist.html
View file

@ -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&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}">
{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&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>
{/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>
&middot;
<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>