Commit bf40f6293a89262a39188d0aa1375dbe8ab1a970

Anon Ray
Sun Oct 06 06:56:43 IST 2013

Tree SHA1: 0fbdc79
Parent SHA1: e5d3482 (Fix UI issues)
raw diff | raw patch

Revamped the UI

  Revamped the UI. Trying to make it more meaningful.

Diff rendering mode:
inline
side by side


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


1		.page {
	1	body {
	2	background-color: #EEE;
	3	}
	4	.prettybox-lg {
	5	background-color: #FFF;
2	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	18	padding: 30px;
4	19	padding-bottom: 10px;
5	20	width: 600px;
…	…
23	23	position: absolute;
24	24	left: 20px;
25	25	top: 20px;
26		border: 1px solid #999;
27	26	padding: 10px;
28	27	width: 300px;
29		/height: 80%;/
30	28	}
31	29	#page {
32	30	position: absolute;
33		left: 400px;
34		top: 40px;
	31	left: 420px;
	32	top: 20px;
35	33	}
36	34	#pagelist {
37	35	padding: 10px;
…	…
49	49	padding: 3px;
50	50	}
51	51	#contentview {
52		border: 1px solid #999;
53		padding: 30px;
	52	padding: 35px;
54	53	margin: 10px;
55		width: 85%;
	54	width: 88%;
56	55	}
57	56	.contentview {
58	57	}
…	…
87	87	background-color: #FFFFFF;
88	88	opacity: 0.7;
89	89	display: none;
	90	}
	91	#hud {
90	92	}


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


1	1	<!DOCTYPE html>
2	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	}
11	11
12		::selection {
13		background: #b3d4fc;
14		text-shadow: none;
15		}
	12	::selection {
	13	background: #b3d4fc;
	14	text-shadow: none;
	15	}
16	16
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	}
26	26
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	}
31	31
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	}
42	42
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	}
48	48
49		h1 span {
50		color: #bbb;
51		}
	49	h1 span {
	50	color: #bbb;
	51	}
52	52
53		h3 {
54		margin: 1.5em 0 0.5em;
55		}
	53	h3 {
	54	margin: 1.5em 0 0.5em;
	55	}
56	56
57		p {
58		margin: 1em 0;
59		}
	57	p {
	58	margin: 1em 0;
	59	}
60	60
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	}
65	65
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	}
71	71
72		/* google search */
	72	/* google search */
73	73
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	}
79	79
80		#goog-fixurl form {
81		margin: 0;
82		}
	80	#goog-fixurl form {
	81	margin: 0;
	82	}
83	83
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	}
93	93
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	}
101	101
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	}
121	121
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	}
128	128
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	}
135	135
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	157	</html>


130	130
131	131	<script type="text/template" id="page-template">
132	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	137	<form class="form-horizontal">
135	138	<div class="form-group">
136	139	<div class="input-group">
…	…
146	146	</span>
147	147	</div>
148	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	157	<div class="input-group">
150	158	<span class="input-group-addon"> <strong>Title</strong> </span>
151	159	<input class="form-control" id="title" type="text" placeholder="title of the page"
…	…
184	184	<small>Show navigation menu in this page? </small>
185	185	</span>
186	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	187	<button id="updatePage" type="submit" class="btn btn-primary pull-right"> Update </button>
197	188	<div class="clearfix"></div>
198	189	</form>
…	…
243	243	<div id="specific-content"></div>
244	244	</div>
245	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	249	</div>
249	250	</div>
250	251	</script>

Commit bf40f6293a89262a39188d0aa1375dbe8ab1a970

Gitorious