Commit: 7efbc2c0dc6fb834fbcc3dd2b3a808fe25801324

Author: Jon Adams | Date: 2010-01-11 10:44:19 -0800
extension view styling
diff --git a/views/extensions/view.html.php b/views/extensions/view.html.php index 050ba22..cd3fc17 100644 --- a/views/extensions/view.html.php +++ b/views/extensions/view.html.php @@ -6,18 +6,64 @@ ?> + <div id="extension"> - <h1><?=$extension->namespace;?></h1> - <h2><?=$extension->class;?></h2> - <p class="summary"><?=$extension->summary;?></p> - <ul> - <li>Version: <?php echo (isset($extension->_revisions->start)) ?: 1;?></li> - <li>Created: <?=$extension->created;?></li> - <li>File: <?=$extension->file;?></li> - </ul> + <div class="details"> + <h1><?=$extension->namespace;?></h1> + <h2><?=$extension->class;?></h2> + <p class="summary"><?=$extension->summary;?></p> + <div class="actions"> + <a href="#">Download</a> + | <?php + $rev_list = array(0 => 'View Old Revision'); + foreach ($extension->_revisions->ids as $k => $id) { + $i = $extension->_revisions->start - $k; + $rev_list[$i . '-' . $id] = $i . '-' . substr($id, 0, 6) . '...'; + } + echo $this->form->create(null, array( + 'url' => array( + 'plugin' => 'li3_lab', + 'controller' => 'extensions', + 'action' => 'view', + 'args' => array($extension->id) + ), + 'id' => 'revision-form', + 'style' => 'margin:0; padding:0; display: inline;' + )); + echo $this->form->select('revision', $rev_list, array( + 'id' => 'revision-select', + 'style' => 'margin:0; padding:0; display: inline;' + )); + echo $this->form->submit('Get', array('style' => 'display:inline; margin:0 0 0 5px; padding: 1px;')); + echo '</form>'; + ?> + | <?=$this->Html->link('Newest', array( + 'plugin' => 'li3_lab', + 'controller' => 'extensions', + 'action' => 'view', + 'args' => array($extension->id) + ));?> + | <?=$this->Html->link('Edit', array( + 'plugin' => 'li3_lab', + 'controller' => 'extensions', + 'action' => 'edit', + 'args' => array($extension->id) + ));?> + </div> + <div class="php"><pre><code><?=$extension->code; ?></code></pre></div> + </div> + <div class="meta"> + <h3>Description</h3> + <div class="description"><?=$extension->description;?></div> + <h3>Details</h3> + <ul> + <li>Version: <?php echo (isset($extension->_revisions->start)) ?: 1;?></li> + <li>Created: <?=$extension->created;?></li> + <li>File: <?=$extension->file;?></li> + </ul> <?php if (isset($extension->maintainers)) {?> + <h3>Maintainers</h3> <ul class="maintainers"> - <li style="list-style:none; font-weight: bold; color: pink;">Maintainers:</li> <?php foreach ($extension->maintainers as $man) { $name = (!empty($man->name)) ? $man->name : $man->email; @@ -32,44 +78,5 @@ <?php } else { echo '<p>No maintainers set.</p>'; }?> - <div class="description"><?=$extension->description;?></div> - <div class="actions" style="margin-bottom: 5px;"> - <a href="#">Download</a> - | <?php - $rev_list = array(0 => 'View Old Revision'); - foreach ($extension->_revisions->ids as $k => $id) { - $i = $extension->_revisions->start - $k; - $rev_list[$i . '-' . $id] = $i . '-' . $id; - } - echo $this->form->create(null, array( - 'url' => array( - 'plugin' => 'li3_lab', - 'controller' => 'extensions', - 'action' => 'view', - 'args' => array($extension->id) - ), - 'id' => 'revision-form', - 'style' => 'margin:0; padding:0; display: inline;' - )); - echo $this->form->select('revision', $rev_list, array( - 'id' => 'revision-select', - 'style' => 'margin:0; padding:0; display: inline;' - )); - echo $this->form->submit('Get', array('style' => 'display:inline; margin:0 0 0 5px; padding: 1px;')); - echo '</form>'; - ?> - | <?=$this->Html->link('Newest', array( - 'plugin' => 'li3_lab', - 'controller' => 'extensions', - 'action' => 'view', - 'args' => array($extension->id) - ));?> - | <?=$this->Html->link('Edit', array( - 'plugin' => 'li3_lab', - 'controller' => 'extensions', - 'action' => 'edit', - 'args' => array($extension->id) - ));?> </div> - <div class="code"><pre><code><?=$extension->code; ?></code></pre></div> -</div> \ No newline at end of file +</div> diff --git a/views/layouts/default.html.php b/views/layouts/default.html.php index 5bf50aa..3a73b05 100644 --- a/views/layouts/default.html.php +++ b/views/layouts/default.html.php @@ -17,50 +17,52 @@ <title>Li3 Lab</title> <?=$this->scripts(); ?> <?=$this->html->link('Icon', null, array('type' => 'icon')); ?> - <?=$this->html->style('base')?> + <?=$this->html->style(array('base', 'http://li3.rad-dev.org/css/li3.css'))?> <?=$this->html->style('li3_lab')?> <?=$this->html->script('li3_lab')?> <?=$this->html->script('http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js')?> </head> <body> - <div id="container" <?php echo (! empty($home))? 'class="home"' : null ; ?> - <div id="header"> - <h1><?php echo $this->html->link('Lithium Laboratory', array( - 'plugin' => 'li3_lab', - 'controller' => 'home', - 'action' => 'index' - )); ?></h1> - <div id="menu"> - <ul> - <li class="add-plugin"> - <?php echo $this->html->link('Add Plugin', array( - 'plugin' => 'li3_lab', 'controller' => 'plugins', 'action' => 'add' - ));?> - </li> - <li class="add-extension"> - <?php echo $this->html->link('Add Extension', array( - 'plugin' => 'li3_lab', 'controller' => 'extensions', 'action' => 'add' - ));?> - </li> - <li class="all-plugins"> - <?php echo $this->html->link('View Plugins', array( - 'plugin' => 'li3_lab', 'controller' => 'plugins', 'action' => 'index' - ));?> - </li> - <li class="all-extensions"> - <?php echo $this->html->link('View Extensions', array( - 'plugin' => 'li3_lab', 'controller' => 'extensions', 'action' => 'index' - ));?> - </li> - </ul> + <div id="wrapper"> + <div id="container" class="<?php echo (! empty($home))? 'home' : 'internal' ; ?>"> + <div id="header"> + <h1><?php echo $this->html->link('Lithium Laboratory', array( + 'plugin' => 'li3_lab', + 'controller' => 'home', + 'action' => 'index' + )); ?></h1> + <div id="menu"> + <ul> + <li class="add-plugin"> + <?php echo $this->html->link('Add Plugin', array( + 'plugin' => 'li3_lab', 'controller' => 'plugins', 'action' => 'add' + ));?> + </li> + <li class="add-extension"> + <?php echo $this->html->link('Add Extension', array( + 'plugin' => 'li3_lab', 'controller' => 'extensions', 'action' => 'add' + ));?> + </li> + <li class="all-plugins"> + <?php echo $this->html->link('View Plugins', array( + 'plugin' => 'li3_lab', 'controller' => 'plugins', 'action' => 'index' + ));?> + </li> + <li class="all-extensions"> + <?php echo $this->html->link('View Extensions', array( + 'plugin' => 'li3_lab', 'controller' => 'extensions', 'action' => 'index' + ));?> + </li> + </ul> + </div> + </div> + <div id="content"> + <?php echo $this->content(); ?> </div> </div> - <div id="content"> - <?php echo $this->content(); ?> - </div> - <div id="footer"> - @2009 Union of Rad - </div> + </div> + <div id="footer"> + <p class="copyright">Pretty much everything is &copy; 2009 and beyond, the Union of Rad</p> </div> <?php echo $this->html->script(array( diff --git a/webroot/css/li3_lab.css b/webroot/css/li3_lab.css index 6cdd9f9..b618056 100644 --- a/webroot/css/li3_lab.css +++ b/webroot/css/li3_lab.css @@ -46,22 +46,113 @@ float:left; width:33%; } - -.home #header { - padding-bottom:2em; +/** General **/ +#header { + padding-bottom: 2em; border-bottom: 1px solid #e6e6e6; } + +.internal #header { + display: block; + padding-bottom: 0; +} +.internal #header h1 { + display: inline-block; + margin: 0; + padding: 0 1em 0 0; +} +.internal #header h1 a { + display:inline-block; + background:url(../img/li3-lab-small.png) no-repeat center center; + width:200px; + height:0; + padding:126px 0 0 0; + overflow:hidden; +} +.internal #menu { + vertical-align: 60px; + display: inline-block; +} +.internal #menu ul { + display: inline-block; + list-style: none; + margin: 0; + padding: 0; +} +.internal #menu ul li { + display: inline-block; + margin: 0; + padding: 0; +} +.internal #menu ul li a { + text-transform: lowercase; + display: inline-block; + background: #f0f0f0; + color: black; + font-weight:bold; + padding:.5em 1em; +} +.internal #menu ul li a:hover { + background: black; + color: white; +} +.internal #menu .add-plugin a { + -moz-border-radius-bottomleft: 6px; + -webkit-border-bottom-left-radius: 6px; + -moz-border-radius-topleft: 6px; + -webkit-border-top-left-radius: 6px; +} +.internal #menu .all-extensions a { + -moz-border-radius-bottomright: 6px; + -webkit-border-bottom-right-radius: 6px; + -moz-border-radius-topright: 6px; + -webkit-border-top-right-radius: 6px; +} +.internal #content { + +} #footer { clear:both; } -#extension h2 { - color: pink; - margin-bottom: 0; + +/** Extension **/ +#extension .meta { + width:300px; + float:right; +} +#extension .details { + width:620px; + float:left; +} +#extension h1, #extension h2 { + display: inline-block; + font-size: 36px; + font-weight: normal; + color: black; + margin:.5em 0; +} +#extension h1 { + padding-left:1.25em; + background:url(../img/extension.png) no-repeat left center; +} +#extension h1:after { + content: "\\"; + padding: 0 .1em; } #extension h3 { - margin:0 0 1em; padding: 0; - font-size:small; - color: #666; + +} +#extension .actions { + background:#f0f0f0; + -moz-border-radius-topright: 6px; + -webkit-border-top-right-radius: 6px; + -moz-border-radius-topleft: 6px; + -webkit-border-top-left-radius: 6px; +} +#extension .actions a { + display: inline-block; + padding:.25em 1em; + font-weight: bold; } #extension p.summary { margin: 0 0 1em; padding: 0;