--- a/mouchak/static/css/editor.css
+++ b/mouchak/static/css/editor.css
@@ -1,98 +1,4 @@
-/*
- * HTML5 Boilerplate
- *
- * What follows is the result of much research on cross-browser styling.
- * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
- * Kroc Camen, and the H5BP dev community and team.
- */
-/* ==========================================================================
- Base styles: opinionated defaults
- ========================================================================== */
-
-html,
-button,
-input,
-select,
-textarea {
- color: #222;
-}
-
-body {
- font-size: 1em;
- line-height: 1.4;
-}
-
-/*
- * Remove text-shadow in selection highlight: h5bp.com/i
- * These selection declarations have to be separate.
- * Customize the background color to match your design.
- */
-
-::-moz-selection {
- background: #b3d4fc;
- text-shadow: none;
-}
-
-::selection {
- background: #b3d4fc;
- text-shadow: none;
-}
-
-/*
- * A better looking default horizontal rule
- */
-
-hr {
- display: block;
- height: 1px;
- border: 0;
- border-top: 1px solid #ccc;
- margin: 1em 0;
- padding: 0;
-}
-
-/*
- * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
- */
-
-img {
- vertical-align: middle;
-}
-
-/*
- * Remove default fieldset styles.
- */
-
-fieldset {
- border: 0;
- margin: 0;
- padding: 0;
-}
-
-/*
- * Allow only vertical resizing of textareas.
- */
-
-textarea {
- resize: vertical;
-}
-
-/* ==========================================================================
- Chrome Frame prompt
- ========================================================================== */
-
-.chromeframe {
- margin: 0.2em 0;
- background: #ccc;
- color: #000;
- padding: 0.2em 0;
-}
-
-/* ==========================================================================
- Author's custom styles
- ========================================================================== */
-
.page {
border: 1px solid #999;
padding: 20px;
@@ -103,7 +9,7 @@
position: absolute;
left: 20px;
top: 20px;
- border: 1px solid black;
+ border: 1px solid #999;
padding: 10px;
width: 300px;
/*height: 80%;*/
@@ -120,17 +26,21 @@
padding: 10px;
margin: 3px;
margin-bottom: 10px;
- max-height: 120px;
+ max-height: 200px;
overflow-y: auto;
}
-.content-item:hover {
+.content-item-wrapper:hover {
cursor: pointer;
cursor: hand;
}
+.content-item-wrapper {
+ padding: 3px;
+}
#contentview {
border: 1px solid #999;
- padding: 10px;
+ padding: 25px;
margin: 10px;
+ width: 90%;
}
.contentview {
}
@@ -138,200 +48,15 @@
padding: 3px;
margin-bottom: 10px;
}
+.content-snippet {
+ margin-left: 10px;
+}
#addPage {
- margin: 10px 0 0 200px;
+ margin: 10px 0 0 190px;
}
#notifications {
- width: 300px;
+ width: 500px;
z-index: 100;
margin: 5px auto;
-}
-
-/* ==========================================================================
- Helper classes
- ========================================================================== */
-
-/*
- * Image replacement
- */
-
-.ir {
- background-color: transparent;
- border: 0;
- overflow: hidden;
- /* IE 6/7 fallback */
- *text-indent: -9999px;
-}
-
-.ir:before {
- content: "";
- display: block;
- width: 0;
- height: 100%;
-}
-
-/*
- * Hide from both screenreaders and browsers: h5bp.com/u
- */
-
-.hidden {
- display: none !important;
- visibility: hidden;
-}
-
-/*
- * Hide only visually, but have it available for screenreaders: h5bp.com/v
- */
-
-.visuallyhidden {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
-}
-
-/*
- * Extends the .visuallyhidden class to allow the element to be focusable
- * when navigated to via the keyboard: h5bp.com/p
- */
-
-.visuallyhidden.focusable:active,
-.visuallyhidden.focusable:focus {
- clip: auto;
- height: auto;
- margin: 0;
- overflow: visible;
- position: static;
- width: auto;
-}
-
-/*
- * Hide visually and from screenreaders, but maintain layout
- */
-
-.invisible {
- visibility: hidden;
-}
-
-/*
- * Clearfix: contain floats
- *
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- * `contenteditable` attribute is included anywhere else in the document.
- * Otherwise it causes space to appear at the top and bottom of elements
- * that receive the `clearfix` class.
- * 2. The use of `table` rather than `block` is only necessary if using
- * `:before` to contain the top-margins of child elements.
- */
-
-.clearfix:before,
-.clearfix:after {
- content: " "; /* 1 */
- display: table; /* 2 */
-}
-
-.clearfix:after {
- clear: both;
-}
-
-/*
- * For IE 6/7 only
- * Include this rule to trigger hasLayout and contain floats.
- */
-
-.clearfix {
- *zoom: 1;
-}
-
-/* ==========================================================================
- EXAMPLE Media Queries for Responsive Design.
- Theses examples override the primary ('mobile first') styles.
- Modify as content requires.
- ========================================================================== */
-
-@media only screen and (min-width: 35em) {
- /* Style adjustments for viewports that meet the condition */
-}
-
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
- only screen and (min-resolution: 144dpi) {
- /* Style adjustments for high resolution devices */
-}
-
-/* ==========================================================================
- Print styles.
- Inlined to avoid required HTTP connection: h5bp.com/r
- ========================================================================== */
-
-@media print {
- * {
- background: transparent !important;
- color: #000 !important; /* Black prints faster: h5bp.com/s */
- box-shadow:none !important;
- text-shadow: none !important;
- }
-
- a,
- a:visited {
- text-decoration: underline;
- }
-
- a[href]:after {
- content: " (" attr(href) ")";
- }
-
- abbr[title]:after {
- content: " (" attr(title) ")";
- }
-
- /*
- * Don't show links for images, or javascript/internal links
- */
-
- .ir a:after,
- a[href^="javascript:"]:after,
- a[href^="#"]:after {
- content: "";
- }
-
- pre,
- blockquote {
- border: 1px solid #999;
- page-break-inside: avoid;
- }
-
- thead {
- display: table-header-group; /* h5bp.com/t */
- }
-
- tr,
- img {
- page-break-inside: avoid;
- }
-
- img {
- max-width: 100% !important;
- }
-
- @page {
- margin: 0.5cm;
- }
-
- p,
- h2,
- h3 {
- orphans: 3;
- widows: 3;
- }
-
- h2,
- h3 {
- page-break-after: avoid;
- }
}
--- a/mouchak/static/js/editor.js
+++ b/mouchak/static/js/editor.js
@@ -144,10 +144,10 @@
}));
//hover effect
- $('.content-item').hover(function(event) {
- $(event.target).closest('.content-item').addClass('alert-error')
+ $('.content-item-wrapper').hover(function(event) {
+ $(event.currentTarget).addClass('alert-info')
}, function(event) {
- $(event.target).closest('.content-item').removeClass('alert-error')
+ $(event.currentTarget).removeClass('alert-info')
});
},
listContent: function() {
--- /dev/null
+++ b/mouchak/templates/base.html
@@ -1 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {% block head %} {% endblock %}
+
+
+
+
+ {% block body %} {% endblock %}
+
+
+
+
+
+
+
+ {% block scripts %} {% endblock %}
+
+ {% block templates %} {% endblock %}
+
+
--- a/mouchak/templates/editor.html
+++ b/mouchak/templates/editor.html
@@ -1,266 +1,255 @@
-
-
-
-
-
-
-
-
- Editing.. | {{title}}
-
-
+{% extends "base.html" %}
-
+{% block head %}
+
+ Editing.. | {{ title }}
+{% endblock %}
-
-
-
-
-
-
-
-
-
-
+
+
+ <%= content %>
+
+
+
+
+
+
+