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

5 files changed, 128 insertions, 110 deletions

diff --git a/app/App_FrontController.php b/app/App_FrontController.php
index 1ddbfd89c..b7b060418 100644
--- a/app/App_FrontController.php
+++ b/app/App_FrontController.php
@@ -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'));
diff --git a/app/views/index/index.phtml b/app/views/index/index.phtml
index 47118264e..f9e953858 100644
--- a/app/views/index/index.phtml
+++ b/app/views/index/index.phtml
@@ -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 } ?>
diff --git a/app/views/javascript/main.phtml b/app/views/javascript/main.phtml
index 05368683c..e6c882333 100644
--- a/app/views/javascript/main.phtml
+++ b/app/views/javascript/main.phtml
@@ -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 () {
diff --git a/public/theme/freshrss.css b/public/theme/freshrss.css
index 46b8cb57b..e60310354 100644
--- a/public/theme/freshrss.css
+++ b/public/theme/freshrss.css
@@ -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 {
diff --git a/public/theme/global.css b/public/theme/global.css
index 3262036be..f4466cec1 100644
--- a/public/theme/global.css
+++ b/public/theme/global.css
@@ -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;