mirror of
https://github.com/wallabag/wallabag.git
synced 2024-11-23 01:21:03 +00:00
mise en page de l'affichage d'un article
This commit is contained in:
nicosomb
parent
386407c14a
commit
7eca3552c8
7 changed files with 93 additions and 150 deletions
|
|
@ -1,35 +0,0 @@
|
||||||
html, body, div, span, object, iframe,
|
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
||||||
a, abbr, acronym, address, code,
|
|
||||||
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
|
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
font-weight: inherit;
|
|
||||||
font-style: inherit;
|
|
||||||
font-size: 100%;
|
|
||||||
font-family: inherit;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Tables still need 'cellspacing="0"' in the markup. */
|
|
||||||
table { border-collapse: separate; border-spacing: 0; }
|
|
||||||
caption, th, td { text-align: left; font-weight: normal; }
|
|
||||||
table, td, th { vertical-align: middle; }
|
|
||||||
|
|
||||||
/* Remove possible quote marks (") from <q>, <blockquote>. */
|
|
||||||
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
|
|
||||||
blockquote, q { quotes: "" ""; }
|
|
||||||
|
|
||||||
/* Remove annoying border on linked images. */
|
|
||||||
a img { border: none; }
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
|
||||||
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,7 +1,11 @@
|
||||||
body {
|
body {
|
||||||
color: #222222;
|
color: #222222;
|
||||||
font: 20px/1.3em Palatino,Georgia,serif;
|
font: 20px/1.3em Palatino,Georgia,serif;
|
||||||
background-color: #e6e6e6;
|
background-color: #F1F1F1;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.article {
|
||||||
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
a, a:hover, a:visited {
|
a, a:hover, a:visited {
|
||||||
|
|
@ -11,7 +15,20 @@ header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
#article header {
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid #222222;
|
||||||
|
}
|
||||||
|
|
||||||
|
#article header a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#article header .vieworiginal a {
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main, #article {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -26,6 +43,32 @@ header {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#main #entries {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main #entries .entrie {
|
||||||
|
color: rgb(46, 46, 46);
|
||||||
|
position:relative;
|
||||||
|
background-color: #ffffff;
|
||||||
|
height: 8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main #entries .entrie h2 a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main #entries .entrie h2 a:hover {
|
||||||
|
color: #F5BE00;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main #entries .entrie .tools {
|
||||||
|
position:absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
#main a.tool {
|
#main a.tool {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
|
|
||||||
body {
|
|
||||||
font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0;
|
|
||||||
font-size-adjust:none;
|
|
||||||
font-style:normal;
|
|
||||||
font-variant:normal;
|
|
||||||
font-weight:normal;
|
|
||||||
padding: 15px;
|
|
||||||
margin: 15px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
article {
|
|
||||||
border: 3px solid grey;
|
|
||||||
max-width:700px;
|
|
||||||
margin: 15px auto;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
border: 1px solid black;
|
|
||||||
padding: 15px;
|
|
||||||
margin: 15px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
p { padding:0 0 0.8125em 0; color:#111; font-weight:300;}
|
|
||||||
|
|
||||||
p + p { text-indent:1.625em;}
|
|
||||||
|
|
||||||
img { display: block; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; }
|
|
||||||
|
|
||||||
p > img { display: inline-block; margin: 0; }
|
|
||||||
|
|
||||||
h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; }
|
|
||||||
h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; }
|
|
||||||
|
|
||||||
|
|
||||||
h1 { font-size: 2.125em; margin-bottom: 0.765em; line-height: 1.5em;}
|
|
||||||
h2 { font-size: 1.9em; margin-bottom: 0.855em; }
|
|
||||||
h3 { font-size: 1.7em; margin-bottom: 0.956em; }
|
|
||||||
h4 { font-size: 1.4em; margin-bottom: 1.161em; }
|
|
||||||
h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; }
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
ul{list-style-position:outside;}
|
|
||||||
li ul,
|
|
||||||
li ol { margin:0 1.625em; }
|
|
||||||
ul, ol { margin: 0 0 1.625em 0; }
|
|
||||||
|
|
||||||
|
|
||||||
dl { margin: 0 0 1.625em 0; }
|
|
||||||
dl dt { font-weight: bold; }
|
|
||||||
dl dd { margin-left: 1.625em; }
|
|
||||||
|
|
||||||
a { color:#005AF2; text-decoration:none; }
|
|
||||||
a:hover { text-decoration: underline; }
|
|
||||||
|
|
||||||
|
|
||||||
table { margin-bottom:1.625em; border-collapse: collapse; }
|
|
||||||
th { font-weight:bold; }
|
|
||||||
tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; }
|
|
||||||
tfoot { font-style: italic; }
|
|
||||||
caption { text-align:center; font-family:Georgia, serif; }
|
|
||||||
|
|
||||||
|
|
||||||
abbr, acronym { border-bottom:1px dotted #000; }
|
|
||||||
address { margin-top:1.625em; font-style: italic; }
|
|
||||||
del {color:#000;}
|
|
||||||
|
|
||||||
|
|
||||||
blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; }
|
|
||||||
blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */
|
|
||||||
blockquote > p {padding:0; margin:0; }
|
|
||||||
|
|
||||||
strong { font-weight: bold; }
|
|
||||||
em, dfn { font-style: italic; }
|
|
||||||
dfn { font-weight: bold; }
|
|
||||||
pre, code { margin: 1.625em 0; white-space: pre; }
|
|
||||||
pre, code, tt { font: 1em monospace; line-height: 1.5; }
|
|
||||||
tt { display: block; margin: 1.625em 0; }
|
|
||||||
hr { margin-bottom:1.625em; }
|
|
||||||
|
|
||||||
.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; }
|
|
||||||
.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; }
|
|
||||||
.mono { font-family:"Courier New", Courier, monospace; }
|
|
||||||
20
index.php
20
index.php
|
|
@ -24,7 +24,7 @@ catch (Exception $e)
|
||||||
|
|
||||||
$action = (isset ($_GET['action'])) ? htmlspecialchars($_GET['action']) : '';
|
$action = (isset ($_GET['action'])) ? htmlspecialchars($_GET['action']) : '';
|
||||||
$view = (isset ($_GET['view'])) ? htmlspecialchars($_GET['view']) : '';
|
$view = (isset ($_GET['view'])) ? htmlspecialchars($_GET['view']) : '';
|
||||||
$in = (isset ($_GET['id'])) ? htmlspecialchars($_GET['id']) : '';
|
$id = (isset ($_GET['id'])) ? htmlspecialchars($_GET['id']) : '';
|
||||||
|
|
||||||
switch ($action)
|
switch ($action)
|
||||||
{
|
{
|
||||||
|
|
@ -128,21 +128,31 @@ catch (Exception $e)
|
||||||
<header>
|
<header>
|
||||||
<h1><img src="img/logo.png" alt="logo poche" />poche</h1>
|
<h1><img src="img/logo.png" alt="logo poche" />poche</h1>
|
||||||
</header>
|
</header>
|
||||||
<div id="main" class="w800p">
|
<div id="main" class="w960p">
|
||||||
<ul id="links">
|
<ul id="links">
|
||||||
<li><a href="index.php">home</a></li>
|
<li><a href="index.php">home</a></li>
|
||||||
<li><a href="?view=fav">favorites</a></li>
|
<li><a href="?view=fav">favorites</a></li>
|
||||||
<li><a href="?view=archive">archive</a></li>
|
<li><a href="?view=archive">archive</a></li>
|
||||||
<li><a title="i am a bookmarklet, use me !" href="javascript:(function(){var%20url%20=%20location.href;var%20title%20=%20document.title%20||%20url;window.open('<?php echo url()?>?action=add&url='%20+%20encodeURIComponent(url),'_self');})();">poche it !</a></li>
|
<li><a title="i am a bookmarklet, use me !" href="javascript:(function(){var%20url%20=%20location.href;var%20title%20=%20document.title%20||%20url;window.open('<?php echo url()?>?action=add&url='%20+%20encodeURIComponent(url),'_self');})();">poche it !</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul id="entries">
|
<div id="entries">
|
||||||
<?php
|
<?php
|
||||||
|
$i = 0;
|
||||||
foreach ($entries as $entry)
|
foreach ($entries as $entry)
|
||||||
{
|
{
|
||||||
echo '<li><a href="readityourself.php?url='.urlencode($entry['url']).'">' . $entry['title'] . '</a> <a href="?action=toggle_archive&id='.$entry['id'].'" title="toggle mark as read" class="tool">✓</a> <a href="?action=toggle_fav&id='.$entry['id'].'" title="toggle favorite" class="tool">'.(($entry['is_fav'] == 0) ? '☆' : '★' ).'</a> <a href="?action=delete&id='.$entry['id'].'" title="toggle delete" class="tool">⨯</a></li>';
|
if ($i == 0) {
|
||||||
|
echo '<section class="line grid3">';
|
||||||
|
}
|
||||||
|
echo '<aside class="mod entrie mb2"><h2 class="h6-like"><a href="readityourself.php?url='.urlencode($entry['url']).'">' . $entry['title'] . '</h2><div class="tools"><a href="?action=toggle_archive&id='.$entry['id'].'" title="toggle mark as read" class="tool">✓</a> <a href="?action=toggle_fav&id='.$entry['id'].'" title="toggle favorite" class="tool">'.(($entry['is_fav'] == 0) ? '☆' : '★' ).'</a> <a href="?action=delete&id='.$entry['id'].'" title="toggle delete" class="tool">⨯</a></div></aside>';
|
||||||
|
|
||||||
|
$i++;
|
||||||
|
if ($i == 3) {
|
||||||
|
echo '</section>';
|
||||||
|
$i = 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer class="mr2 mt3">
|
<footer class="mr2 mt3">
|
||||||
<p class="smaller"><a href="http://github.com/nicosomb/poche">poche</a> is a read it later open source system, based on <a href="http://www.memiks.fr/readityourself/">ReadItYourself</a>. <a href="https://twitter.com/getpoche" title="follow us on twitter">@getpoche</a>. Logo by <a href="http://www.iconfinder.com/icondetails/43256/128/jeans_monotone_pocket_icon">Brightmix</a>. poche is developed by <a href="http://nicolas.loeuillet.org">Nicolas Lœuillet</a> under the <a href="http://www.wtfpl.net/">WTFPL</a>.</p>
|
<p class="smaller"><a href="http://github.com/nicosomb/poche">poche</a> is a read it later open source system, based on <a href="http://www.memiks.fr/readityourself/">ReadItYourself</a>. <a href="https://twitter.com/getpoche" title="follow us on twitter">@getpoche</a>. Logo by <a href="http://www.iconfinder.com/icondetails/43256/128/jeans_monotone_pocket_icon">Brightmix</a>. poche is developed by <a href="http://nicolas.loeuillet.org">Nicolas Lœuillet</a> under the <a href="http://www.wtfpl.net/">WTFPL</a>.</p>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,3 @@
|
||||||
<footer>
|
<footer class="mr2 mt3">
|
||||||
<div>
|
<p class="smaller"><a href="http://github.com/nicosomb/poche">poche</a> is a read it later open source system, based on <a href="http://www.memiks.fr/readityourself/">ReadItYourself</a>. <a href="https://twitter.com/getpoche" title="follow us on twitter">@getpoche</a>. Logo by <a href="http://www.iconfinder.com/icondetails/43256/128/jeans_monotone_pocket_icon">Brightmix</a>. poche is developed by <a href="http://nicolas.loeuillet.org">Nicolas Lœuillet</a> under the <a href="http://www.wtfpl.net/">WTFPL</a>.</p>
|
||||||
Copyright © <a href="http://www.memiks.fr/">memiks.fr</a> | <a href="http://shaarli.memiks.fr/">Liens</a> / <a href="http://rss.memiks.fr/">RSS</a> / <a href="http://wiki.memiks.fr/">Wiki</a> / <a href="mailto:memiks@memiks.fr">Contact</a><br>
|
</footer>
|
||||||
Licence: WTF Licence<br>
|
|
||||||
More information HERE: <a href="http://www.memiks.fr/readityourself/">http://www.memiks.fr/readityourself/</a> Version : <span class="version">{$version}</span>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,32 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<!--[if lte IE 6]> <html class="no-js ie6 ie67 ie678" lang="en"> <![endif]-->
|
||||||
|
<!--[if lte IE 7]> <html class="no-js ie7 ie67 ie678" lang="en"> <![endif]-->
|
||||||
|
<!--[if IE 8]> <html class="no-js ie8 ie678" lang="en"> <![endif]-->
|
||||||
|
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel='stylesheet' href='./css/reset.css' type='text/css' media='all' />
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
|
||||||
<link rel='stylesheet' href='./css/typography.css' type='text/css' media='all' />
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=10">
|
||||||
<title>{$title}</title>
|
<link rel="stylesheet" href="./css/knacss.css" media="all">
|
||||||
</head>
|
<link rel="stylesheet" href="./css/style.css" media="all">
|
||||||
<body>
|
<title>{$title}</title>
|
||||||
<article>
|
</head>
|
||||||
<h1><a href="{$url}">{$title}</a></h1>
|
<body class="article">
|
||||||
<div id="readityourselfcontent">
|
<div id="article" class="w600p">
|
||||||
{$content}
|
<div>
|
||||||
</div>
|
<a href="index.php" title="back to home">←</a>
|
||||||
<span class="comeFrom">Come From : <a href="{$url}">{$url}</a>
|
</div>
|
||||||
</article>
|
<header class="mbm">
|
||||||
{include="footer"}
|
<h1><a href="{$url}">{$title}</a></h1>
|
||||||
</body>
|
<div class="vieworiginal txtright small"><a href="{$url}" target="_blank">view original</a></div>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<div id="readityourselfcontent">
|
||||||
|
{$content}
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
{include="footer"}
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue