Commit bf40f6293a89262a39188d0aa1375dbe8ab1a970

Revamped the UI

  Revamped the UI. Trying to make it more meaningful.
  • Diff rendering mode:
  • inline
  • side by side

mouchak/server.py

40 return {'content': content, 'menu': menu}40 return {'content': content, 'menu': menu}
4141
4242
43@app.errorhandler(404)
44def pageNotFound(e):
45 return flask.render_template('404.html'), 404
46
4347
44@app.route('/', methods=['GET'])48@app.route('/', methods=['GET'])
45def index():49def index():

mouchak/static/css/editor.css

1.page {
1body {
2 background-color: #EEE;
3}
4.prettybox-lg {
5 background-color: #FFF;
2 border: 1px solid #999;6 border: 1px solid #999;
7 border-radius: 6px;
8 box-shadow: 1px 1px 9px #333;
9}
10.prettybox-side {
11 border: 1px solid #999;
12 background-color: #FFF;
13 border-radius: 4px;
14 box-shadow: 0 0 5px #999;
15}
16
17.page {
3 padding: 30px;18 padding: 30px;
4 padding-bottom: 10px;19 padding-bottom: 10px;
5 width: 600px;20 width: 600px;
……
23 position: absolute;23 position: absolute;
24 left: 20px;24 left: 20px;
25 top: 20px;25 top: 20px;
26 border: 1px solid #999;
27 padding: 10px;26 padding: 10px;
28 width: 300px;27 width: 300px;
29 /*height: 80%;*/
30}28}
31#page {29#page {
32 position: absolute;30 position: absolute;
33 left: 400px;
34 top: 40px;
31 left: 420px;
32 top: 20px;
35}33}
36#pagelist {34#pagelist {
37 padding: 10px;35 padding: 10px;
……
49 padding: 3px;49 padding: 3px;
50}50}
51#contentview {51#contentview {
52 border: 1px solid #999;
53 padding: 30px;
52 padding: 35px;
54 margin: 10px;53 margin: 10px;
55 width: 85%;
54 width: 88%;
56}55}
57.contentview {56.contentview {
58}57}
……
87 background-color: #FFFFFF;87 background-color: #FFFFFF;
88 opacity: 0.7;88 opacity: 0.7;
89 display: none;89 display: none;
90}
91#hud {
90}92}

mouchak/static/js/editor.js

