use twitter bootstrap for layouting
authorChristian Weiske <cweiske@cweiske.de>
Tue, 27 Mar 2012 19:44:13 +0000 (21:44 +0200)
committerChristian Weiske <cweiske@cweiske.de>
Tue, 27 Mar 2012 19:44:13 +0000 (21:44 +0200)
.gitignore
data/config.default.php
data/config.php.dist
data/templates/base.htm
data/templates/display.htm
data/templates/list.htm
www/phorkie.css
www/www-header.php

index f82ddfd..094fc26 100644 (file)
@@ -1,2 +1,3 @@
 README.html
 repos
+data/config.php
index ec68622..ab5c474 100644 (file)
@@ -2,5 +2,6 @@
 $GLOBALS['phorkie']['cfg'] = array(
     'repos' => __DIR__ . '/../repos/',
     'tpl'   => __DIR__ . '/templates/',
+    'css'   => 'http://twitter.github.com/bootstrap/assets/css/bootstrap.css',
 );
 ?>
\ No newline at end of file
index e69de29..b213e85 100644 (file)
@@ -0,0 +1,3 @@
+<?php
+//$GLOBALS['phorkie']['cfg']['repos'] = '/var/data/phorkie/';
+?>
index d0c3cee..aaf61da 100644 (file)
@@ -1,17 +1,43 @@
 <!DOCTYPE html>
 <html>
  <head>
+  <link rel="stylesheet" href="{{css}}"/>
   <link rel="stylesheet" href="phorkie.css" />
   <title>{% block title %}{% endblock %} - Phorkie</title>
  </head>
  <body>
-  <nav>
-   <ul>
-    <a href="/">New paste</a>
-    <a href="/list">List all</a>
-    <a href="/search">Search</a>
-   </ul>
-  </nav>
-  <article>{% block content %}{% endblock %}</article>
+  <div class="navbar">
+   <div class="navbar-inner">
+    <div class="container">
+     <a class="brand" href="/">
+      Phorkie
+     </a>
+     <ul class="nav">
+      <li>
+       <a href="/">New paste</a>
+      </li>
+      <li>
+       <a href="/list">List all</a>
+      </li>
+      <li>
+       <form class="navbar-search pull-left" action="/search" method="get">
+        <input type="text" class="search-query" name="q" placeholder="Search"/>
+       </form>
+      </li>
+     </ul>
+    </div>
+   </div>
+  </div>
+
+  <div class="container-fluid">
+   <div class="row">
+    <div class="span9">
+     {% block content %}{% endblock %}
+    </div>
+    <div class="span3">
+     {% block sidebar %}{% endblock %}
+    </div>
+   </div>
+  </div>
  </body>
 </html>
\ No newline at end of file
index afdc75c..cabff59 100644 (file)
@@ -3,17 +3,28 @@
 
 {% block content %}
 <h1>{{repo.getDescription}}</h1>
-<ul class="links">
- <li><a href="{{repo.getLink('edit')}}">edit</a></li>
- <li><a href="{{repo.getLink('fork')}}">fork</a></li>
-</ul>
+<div class="row-fluid">
+ <div class="span6">
+  <a class="btn" href="{{repo.getLink('edit')}}"><i class="icon-edit"></i> edit</a>
+ </div>
+ <div class="span6" style="text-align: right">
+  <a class="btn" href="{{repo.getLink('fork')}}"><i class="icon-share"></i> fork</a>
+ </div>
+</div>
+
 {% for file in repo.getFiles %}
-<div>
- <h2 id="{{file.getFilename}}">{{file.getFilename}}<a class="anchorlink" href="#{{file.getFilename}}"></a></h2>
- <p>
-  <a href="{{file.getLink('raw')}}">raw</a>
- </p>
- {{file.getHighlightedContent|raw}}
+<div class="file">
+ <div class="header">
+  <a class="btn btn-mini" href="{{file.getLink('raw')}}" style="float: right;">raw</a>
+  <h3 id="{{file.getFilename}}">{{file.getFilename}}<a class="anchorlink" href="#{{file.getFilename}}"></a></h3>
+ </div>
+ <div class="code">
+  {{file.getHighlightedContent|raw}}
+ </div>
 </div>
 {% endfor %}
 {% endblock %}
+
+{% block sidebar %}
+sidebar FIXME
+{% endblock %}
\ No newline at end of file
index 5142a7b..ea71bd6 100644 (file)
 </ul>
 <ul class="pager">
  {% if links.prev %}
- <li class="prev">
-  <a href="{{links.prev}}">prev</a>
+ <li class="previous">
+  <a href="{{links.prev}}">&larr; prev</a>
+ </li>
+ {% else %}
+ <li class="previous disabled">
+  <a href="#">&larr; prev</a>
  </li>
  {% endif %}
  {% if links.next %}
  <li class="next">
-  <a href="{{links.next}}">next</a>
+  <a href="{{links.next}}">next &rarr;</a>
+ </li>
+ {% else %}
+ <li class="next disabled">
+  <a href="#">next &rarr;</a>
  </li>
  {% endif %}
 </ul>
index d6d1173..fe41780 100644 (file)
@@ -1,4 +1,9 @@
 /* show IDs for anchors */
+a.anchorlink:before {
+    font-size: smaller;
+    content: '_';
+    color: transparent;
+}
 h1[id]:hover a.anchorlink:before,
 h2[id]:hover a.anchorlink:before,
 h3[id]:hover a.anchorlink:before,
@@ -14,3 +19,26 @@ a.anchorlink {
     margin-left: 0.5em;
     font-size: smaller;
 }
+.navbar .brand {
+    /*float: right;*/
+    color: yellow;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 0 30px rgba(255, 255, 255, .125);
+}
+
+.file {
+    margin-top: 2em;
+
+}
+.file .header {
+    padding: 1.0ex;
+    margin-bottom: 1em;
+    background-color: whiteSmoke;
+    border: 1px solid #EEE;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+.file .code {
+    margin-left: 2em;
+}
\ No newline at end of file
index 5b2fa56..01214d7 100644 (file)
@@ -45,6 +45,7 @@ $twig = new \Twig_Environment(
 
 function render($tplname, $vars)
 {
+    $vars['css'] = $GLOBALS['phorkie']['cfg']['css'];
     $template = $GLOBALS['twig']->loadTemplate($tplname . '.htm');
     echo $template->render($vars);
 }