1
0
mirror of https://github.com/moparisthebest/wallabag synced 2024-11-27 11:22:17 -05:00

bagit link + overlay save link + listmode

This commit is contained in:
Thomas LEBEAU 2014-03-08 13:47:15 +01:00
parent b3f7b7d200
commit 4744cb0e1d
5 changed files with 107 additions and 24 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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
========================================================================== */

View File

@ -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&amp;id={{ entry.id|e }}">{{ entry.title|raw }}</a></h2>

View File

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