modif css

This commit is contained in:
nicosomb 2013-04-09 15:18:39 +02:00
parent e46efced1b
commit c594aedf8c
2 changed files with 183 additions and 113 deletions

View File

@ -1,3 +1,4 @@
/*** GENERAL ***/
body {
color: #222222;
font: 20px/1.3em Palatino,Georgia,serif;
@ -5,19 +6,168 @@ body {
margin: 10px;
}
body.article {
color: #222222;
font: 20px/1.3em Palatino,Georgia,serif;
background-color: #F1F1F1;
}
a, a:hover, a:visited {
color: #000;
}
header {
text-align: center;
}
#main ul#links {
padding: 0;
list-style-type: none;
text-align: center;
}
#main ul#links li {
display: inline;
}
#main ul#links li a.current {
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #040707;
color: #F1F1F1;
}
#main, #article {
margin: 0 auto;
}
#links a, .backhome a{
text-decoration: none;
padding: 5px 10px;
}
#links a:hover, .backhome a:hover{
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #040707;
color: #F1F1F1;
}
footer {
text-align: right;
}
/*** ***/
/*** GRID DISPLAY ***/
#content {
width: 800px;
margin: 0 auto;
}
#entries {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
width: 800px;
}
#entries span.content {
display: inline-block;
margin-bottom: 0px;
width: 100%;
}
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
#entries {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
width: 400px;
}
#content {
width: 400px;
}
}
/*** ***/
/*** LINKS DISPLAY ***/
#main a.tool {
text-decoration: none;
cursor: pointer;
}
#main #entries {
margin-top: 20px;
}
#main #entries .entrie {
color: rgb(46, 46, 46);
position:relative;
background-color: #ffffff;
padding: 15px;
min-height: 6em;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 2px -1px #000;
box-shadow: 0px 0px 2px -1px #000;
list-style-type: none;
}
#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;
margin-left: -20px;
}
#main #entries .entrie .tools a.tool span {
display: inline-block;
width: 16px;
height: 16px;
}
a.fav span {
background: url('../img/fav-on.png') no-repeat;
}
a.fav-off span {
background: url('../img/fav-off.png') no-repeat;
}
a.archive span {
background: url('../img/archive-on.png') no-repeat;
}
a.archive-off span {
background: url('../img/archive-off.png') no-repeat;
}
a.delete span {
background: url('../img/delete.png') no-repeat;
}
/*** ***/
/*** ARTICLE PAGE ***/
body.article {
color: #222222;
font: 20px/1.3em Palatino,Georgia,serif;
background-color: #F1F1F1;
}
#article header {
text-align: left;
border-bottom: 1px solid #222222;
@ -36,74 +186,4 @@ header {
text-decoration: none;
}
#main, #article {
margin: 0 auto;
}
#main ul#links {
padding: 0;
list-style-type: none;
text-align: center;
}
#main ul#links li {
display: inline;
}
#main ul#links li a.current {
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #040707;
color: #F1F1F1;
}
#links a, .backhome a{
text-decoration: none;
padding: 5px 10px;
}
#links a:hover, .backhome a:hover{
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #040707;
color: #F1F1F1;
}
#main #entries {
margin-top: 20px;
}
#main #entries .entrie {
color: rgb(46, 46, 46);
position:relative;
background-color: #ffffff;
padding: 15px;
min-height: 6em;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 0px 2px -1px #000;
box-shadow: 0px 0px 2px -1px #000;
}
#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;
margin-left: -20px;
}
#main a.tool {
text-decoration: none;
}
footer {
text-align: right;
}
/*** ***/

View File

