web: polished node and comment layout

This commit is contained in:
Bart Van Der Meerssche 2009-09-09 21:59:38 +00:00
parent 1d205314a1
commit 76cbf7524c
3 changed files with 182 additions and 65 deletions

View File

@ -20,7 +20,7 @@ $comment_class = 'comment' . (($comment->new) ? ' comment-new' : '') .
<div class="clear"></div>
</div>
<div class="comment-meta">
<span><strong><?php print $author; ?></strong> | <?php print $date; ?></span>
<span><strong><?php print $author; ?></strong> | <?php print format_date($comment->timestamp, 'custom', t('d M Y')); ?></span>
<?php if ($links) { print $links; } ?>
</div>
</div>

View File

@ -1,22 +1,51 @@
<div class="node<?php print ($sticky) ? " sticky" : ""; ?>">
<?php if ($page == 0): ?>
<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php else: ?>
<?php print $picture ?>
<?php
/**
* @file node.tpl.php
* The node rendering logic for Flukso.
*
* In addition to the standard variables Drupal makes available to node.tpl.php,
* these variables are made available by the theme:
*
* - $flukso_node_author - The node's "posted by" text and author link.
*
* - $flukso_node_class - The CSS classes to apply to the node.
*
* - $flukso_node_links - The node links with a separator placed between each.
*
* - $flukso_perma_title - The localized permalink text for the node.
*
* - $flukso_term_links - The taxonomy links with a separator placed between
* each.
*
* - $flukso_node_timestamp - The timestamp for this type, if one should be
* rendered for this type.
*
* $Id$
*/
?>
<div id="node-<?php print $node->nid; ?>" class="<?php echo $flukso_node_class; ?>">
<?php //if ($page == 0): ?>
<div class="node-headline clear-block">
<h2><a href="<?php print $node_url; ?>" rel="bookmark" title="<?php print $flukso_perma_title; ?>"><?php print $title; ?></a></h2>
<?php if (isset($flukso_node_timestamp)): ?>
<span class="timestamp"><?php print $flukso_node_timestamp; ?></span>
<?php endif; ?>
<?php if ($submitted): ?>
<span class="submitted"><?php print t('!date — !username', array('!username' => theme('username', $node), '!date' => format_date($node->created))); ?></span>
</div>
<?php //endif; ?>
<div class="content clear-block">
<?php if (isset($flukso_node_author)): ?>
<div class="node-author"><?php print $flukso_node_author; ?></div>
<?php endif; ?>
<div class="content"><?php print $content ?></div>
<?php if ($links): ?>
<em class="clear links">>> <?php print $links ?></em>
<?php print $picture; ?>
<?php print $content; ?>
</div>
<?php if (!empty($taxonomy) || !empty($links)): ?>
<div class="meta">
<?php
if ($taxonomy) { print $flukso_term_links; }
if (!empty($links)): ?>
<div class="links"><?php print $flukso_node_links; ?></div>
<?php endif; ?>
<?php if ($page == 1): ?>
<em class="clear terms"><?php print $terms ?></em>
</div>
<?php endif; ?>
</div>
</div> <!-- node -->

View File

