mirror of https://github.com/wallabag/wallabag.git
bagit link + overlay save link + listmode
This commit is contained in:
Thomas LEBEAU
parent
b3f7b7d200
commit
4744cb0e1d
|
|
@ -4,7 +4,7 @@
|
|||
<li><a href="./?view=fav" {% if view == 'fav' %}class="current"{% endif %}>{% trans "favorites" %}</a></li>
|
||||
<li><a href="./?view=archive" {% if view == 'archive' %}class="current"{% endif %}>{% trans "archive" %}</a></li>
|
||||
<li><a href="./?view=tags" {% if view == 'tags' %}class="current"{% endif %}>{% trans "tags" %}</a></li>
|
||||
<li><a href="javascript: void(null);" id="pocheit">{% trans "save a link" %}</a></li>
|
||||
<li><a href="javascript: void(null);" id="bagit">{% trans "save a link" %}</a></li>
|
||||
<li><a href="./?view=config" {% if view == 'config' %}class="current"{% endif %}>{% trans "config" %}</a></li>
|
||||
<li><a class="icon icon-power" href="./?logout" title="{% trans "logout" %}">{% trans "logout" %}</a></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<div id="bagit-form" class="messages info">
|
||||
|
||||
<form method="get" action="index.php">
|
||||
<h2>{% trans "Save a link" %}</h2>
|
||||
<input required placeholder="example.com/article" class="addurl" id="plainurl" name="plainurl" type="url" />
|
||||
<input type="submit" value="{% trans "save link!" %}" />
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -173,7 +173,7 @@ h2:after {
|
|||
#links {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 9em;
|
||||
width: 10em;
|
||||
left: 0;
|
||||
text-align: right;
|
||||
background: #333;
|
||||
|
|
@ -184,7 +184,7 @@ h2:after {
|
|||
}
|
||||
|
||||
#main {
|
||||
margin-left: 12em;
|
||||
margin-left: 13em;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding-right: 5%;
|
||||
|
|
@ -228,7 +228,7 @@ h2:after {
|
|||
#links li:last-child {
|
||||
position: fixed;
|
||||
bottom: 1em;
|
||||
width: 9em;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
#links li:last-child a:before {
|
||||
|
|
@ -322,6 +322,15 @@ footer a {
|
|||
letter-spacing:-5px;
|
||||
}
|
||||
|
||||
.listmode .entrie {
|
||||
width: 100%!important;
|
||||
margin-left: 0!important;
|
||||
}
|
||||
|
||||
.listmode .entrie p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-entries + .results {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
|
@ -343,10 +352,10 @@ footer a {
|
|||
letter-spacing:normal;
|
||||
box-shadow: 0 3px 7px rgba(0,0,0,0.3);
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
width: 32%!important;
|
||||
margin-bottom: 1.5em;
|
||||
vertical-align: top;
|
||||
margin-left: 1.5%;
|
||||
margin-left: 1.5%!important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 1.5em 1.5em 3em 1.5em;
|
||||
|
|
@ -481,7 +490,7 @@ footer a {
|
|||
}
|
||||
|
||||
.entrie:nth-child(3n+1) {
|
||||
margin-left: 0;
|
||||
margin-left: 0!important;
|
||||
}
|
||||
|
||||
.results {
|
||||
|
|
@ -525,6 +534,33 @@ footer a {
|
|||
display: none;
|
||||
}
|
||||
|
||||
#bagit-form {
|
||||
background: rgba(0,0,0,0.8);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 10em;
|
||||
z-index: 20;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 2em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#bagit-form form {
|
||||
background: #FFF;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 20;
|
||||
border: 10px solid #000;
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
margin: -150px 0 0 -300px;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
3 = Pictos
|
||||
========================================================================== */
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
<div class="list-entries">
|
||||
<div id="list-entries" class="list-entries">
|
||||
{% for entry in entries %}
|
||||
<div id="entry-{{ entry.id|e }}" class="entrie"{% if listmode %} style="width:100%; margin-left:0;"{% endif %}>
|
||||
<h2><a href="index.php?view=view&id={{ entry.id|e }}">{{ entry.title|raw }}</a></h2>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,75 @@
|
|||
$(document).ready(function() {
|
||||
$.fn.ready(function() {
|
||||
|
||||
var $listmode = $('#listmode'),
|
||||
$listentries = $("#list-entries"),
|
||||
$bagit = $('#bagit'),
|
||||
$bagitForm = $('#bagit-form');
|
||||
|
||||
/* ==========================================================================
|
||||
Menu
|
||||
========================================================================== */
|
||||
|
||||
$("#menu").click(function(){
|
||||
$("#links").toggle();
|
||||
});
|
||||
|
||||
/* ==========================================================================
|
||||
List mode or Table Mode
|
||||
========================================================================== */
|
||||
|
||||
$("#listmode").click(function(){
|
||||
$listmode.click(function(){
|
||||
if ( $.cookie("listmode") == 1 ) {
|
||||
$(".entrie").css("width", "");
|
||||
$(".entrie").css("margin-left", "");
|
||||
|
||||
// Cookie
|
||||
$.removeCookie("listmode");
|
||||
$("#listmode").removeClass("tablemode");
|
||||
$("#listmode").addClass("listmode");
|
||||
|
||||
$listentries.removeClass("listmode");
|
||||
$listmode.removeClass("tablemode");
|
||||
$listmode.addClass("listmode");
|
||||
}
|
||||
else {
|
||||
// Cookie
|
||||
$.cookie("listmode", 1, {expires: 365});
|
||||
|
||||
$(".entrie").css("width", "100%");
|
||||
$(".entrie").css("margin-left", "0");
|
||||
$("#listmode").removeClass("listmode");
|
||||
$("#listmode").addClass("tablemode");
|
||||
$listentries.addClass("listmode");
|
||||
$listmode.removeClass("listmode");
|
||||
$listmode.addClass("tablemode");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* ==========================================================================
|
||||
Cookie listmode
|
||||
========================================================================== */
|
||||
|
||||
if ( $.cookie("listmode") == 1 ) {
|
||||
$(".entrie").css("width", "100%");
|
||||
$(".entrie").css("margin-left", "0");
|
||||
$("#listmode").removeClass("listmode");
|
||||
$("#listmode").addClass("tablemode");
|
||||
$listentries.addClass("listmode");
|
||||
$listmode.removeClass("listmode");
|
||||
$listmode.addClass("tablemode");
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
bag it link
|
||||
========================================================================== */
|
||||
|
||||
});
|
||||
$bagit.click(function(){
|
||||
$bagitForm.toggle();
|
||||
});
|
||||
|
||||
/* ==========================================================================
|
||||
Keyboard gestion
|
||||
========================================================================== */
|
||||
|
||||
$(window).keydown(function(e){
|
||||
switch (e.keyCode) {
|
||||
// s letter
|
||||
case 83:
|
||||
$bagitForm.toggle();
|
||||
break;
|
||||
case 27:
|
||||
$bagitForm.hide();
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
Loading…
Reference in New Issue