Commit 2b4c217444831e9596aabd5c5206b561385199ba

Jinja templates inheritence and editor update

  - Using extends of Jinja templates to separate out different templates
  - Update editor template and CSS to use bootstrap 3
  • mouchak/static/css/editor.css 301 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+++++++++++++
  • mouchak/static/js/editor.js 6 ---+++
  • mouchak/templates/base.html 46 ++++++++++++++++++++++++++++++++++++++++++++++
  • mouchak/templates/editor.html 455 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • mouchak/templates/index.html 229 --------------------------------------------------------------------------------------------------------------------------------+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • Diff rendering mode:
  • inline
  • side by side

mouchak/static/css/editor.css

1/*
2 * HTML5 Boilerplate
3 *
4 * What follows is the result of much research on cross-browser styling.
5 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
6 * Kroc Camen, and the H5BP dev community and team.
7 */
81
9/* ==========================================================================
10 Base styles: opinionated defaults
11 ========================================================================== */
12
13html,
14button,
15input,
16select,
17textarea {
18 color: #222;
19}
20
21body {
22 font-size: 1em;
23 line-height: 1.4;
24}
25
26/*
27 * Remove text-shadow in selection highlight: h5bp.com/i
28 * These selection declarations have to be separate.
29 * Customize the background color to match your design.
30 */
31
32::-moz-selection {
33 background: #b3d4fc;
34 text-shadow: none;
35}
36
37::selection {
38 background: #b3d4fc;
39 text-shadow: none;
40}
41
42/*
43 * A better looking default horizontal rule
44 */
45
46hr {
47 display: block;
48 height: 1px;
49 border: 0;
50 border-top: 1px solid #ccc;
51 margin: 1em 0;
52 padding: 0;
53}
54
55/*
56 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
57 */
58
59img {
60 vertical-align: middle;
61}
62
63/*
64 * Remove default fieldset styles.
65 */
66
67fieldset {
68 border: 0;
69 margin: 0;
70 padding: 0;
71}
72
73/*
74 * Allow only vertical resizing of textareas.
75 */
76
77textarea {
78 resize: vertical;
79}
80
81/* ==========================================================================
82 Chrome Frame prompt
83 ========================================================================== */
84
85.chromeframe {
86 margin: 0.2em 0;
87 background: #ccc;
88 color: #000;
89 padding: 0.2em 0;
90}
91
92/* ==========================================================================
93 Author's custom styles
94 ========================================================================== */
95
96.page {2.page {
97 border: 1px solid #999;3 border: 1px solid #999;
98 padding: 20px;4 padding: 20px;
……
9 position: absolute;9 position: absolute;
10 left: 20px;10 left: 20px;
11 top: 20px;11 top: 20px;
12 border: 1px solid black;
12 border: 1px solid #999;
13 padding: 10px;13 padding: 10px;
14 width: 300px;14 width: 300px;
15 /*height: 80%;*/15 /*height: 80%;*/
……
26 padding: 10px;26 padding: 10px;
27 margin: 3px;27 margin: 3px;
28 margin-bottom: 10px;28 margin-bottom: 10px;
29 max-height: 120px;
29 max-height: 200px;
30 overflow-y: auto;30 overflow-y: auto;
31}31}
32.content-item:hover {
32.content-item-wrapper:hover {
33 cursor: pointer;33 cursor: pointer;
34 cursor: hand;34 cursor: hand;
35}35}
36.content-item-wrapper {
37 padding: 3px;
38}
36#contentview {39#contentview {
37 border: 1px solid #999;40 border: 1px solid #999;
38 padding: 10px;
41 padding: 25px;
39 margin: 10px;42 margin: 10px;
43 width: 90%;
40}44}
41.contentview {45.contentview {
42}46}
……
48 padding: 3px;48 padding: 3px;
49 margin-bottom: 10px;49 margin-bottom: 10px;
50}50}
51.content-snippet {
52 margin-left: 10px;
53}
51#addPage {54#addPage {
52 margin: 10px 0 0 200px;
55 margin: 10px 0 0 190px;
53}56}
54#notifications {57#notifications {
55 width: 300px;
58 width: 500px;
56 z-index: 100;59 z-index: 100;
57 margin: 5px auto;60 margin: 5px auto;
58}
59
60/* ==========================================================================
61 Helper classes
62 ========================================================================== */
63
64/*
65 * Image replacement
66 */
67
68.ir {
69 background-color: transparent;
70 border: 0;
71 overflow: hidden;
72 /* IE 6/7 fallback */
73 *text-indent: -9999px;
74}
75
76.ir:before {
77 content: "";
78 display: block;
79 width: 0;
80 height: 100%;
81}
82
83/*
84 * Hide from both screenreaders and browsers: h5bp.com/u
85 */
86
87.hidden {
88 display: none !important;
89 visibility: hidden;
90}
91
92/*
93 * Hide only visually, but have it available for screenreaders: h5bp.com/v
94 */
95
96.visuallyhidden {
97 border: 0;
98 clip: rect(0 0 0 0);
99 height: 1px;
100 margin: -1px;
101 overflow: hidden;
102 padding: 0;
103 position: absolute;
104 width: 1px;
105}
106
107/*
108 * Extends the .visuallyhidden class to allow the element to be focusable
109 * when navigated to via the keyboard: h5bp.com/p
110 */
111
112.visuallyhidden.focusable:active,
113.visuallyhidden.focusable:focus {
114 clip: auto;
115 height: auto;
116 margin: 0;
117 overflow: visible;
118 position: static;
119 width: auto;
120}
121
122/*
123 * Hide visually and from screenreaders, but maintain layout
124 */
125
126.invisible {
127 visibility: hidden;
128}
129
130/*
131 * Clearfix: contain floats
132 *
133 * For modern browsers
134 * 1. The space content is one way to avoid an Opera bug when the
135 * `contenteditable` attribute is included anywhere else in the document.
136 * Otherwise it causes space to appear at the top and bottom of elements
137 * that receive the `clearfix` class.
138 * 2. The use of `table` rather than `block` is only necessary if using
139 * `:before` to contain the top-margins of child elements.
140 */
141
142.clearfix:before,
143.clearfix:after {
144 content: " "; /* 1 */
145 display: table; /* 2 */
146}
147
148.clearfix:after {
149 clear: both;
150}
151
152/*
153 * For IE 6/7 only
154 * Include this rule to trigger hasLayout and contain floats.
155 */
156
157.clearfix {
158 *zoom: 1;
159}
160
161/* ==========================================================================
162 EXAMPLE Media Queries for Responsive Design.
163 Theses examples override the primary ('mobile first') styles.
164 Modify as content requires.
165 ========================================================================== */
166
167@media only screen and (min-width: 35em) {
168 /* Style adjustments for viewports that meet the condition */
169}
170
171@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
172 only screen and (min-resolution: 144dpi) {
173 /* Style adjustments for high resolution devices */
174}
175
176/* ==========================================================================
177 Print styles.
178 Inlined to avoid required HTTP connection: h5bp.com/r
179 ========================================================================== */
180
181@media print {
182 * {
183 background: transparent !important;
184 color: #000 !important; /* Black prints faster: h5bp.com/s */
185 box-shadow:none !important;
186 text-shadow: none !important;
187 }
188
189 a,
190 a:visited {
191 text-decoration: underline;
192 }
193
194 a[href]:after {
195 content: " (" attr(href) ")";
196 }
197
198 abbr[title]:after {
199 content: " (" attr(title) ")";
200 }
201
202 /*
203 * Don't show links for images, or javascript/internal links
204 */
205
206 .ir a:after,
207 a[href^="javascript:"]:after,
208 a[href^="#"]:after {
209 content: "";
210 }
211
212 pre,
213 blockquote {
214 border: 1px solid #999;
215 page-break-inside: avoid;
216 }
217
218 thead {
219 display: table-header-group; /* h5bp.com/t */
220 }
221
222 tr,
223 img {
224 page-break-inside: avoid;
225 }
226
227 img {
228 max-width: 100% !important;
229 }
230
231 @page {
232 margin: 0.5cm;
233 }
234
235 p,
236 h2,
237 h3 {
238 orphans: 3;
239 widows: 3;
240 }
241
242 h2,
243 h3 {
244 page-break-after: avoid;
245 }
246}61}