@ -25,9 +25,13 @@ a:hover {
body {
background: #fff;
color: #444;
font-family: Arial, system, Tahoma, sans-serif;
font-size: 100%;
color: #222;
font: 100%/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
p {
margin: 1em 0;
padding: 0em 2.6em;
}
h1, h2, h3, h4, h5, h6 {
@ -114,6 +118,8 @@ table {
}
#content {
float: left;
clear: none;
background: #f3f3f3;
border: 1px solid #ddd;
font-size: .8em;
@ -143,12 +149,6 @@ table {
font-weight: normal;
}
.node {
/* border: 1px solid #ddd; */
font-size: 1em;
margin-bottom: 3em;
}
.breadcrumb {
font-size: 1em;
padding: 0 0 .2em 0;
@ -178,46 +178,125 @@ input[type="text"], textarea, input.form-password {
padding: 1px;
}
.node h2 {
/* background: #f3f3f3; */
color: #f7f7f7;
font-size: 1.6em;
padding: 0 0 1em 0;
}
.node .content, .node .info {
background: #f3f3f3;
/* ------------------------------------------------------------------------
* Node
* --------------------------------------------------------------------- */
.teaser .content p { margin-bottom: 0; }
.readmore { text-transform: lowercase; }
.teaser .content p+p { margin-top: 20px; }
.node {
font-size: 1em;
margin-bottom: 4.5em;
}
.node .picture {
border: 1px solid #ddd;
float: right;
margin: 0.5em;
.node .node-headline {
padding: 1em 0 0 0;
width: 100%;
}
.node.item-listing {
padding: 1em;
border-top: 1px solid #ff0000;
}
.node.item-listing.sticky {
background-image: none;
}
.node table ul {
.node .node-headline h2 {
font-size: 1.75em;
display: inline-block;
float: left;
line-height: 1em;
margin: 0;
padding: 1em;
padding: 0;
text-transform: lowercase;
width: 66%;
}
.node.sticky .title {
background-image: none;
.node .node-headline {
border-bottom: 4px solid #c8c8c8;
margin-bottom: 0.5em;
}
.node .title {
border-bottom: 1px solid #ff0000;
.node .node-headline h2 a:link, .node .node-headline h2 a:visited,
h3.searchresult a:link, h3.searchresult a:visited {
color: #666;
font-weight: normal;
text-decoration: none;
}
.node .node-headline h2 a:hover,
h3.searchresult a:hover {
color: #fff;
font-weight: normal;
text-decoration: none;
}
.node .node-headline .timestamp {
color: #c8c8c8;
float: right;
font-size: 2em;
font-weight: normal;
letter-spacing: -1px;
line-height: 1em;
margin: 0;
padding: 0;
text-align: right;
text-transform: lowercase;
vertical-align: bottom;
width: 33%;
}
.node-author {
color: #aaa;
font-style: normal;
margin: -0.4em 0 0.4em 0;
padding: 0;
text-align: right;
text-transform: lowercase;
}
.node .content .user-picture {
display: inline-block;
float: right;
margin: 0 0 0 0.75em;
padding: 0;
}
.node .content {
background-color: #ececec;
clear: both;
padding: 0;
}
.node .content p {
margin: 2em 0;
}
.meta {
background-color: #ccc;
color: #fff;
font-style: normal;
padding: 2px 5px;
text-align: right;
text-transform: lowercase;
}
.meta ul.inline,
.meta ul.inline li {
display: inline;
list-style-image: none;
margin: 0;
padding: 0;
}
.meta a:link {
color: #fff;
}
.post-comment-help {
color: #888;
text-align: right;
}
.messages {
background: #eee;
margin: 0em;
@ -275,13 +354,14 @@ br.clear {
}
#footer {
float: left;
background: #f3f3f3;
border: 1px solid #ddd;
color: #aaa;
font-size: 0.64em;
font-size: 0.8em;
padding: .2em 0 .2em 0;
width: 684px;
margin: 12px 0 0 0;
margin: 12px 0;
text-align: center;
}
@ -414,6 +494,7 @@ html.js fieldset legend a:hover {
clear: none;
}
/* ------------------------------------------------------------------------
* Comments
* --------------------------------------------------------------------- */
@ -461,7 +542,14 @@ div.comment img.user-picture {
padding: 0 10px 5px 0;
}
div.comment div.content p+p { margin-top: 1.5em; }
div.comment div.content p {
padding: 0 3em;
}
div.comment div.content p+p {
margin-top: 1.5em;
padding: 0 3em;
}
div.even div.content { background-color: #fff; }
@ -483,11 +571,11 @@ div.even div.comment-meta {
}
div.odd {
background-color: #eee;
background-color: #fff;
}
div.odd div.comment-meta {
background: #f3f3f3 url(images/comment-dark.gif) no-repeat top left;
background: #f3f3f3 url(images/comment-light.gif) no-repeat top left;
}
em.moderation {