@ -8,19 +8,8 @@
* @license http://www.wtfpl.net/ see COPYING file
*/
require_once dirname(__FILE__).'/inc/Readability.php';
require_once dirname(__FILE__).'/inc/Encoding.php';
include dirname(__FILE__).'/inc/functions.php';
try
{
$db_handle = new PDO('sqlite:db/poche.sqlite');
$db_handle->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch (Exception $e)
{
die('database error : '.$e->getMessage());
}
include dirname(__FILE__).'/inc/config.php';
$db = new db(DB_PATH);
$action = (isset ($_GET['action'])) ? htmlspecialchars($_GET['action']) : '';
$view = (isset ($_GET['view'])) ? htmlspecialchars($_GET['view']) : '';
@ -55,17 +44,9 @@ switch ($action)
}
}
$query = $db_handle->prepare('INSERT INTO entries ( url, title ) VALUES (?, ?)');
$query = $db->getHandle()->prepare('INSERT INTO entries ( url, title ) VALUES (?, ?)');
$query->execute(array($url, $title));
break;
case 'toggle_fav' :
$sql_action = "UPDATE entries SET is_fav=~is_fav WHERE id=?";
$params_action = array($id);
break;
case 'toggle_archive' :
$sql_action = "UPDATE entries SET is_read=~is_read WHERE id=?";
$params_action = array($id);
break;
case 'delete':
$sql_action = "DELETE FROM entries WHERE id=?";
$params_action = array($id);
@ -79,7 +60,7 @@ try
# action query
if (isset($sql_action))
{
$query = $db_handle->prepare($sql_action);
$query = $db->getHandle()->prepare($sql_action);
$query->execute($params_action);
}
}
@ -108,7 +89,7 @@ switch ($view)
# view query
try
{
$query = $db_handle->prepare($sql);
$query = $db->getHandle()->prepare($sql);
$query->execute($params);
$entries = $query->fetchAll();
}
@ -140,30 +121,37 @@ catch (Exception $e)
<header>
<h1><img src="img/logo.png" alt="logo poche" />poche</h1>
</header>
<div id="main" class="w960p">
<div id="main">
<ul id="links">
<li><a href="index.php" <?php echo (($view == 'index') ? 'class="current"' : ''); ?>>home</a></li>
<li><a href="?view=fav" <?php echo (($view == 'fav') ? 'class="current"' : ''); ?>>favorites</a></li>
<li><a href="?view=archive" <?php echo (($view == 'archive') ? 'class="current"' : ''); ?>>archive</a></li>
<li><a style="cursor: move" 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>
<div id="entries">
<div id="content">
<ul id="entries">
<?php
$i = 0;
$i = 1;
foreach ($entries as $entry)
{
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">&#10003;</a> <a href="?action=toggle_fav&id='.$entry['id'].'" title="toggle favorite" class="tool">'.(($entry['is_fav'] == 0) ? '&#9734;' : '&#9733;' ).'</a> <a href="?action=delete&id='.$entry['id'].'" title="toggle delete" onclick="return confirm(\'Are you sure?\')" class="tool">&#10799;</a></div></aside>';
$i++;
if ($i == 3) {
echo '</section>';
$i = 0;
}
?>
<li id="entry-<?php echo $entry['id']; ?>" class="entrie mb2">
<span class="content">
<h2 class="h6-like">
<a href="readityourself.php?url=<?php echo urlencode($entry['url']); ?>"><?php echo $entry['title']; ?>
</h2>
<div class="tools">
<a title="toggle mark as read" class="tool archive <?php echo ( ($entry['is_read'] == '0') ? 'archive-off' : '' ); ?>" onclick="toggle_archive(<?php echo $entry['id']; ?>)"><span></span></a>
<a title="toggle favorite" class="tool fav <?php echo ( ($entry['is_fav'] == '0') ? 'fav-off' : '' ); ?>" onclick="toggle_favorite(this, <?php echo $entry['id']; ?>)"><span></span></a>
<a href="?action=delete&id=<?php echo $entry['id']; ?>" title="toggle delete" onclick="return confirm('Are you sure?')" class="tool delete"><span></span></a>
</div>
</span>
</li>
<?php
$i++;
}
?>
</ul>
</div>
</div>
<footer class="mr2 mt3 smaller">
@ -172,5 +160,7 @@ catch (Exception $e)
Logo by <a href="http://www.iconfinder.com/icondetails/43256/128/jeans_monotone_pocket_icon">Brightmix</a>.<br />
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>
</footer>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/poche.js"></script>
</body>
</html>