starcalc
/
flm01
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/drupal/themes/flukso/comment.tpl.php
View File

@ -20,7 +20,7 @@ $comment_class = 'comment' . (($comment->new) ? ' comment-new' : '') .
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="comment-meta"> <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; } ?> <?php if ($links) { print $links; } ?>
</div> </div>
</div> </div>

65
web/drupal/themes/flukso/node.tpl.php
View File

@ -1,22 +1,51 @@
<div class="node<?php print ($sticky) ? " sticky" : ""; ?>"> <?php
/**
<?php if ($page == 0): ?> * @file node.tpl.php
<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2> * The node rendering logic for Flukso.
<?php else: ?> *
<?php print $picture ?> * 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 endif; ?>
</div>
<?php if ($submitted): ?> <?php //endif; ?>
<span class="submitted"><?php print t('!date — !username', array('!username' => theme('username', $node), '!date' => format_date($node->created))); ?></span> <div class="content clear-block">
<?php if (isset($flukso_node_author)): ?>
<div class="node-author"><?php print $flukso_node_author; ?></div>
<?php endif; ?> <?php endif; ?>
<?php print $picture; ?>
<div class="content"><?php print $content ?></div> <?php print $content; ?>
</div>
<?php if ($links): ?> <?php if (!empty($taxonomy) || !empty($links)): ?>
<em class="clear links">>> <?php print $links ?></em> <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 endif; ?>
<?php if ($page == 1): ?> </div>
<em class="clear terms"><?php print $terms ?></em>
<?php endif; ?> <?php endif; ?>
</div> <!-- node -->
</div>

170
web/drupal/themes/flukso/style.css
View File

@ -25,9 +25,13 @@ a:hover {
body { body {
background: #fff; background: #fff;
color: #444; color: #222;
font-family: Arial, system, Tahoma, sans-serif; font: 100%/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 100%; }
p {
margin: 1em 0;
padding: 0em 2.6em;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
@ -114,6 +118,8 @@ table {
} }
#content { #content {
float: left;
clear: none;
background: #f3f3f3; background: #f3f3f3;
border: 1px solid #ddd; border: 1px solid #ddd;
font-size: .8em; font-size: .8em;
@ -143,12 +149,6 @@ table {
font-weight: normal; font-weight: normal;
} }
.node {
/* border: 1px solid #ddd; */
font-size: 1em;
margin-bottom: 3em;
}
.breadcrumb { .breadcrumb {
font-size: 1em; font-size: 1em;
padding: 0 0 .2em 0; padding: 0 0 .2em 0;
@ -178,46 +178,125 @@ input[type="text"], textarea, input.form-password {
padding: 1px; 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; font-size: 1em;
margin-bottom: 4.5em;
} }
.node .picture { .node .node-headline {
border: 1px solid #ddd; padding: 1em 0 0 0;
float: right; width: 100%;
margin: 0.5em;
} }
.node.item-listing { .node .node-headline h2 {
padding: 1em; font-size: 1.75em;
border-top: 1px solid #ff0000; display: inline-block;
} float: left;
line-height: 1em;
.node.item-listing.sticky {
background-image: none;
}
.node table ul {
margin: 0; margin: 0;
padding: 1em; padding: 0;
text-transform: lowercase;
width: 66%;
} }
.node.sticky .title { .node .node-headline {
background-image: none; border-bottom: 4px solid #c8c8c8;
margin-bottom: 0.5em;
} }
.node .title { .node .node-headline h2 a:link, .node .node-headline h2 a:visited,
border-bottom: 1px solid #ff0000; 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 { .messages {
background: #eee; background: #eee;
margin: 0em; margin: 0em;
@ -275,13 +354,14 @@ br.clear {
} }
#footer { #footer {
float: left;
background: #f3f3f3; background: #f3f3f3;
border: 1px solid #ddd; border: 1px solid #ddd;
color: #aaa; color: #aaa;
font-size: 0.64em; font-size: 0.8em;
padding: .2em 0 .2em 0; padding: .2em 0 .2em 0;
width: 684px; width: 684px;
margin: 12px 0 0 0; margin: 12px 0;
text-align: center; text-align: center;
} }
@ -414,6 +494,7 @@ html.js fieldset legend a:hover {
clear: none; clear: none;
} }
/* ------------------------------------------------------------------------ /* ------------------------------------------------------------------------
* Comments * Comments
* --------------------------------------------------------------------- */ * --------------------------------------------------------------------- */
@ -461,7 +542,14 @@ div.comment img.user-picture {
padding: 0 10px 5px 0; 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; } div.even div.content { background-color: #fff; }
@ -483,11 +571,11 @@ div.even div.comment-meta {
} }
div.odd { div.odd {
background-color: #eee; background-color: #fff;
} }
div.odd div.comment-meta { 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 { em.moderation {