mouchak/static/js/editor.js

144 }));144 }));
145145
146 //hover effect146 //hover effect
147 $('.content-item').hover(function(event) {
148 $(event.target).closest('.content-item').addClass('alert-error')
147 $('.content-item-wrapper').hover(function(event) {
148 $(event.currentTarget).addClass('alert-info')
149 }, function(event) {149 }, function(event) {
150 $(event.target).closest('.content-item').removeClass('alert-error')
150 $(event.currentTarget).removeClass('alert-info')
151 });151 });
152 },152 },
153 listContent: function() {153 listContent: function() {

mouchak/templates/base.html

1<!DOCTYPE html>
2<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6 <head>
7 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge">
9 <meta name="description" content="">
10 <meta name="viewport" content="width=device-width, initial-scale=1.0">
11
12 <!-- Place favicon.ico in the root directory -->
13
14 <link rel="stylesheet" href="{{url_for('static', filename='css/normalize.css')}}">
15 <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.min.css')}}" media="screen">
16 <link rel="stylesheet" href="{{url_for('static', filename='css/mouchak.css')}}">
17 <link rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}">
18 <script src="{{url_for('static', filename='js/lib/modernizr-2.6.2.min.js')}}"></script>
19
20 <!--TODO: make this optional, only when there is a map plugin in the site. There
21 is no need to load this for every site -->
22 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
23 <!--[if lte IE 8]>
24 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
25 <![endif]-->
26 <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet-src.js"></script>
27 {% block head %} {% endblock %}
28 </head>
29 <body>
30 <!--[if lt IE 7]>
31 <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
32 <![endif]-->
33
34 {% block body %} {% endblock %}
35 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
36 <script>window.jQuery || document.write('<script src="{{url_for('static', filename='js/lib/jquery-1.10.2.min.js')}}"><\/script>')</script>
37 <script src="{{url_for('static', filename='js/lib/underscore-1.5.2.min.js')}}"></script>
38 <script src="{{url_for('static', filename='js/lib/backbone-1.0.0.min.js')}}"></script>
39 <script src="{{url_for('static', filename='js/lib/bootstrap.min.js')}}"></script>
40 <script src="{{url_for('static', filename='js/plugins.js')}}"></script>
41
42 {% block scripts %} {% endblock %}
43
44 {% block templates %} {% endblock %}
45 </body>
46</html>

mouchak/templates/editor.html

1<!DOCTYPE html>
2<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6 <head>
7 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9 <title> Editing.. | {{title}} </title>
10 <meta name="description" content="">
11 <meta name="viewport" content="width=device-width">
1{% extends "base.html" %}
122
13 <!-- Place favicon.ico in the root directory -->
3{% block head %}
4 <link rel="stylesheet" href="{{url_for('static', filename='css/editor.css')}}">
5 <title> Editing.. | {{ title }} </title>
6{% endblock %}
147
15 <link rel="stylesheet" href="{{url_for('static', filename='css/normalize.css')}}">
16 <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.css')}}">
17 <link rel="stylesheet" href="{{url_for('static', filename='css/editor.css')}}">
18 <script src="{{url_for('static', filename='js/lib/modernizr-2.6.1.min.js')}}"></script>
19 </head>
20 <body>
21 <!--[if lt IE 7]>
22 <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
23 <![endif]-->
24
25 <div class="container" id="container">
26 <div id="header">
27 <div id="hud">
28 <span class="pull-right">Howdy! | <a href="{{ url_for('logout') }}">Logout</a></span>
29 </div>
30 <div id="notifications"></div>
8{% block body %}
9 <div class="container" id="container">
10 <div id="header">
11 <div id="hud">
12 <span class="pull-right">Howdy! | <a href="{{ url_for('logout') }}">Logout</a></span>
31 </div>13 </div>
32 <div id="content-container">
33 </div>
34 <div id="footer">
35 </div>
14 <div id="notifications"></div>
36 </div>15 </div>
16 <div id="content-container">
17 </div>
18 <div id="footer">
19 </div>
20 </div>
3721
38 <script>
39 // initialize editor
40 window.M = window.M || {};
41 M.MenuURL = function() { return "{{ url_for('insertMenu') }}"};
42 M.PageURL = function() { return "{{ url_for('insertPage') }}"};
43 M.site_content = {{ content|tojson|safe }};
44 window.onload = function() {
45 M.editor.init();
46 };
47 </script>
48 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
49 <script>window.jQuery || document.write('<script src="{{url_for('static', filename='js/lib/jquery-1.8.0.min.js')}}"><\/script>')</script>
50 <script src="{{url_for('static', filename='js/lib/underscore.js')}}"></script>
51 <script src="{{url_for('static', filename='js/lib/backbone-1.0.0.js')}}"></script>
52 <script src="{{url_for('static', filename='js/lib/bootstrap.js')}}"></script>
53 <script src="{{url_for('static', filename='js/lib/tinymce/tinymce.min.js')}}"></script>
54 <script src="{{url_for('static', filename='js/lib/tinymce/jquery.tinymce.min.js')}}"></script>
55 <script src="{{url_for('static', filename='js/plugins.js')}}"></script>
56 <script src="{{url_for('static', filename='js/mouchak.js')}}"></script>
57 <script src="{{url_for('static', filename='js/models.js')}}"></script>
58 <script src="{{url_for('static', filename='js/editor.js')}}"></script>
22 <script>
23 // initialize editor
24 window.M = window.M || {};
25 M.MenuURL = function() { return "{{ url_for('insertMenu') }}"};
26 M.PageURL = function() { return "{{ url_for('insertPage') }}"};
27 M.site_content = {{ content|tojson|safe }};
28 window.onload = function() {
29 M.editor.init();
30 };
31 </script>
32{% endblock %}
5933
60 <!-- Underscore templates -->
61 <script type="text/template" id="menu-config-template">
62 <div class="page">
63 <div class="menu-config">
64 <h4> Menu Config </h4>
34{% block scripts %}
35 <script src="{{url_for('static', filename='js/lib/tinymce/tinymce.min.js')}}"></script>
36 <script src="{{url_for('static', filename='js/lib/tinymce/jquery.tinymce.min.js')}}"></script>
37 <script src="{{url_for('static', filename='js/mouchak.js')}}"></script>
38 <script src="{{url_for('static', filename='js/models.js')}}"></script>
39 <script src="{{url_for('static', filename='js/views.js')}}"></script>
40 <script src="{{url_for('static', filename='js/editor.js')}}"></script>
41{% endblock %}
6542
66 <div class="control-group" id="menu-order-wrap">
67 <div class="input-prepend">
68 <span class="add-on"> <strong> Menu Order</strong></span>
69 <input id="menu-order" type="text" class="span4"
70 placeholder="list,page,names,for,menu,order" value="<%= menu_order %>">
71 </div>
72 </div>
43{% block templates %}
7344
74 <div class="control-group">
75 <input id="custom-menu" type="checkbox">
76 <span class=""><strong> Custom Menu </strong></span>
45 <!-- Underscore templates -->
46 <script type="text/template" id="menu-config-template">
47 <div class="page">
48 <div class="menu-config">
49 <h4> Menu Config </h4>
50
51 <div class="form-group" id="menu-order-wrap">
52 <div class="input-group">
53 <span class="input-group-addon"> <strong> Menu Order</strong></span>
54 <input class="form-control" id="menu-order" type="text" class="col-md-4"
55 placeholder="list,page,names,for,menu,order" value="<%= menu_order %>">
77 </div>56 </div>
57 </div>
7858
79 <div class="menu-options" style="display: none;">
80 <div class="control-group">
81 <div class="input-prepend">
82 <span class="add-on"> <strong> Position </strong></span>
83 <input id="pos" type="text" placeholder="[left, top]"
84 value="<%= pos %>">
85 </div>
59 <div class="form-group">
60 <input class="form-control" id="custom-menu" type="checkbox">
61 <span class=""><strong> Custom Menu </strong></span>
62 </div>
63
64 <div class="menu-options" style="display: none;">
65 <div class="form-group">
66 <div class="input-group">
67 <span class="input-group-addon"> <strong> Position </strong></span>
68 <input class="form-control" id="pos" type="text" placeholder="[left, top]"
69 value="<%= pos %>">
86 </div>70 </div>
87 <label><strong> HTML for menu: </strong></label>
88 <textarea cols="25" rows="8" id="menu"><%= menu %></textarea>
89 </div>71 </div>
90
72 <label><strong> HTML for menu: </strong></label>
73 <textarea cols="25" rows="8" id="menu"><%= menu %></textarea>
91 </div>74 </div>
92 <button id="updateMenu" class="btn btn-primary pull-right"> Update </button>
93 <div class="clearfix"></div>
94 </div>
95 </script>
9675
97 <script type="text/template" id="page-list-template">
98 <div id="pagelistview">
99 <h4> List of Pages </h4>
100 <div id="pagelist"></div>
101 <button class="btn btn-primary" id="addPage">Add Page</button>
102 <hr>
103 <p> <a href="javascript:void(0);" id="menu-config"> Site Menu </a> </p>
104 <p><a href="{{ url_for('index') }}"> Go to site </a></p>
105 </div>76 </div>
106 </script>
77 <button id="updateMenu" class="btn btn-primary pull-right"> Update </button>
78 <div class="clearfix"></div>
79 </div>
80 </script>
10781
108 <script type="text/template" id="page-list-item-template">
109 <div class="pagename">
110 <a class="disp" id="<%= id %>" href="javascript:void(0);"><%= name %></a>
111 <span class="pull-right">
112 <a href="javascript:void(0);" class="remove" for="<%= id %>">
113 <i class="icon-trash"></i>
114 </a>
115 </span>
116 <span class="clearfix"></span>
117 </div>
118 </script>
82 <script type="text/template" id="page-list-template">
83 <div id="pagelistview">
84 <h4> List of Pages </h4>
85 <div id="pagelist"></div>
86 <button class="btn btn-primary" id="addPage">Add Page</button>
87 <hr>
88 <p> <a href="javascript:void(0);" id="menu-config"> Site Menu </a> </p>
89 <p><a href="{{ url_for('index') }}"> Go to site </a></p>
90 </div>
91 </script>
11992
120 <script type="text/template" id="page-template">
121 <div class="page">
122 <h4> Page Properties </h4>
123 <form class="form-horizontal">
124 <div class="control-group">
125 <div class="input-prepend">
126 <span class="add-on"> <strong> Name </strong></span>
127 <input id="name" type="text" placeholder="name of the page" value="<%= name %>">
128 </div>
93 <script type="text/template" id="page-list-item-template">
94 <div class="pagename">
95 <a class="disp" id="<%= id %>" href="javascript:void(0);"><%= name %></a>
96 <span class="pull-right">
97 <a href="javascript:void(0);" class="remove" for="<%= id %>">
98 <span class="glyphicon glyphicon-trash"></span>
99 </a>
100 </span>
101 <span class="clearfix"></span>
102 </div>
103 </script>
104
105 <script type="text/template" id="page-template">
106 <div class="page">
107 <h4> Page Details </h4>
108 <form class="form-horizontal">
109 <div class="form-group">
110 <div class="input-group">
111 <span class="input-group-addon"> <strong> Name </strong></span>
112 <input class="form-control" id="name" type="text" placeholder="name of the page" value="<%= name %>">
129 </div>113 </div>
130 <div class="control-group">
131 <div class="input-prepend">
132 <span class="add-on"> <strong>Title</strong> </span>
133 <input id="title" type="text" placeholder="title of the page"
134 value="<%= title %>">
135 </div>
114 </div>
115 <div class="form-group">
116 <div class="input-group">
117 <span class="input-group-addon"> <strong>Title</strong> </span>
118 <input class="form-control" id="title" type="text" placeholder="title of the page"
119 value="<%= title %>">
136 </div>120 </div>
137 <div class="control-group">
138 <div class="input-prepend">
139 <span class="add-on"> <strong>Children</strong> </span>
140 <input id="children" type="text" placeholder="csv of child pages"
141 value="<%= children %>">
142 </div>
121 </div>
122 <div class="form-group">
123 <div class="input-group">
124 <span class="input-group-addon"> <strong>Children</strong> </span>
125 <input class="form-control" id="children" type="text" placeholder="csv of child pages"
126 value="<%= children %>">
143 </div>127 </div>
144 <div class="control-group">
145 <div class="input-prepend">
146 <span class="add-on"><strong> Show Navigation </strong></span>
128 </div>
129 <div class="form-group">
130 <div class="checkbox">
131 <label>
147 <input id="showNav" type="checkbox" <%=checked%>>132 <input id="showNav" type="checkbox" <%=checked%>>
148 </div>
133 <strong> Show Navigation </strong>
134 </label>
149 </div>135 </div>
150 <label><strong> Content </strong></label>
151 <div id="content" class="content well">
152 <%= content %>
153 <p></p>
154 <button class="addContent btn btn-mini btn-primary">Add Content</button>
155 </div>
156 <button id="updatePage" type="submit" class="btn btn-primary pull-right"> Update </button>
157 <div class="clearfix"></div>
158 </form>
159 </div>
160 </script>
136 </div>
137 <label><strong> Content </strong></label>
138 <div id="content" class="content well">
139 <%= content %>
140 <p></p>
141 <button class="addContent btn btn-sm btn-primary">Add Content</button>
142 </div>
143 <button id="updatePage" type="submit" class="btn btn-primary pull-right"> Update </button>
144 <div class="clearfix"></div>
145 </form>
146 </div>
147 </script>
161148
162 <script type="text/template" id="content-list-template">
163 <div class="content-item-wrapper">
164 <span class="content-item" id="content-<%= no %>">
165 <span class="label label-info"> <%= type %> </span>
166 <span class="">
167 [ <small> <%= title %> <%= more %> </small> ]
168 </span>
149 <script type="text/template" id="content-list-template">
150 <div class="content-item-wrapper">
151 <span class="content-item" id="content-<%= no %>">
152 <span class="label label-default"> <%= type %> </span>
153 <span class="content-snippet">
154 [ <small> <%= title %> <%= more %> </small> ]
169 </span>155 </span>
170 <span class="pull-right">
171 <a href="javascript:void(0);" class="remove" for="<%=no%>"><i class="icon-trash"></i></a>
172 </span>
173 <span class="clearfix"></span>
174 </div>
175 </script>
156 </span>
157 <span class="pull-right">
158 <a href="javascript:void(0);" class="remove" for="<%=no%>">
159 <span class="glyphicon glyphicon-trash"></span>
160 </a>
161 </span>
162 <span class="clearfix"></span>
163 </div>
164 </script>
176165
177 <script type="text/template" id="content-template">
178 <div class="contentview">
179 <div class="">
166 <script type="text/template" id="content-template">
167 <div class="contentview">
168 <form class="form-horizontal">
169 <div class="form-group">
180 <label><b>Type</b></label>170 <label><b>Type</b></label>
181 <select>
171 <select class="form-control">
182 <% _.each(M.contentTypes, function(type) { %>172 <% _.each(M.contentTypes, function(type) { %>
183 <option><%= type %></option>173 <option><%= type %></option>
184 <% }); %>174 <% }); %>
185 </select>175 </select>
186 <div class="control-group">
187 <div class="input-prepend">
188 <span class="add-on"> <b>Title</b> </span>
189 <input type="text" placeholder="title of the content" value="<%=
190 title %>" m-data-target="title">
191 </div>
176 </div>
177 <div class="form-group">
178 <div class="input-group">
179 <span class="input-group-addon"> <b>Title</b> </span>
180 <input class="form-control" type="text" placeholder="title of the content" value="<%=
181 title %>" m-data-target="title">
192 </div>182 </div>
193 <div class="control-group">
194 <div class="input-prepend">
195 <span class="add-on"> <strong>Tags</strong> </span>
196 <input type="text" placeholder="csv of tags for this content"
197 value="<%= tags %>" m-data-target="tags">
198 </div>
183 </div>
184 <div class="form-group">
185 <div class="input-group">
186 <span class="input-group-addon"> <strong>Tags</strong> </span>
187 <input class="form-control" type="text" placeholder="csv of tags for this content"
188 value="<%= tags %>" m-data-target="tags">
199 </div>189 </div>
200 </div>190 </div>
201 <div id="specific-content"></div>
202 <button class="btn btn-info" id="done">Done</button>
203 <button class="btn btn-primary" id="updateContent">Update</button>
204 </div>
205 </script>
191 </form>
192 <div id="specific-content"></div>
193 <button class="btn btn-info" id="done">Done</button>
194 <button class="btn btn-primary" id="updateContent">Update</button>
195 </div>
196 </script>
206197
207 <script type="text/template" id="map-template">
208 <div class="data">
209 <div class="control-group">
210 <div class="input-prepend">
211 <span class="add-on"><strong>Tile Provider URL</strong></span>
212 <input type="text" placeholder="http://{s}.tile.cloudmade.com/<API_KEY>/997/256/{z}/{x}/{y}.png" value="<%= tileLayer %>"
213 m-data-target="tileLayer">
214 </div>
198 <script type="text/template" id="map-template">
199 <div class="data">
200 <div class="form-group">
201 <div class="input-group">
202 <span class="input-group-addon"><strong>Tile Provider URL</strong></span>
203 <input class="form-control" type="text" placeholder="http://{s}.tile.cloudmade.com/<API_KEY>/997/256/{z}/{x}/{y}.png" value="<%= tileLayer %>"
204 m-data-target="tileLayer">
215 </div>205 </div>
216 <div class="preview"></div>
217 </div>206 </div>
218 </script>
207 <div class="preview"></div>
208 </div>
209 </script>
219210
220211
221 <script type="text/template" id="media-template">
222 <div class="data">
223 <div class="control-group">
224 <div class="input-prepend">
225 <span class="add-on"><strong>path to file</strong></span>
226 <input type="text" placeholder="src" value="<%= src %>"
227 m-data-target="src">
228 </div>
212 <script type="text/template" id="media-template">
213 <div class="data">
214 <div class="form-group">
215 <div class="input-group">
216 <span class="input-group-addon"><strong>path to file</strong></span>
217 <input class="form-control" type="text" placeholder="src" value="<%= src %>"
218 m-data-target="src">
229 </div>219 </div>
230 <div class="preview"></div>
231 </div>220 </div>
232 </script>
221 <div class="preview"></div>
222 </div>
223 </script>
233224
234 <script type="text/template" id="text-template">
235 <div class="data">
236 <label><b> Content </b></label>
237 <p>
238 <span class="label label-important">Tip</span>
239 <span><small> You can unleash your HTML power here </small></span>
240 </p>
241 <textarea id="edit" m-data-target="data">
242 <%= data %>
243 </textarea>
244 </div>
245 </script>
225 <script type="text/template" id="text-template">
226 <div class="data">
227 <label><b> Content </b></label>
228 <p>
229 <span class="label label-info">Tip</span>
230 <span><small> You can unleash your HTML power here </small></span>
231 </p>
232 <textarea id="edit" m-data-target="data">
233 <%= data %>
234 </textarea>
235 </div>
236 </script>
246237
247 <!-- notification templates -->
248 <script type="text/template" id="success-notif">
249 <div class="alert alert-success">
250 <button type="button" class="close" data-dismiss="alert">&times;</button>
251 <h4> <%= title %> </h4>
252 <%= msg %>
253 </div>
254 </script>
238 <!-- notification templates -->
239 <script type="text/template" id="success-notif">
240 <div class="alert alert-success">
241 <button type="button" class="close" data-dismiss="alert">&times;</button>
242 <h4> <%= title %> </h4>
243 <%= msg %>
244 </div>
245 </script>
255246
256 <script type="text/template" id="fail-notif">
257 <div class="alert alert-error">
258 <button type="button" class="close" data-dismiss="alert">&times;</button>
259 <h4> <%= title %> </h4>
260 <%= msg %>
261 </div>
262 </script>
263
264 </body>
265</html>
247 <script type="text/template" id="fail-notif">
248 <div class="alert alert-danger">
249 <button type="button" class="close" data-dismiss="alert">&times;</button>
250 <h4> <%= title %> </h4>
251 <%= msg %>
252 </div>
253 </script>
254{% endblock %}

mouchak/templates/index.html

1<!DOCTYPE html>
2<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6 <head>
7 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge">
9 <title> {{title}} </title>
10 <meta name="description" content="">
11 <meta name="viewport" content="width=device-width, initial-scale=1.0">
1{% extends "base.html" %}
122
13 <!-- Place favicon.ico in the root directory -->
3{% block head %}
4 <title> {{ title }} </title>
5{% endblock %}
146
15 <link rel="stylesheet" href="{{url_for('static', filename='css/normalize.css')}}">
16 <link rel="stylesheet" href="{{url_for('static', filename='css/bootstrap.min.css')}}" media="screen">
17 <link rel="stylesheet" href="{{url_for('static', filename='css/mouchak.css')}}">
18 <link rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}">
19 <script src="{{url_for('static', filename='js/lib/modernizr-2.6.2.min.js')}}"></script>
7{% block body %}
8 <div class="container" id="container">
9 <div id="header">
10 <div id="navigation"></div>
11 </div>
12 <div id="content-container"></div>
13 <div id="footer"> {{ footer|safe }} </div>
14 </div>
2015
21 <!--TODO: make this optional, only when there is a map plugin in the site. There
22 is no need to load this for every site -->
23 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
24 <!--[if lte IE 8]>
25 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
26 <![endif]-->
27 <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet-src.js"></script>
28 </head>
29 <body>
30 <!--[if lt IE 7]>
31 <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
32 <![endif]-->
16 <script>
17 //Code to initialize the framework
18 window.M = window.M || {};
19 M.MenuURL = function() { return "{{ url_for('insertMenu') }}"};
20 M.PageURL = function() { return "{{ url_for('insertPage') }}"; };
21 M.site_content = {{ content|tojson|safe }};
22 window.onload = function() {
23 M.init();
24 };
25 </script>
3326
34 <div class="container" id="container">
35 <div id="header">
36 <div id="navigation"></div>
37 </div>
38 <div id="content-container"></div>
39 <div id="footer"> {{ footer|safe }} </div>
40 </div>
27{% endblock %}
4128
42 <script>
43 //Code to initialize the framework
44 window.M = window.M || {};
45 M.MenuURL = function() { return "{{ url_for('insertMenu') }}"};
46 M.PageURL = function() { return "{{ url_for('insertPage') }}"; };
47 M.site_content = {{ content|tojson|safe }};
48 window.onload = function() {
49 M.init();
50 };
51 </script>
52 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
53 <script>window.jQuery || document.write('<script src="{{url_for('static', filename='js/lib/jquery-1.10.2.min.js')}}"><\/script>')</script>
54 <script src="{{url_for('static', filename='js/lib/underscore-1.5.2.min.js')}}"></script>
55 <script src="{{url_for('static', filename='js/lib/backbone-1.0.0.min.js')}}"></script>
56 <script src="{{url_for('static', filename='js/lib/bootstrap.min.js')}}"></script>
57 <script src="{{url_for('static', filename='js/plugins.js')}}"></script>
58 <script src="{{url_for('static', filename='js/mouchak.js')}}"></script>
59 <script src="{{url_for('static', filename='js/models.js')}}"></script>
60 <script src="{{url_for('static', filename='js/views.js')}}"></script>
29{% block scripts %}
30 <script src="{{url_for('static', filename='js/mouchak.js')}}"></script>
31 <script src="{{url_for('static', filename='js/models.js')}}"></script>
32 <script src="{{url_for('static', filename='js/views.js')}}"></script>
33{% endblock %}
6134
62 <!-- Underscore templates -->
63 <script type="text/template" id="news-template">
64 <div id="feeds">
65 <img src="img/ajax-loader.gif" id="feeds-loader"/>
66 </div>
67 </script>
68 <script type="text/template" id="news-item-template">
69 <div class="news-item-wrapper">
70 <div class="news-title"><%= title %></div>
71 <a href="<%= link %>">Read More</a>
72 </div>
73 </script>
35{% block templates %}
7436
75 <!-- navigation templates
76 the ones with .nav-type can be used interchangbly to render different
77 kinds of navigation bar / components
78 one can add more
79 -->
80 <script type="text/template" id="nav-bar-template" class="nav-type">
81 <div class="navbar navbar-default" role="navigation">
82 <!-- Brand and toggle get grouped for better mobile display -->
83 <div class="navbar-header">
84 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
85 <span class="sr-only">Toggle navigation</span>
86 <span class="icon-bar"></span>
87 <span class="icon-bar"></span>
88 <span class="icon-bar"></span>
89 </button>
90 <a class="navbar-brand" href="<%= brand_href %>"><%= brand %></a>
91 </div>
92 <!-- Collect the nav links, forms, and other content for toggling -->
93 <div class="collapse navbar-collapse navbar-ex1-collapse">
94 <ul class="nav navbar-nav"></ul>
95 </div>
96 </div>
97 </script>
37 <!-- Underscore templates -->
38 <script type="text/template" id="news-template">
39 <div id="feeds">
40 <img src="img/ajax-loader.gif" id="feeds-loader"/>
41 </div>
42 </script>
43 <script type="text/template" id="news-item-template">
44 <div class="news-item-wrapper">
45 <div class="news-title"><%= title %></div>
46 <a href="<%= link %>">Read More</a>
47 </div>
48 </script>
9849
99 <script type="text/template" id="nav-pills-template" class="nav-type">
100 <div class="navigation">
101 <ul class="nav nav-pills"></ul>
50 <!-- navigation templates
51 the ones with .nav-type can be used interchangbly to render different
52 kinds of navigation bar / components
53 one can add more
54 -->
55 <script type="text/template" id="nav-bar-template" class="nav-type">
56 <div class="navbar navbar-default" role="navigation">
57 <!-- Brand and toggle get grouped for better mobile display -->
58 <div class="navbar-header">
59 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
60 <span class="sr-only">Toggle navigation</span>
61 <span class="icon-bar"></span>
62 <span class="icon-bar"></span>
63 <span class="icon-bar"></span>
64 </button>
65 <a class="navbar-brand" href="<%= brand_href %>"><%= brand %></a>
102 </div>66 </div>
103 </script>
67 <!-- Collect the nav links, forms, and other content for toggling -->
68 <div class="collapse navbar-collapse navbar-ex1-collapse">
69 <ul class="nav navbar-nav"></ul>
70 </div>
71 </div>
72 </script>
10473
105 <script type="text/template" id="nav-item-template">
106 <li class="<%= cls %>">
107 <a href="#/<%=page%>"> <%= M.humanReadable(page) %> </a>
108 </li>
109 </script>
74 <script type="text/template" id="nav-pills-template" class="nav-type">
75 <div class="navigation">
76 <ul class="nav nav-pills"></ul>
77 </div>
78 </script>
11079
111 <script type="text/template" id="nav-dropdown-template">
112 <li class="dropdown">
113 <a class="dropdown-toggle" data-toggle="dropdown" href="#/<%= M.sanitize(name) %>"
114 data-target='#'>
115 <%= name %>
116 <b class="caret"></b>
117 </a>
118 <ul class="dropdown-menu">
119 <% _.each(list, function(item) {
120 %>
121 <li><a href="#/<%= M.sanitize(item) %>"> <%= item %> </a></li>
122 <%
123 });
80 <script type="text/template" id="nav-item-template">
81 <li class="<%= cls %>">
82 <a href="#/<%=page%>"> <%= M.humanReadable(page) %> </a>
83 </li>
84 </script>
85
86 <script type="text/template" id="nav-dropdown-template">
87 <li class="dropdown">
88 <a class="dropdown-toggle" data-toggle="dropdown" href="#/<%= M.sanitize(name) %>"
89 data-target='#'>
90 <%= name %>
91 <b class="caret"></b>
92 </a>
93 <ul class="dropdown-menu">
94 <% _.each(list, function(item) {
124 %>95 %>
125 </ul>
126 </li>
127 </script>
96 <li><a href="#/<%= M.sanitize(item) %>"> <%= item %> </a></li>
97 <%
98 });
99 %>
100 </ul>
101 </li>
102 </script>
128103
129 <!-- Template for map-->
130 <script type="text/template" id="map-template">
131 <div id="map">
132 </div>
133 </script>
104 <!-- Template for map-->
105 <script type="text/template" id="map-template">
106 <div id="map">
107 </div>
108 </script>
134109
110 <script type="text/template" id="image-view-template">
111 <div class="img-wrapper">
112 <img src="<%= src %>">
113 </div>
114 </script>
135115
136
137 <script type="text/template" id="image-view-template">
138 <div class="img-wrapper">
139 <img src="<%= src %>">
140 </div>
141 </script>
142 </body>
143</html>
116{% endblock %}