aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2017-09-30 14:14:40 +0200
committerArthurHoaro <arthur@hoa.ro>2017-10-28 15:11:57 +0200
commit94c1756562df22382ccd88fd202371a386c1801b (patch)
tree9c1542aee77605914729992a9b54d692985f4a90
parent0926d263902c184bd4f4c2036cb8ee90f81c5060 (diff)
downloadShaarli-94c1756562df22382ccd88fd202371a386c1801b.tar.gz
Shaarli-94c1756562df22382ccd88fd202371a386c1801b.tar.zst
Shaarli-94c1756562df22382ccd88fd202371a386c1801b.zip
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
-rw-r--r--tpl/default/css/shaarli.css102
-rw-r--r--tpl/default/js/shaarli.js2
-rw-r--r--tpl/default/linklist.html69
3 files changed, 114 insertions, 59 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index ba589723..9065f887 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -433,7 +433,7 @@ body, .pure-g [class*="pure-u"] {
433 * 64em -> lg 433 * 64em -> lg
434 */ 434 */
435.linklist-filters { 435.linklist-filters {
436 margin: 10px 0; 436 margin: 5px 0;
437 color: #252525; 437 color: #252525;
438 font-size: 0.9em; 438 font-size: 0.9em;
439} 439}
@@ -454,7 +454,7 @@ body, .pure-g [class*="pure-u"] {
454} 454}
455 455
456.linklist-pages { 456.linklist-pages {
457 margin: 10px 0; 457 margin: 5px 0;
458 color: #252525; 458 color: #252525;
459 text-align: center; 459 text-align: center;
460} 460}
@@ -469,7 +469,7 @@ body, .pure-g [class*="pure-u"] {
469} 469}
470 470
471.linksperpage { 471.linksperpage {
472 margin: 10px 0; 472 margin: 5px 0;
473 text-align: right; 473 text-align: right;
474 color: #252525; 474 color: #252525;
475 font-size: 0.9em; 475 font-size: 0.9em;
@@ -506,9 +506,29 @@ body, .pure-g [class*="pure-u"] {
506 * CONTENT - LINKLIST ITEMS 506 * CONTENT - LINKLIST ITEMS
507 */ 507 */
508.linklist-item { 508.linklist-item {
509 margin: 0 0 15px 0; 509 margin: 0 0 10px 0;
510 background: #f5f5f5; 510 background: #f5f5f5;
511 box-shadow: 2px 2px 0.5em #797979; 511 box-shadow: 1px 1px 3px #797979;
512}
513
514.linklist-item-buttons {
515 background: transparent;
516 position: relative;
517 width: 23px;
518 z-index: 99;
519}
520
521.linklist-item-buttons-right {
522 float: right;
523 margin-right: -25px;
524}
525
526.linklist-item-buttons * {
527 display: block;
528 float: left;
529 width:100%;
530 margin: auto;
531 text-align: center;
512} 532}
513 533
514.linklist-item-title, .linklist-item-title h2 { 534.linklist-item-title, .linklist-item-title h2 {
@@ -526,7 +546,7 @@ body, .pure-g [class*="pure-u"] {
526 line-height: 30px; 546 line-height: 30px;
527} 547}
528 548
529.linklist-item-title a { 549.linklist-item-title h2 a {
530 font-size: 0.7em; 550 font-size: 0.7em;
531 color: #252525; 551 color: #252525;
532 text-decoration: none; 552 text-decoration: none;
@@ -538,11 +558,11 @@ body, .pure-g [class*="pure-u"] {
538 color: #1b926c; 558 color: #1b926c;
539} 559}
540 560
541.linklist-item-title a:visited .linklist-link { 561.linklist-item-title h2 a:visited .linklist-link {
542 color: #2a4c41; 562 color: #2a4c41;
543} 563}
544 564
545.linklist-item-title a:hover, .linklist-item-title .linklist-link:hover{ 565.linklist-item-title h2 a:hover, .linklist-item-title .linklist-link:hover{
546 color: #252525; 566 color: #252525;
547} 567}
548 568
@@ -554,8 +574,9 @@ body, .pure-g [class*="pure-u"] {
554 color: #F89406; 574 color: #F89406;
555} 575}
556 576
557.linklist-item-title .fold-button { 577.fold-button {
558 display: none; 578 display: none;
579 color: #252525;
559} 580}
560 581
561.linklist-item-editbuttons { 582.linklist-item-editbuttons {
@@ -585,24 +606,12 @@ body, .pure-g [class*="pure-u"] {
585 606
586.linklist-item-description { 607.linklist-item-description {
587 position: relative; 608 position: relative;
588 padding: 10px; 609 padding: 0 10px;
589 word-wrap: break-word; 610 word-wrap: break-word;
590 color: #252525; 611 color: #252525;
591 line-height: 1.3em; 612 line-height: 1.3em;
592} 613}
593 614
594 {
595 position: absolute;
596 left: 3px;
597 top: 0;
598 display: block;
599 content:"";
600 background: #F89406;
601 height: 95%;
602 width: 2px;
603 z-index: 1;
604}
605
606.linklist-item-description a { 615.linklist-item-description a {
607 text-decoration: none; 616 text-decoration: none;
608 color: #1b926c; 617 color: #1b926c;
@@ -618,32 +627,36 @@ body, .pure-g [class*="pure-u"] {
618 627
619.linklist-item-thumbnail { 628.linklist-item-thumbnail {
620 position: relative; 629 position: relative;
621 margin-top: 10px; 630 padding: 0 0 0 5px;
622 padding: 10px; 631 margin: 0;
623 float: left; 632 float: right;
624 z-index: 50; 633 z-index: 50;
634 height: 90px;
625} 635}
626 636
627.linklist-item.private .linklist-item-title::before, 637.linklist-item.private .linklist-item-title::before,
628.linklist-item.private .linklist-item-description::before, 638.linklist-item.private .linklist-item-description::before {
629.linklist-item.private .linklist-item-thumbnail::before {
630 position: absolute; 639 position: absolute;
631 left: 3px; 640 left: 3px;
632 top: 0; 641 top: 0;
633 display: block; 642 display: block;
634 content:""; 643 content:"";
635 background: #F89406; 644 background: #F89406;
636 height: 95%; 645 height: 96%;
637 width: 2px; 646 width: 2px;
638 z-index: 1; 647 z-index: 1;
639} 648}
640 649
650.linklist-item.private .linklist-item-description::before {
651 height: 100%;
652}
653
641.linklist-item.private .linklist-item-title::before { 654.linklist-item.private .linklist-item-title::before {
642 margin-top: 3px; 655 margin-top: 3px;
643} 656}
644 657
645.linklist-item-infos { 658.linklist-item-infos {
646 padding: 8px 8px 5px 8px; 659 padding: 4px 8px 4px 8px;
647 background: #ddd; 660 background: #ddd;
648 color: #252525; 661 color: #252525;
649} 662}
@@ -680,6 +693,8 @@ body, .pure-g [class*="pure-u"] {
680 overflow: hidden; 693 overflow: hidden;
681 text-overflow: ellipsis; 694 text-overflow: ellipsis;
682 font-size: 0.8em; 695 font-size: 0.8em;
696 height:23px;
697 line-height:23px;
683} 698}
684 699
685.linklist-item-infos .mobile-buttons { 700.linklist-item-infos .mobile-buttons {
@@ -693,6 +708,16 @@ body, .pure-g [class*="pure-u"] {
693 height: 16px; 708 height: 16px;
694} 709}
695 710
711.linklist-item-infos-controls-group {
712 display: inline-block;
713 border-right: 1px solid #5d5d5d;
714 padding-right: 6px;
715}
716
717.ctrl-edit {
718 margin: 0 7px;
719}
720
696/** 64em -> lg **/ 721/** 64em -> lg **/
697@media screen and (max-width: 64em) { 722@media screen and (max-width: 64em) {
698 .linklist-item-infos-url { 723 .linklist-item-infos-url {
@@ -1284,3 +1309,22 @@ form[name="linkform"].page-form {
1284 text-decoration: none; 1309 text-decoration: none;
1285 font-weight: bold; 1310 font-weight: bold;
1286} 1311}
1312
1313/**
1314 * Markdown
1315 */
1316.markdown p {
1317 margin: 0 !important;
1318}
1319
1320.markdown p + p {
1321 margin: 0.5em 0 0 0 !important;
1322}
1323
1324.markdown *:first-child {
1325 margin-top: 0 !important;
1326}
1327
1328.markdown *:last-child {
1329 margin-bottom: 5px !important;
1330} \ No newline at end of file
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 09b07eed..cf628e87 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -378,7 +378,7 @@ window.onload = function () {
378 var linkCheckboxes = document.querySelectorAll('.delete-checkbox'); 378 var linkCheckboxes = document.querySelectorAll('.delete-checkbox');
379 var bar = document.getElementById('actions'); 379 var bar = document.getElementById('actions');
380 [].forEach.call(linkCheckboxes, function(checkbox) { 380 [].forEach.call(linkCheckboxes, function(checkbox) {
381 checkbox.style.display = 'block'; 381 checkbox.style.display = 'inline-block';
382 checkbox.addEventListener('click', function(event) { 382 checkbox.addEventListener('click', function(event) {
383 var count = 0; 383 var count = 0;
384 var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked'); 384 var linkCheckedCheckboxes = document.querySelectorAll('.delete-checkbox:checked');
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 5dab8e9a..c666e30a 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -53,9 +53,9 @@
53{/loop} 53{/loop}
54 54
55<div id="linklist"> 55<div id="linklist">
56 <div class="pure-g"> 56 <div id="link-count-block" class="pure-g">
57 <div class="pure-u-lg-2-24 pure-u-1-24"></div> 57 <div class="pure-u-lg-2-24 pure-u-1-24"></div>
58 <div class="pure-u-lg-20-24 pure-u-22-24"> 58 <div id="link-count-content" class="pure-u-lg-20-24 pure-u-22-24">
59 <div class="linkcount pure-u-lg-0 center"> 59 <div class="linkcount pure-u-lg-0 center">
60 {if="!empty($linkcount)"} 60 {if="!empty($linkcount)"}
61 <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"} 61 <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
@@ -76,16 +76,16 @@
76 </div> 76 </div>
77 77
78 {if="count($links)==0"} 78 {if="count($links)==0"}
79 <div class="pure-g pure-alert pure-alert-error search-result"> 79 <div id="search-result-block" class="pure-g pure-alert pure-alert-error search-result">
80 <div class="pure-u-2-24"></div> 80 <div class="pure-u-2-24"></div>
81 <div class="pure-u-20-24"> 81 <div id="search-result-content" class="pure-u-20-24">
82 <div id="searchcriteria">{'Nothing found.'|t}</div> 82 <div id="searchcriteria">{'Nothing found.'|t}</div>
83 </div> 83 </div>
84 </div> 84 </div>
85 {elseif="!empty($search_term) or $search_tags !== '' or !empty($visibility) or $untaggedonly"} 85 {elseif="!empty($search_term) or $search_tags !== '' or !empty($visibility) or $untaggedonly"}
86 <div class="pure-g pure-alert pure-alert-success search-result"> 86 <div id="search-result-block" class="pure-g pure-alert pure-alert-success search-result">
87 <div class="pure-u-2-24"></div> 87 <div class="pure-u-2-24"></div>
88 <div class="pure-u-20-24"> 88 <div id="search-result-content" class="pure-u-20-24 search-result-main">
89 {function="sprintf(t('%s result', '%s results', $result_count), $result_count)"} 89 {function="sprintf(t('%s result', '%s results', $result_count), $result_count)"}
90 {if="!empty($search_term)"} 90 {if="!empty($search_term)"}
91 {'for'|t} <em><strong>{$search_term}</strong></em> 91 {'for'|t} <em><strong>{$search_term}</strong></em>
@@ -114,9 +114,9 @@
114 </div> 114 </div>
115 {/if} 115 {/if}
116 116
117 <div class="pure-g"> 117 <div id="linklist-loop-block" class="pure-g">
118 <div class="pure-u-lg-2-24 pure-u-1-24"></div> 118 <div class="pure-u-lg-2-24 pure-u-1-24"></div>
119 <div class="pure-u-lg-20-24 pure-u-22-24"> 119 <div id="linklist-loop-content" class="pure-u-lg-20-24 pure-u-22-24">
120 {ignore}Set translation here, for performances{/ignore} 120 {ignore}Set translation here, for performances{/ignore}
121 {$strPrivate=t('Private')} 121 {$strPrivate=t('Private')}
122 {$strEdit=t('Edit')} 122 {$strEdit=t('Edit')}
@@ -129,18 +129,19 @@
129 {ignore}End of translations{/ignore} 129 {ignore}End of translations{/ignore}
130 {loop="links"} 130 {loop="links"}
131 <div class="anchor" id="{$value.shorturl}"></div> 131 <div class="anchor" id="{$value.shorturl}"></div>
132 <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
133 132
133 <div class="linklist-item linklist-item{if="$value.class"} {$value.class}{/if}" data-id="{$value.id}">
134 <div class="linklist-item-title"> 134 <div class="linklist-item-title">
135 {$thumb=thumbnail($value.url)}
136 {if="$thumb!=false"}
137 <div class="linklist-item-thumbnail">{$thumb}</div>
138 {/if}
139
135 {if="isLoggedIn()"} 140 {if="isLoggedIn()"}
136 <div class="linklist-item-editbuttons"> 141 <div class="linklist-item-editbuttons">
137 {if="$value.private"} 142 {if="$value.private"}
138 <span class="label label-private">{$strPrivate}</span> 143 <span class="label label-private">{$strPrivate}</span>
139 {/if} 144 {/if}
140 <input type="checkbox" class="delete-checkbox" value="{$value.id}">
141 <!-- FIXME! JS translation -->
142 <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
143 <a href="#" title="{$strFold}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
144 </div> 145 </div>
145 {/if} 146 {/if}
146 147
@@ -157,11 +158,6 @@
157 </h2> 158 </h2>
158 </div> 159 </div>
159 160
160 {$thumb=thumbnail($value.url)}
161 {if="$thumb!=false"}
162 <div class="linklist-item-thumbnail">{$thumb}</div>
163 {/if}
164
165 {if="$value.description"} 161 {if="$value.description"}
166 <div class="linklist-item-description"> 162 <div class="linklist-item-description">
167 {$value.description} 163 {$value.description}
@@ -182,8 +178,24 @@
182 </div> 178 </div>
183 {/if} 179 {/if}
184 180
185 <div class="pure-g"> 181 <div class="linklist-item-infos-date-url-block pure-g">
186 <div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-1"> 182 <div class="linklist-item-infos-dateblock pure-u-lg-7-12 pure-u-1">
183 {if="isLoggedIn()"}
184 <div class="linklist-item-infos-controls-group pure-u-0 pure-u-lg-visible">
185 <span class="linklist-item-infos-controls-item ctrl-checkbox">
186 <input type="checkbox" class="delete-checkbox" value="{$value.id}">
187 </span>
188 <span class="linklist-item-infos-controls-item ctrl-edit">
189 <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
190 </span>
191 <span class="linklist-item-infos-controls-item ctrl-delete">
192 <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}"
193 title="{$strDelete}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete">
194 <i class="fa fa-trash"></i>
195 </a>
196 </span>
197 </div>
198 {/if}
187 <a href="?{$value.shorturl}" title="{$strPermalink}"> 199 <a href="?{$value.shorturl}" title="{$strPermalink}">
188 {if="!$hide_timestamps || isLoggedIn()"} 200 {if="!$hide_timestamps || isLoggedIn()"}
189 {$updated=$value.updated_timestamp ? $strEdited. format_date($value.updated) : $strPermalink} 201 {$updated=$value.updated_timestamp ? $strEdited. format_date($value.updated) : $strPermalink}
@@ -209,16 +221,13 @@
209 </div> 221 </div>
210 </div><div 222 </div><div
211 {ignore}do not add space or line break between these div - Firefox issue{/ignore} 223 {ignore}do not add space or line break between these div - Firefox issue{/ignore}
212 class="linklist-item-infos-url pure-u-lg-5-8 pure-u-1"> 224 class="linklist-item-infos-url pure-u-lg-5-12 pure-u-1">
213 <a href="{$value.real_url}" title="{$value.title}"> 225 <a href="{$value.real_url}" title="{$value.title}">
214 <i class="fa fa-link"></i> {$value.url} 226 <i class="fa fa-link"></i> {$value.url}
215 </a> 227 </a>
216 {if="isLoggedIn()"} 228 <div class="linklist-item-buttons pure-u-0 pure-u-lg-visible">
217 <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}" 229 <a href="#" title="{$strFold}" class="fold-button"><i class="fa fa-chevron-up"></i></a>
218 title="{$strDelete}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete"> 230 </div>
219 <i class="fa fa-trash"></i>
220 </a>
221 {/if}
222 </div> 231 </div>
223 <div class="mobile-buttons pure-u-1 pure-u-lg-0"> 232 <div class="mobile-buttons pure-u-1 pure-u-lg-0">
224 {if="isset($value.link_plugin)"} 233 {if="isset($value.link_plugin)"}
@@ -234,6 +243,8 @@
234 title="{$strDelete}" class="delete-link confirm-delete"> 243 title="{$strDelete}" class="delete-link confirm-delete">
235 <i class="fa fa-trash"></i> 244 <i class="fa fa-trash"></i>
236 </a> 245 </a>
246 &middot;
247 <a href="?edit_link={$value.id}" title="{$strEdit}"><i class="fa fa-pencil-square-o edit-link"></i></a>
237 {/if} 248 {/if}
238 </div> 249 </div>
239 </div> 250 </div>
@@ -250,9 +261,9 @@
250 {/loop} 261 {/loop}
251 </div> 262 </div>
252 263
253<div class="pure-g"> 264<div id="linklist-paging-bottom-block" class="pure-g">
254 <div class="pure-u-lg-2-24 pure-u-1-24"></div> 265 <div class="pure-u-lg-2-24 pure-u-1-24"></div>
255 <div class="pure-u-lg-20-24 pure-u-22-24"> 266 <div id="linklist-paging-bottom-content" class="pure-u-lg-20-24 pure-u-22-24">
256 {include="linklist.paging"} 267 {include="linklist.paging"}
257 </div> 268 </div>
258</div> 269</div>