function changeOrder(pos, move)
{
var newpos = parseInt(pos) + move;
- var line = document.querySelector('[data-order="'+ pos +'"]');
- var changeline = document.querySelector('[data-order="'+ newpos +'"]');
- var parent = changeline.parentNode;
+ var lines = document.querySelectorAll('[data-order="'+ pos +'"]');
+ var changelines = document.querySelectorAll('[data-order="'+ newpos +'"]');
+
+ // If we go down reverse lines to preserve the rows order
+ if (move > 0) {
+ lines = [].slice.call(lines).reverse();
+ }
+
+ for (var i = 0 ; i < lines.length ; i++) {
+ var parent = changelines[0].parentNode;
+ changePos(lines[i], newpos);
+ changePos(changelines[i], parseInt(pos));
+ var changeItem = move < 0 ? changelines[0] : changelines[changelines.length - 1].nextSibling;
+ parent.insertBefore(lines[i], changeItem);
+ }
- changePos(line, newpos);
- changePos(changeline, parseInt(pos));
- var changeItem = move < 0 ? changeline : changeline.nextSibling;
- parent.insertBefore(line, changeItem);
}
/**
<form method="POST" action="#" name="configform" id="configform">
<div class="pure-g">
- <div class="pure-u-lg-1-6 pure-u-1-24"></div>
- <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-complete">
+ <div class="pure-u-lg-1-8 pure-u-1-24"></div>
+ <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-complete">
<h2 class="window-title">{'Configure'|t}</h2>
<div class="pure-g">
<div class="pure-u-lg-{$ratioLabel} pure-u-1">
</div>
</div>
</div>
+ <div class="clear"></div>
<div class="pure-g">
<div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} ">
<div class="form-label">
* General
*/
body {
- background: url(../img/noise.png) #c5c5c5;
+ background: #c5c5c5;
}
.strong {
}
.anchor:target {
- padding-top: 35px;
+ padding-top: 40px;
}
/**
* MENU
position: fixed;
top: 0;
width: 100%;
+ --height: 50px;
background: #1b926c;
-webkit-font-smoothing: antialiased;
/* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
- max-height: 2.1em;
+ max-height: 45px;
transition: max-height 0.5s;
overflow: hidden;
z-index: 999;
/* Chrome bugfix: with 100% height, it only displays the first element. */
.pure-menu-item {
- height: inherit;
+ height: 45px;
}
.shaarli-menu.open {
.pure-menu-link:visited,
.pure-menu-selected .pure-menu-link,
.pure-menu-selected .pure-menu-link:visited {
+ padding: 0.8em 1em;
color: #f5f5f5;
}
.pure-menu-selected .pure-menu-link:focus {
color: #fff;
background: transparent;
+}
+.pure-menu-item:hover::after {
+ margin: -4px auto 0 auto;
+ display: block;
+ content:"";
+ background: #fff;
+ height: 4px;
+ width: 100%;
}
.menu-toggle {
width: 34px;
- height: 34px;
+ height: 45px;
position: absolute;
- top: 0;
+ top: 5px;
right: 0;
display: none;
}
font-size: 0.8em;
}
+@media screen and (min-width: 64em) {
+ #linkcount {
+ position: absolute;
+ right: 5px;
+ }
+}
+
#search, #search-linklist {
text-align: center;
width: 100%;
color: #252525;
}
-#search button:hover {
- color: #fff;
-}
-
+#search button:hover,
#search-linklist button:hover {
- color: #000;
+ color: #fff;
}
#search-linklist {
text-align: center;
background: #1b926c;
display: block;
- z-index: 9999;
+ z-index: 999;
height: 30px;
padding: 5px 0;
}
#content {
position: relative;
z-index: 2;
-}
-
-@media screen and (max-width: 64em) {
- #content {
- margin: 2.1em 0 0 0;
- }
-}
-
-@media screen and (min-width: 64em) {
- #content {
- margin-top: 33px;
- }
+ margin-top: 45px;
}
/**
}
.linklist-filters a {
- padding: 2px 5px;
+ padding: 5px 8px;
text-decoration: none;
}
}
.linksperpage a {
- padding: 2px 5px;
+ padding: 5px 5px;
text-decoration: none;
color: #252525;
background: #f5f5f5;
}
.linksperpage input[type="text"] {
- height: 15px;
+ height: 20px;
margin: 0;
- padding: 3px 5px 3px 8px;
+ padding: 4px 5px 3px 8px;
background: #f5f5f5;
border: medium none currentColor;
color: #252525;
content:"";
background: #F89406;
height: 95%;
- width: 3px;
+ width: 2px;
margin-top: 3px;
+ z-index: 1;
}
.linklist-item-title h2 {
padding: 3px 10px 0 10px;
- line-height: 25px;
+ line-height: 30px;
}
.linklist-item-title a {
display: none;
}
-.linklist-item-title:after {
- display: block;
- content:"";
- background: linear-gradient(to right, #f5f5f5, #8e8e8e, #f5f5f5);
- height: 1px;
- width: 90%;
- margin: 1px auto 0 auto;
-}
-
.linklist-item-editbuttons {
float: right;
- padding: 5px;
+ padding: 8px 5px;
}
.linklist-item-editbuttons * {
}
.delete-link {
- font-size: 1.1em;
+ font-size: 1.3em;
color: #ac2925 !important;
}
font-family: Roboto Slab, Arial, sans-serif;
word-wrap: break-word;
color: #252525;
+ line-height: 1.3em;
}
.linklist-item.private .linklist-item-description::before {
content:"";
background: #F89406;
height: 95%;
- width: 3px;
- z-index: 9999;
- #margin: 0;
+ width: 2px;
+ z-index: 1;
}
.linklist-item-description a {
.page-form-complete .form-label, .page-form-complete .form-input {
position: relative;
- height: 60px;
+ min-height: 60px;
}
.page-form-complete .form-label label,
padding: 5px 5px 0 5px;
font-size: 0.9em;
text-align: justify;
+ word-wrap: break-word;
}
.daily-entry .daily-entry-tags {
function removeClass(element, classname) {
element.className = element.className.replace(new RegExp('(?:^|\\s)'+ classname + '(?:\\s|$)'), ' ');
}
+
+/**
+ * Remove CSS target padding (for fixed bar)
+ */
+var anchor = document.querySelector('.anchor:target');
+if (anchor != null) {
+ var padsize = anchor.clientHeight;
+ this.window.scroll(0, this.window.scrollY - padsize);
+ anchor.style.paddingTop = 0;
+}
<body>
{include="page.header"}
+<div id="linkcount" class="pure-u-0 pure-u-lg-visible">
+ {if="!empty($linkcount)"}
+ <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
+ {if="$privateLinkcount>0"}
+ <br><span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
+ {/if}
+ {/if}
+</div>
+
<div id="search-linklist">
+
<div class="pure-g">
<div class="pure-u-1 pure-u-lg-1-2">
<form method="GET" class="searchform" name="searchform">
{/loop}
<div id="linklist">
+ <div 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="linkcount" class="pure-u-lg-0 center">
+ {if="!empty($linkcount)"}
+ <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
+ {if="$privateLinkcount>0"}
+ · <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
+ {/if}
+ {/if}
+ </div>
- <div id="linkcount" class="center">
- {if="!empty($linkcount)"}
- <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
- {if="$privateLinkcount>0"}
- · <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
- {/if}
- {/if}
- </div>
-
- {include="linklist.paging"}
+ {include="linklist.paging"}
- <div id="plugin_zone_start_linklist" class="plugin_zone">
- {loop="$plugin_start_zone"}
- {$value}
- {/loop}
+ <div id="plugin_zone_start_linklist" class="plugin_zone">
+ {loop="$plugin_start_zone"}
+ {$value}
+ {/loop}
+ </div>
+ </div>
</div>
{if="count($links)==0"}
{/loop}
</div>
- {include="linklist.paging"}
+<div 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">
+ {include="linklist.paging"}
+ </div>
+</div>
{include="page.footer"}
</body>
<div class="linklist-paging">
- <div 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 class="paging pure-g">
- <div class="linklist-filters pure-u-1-3">
- {if="isLoggedIn() or !empty($action_plugin)"}
- <span class="linklist-filters-text">
- {'Filters'|t}
- </span>
- {if="isLoggedIn()"}
- <a href="?privateonly" title="{'Filter private links'|t}"
- class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
- ><i class="fa fa-key"></i></a>
- {/if}
- <a href="#" class="filter-off fold-all" title="Fold all">
- <i class="fa fa-chevron-up"></i>
- </a>
- {loop="$action_plugin"}
- {$value.attr.class=isset($value.attr.class) ? $value.attr.class : ''}
- {$value.attr.class=!empty($value.on) ? $value.attr.class .' filter-on' : $value.attr.class .' filter-off'}
- <a
- {loop="$value.attr"}
- {$key}="{$value}"
- {/loop}>
- {$value.html}
- </a>
- {/loop}
- {/if}
- </div>
+ <div class="paging pure-g">
+ <div class="linklist-filters pure-u-1-3">
+ {if="isLoggedIn() or !empty($action_plugin)"}
+ <span class="linklist-filters-text pure-u-0 pure-u-lg-visible">
+ {'Filters'|t}
+ </span>
+ {if="isLoggedIn()"}
+ <a href="?privateonly" title="{'Filter private links'|t}"
+ class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
+ ><i class="fa fa-key"></i></a>
+ {/if}
+ <a href="#" class="filter-off fold-all" title="Fold all">
+ <i class="fa fa-chevron-up"></i>
+ </a>
+ {loop="$action_plugin"}
+ {$value.attr.class=isset($value.attr.class) ? $value.attr.class : ''}
+ {$value.attr.class=!empty($value.on) ? $value.attr.class .' filter-on' : $value.attr.class .' filter-off'}
+ <a
+ {loop="$value.attr"}
+ {$key}="{$value}"
+ {/loop}>
+ {$value.html}
+ </a>
+ {/loop}
+ {/if}
+ </div>
- <div class="linklist-pages pure-u-1-3">
- {if="$next_page_url"}
- <a href="{$next_page_url}" class="paging_newer">
- <i class="fa fa-arrow-circle-left"></i>
- </a>
- {/if}
- {if="$page_max>1"}<span class="strong">{$page_current} / {$page_max}</span>{/if}
- {if="$previous_page_url"}
- <a href="{$previous_page_url}" class="paging_older">
- <i class="fa fa-arrow-circle-right"></i>
- </a>
- {/if}
+ <div class="linklist-pages pure-u-1-3">
+ {if="$next_page_url"}
+ <a href="{$next_page_url}" class="paging_newer">
+ <i class="fa fa-arrow-circle-left"></i>
+ </a>
+ {/if}
+ {if="$page_max>1"}<span class="strong">{$page_current} / {$page_max}</span>{/if}
+ {if="$previous_page_url"}
+ <a href="{$previous_page_url}" class="paging_older">
+ <i class="fa fa-arrow-circle-right"></i>
+ </a>
+ {/if}
- </div>
+ </div>
- <div class="linksperpage pure-u-1-3">
- <div class="pure-u-0 pure-u-lg-visible">{'Links per page'|t}</div>
- <a href="?linksperpage=20">20</a>
- <a href="?linksperpage=50">50</a>
- <a href="?linksperpage=100">100</a>
- <form method="GET" class="pure-u-0 pure-u-lg-visible">
- <input type="text" name="linksperpage" placeholder="133">
- </form>
- </div>
- </div>
+ <div class="linksperpage pure-u-1-3">
+ <div class="pure-u-0 pure-u-lg-visible">{'Links per page'|t}</div>
+ <a href="?linksperpage=20">20</a>
+ <a href="?linksperpage=50">50</a>
+ <a href="?linksperpage=100">100</a>
+ <form method="GET" class="pure-u-0 pure-u-lg-visible">
+ <input type="text" name="linksperpage" placeholder="133">
+ </form>
</div>
</div>
</div>
\ No newline at end of file
<form method="POST" action="?do=save_pluginadmin" name="pluginform" id="pluginform">
<div class="pure-g">
- <div class="pure-u-lg-1-6 pure-u-1-24"></div>
- <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-complete">
+ <div class="pure-u-lg-1-8 pure-u-1-24"></div>
+ <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-complete">
<h2 class="window-title">{'Plugin administration'|t}</h2>
<section id="enabled_plugins">
<input type="hidden" name="order_{$key}" value="{$counter}">
</td>
</tr>
- <tr class="pure-u-lg-0 mobile-row">
+ <tr data-line="{$key}" data-order="{$counter}" class="pure-u-lg-0 mobile-row">
<td colspan="4"><label for="{$key}">{$value.description}</label></td>
</tr>
{/loop}
<form action="?do=save_pluginadmin" method="POST">
<div class="pure-g">
- <div class="pure-u-lg-1-6 pure-u-1-24"></div>
- <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-light">
+ <div class="pure-u-lg-1-8 pure-u-1-24"></div>
+ <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-light">
<h2 class="window-title">{'Plugin configuration'|t}</h2>
<section id="plugin_parameters">
<div>