Improved UI

README.md

@@ -56,7 +56,7 @@ are using the standard django development server locally
 
 You should see something similar to:
 
-![Screenshot](https://raw.github.com/machinalis/django-template-previewer/master/doc/ss-initial.png)
+![Screenshot](https://raw.github.com/pedromagnus/django-template-previewer/master/doc/ss-initial.png)
 
 The lower box is an html `iframe` where the preview will be shown. The template
 previewer UI can be folded/unfolded by clicking on its title.
@@ -81,15 +81,15 @@ For example, assuming we have the following template calles `sample.html`:
 
 You'll get something like:
 
-![Screenshot](https://raw.github.com/machinalis/django-template-previewer/master/doc/ss-with-context.png)
+![Screenshot](https://raw.github.com/pedromagnus/django-template-previewer/master/doc/ss-with-context.png)
 
 There you can fill up some values, and click on Preview, getting the following:
 
-![Screenshot](https://raw.github.com/machinalis/django-template-previewer/master/doc/ss-with-preview.png)
+![Screenshot](https://raw.github.com/pedromagnus/django-template-previewer/master/doc/ss-with-preview.png)
 
 or, hiding the previewer UI:
 
-![Screenshot](https://raw.github.com/machinalis/django-template-previewer/master/doc/ss-full-preview.png)
+![Screenshot](https://raw.github.com/pedromagnus/django-template-previewer/master/doc/ss-full-preview.png)
 
 That's essentially all there is to it. You can keep editing the context and 
 refreshing the preview. If you are using the development server, updating the

template_previewer/static/css/template_previewer/preview.css

@@ -1,75 +1,139 @@
 * {
+    font-family: Consolas, monospace;
     margin: 0;
     padding: 0;
-    font-family: sans;
 }
 body {
     margin-left: 5px;
     margin-right: 5px;
 }
+
+form label {
+    color: rgba(255,255,255,.7);
+    font-size: 13px;
+    margin-right: 10px;
+}
+form input {
+    border: 0;
+    border-radius: 4px;
+    padding: 5px 8px;
+}
+form input#id_template {
+    width: 200px;
+}
+
 #context-tree ul {
-    padding-left: 20px;
 }
 #context-tree li {
-    list-style-type: none;
+    border-radius: 4px;
     clear: both;
+    color: rgba(255,255,255,.8);
     line-height: 25px;
+    list-style-type: none;
+    margin-bottom: 1px;
+    padding-left: 20px;
+}
+#context-tree li:not(first-child) {
+    box-shadow: -3px -3px 8px rgba(0, 0, 0, .1);
+}
+#context-tree li.collapsed > label,
+#context-tree li.uncollapsed > label {
+    cursor: pointer;
 }
 #context-tree li.collapsed:before {
     content: "▸ ";
     cursor: default;
+    color: rgba(255,255,255,.6);
     margin-left: -0.8em;
 }
 #context-tree li.uncollapsed:before {
+    color: rgba(255,255,255,.6);
     content: "▾ ";
     cursor: default;
     margin-left: -0.8em;
 }
 #context-tree li input {
+    border: 1px solid;
+    border-radius: 4px;
     float: right;
+    font-size: 12px;
+    padding: 5px;
     width: 180px;
 }
 #context-tree label {
-    font-family: "monospace";
     font-size: 14px;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, .8);
 }
 #context-tree .even {
-    background-color: #ddf;
+    background-color: rgba(255,255,255,.3);
 }
 #context-tree .odd {
-    background-color: #e8e8e8;
+    background-color: rgba(255,255,255,.1);
 }
 #context-tree {
-    width: 450px;
+    max-width: 640px;
 }
 #content-preview {
-    width: 100%;
     height: 600px;
+    width: 100%;
 }
-#preview-ui {
+
+#preview-ui-wrapper {
+    background-color: rgba(0,0,0,.8);
+    box-shadow: 0 5px 10px rgba(0,0,0,.4);
+    cursor: move;
+    margin: 0 auto;
+    padding: 10px 16px 15px;
     position: absolute;
-    background-color: #ddf;
-    padding: 20px;
-    margin-left: 20px;
-    border-radius: 4px;
 }
+#preview-ui-wrapper.left {
+    border-radius: 0 0 13px 0;
+    left: 0;
+}
+#preview-ui-wrapper.right {
+    border-radius: 0 0 0 13px;
+    right: 0;
+}
+#preview-ui-wrapper.center {
+    border-radius: 0 0 13px 13px;
+    left: 10%;
+}
+
 #preview-ui form {
     margin: 10px 0;
 }
 a {
-    color: #08c;
+    color: #fff;
+    text-decoration: none;
+}
+button, input#preview-submit {
+    color: #fff;
+    background: #E80846;
+    border: 0;
+    border-radius: 5px;
+    padding: 5px 10px;
+    text-shadow: 0 1px 2px #111;
 }
 .help {
     font-size: 70%;
-    color: #777;
+    color: rgba(255,255,255,.5);
     font-style: italic;
 }
+.help a {
+    color: #fff;
+}
+.help a:hover {
+    border-bottom: 1px dotted #999;
+}
 #show-preview {
-    background-color: #ddf;
+    background-color: rgba(0,0,0,.8);
     padding: 20px;
     margin-top: 5px;
     width: 450px;
     margin-left: 20px;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
 }
+#context-tree .errorlist li {
+    color: #C00;
+}