Commit e5d3482291edf86670463669c298142d372a7792

Fix UI issues

  - Improvement in the editor UI with help text and all
  - Inprovement in the UI of ace code editor
  • Diff rendering mode:
  • inline
  • side by side

mouchak/static/css/editor.css

1.page {1.page {
2 border: 1px solid #999;2 border: 1px solid #999;
3 padding: 20px;
4 width: 400px;
5 /*height: 400px;*/
3 padding: 30px;
4 padding-bottom: 10px;
5 width: 600px;
6}6}
7#pages {7#pages {
8 position: absolute;8 position: absolute;
……
15}15}
16#page {16#page {
17 position: absolute;17 position: absolute;
18 left: 500px;
19 top: 90px;
18 left: 400px;
19 top: 40px;
20}20}
21#pagelist {21#pagelist {
22 padding: 10px;22 padding: 10px;
……
62 top: 0px;62 top: 0px;
63}63}
64#code-edit {64#code-edit {
65 position: absolute;
66 top: 355px;
67 right: 0;
68 bottom: 0 ;
69 left: 125px;
70 width: 70%;
65 position: relative;
66 top: 0;
67 left: 0;
68 width: 100%;
69 height: 500px;
71}70}
72#editor-overlay {71#editor-overlay {
73 position: absolute;72 position: absolute;

mouchak/templates/editor.html

48 <div class="menu-config">48 <div class="menu-config">
49 <h4> Menu Config </h4>49 <h4> Menu Config </h4>
5050
51 <div class="form-group col-lg-6" 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"
55 placeholder="list,page,names,for,menu,order" value="<%= menu_order %>">
51 <div class="row">
52 <div class="form-group col-lg-12" id="menu-order-wrap">
53 <div class="input-group">
54 <span class="input-group-addon"> <strong> Menu Order</strong></span>
55 <input class="form-control" id="menu-order" type="text"
56 placeholder="list,page,slugs,for,menu,order" value="<%= menu_order %>">
57 </div>
58 <span class="help-block">
59 <small>csv list of page slugs to come up in the navigation menu
60 in that order
61 </small>
62 </span>
56 </div>63 </div>
57 </div>64 </div>
5865
59 <div class="form-group col-lg-6">
60 <input class="form-control" id="custom-menu" type="checkbox">
61 <span class=""><strong> Custom Menu </strong></span>
66 <div class="row">
67 <div class="form-group col-lg-6">
68 <div class="input-group">
69 <span class="input-group-addon">
70 <input id="custom-menu" type="checkbox">
71 </span>
72 <span class="input-group-addon"><strong>Custom Menu
73 </strong></span>
74 </div>
75 <span class="help-block">
76 <small>
77 activate to write your own custom menu
78 </small>
79 </span>
80 </div>
62 </div>81 </div>
6382
64 <div class="menu-options" style="display: none;">83 <div class="menu-options" style="display: none;">
65 <div class="form-group col-lg-6">
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 %>">
84 <div class="row">
85 <div class="form-group col-lg-6">
86 <div class="input-group">
87 <span class="input-group-addon"> <strong> Position </strong></span>
88 <input class="form-control" id="pos" type="text" placeholder="[left, top]"
89 value="<%= pos %>">
90 </div>
70 </div>91 </div>
71 </div>92 </div>
72 <label><strong> HTML for menu: </strong></label>
73 <textarea cols="25" rows="8" id="menu"><%= menu %></textarea>
93 <div class="row">
94 <label><strong> HTML for menu: </strong></label>
95 <textarea class="form-control" cols="25" rows="8" id="menu"><%= menu %></textarea>
96 </div>
74 </div>97 </div>
7598
76 </div>99 </div>
77 <button id="updateMenu" class="btn btn-primary pull-right"> Update </button>
78 <div class="clearfix"></div>100 <div class="clearfix"></div>
101 <div class="row">
102 <button id="updateMenu" class="btn btn-primary pull-right"> Update </button>
103 </div>
104 <div class="clearfix"></div>
79 </div>105 </div>
80 </script>106 </script>
81107
……
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> Page Details </h4>
133 <h4> <%= name %> : Page Details </h4>
134 <form class="form-horizontal">134 <form class="form-horizontal">
135 <div class="form-group">135 <div class="form-group">
136 <div class="input-group">136 <div class="input-group">
137 <span class="input-group-addon"> <strong> Name </strong></span>
138 <input class="form-control" id="name" type="text" placeholder="name of the page" value="<%= name %>">
137 <span class="input-group-addon"> <strong> Slug </strong></span>
138 <input class="form-control" id="name" type="text"
139 placeholder="slug of the page" value="<%= name %>">
139 </div>140 </div>
141 <span class="help-block">
142 <small>The URL part of the page, as it will appear in the URL</small>
143 </span>
140 </div>144 </div>
141 <div class="form-group">145 <div class="form-group">
142 <div class="input-group">146 <div class="input-group">
……
148 <input class="form-control" id="title" type="text" placeholder="title of the page"148 <input class="form-control" id="title" type="text" placeholder="title of the page"
149 value="<%= title %>">149 value="<%= title %>">
150 </div>150 </div>
151 <span class="help-block">
152 <small>title of the page</small>
153 </span>
151 </div>154 </div>
152 <div class="form-group">155 <div class="form-group">
153 <div class="input-group">156 <div class="input-group">
……
158 <input class="form-control" id="children" type="text" placeholder="csv of child pages"158 <input class="form-control" id="children" type="text" placeholder="csv of child pages"
159 value="<%= children %>">159 value="<%= children %>">
160 </div>160 </div>
161 <span class="help-block">
162 <small> leave this blank for now</small>
163 </span>
161 </div>164 </div>
162 <div class="form-group">165 <div class="form-group">
163 <div class="input-group">166 <div class="input-group">
164 <span class="input-group-addon">167 <span class="input-group-addon">
165 <input id="showNav" type="checkbox" <%= checked %> >168 <input id="showNav" type="checkbox" <%= checked %> >
166 </span>169 </span>
167 <input class="form-control" type="text" value="Show Navigation"
168 disabled>
170 <input class="form-control" type="text" value="Show Navigation" disabled>
169 </div>171 </div>
172 <span class="help-block">
173 <small>Show navigation menu in this page? </small>
174 </span>
170 </div>175 </div>
171 <label><strong> Content </strong></label>176 <label><strong> Content </strong></label>
177 <span class="help-block">
178 <small>content of this page</small>
179 </span>
172 <div id="content" class="content well">180 <div id="content" class="content well">
173 <%= content %>181 <%= content %>
174 <p></p>182 <p></p>