Commit e5d3482291edf86670463669c298142d372a7792

Fix UI issues

  - Improvement in the editor UI with help text and all
  - Inprovement in the UI of ace code editor
mouchak/static/css/editor.css
(10 / 11)
  
11.page {
22 border: 1px solid #999;
3 padding: 20px;
4 width: 400px;
5 /*height: 400px;*/
3 padding: 30px;
4 padding-bottom: 10px;
5 width: 600px;
66}
77#pages {
88 position: absolute;
……
1515}
1616#page {
1717 position: absolute;
18 left: 500px;
19 top: 90px;
18 left: 400px;
19 top: 40px;
2020}
2121#pagelist {
2222 padding: 10px;
……
6262 top: 0px;
6363}
6464#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;
7170}
7271#editor-overlay {
7372 position: absolute;
mouchak/templates/editor.html
(62 / 21)
  
4848 <div class="menu-config">
4949 <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>
5663 </div>
5764 </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>
6281 </div>
6382
6483 <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>
7091 </div>
7192 </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>
7497 </div>
7598
7699 </div>
77 <button id="updateMenu" class="btn btn-primary pull-right"> Update </button>
78100 <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>
79105 </div>
80106 </script>
81107
……
130130
131131 <script type="text/template" id="page-template">
132132 <div class="page">
133 <h4> Page Details </h4>
133 <h4> <%= name %> : Page Details </h4>
134134 <form class="form-horizontal">
135135 <div class="form-group">
136136 <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 %>">
139140 </div>
141 <span class="help-block">
142 <small>The URL part of the page, as it will appear in the URL</small>
143 </span>
140144 </div>
141145 <div class="form-group">
142146 <div class="input-group">
……
148148 <input class="form-control" id="title" type="text" placeholder="title of the page"
149149 value="<%= title %>">
150150 </div>
151 <span class="help-block">
152 <small>title of the page</small>
153 </span>
151154 </div>
152155 <div class="form-group">
153156 <div class="input-group">
……
158158 <input class="form-control" id="children" type="text" placeholder="csv of child pages"
159159 value="<%= children %>">
160160 </div>
161 <span class="help-block">
162 <small> leave this blank for now</small>
163 </span>
161164 </div>
162165 <div class="form-group">
163166 <div class="input-group">
164167 <span class="input-group-addon">
165168 <input id="showNav" type="checkbox" <%= checked %> >
166169 </span>
167 <input class="form-control" type="text" value="Show Navigation"
168 disabled>
170 <input class="form-control" type="text" value="Show Navigation" disabled>
169171 </div>
172 <span class="help-block">
173 <small>Show navigation menu in this page? </small>
174 </span>
170175 </div>
171176 <label><strong> Content </strong></label>
177 <span class="help-block">
178 <small>content of this page</small>
179 </span>
172180 <div id="content" class="content well">
173181 <%= content %>
174182 <p></p>