Added live preview of markdown documents and added page names to each…

… route. Fixes #16, #23.
galen · Mar 11, 2013 · 50f149d · 50f149d
1 parent 0bb06ad
commit 50f149d
Show file tree

Hide file tree

Showing 12 changed files with 1,417 additions and 1,844 deletions.
diff --git a/index.php b/index.php
@@ -23,45 +23,57 @@
 $app->add( new \Slim\Extras\Middleware\HttpBasicAuth( USERNAME, PASSWORD ) );
 
 $app->get('/', function() use( $app, $api, $languages ) {
+    $page_name = 'index';
     require( DIR_CONTROLLERS . '/index.php' );
 });
 
 $app->map('/new/', function() use( $app, $api, $languages ) {
+    $page_name = 'new';
     require( DIR_CONTROLLERS . '/new.php' );
 })->via( 'GET', 'POST' );
 
 $app->get('/browse/', function() use( $app, $api, $languages ) {
+    $page_name = 'browse';
     require( DIR_CONTROLLERS . '/browse.php' );
 });
 
 $app->get('/tags/', function() use( $app, $api, $languages ) {
+    $page_name = 'tags';
     require( DIR_CONTROLLERS . '/tags.php' );
 });
 
 $app->get('/tag/:tags/', function( $tags ) use( $app, $api, $languages ) {
+    $page_name = 'tag';
     require( DIR_CONTROLLERS . '/tag.php' );
 });
 
 $app->get('/language/:language/', function( $language ) use( $app, $api, $languages ) {
+    $page_name = 'language';
     require( DIR_CONTROLLERS . '/language.php' );
 });
 
 $app->get('/languages/', function() use( $app, $api, $languages ) {
+    $page_name = 'languages';
     require( DIR_CONTROLLERS . '/languages.php' );
 });
 
 $app->get('/search/', function() use( $app, $api, $languages ) {
+    $page_name = 'search';
     require( DIR_CONTROLLERS . '/search.php' );
 });
 
 $app->map( '/edit/:id/(:name/)', function( $id, $name = null ) use( $app, $api, $languages ){
+    $page_name = 'edit';
     require( DIR_CONTROLLERS . '/edit.php' );
 })->via( 'GET', 'POST' );
 
+/*
 $app->get( '/code/:id/(:name/)', function( $id, $name = null ) use( $app, $api, $languages ){
-    $code_disabled = true;
+    $page_name = 'code';
     require( DIR_CONTROLLERS . '/code.php' );
 });
+*/
+
 
 // API calls
 $app->post('/api/edit/:id/', function( $id ) use( $app, $languages ) {

diff --git a/public/css/style.css b/public/css/style.css
@@ -77,7 +77,7 @@ fieldset{border:0;padding:0;}
 .tag-list li:after { content:', ' }
 .tag-list li:last-child:after{ content:''; }
 
-.code-actions { margin:0;padding:0; list-style:none;overflow:hidden;float:left; white-space:nowrap;}
+.code-actions { margin:0 auto;padding:0; list-style:none;overflow:hidden;float:left; white-space:nowrap;}
 .code-actions li { display:inline; margin:0;padding:0; white-space:nowrap;}
 .code-actions a { font-size: 16px; color: #000; padding: 0 4px; margin: 0 2px; outline:0;}
 .code-actions.large { float:left; margin-right: 10px; }
@@ -94,13 +94,22 @@ fieldset{border:0;padding:0;}
 
 h2.title { margin:0 0 12px 0;padding:0;}
 
+
 .search-text { border:1px solid #ccc; }
 form label {display:block;font-weight:bold; font-size:16px;padding-bottom:2px;}
 .form-3column{ width: 250px;float:left; margin-bottom: 15px;}
 #code-wrapper {width:100%;clear:left;}
+#code-editor-preview-wrapper { position:relative; }
 .CodeMirror {height:500px!important; width:100%}
 .clearfix {overflow:hidden;}
 
+#code-preview { height:502px; }
+.preview-container {  margin-top:20px;display:none;position:absolute; left:0;top:0;z-index:999;width:100%;background:#fff;overflow:auto; border-top:1px solid #ccc; border-bottom: 1px solid #ccc; }
+.text-preview-wrapper { overflow:hidden; clear:both;position:relative; }
+.toggle { margin-left: 10px; font-size: 13px; }
+.text-preview-wrapper.split > div { width:47% !important; float:left; position:static; }
+.text-preview-wrapper.split .preview-container { float:right;border: 1px solid #ccc; padding: 0 20px}
+
 .status-message { font-weight: bold; }
 .error-message { color: #aa0000; }
 .success-message { color: #00aa00; }
@@ -114,7 +123,7 @@ header a:hover{text-decoration:none;}
 #navigation a {display:block; padding: 20px 10px 12px 10px;}
 #navigation a:hover {background-color:#333;text-decoration:none;}
 
-#content {padding: 15px 20px; max-width: 1280px;}
+#content {padding: 15px 20px;}
 
 input[type="text"],
 select{
@@ -157,7 +166,7 @@ margin-top: 5px;
 .current-page { color:#000; font-weight:bold;cursor:default; background: #f6f6f6; }
 .pagination a:hover { background: #ddd; }
 
-.code-list { margin:25px 0 35px 0; }
+.code-list { margin:25px 0 35px 0;}
 .code-list th {text-align:left;font-size: 16px;padding-top:0 !important;}
 .code-list th a { color:#000; }
 .code-list th a i { font-size: 12px; padding-left: 5px; }