Ajout partage par mail (voir issue #34) + déplacement des options de partage en bas des articles

This commit is contained in:
Marien Fressinaud
2013-04-13 12:24:14 +02:00
parent 2f7ecb2e49
commit 1cc118acdc
5 changed files with 128 additions and 110 deletions

View File

@@ -33,8 +33,8 @@ class App_FrontController extends FrontController {
}
private function loadStylesAndScripts () {
View::prependStyle (Url::display ('/theme/global.css'));
View::prependStyle (Url::display ('/theme/freshrss.css'));
View::appendStyle (Url::display ('/theme/global.css'));
View::appendStyle (Url::display ('/theme/freshrss.css'));
View::appendScript ('https://login.persona.org/include.js');
View::appendScript (Url::display ('/scripts/jquery.js'));
View::appendScript (Url::display ('/scripts/notification.js'));

View File

@@ -25,7 +25,7 @@ if (isset ($this->entryPaginator)) {
<?php $display_others = false; } ?>
<div class="flux<?php echo !$item->isRead () ? ' not_read' : ''; ?><?php echo $item->isFavorite () ? ' favorite' : ''; ?>" id="flux_<?php echo $item->id (); ?>">
<ul class="flux_header">
<ul class="horizontal-list flux_header">
<?php if (!login_is_conf ($this->conf) || is_logged ()) { ?>
<li class="item manage">
<?php if (!$item->isRead ()) { ?>
@@ -39,27 +39,44 @@ if (isset ($this->entryPaginator)) {
<?php } else { ?>
<a class="bookmark" href="<?php echo _url ('entry', 'bookmark', 'id', $item->id (), 'is_favorite', 0); ?>">&nbsp;</a>
<?php } ?>
<a class="note" href="<?php echo _url ('entry', 'note', 'id', $item->id ()); ?>">
<?php if ($item->notes () != '') { ?>
<i class="icon i_note"></i>
<?php } else { ?>
<i class="icon i_note_empty"></i>
<?php } ?>
</a>
</li>
<?php } ?>
<?php $feed = $item->feed (true); ?>
<li class="item website"><a href="<?php echo _url ('index', 'index', 'get', 'f_' . $feed->id ()); ?>"><img class="favicon" src="http://g.etfv.co/<?php echo $feed->website (); ?>" alt="" /> <span><?php echo $feed->name (); ?></span></a></li>
<li class="item title"><h1><?php echo $item->title (); ?></h1></li>
<li class="item title"><?php echo $item->title (); ?></li>
<li class="item date">le <?php echo $item->date (); ?></li>
<li class="item link"><a target="_blank" href="<?php echo $item->link (); ?>">&nbsp;</a></li>
</ul>
<div class="content">
<?php $author = $item->author (); ?>
<?php echo $author != '' ? '<div class="author">Par <em>' . $author . '</em></div>' : ''; ?>
<?php echo $item->content (); ?>
<div class="flux_content">
<div class="content">
<h1 class="title"><?php echo $item->title (); ?></h1>
<?php $author = $item->author (); ?>
<?php echo $author != '' ? '<div class="author">Par <em>' . $author . '</em></div>' : ''; ?>
<?php echo $item->content (); ?>
</div>
<ul class="horizontal-list bottom">
<li class="item">
<?php if ($item->notes () != '') { ?>
<i class="icon i_note"></i> <a class="note" href="<?php echo _url ('entry', 'note', 'id', $item->id ()); ?>">Modifier votre note</a>
<?php } else { ?>
<i class="icon i_note_empty"></i> <a class="note" href="<?php echo _url ('entry', 'note', 'id', $item->id ()); ?>">Ajouter une note</a>
<?php } ?>
</li>
<li class="item">
<div class="dropdown">
<div id="dropdown-share-<?php echo $item->id ();?>" class="dropdown-target"></div>
<a class="dropdown-toggle" href="#dropdown-share-<?php echo $item->id ();?>">Partager</a>
<ul class="dropdown-menu">
<li class="dropdown-close"><a href="#close"><i class="icon i_close"></i></a></li>
<li class="item"><a href="mailto:?subject=<?php echo $item->title (); ?>&amp;body=J'ai trouvé cet article intéressant, tu peux le lire à cette adresse : <?php echo urlencode($item->link ()); ?>">Par mail</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<?php } ?>

View File

@@ -26,10 +26,10 @@ function toggleContent (new_active, old_active) {
}
if (hide_posts) {
old_active.children (".content").toggle (0);
old_active.children (".flux_content").toggle (0);
if (old_active[0] != new_active[0]) {
new_active.children (".content").toggle (0, function () {
new_active.children (".flux_content").toggle (0, function () {
$("html,body").scrollTop (new_active.position ().top);
});
}
@@ -127,7 +127,7 @@ function init_posts () {
init_img ();
if (hide_posts) {
$(".flux:not(.active) .content").hide ();
$(".flux:not(.active) .flux_content").hide ();
}
$(".flux_header .item.title, .flux_header .item.date").click (function () {

View File

@@ -184,122 +184,103 @@
}
.flux_header {
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
width: 100%;
height: 25px;
font-size: 12px;
line-height: 25px;
border-top: 1px solid #ddd;
}
.flux_header .item {
display: table-cell;
vertical-align: middle;
.flux_header .item.manage {
width: 60px;
white-space: nowrap;
font-size: 0px;
text-align: center;
}
.flux_header .item.manage {
width: 90px;
white-space: nowrap;
font-size: 0px;
.flux_header .item.manage .read {
display: inline-block;
width: 30px;
height: 40px;
background: url("icons/read.svg") center center no-repeat;
vertical-align: middle;
text-align: center;
}
.flux_header .item.manage .read {
display: inline-block;
width: 30px;
height: 40px;
background: url("icons/read.svg") center center no-repeat;
vertical-align: middle;
.flux_header .item.manage .read:hover {
text-decoration: none;
}
.flux_header .item.manage .read:hover {
text-decoration: none;
}
.flux.not_read .flux_header .item.manage .read {
background: url("icons/unread.svg") center center no-repeat;
}
.flux_header .item.manage .bookmark {
display: inline-block;
width: 30px;
height: 40px;
background: url("icons/non-starred.svg") center center no-repeat;
vertical-align: middle;
.flux.not_read .flux_header .item.manage .read {
background: url("icons/unread.svg") center center no-repeat;
}
.flux_header .item.manage .bookmark:hover {
text-decoration: none;
}
.flux.favorite .flux_header .item.manage .bookmark {
background: url("icons/starred.svg") center center no-repeat;
}
.flux_header .item.manage .note {
display: inline-block;
width: 30px;
height: 40px;
vertical-align: middle;
line-height: 40px;
font-size: 12px;
}
.flux_header .item.website {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 40px;
.flux_header .item.manage .bookmark {
display: inline-block;
width: 30px;
height: 40px;
background: url("icons/non-starred.svg") center center no-repeat;
vertical-align: middle;
}
.flux_header .item.website a {
display: block;
padding: 0 5px;
height: 40px;
.flux_header .item.manage .bookmark:hover {
text-decoration: none;
}
.flux_header .item.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
.flux_header .item.title h1 {
font-size: 12px;
margin: 0;
font-weight: normal;
.flux.favorite .flux_header .item.manage .bookmark {
background: url("icons/starred.svg") center center no-repeat;
}
.flux.not_read .flux_header .item.title h1 {
font-weight: bold;
}
.flux_header .item.date {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: right;
font-size: 10px;
color: #666;
cursor: pointer;
.flux_header .item.website {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
line-height: 40px;
}
.flux_header .item.website a {
display: block;
padding: 0 5px;
height: 40px;
}
.flux_header .item.link {
.flux_header .item.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
.flux.not_read .flux_header .item.title {
font-weight: bold;
}
.flux_header .item.date {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: right;
font-size: 10px;
color: #666;
cursor: pointer;
}
.flux_header .item.link {
width: 35px;
text-align: center;
}
.flux_header .item.link a {
display: inline-block;
width: 35px;
text-align: center;
height: 40px;
background: url("icons/link.svg") center center no-repeat;
vertical-align: middle;
}
.flux_header .item.link a {
display: inline-block;
width: 35px;
height: 40px;
background: url("icons/link.svg") center center no-repeat;
vertical-align: middle;
.flux_header .item.link a:hover {
text-decoration: none;
}
.flux_header .item.link a:hover {
text-decoration: none;
}
.content {
max-width: 550px;
margin: 0 auto;
padding: 10px;
padding: 20px 10px;
line-height: 170%;
font-family: 'OpenSans';
}
.content .title {
margin: 0 0 5px;
}
.content h1, .content h2, .content h3 {
margin: 20px 0 5px;
}
.content p {
margin: 0 0 20px;
}
@@ -329,6 +310,11 @@
margin: 0;
}
.flux_content .bottom {
font-size: 90%;
text-align: center;
}
/*** PAGINATION ***/
.pagination {
display: table;
@@ -400,7 +386,8 @@
.aside .btn-important,
.aside .feeds .dropdown,
.flux_header .item.website span,
.flux_header .item.date {
.flux_header .item.date,
.flux_content .bottom {
display: none;
}
.flux_header .item.website {

View File

@@ -69,6 +69,7 @@ label {
}
input, select, textarea {
display: inline-block;
max-width: 100%;
min-height: 25px;
padding: 5px;
background: #fdfdfd;
@@ -294,6 +295,19 @@ input, select, textarea {
padding: 5px 10px;
}
/* HORIZONTAL-LIST */
.horizontal-list {
display: table;
table-layout: fixed;
margin: 0;
padding: 0;
width: 100%;
}
.horizontal-list .item {
display: table-cell;
vertical-align: middle;
}
/* DROPDOWN */
.dropdown {
position: relative;