3 /* view to manage list of pages - add, remove and show them */3 /* view to manage list of pages - add, remove and show them */
4 var PageListView = Backbone.View.extend({4 var PageListView = Backbone.View.extend({
5 tagName: 'div',5 tagName: 'div',
6 className: '',
6 className: 'prettybox-side',
7 id: 'pages',7 id: 'pages',
8 events: {8 events: {
9 'click .pagename .disp': 'showPage',9 'click .pagename .disp': 'showPage',
……
101 * add content, remove and show content, and update the page */101 * add content, remove and show content, and update the page */
102 var PageView = Backbone.View.extend({102 var PageView = Backbone.View.extend({
103 tagName: 'div',103 tagName: 'div',
104 className: 'prettybox-lg',
104 id: 'page',105 id: 'page',
105 events: {106 events: {
106 'click #updatePage': 'updatePage',107 'click #updatePage': 'updatePage',
……
271 /* view to manage, render and update each content */271 /* view to manage, render and update each content */
272 var ContentView = Backbone.View.extend({272 var ContentView = Backbone.View.extend({
273 id: 'contentview',273 id: 'contentview',
274 className: 'prettybox-lg',
274 events: {275 events: {
275 'click #done': 'done',276 'click #done': 'done',
276 'click #updateContent': 'update',277 'click #updateContent': 'update',
278 'click #back' : 'back',
277 'click #edit-type button' : 'editTypeChanged',279 'click #edit-type button' : 'editTypeChanged',
278 'change .contentview select': 'typeChanged'280 'change .contentview select': 'typeChanged'
279 },281 },
……
391 done: function() {391 done: function() {
392 this.update();392 this.update();
393 this.cleanUp();393 this.cleanUp();
394 },
395 back: function() {
396 this.cleanUp();
394 }397 }
395 });398 });
396399
397 /* view to configure custom navigation menu */400 /* view to configure custom navigation menu */
398 var MenuConfigView = Backbone.View.extend({401 var MenuConfigView = Backbone.View.extend({
399 tagName: 'div',402 tagName: 'div',
403 className: 'prettybox-lg',
400 id: 'page',404 id: 'page',
401 events: {405 events: {
402 'change #custom-menu': 'customMenuChange',406 'change #custom-menu': 'customMenuChange',

mouchak/templates/404.html

1<!DOCTYPE html>1<!DOCTYPE html>
2<html lang="en">2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Page Not Found :(</title>
6 <style>
7 ::-moz-selection {
8 background: #b3d4fc;
9 text-shadow: none;
10 }
3 <head>
4 <meta charset="utf-8">
5 <title>Page Not Found :(</title>
6 <style>
7 ::-moz-selection {
8 background: #b3d4fc;
9 text-shadow: none;
10 }
1111
12 ::selection {
13 background: #b3d4fc;
14 text-shadow: none;
15 }
12 ::selection {
13 background: #b3d4fc;
14 text-shadow: none;
15 }
1616
17 html {
18 padding: 30px 10px;
19 font-size: 20px;
20 line-height: 1.4;
21 color: #737373;
22 background: #f0f0f0;
23 -webkit-text-size-adjust: 100%;
24 -ms-text-size-adjust: 100%;
25 }
17 html {
18 padding: 30px 10px;
19 font-size: 20px;
20 line-height: 1.4;
21 color: #737373;
22 background: #f0f0f0;
23 -webkit-text-size-adjust: 100%;
24 -ms-text-size-adjust: 100%;
25 }
2626
27 html,
28 input {
29 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
30 }
27 html,
28 input {
29 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
30 }
3131
32 body {
33 max-width: 500px;
34 _width: 500px;
35 padding: 30px 20px 50px;
36 border: 1px solid #b3b3b3;
37 border-radius: 4px;
38 margin: 0 auto;
39 box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
40 background: #fcfcfc;
41 }
32 body {
33 max-width: 500px;
34 _width: 500px;
35 padding: 30px 20px 50px;
36 border: 1px solid #b3b3b3;
37 border-radius: 4px;
38 margin: 0 auto;
39 box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
40 background: #fcfcfc;
41 }
4242
43 h1 {
44 margin: 0 10px;
45 font-size: 50px;
46 text-align: center;
47 }
43 h1 {
44 margin: 0 10px;
45 font-size: 50px;
46 text-align: center;
47 }
4848
49 h1 span {
50 color: #bbb;
51 }
49 h1 span {
50 color: #bbb;
51 }
5252
53 h3 {
54 margin: 1.5em 0 0.5em;
55 }
53 h3 {
54 margin: 1.5em 0 0.5em;
55 }
5656
57 p {
58 margin: 1em 0;
59 }
57 p {
58 margin: 1em 0;
59 }
6060
61 ul {
62 padding: 0 0 0 40px;
63 margin: 1em 0;
64 }
61 ul {
62 padding: 0 0 0 40px;
63 margin: 1em 0;
64 }
6565
66 .container {
67 max-width: 380px;
68 _width: 380px;
69 margin: 0 auto;
70 }
66 .container {
67 max-width: 380px;
68 _width: 380px;
69 margin: 0 auto;
70 }
7171
72 /* google search */
72 /* google search */
7373
74 #goog-fixurl ul {
75 list-style: none;
76 padding: 0;
77 margin: 0;
78 }
74 #goog-fixurl ul {
75 list-style: none;
76 padding: 0;
77 margin: 0;
78 }
7979
80 #goog-fixurl form {
81 margin: 0;
82 }
80 #goog-fixurl form {
81 margin: 0;
82 }
8383
84 #goog-wm-qt,
85 #goog-wm-sb {
86 border: 1px solid #bbb;
87 font-size: 16px;
88 line-height: normal;
89 vertical-align: top;
90 color: #444;
91 border-radius: 2px;
92 }
84 #goog-wm-qt,
85 #goog-wm-sb {
86 border: 1px solid #bbb;
87 font-size: 16px;
88 line-height: normal;
89 vertical-align: top;
90 color: #444;
91 border-radius: 2px;
92 }
9393
94 #goog-wm-qt {
95 width: 220px;
96 height: 20px;
97 padding: 5px;
98 margin: 5px 10px 0 0;
99 box-shadow: inset 0 1px 1px #ccc;
100 }
94 #goog-wm-qt {
95 width: 220px;
96 height: 20px;
97 padding: 5px;
98 margin: 5px 10px 0 0;
99 box-shadow: inset 0 1px 1px #ccc;
100 }
101101
102 #goog-wm-sb {
103 display: inline-block;
104 height: 32px;
105 padding: 0 10px;
106 margin: 5px 0 0;
107 white-space: nowrap;
108 cursor: pointer;
109 background-color: #f5f5f5;
110 background-image: -webkit-linear-gradient(rgba(255,255,255,0), #f1f1f1);
111 background-image: -moz-linear-gradient(rgba(255,255,255,0), #f1f1f1);
112 background-image: -ms-linear-gradient(rgba(255,255,255,0), #f1f1f1);
113 background-image: -o-linear-gradient(rgba(255,255,255,0), #f1f1f1);
114 -webkit-appearance: none;
115 -moz-appearance: none;
116 appearance: none;
117 *overflow: visible;
118 *display: inline;
119 *zoom: 1;
120 }
102 #goog-wm-sb {
103 display: inline-block;
104 height: 32px;
105 padding: 0 10px;
106 margin: 5px 0 0;
107 white-space: nowrap;
108 cursor: pointer;
109 background-color: #f5f5f5;
110 background-image: -webkit-linear-gradient(rgba(255,255,255,0), #f1f1f1);
111 background-image: -moz-linear-gradient(rgba(255,255,255,0), #f1f1f1);
112 background-image: -ms-linear-gradient(rgba(255,255,255,0), #f1f1f1);
113 background-image: -o-linear-gradient(rgba(255,255,255,0), #f1f1f1);
114 -webkit-appearance: none;
115 -moz-appearance: none;
116 appearance: none;
117 *overflow: visible;
118 *display: inline;
119 *zoom: 1;
120 }
121121
122 #goog-wm-sb:hover,
123 #goog-wm-sb:focus {
124 border-color: #aaa;
125 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
126 background-color: #f8f8f8;
127 }
122 #goog-wm-sb:hover,
123 #goog-wm-sb:focus {
124 border-color: #aaa;
125 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
126 background-color: #f8f8f8;
127 }
128128
129 #goog-wm-qt:hover,
130 #goog-wm-qt:focus {
131 border-color: #105cb6;
132 outline: 0;
133 color: #222;
134 }
129 #goog-wm-qt:hover,
130 #goog-wm-qt:focus {
131 border-color: #105cb6;
132 outline: 0;
133 color: #222;
134 }
135135
136 input::-moz-focus-inner {
137 padding: 0;
138 border: 0;
139 }
140 </style>
141 </head>
142 <body>
143 <div class="container">
144 <h1>Not found <span>:(</span></h1>
145 <p>Sorry, but the page you were trying to view does not exist.</p>
146 <p>It looks like this was the result of either:</p>
147 <ul>
148 <li>a mistyped address</li>
149 <li>an out-of-date link</li>
150 </ul>
151 </div>
152 </body>
136 input::-moz-focus-inner {
137 padding: 0;
138 border: 0;
139 }
140 </style>
141 </head>
142 <body>
143 <div class="container">
144 <h1>Not found <span>:(</span></h1>
145 <p>Sorry, but the page you were trying to view does not exist.</p>
146 <p>It looks like this was the result of either:</p>
147 <ul>
148 <li>a mistyped address</li>
149 <li>an out-of-date link</li>
150 </ul>
151 <hr>
152 <div style="text-align: center;">
153 <small><b><i>Mouchak</i></b></small>
154 </div>
155 </div>
156 </body>
153</html>157</html>

mouchak/templates/editor.html

130130
131 <script type="text/template" id="page-template">131 <script type="text/template" id="page-template">
132 <div class="page">132 <div class="page">
133 <h4> <%= name %> : Page Details </h4>
133 <div class="row">
134 <h4> <%= name %> : Page Details </h4>
135 </div>
136 <hr/>
134 <form class="form-horizontal">137 <form class="form-horizontal">
135 <div class="form-group">138 <div class="form-group">
136 <div class="input-group">139 <div class="input-group">
……
146 </span>146 </span>
147 </div>147 </div>
148 <div class="form-group">148 <div class="form-group">
149 <strong> Content </strong>
150 <div id="content" class="content well">
151 <%= content %>
152 <p></p>
153 <button class="addContent btn btn-sm btn-primary">Add Content</button>
154 </div>
155 </div>
156 <div class="form-group">
149 <div class="input-group">157 <div class="input-group">
150 <span class="input-group-addon"> <strong>Title</strong> </span>158 <span class="input-group-addon"> <strong>Title</strong> </span>
151 <input class="form-control" id="title" type="text" placeholder="title of the page"159 <input class="form-control" id="title" type="text" placeholder="title of the page"
……
184 <small>Show navigation menu in this page? </small>184 <small>Show navigation menu in this page? </small>
185 </span>185 </span>
186 </div>186 </div>
187 <label><strong> Content </strong></label>
188 <span class="help-block">
189 <small>content of this page</small>
190 </span>
191 <div id="content" class="content well">
192 <%= content %>
193 <p></p>
194 <button class="addContent btn btn-sm btn-primary">Add Content</button>
195 </div>
196 <button id="updatePage" type="submit" class="btn btn-primary pull-right"> Update </button>187 <button id="updatePage" type="submit" class="btn btn-primary pull-right"> Update </button>
197 <div class="clearfix"></div>188 <div class="clearfix"></div>
198 </form>189 </form>
……
243 <div id="specific-content"></div>243 <div id="specific-content"></div>
244 </div>244 </div>
245 <div class="row">245 <div class="row">
246 <button class="btn btn-info" id="done">Done</button>
247 <button class="btn btn-primary" id="updateContent">Update</button>
246 <button class="btn btn-primary" id="done">Done</button>
247 <button class="btn btn-default" id="back">Back</button>
248 <!--button class="btn btn-primary" id="updateContent">Update</button-->
248 </div>249 </div>
249 </div>250 </div>
250 </script>251 </script>