Fixex #57 and makes better modals

- Fixes #57 (removes the backdrop from modal)
- Better accessibility for modal boxes
- Better layout and typography for modal boxes

ChangeLog.md

@@ -1,3 +1,10 @@
+Version 1.2.6, November 4th, 2014
+=================================
+
+- Fixes #57 (removes the backdrop from modal)
+- Better accessibility for modal boxes
+- Better layout and typography for modal boxes
+
 Version 1.2.5, October 28st, 2014
 =================================
 

jingo

@@ -18,7 +18,7 @@ var program = require('commander'),
 
 global.Git = require('./lib/gitmech');
 
-program.version('1.2.5')
+program.version('1.2.6')
        .option('-c, --config <path>', 'Specify the config file')
        .option('-#, --hash-string <string>', 'Create an hash for a string')
        .option('-l, --local', 'Listen on localhost only')

public/css/style.css

@@ -52,6 +52,23 @@ p.user {
   overflow: hidden;
 }
 
+.modal-content {
+  border-radius: 0;
+}
+
+.modal-dialog {
+  margin-top: 5rem;
+}
+
+.modal-dialog .modal-header {
+  background-color: #f1f1f1
+}
+
+.modal-dialog .modal-header h3 {
+  margin: 0;
+  font-weight: bold;
+}
+
 blockquote {
   text-indent: -1ex;
   padding-right: 15px;
@@ -463,6 +480,10 @@ input#pageTitle {
   font-size: 130%;
 }
 
+.cheatsheet-content {
+  overflow: auto;
+}
+
 .cheatsheet-content .col {
   float: left;
   width: 30%;
@@ -580,4 +601,4 @@ a.btn-auth:hover {
     display: block;
   }
 
-}
+}

public/js/app.js

@@ -158,7 +158,7 @@
     },
 
     preview: function() {
-      $("#preview").modal("show");
+      $("#preview").modal({keyboard: true, show: true, backdrop: false});
       $.post("/misc/preview", {data: $("#editor").val()}, function(data) {
         $("#preview .modal-body").html(data).get(0).scrollTop = 0;
       });
@@ -196,7 +196,7 @@
     },
 
     markdownSyntax: function() {
-      $("#syntax-reference").modal({keyboard: true, show: true});
+      $("#syntax-reference").modal({keyboard: true, show: true, backdrop: false});
       if (!cheatsheetShown) {
         $("#syntax-reference .modal-body").load("/misc/syntax-reference");
         cheatsheetShown = true;

views/create.jade

@@ -22,10 +22,10 @@ block content
 
       mixin saveAndCancel()
 
-  #preview.modal
+  #preview(tabindex="-1",role="dialog",aria-hidden="true").modal
     mixin dialogBox("Page preview")
 
-  #syntax-reference.modal.fade
+  #syntax-reference(tabindex="-1",role="dialog",aria-hidden="true").modal
     mixin dialogBox("Markdown cheatsheet")
 
 block scripts

views/edit.jade

@@ -29,10 +29,10 @@ block content
 
       mixin saveAndCancel()
 
-  #preview(tabindex="-1").modal
+  #preview(tabindex="-1",role="dialog",aria-hidden="true").modal
     mixin dialogBox("Page preview")
 
-  #syntax-reference(tabindex="-1").modal
+  #syntax-reference(tabindex="-1",role="dialog",aria-hidden="true").modal
     mixin dialogBox("Markdown cheatsheet")
 
 block scripts