demo: use adminlte style layout

zhangchunlin · zhangchunlin · commit 962a59fcbd86 · 2019-06-20T17:36:00.000+08:00
diff --git a/demo/apps/apijson_demo/static/layout.css b/demo/apps/apijson_demo/static/layout.css
@@ -0,0 +1,5 @@
+/* override uliweb_layout/layout/static/layout.css */
+.main-footer {background-color: #3c8dbc; color: #e0e0e0;margin-left:0}
+#layout-body .content-wrapper {border-left:none}
+#layout-body.full .main-header .container { width: 100%; }
+#layout-body.full .content-wrapper > .container { width: 100%; padding: 0; }
diff --git a/demo/apps/apijson_demo/templates/index.html b/demo/apps/apijson_demo/templates/index.html
@@ -1,10 +1,13 @@
 {{extend "layout_demo.html"}}
 
+{{block content_header_title}}<h1>uliweb-apijson api examples</h1>{{end content_header_title}}
+
 {{block content_main}}
 {{use "ui.vue"}}
 {{use "ui.iview"}}
 
-<div id="app">
+<div id="app" class='box'>
+<div class="box-body">
     <tabs v-model:value="tab_current" type="card" :animated="false">
         <tab-pane label="apijson get" name="tab_get"></tab-pane>
         <tab-pane label="apijson head" name="tab_head"></tab-pane>
@@ -96,6 +99,7 @@
         <i-col span="8"><i-input v-model="response_data" type="textarea" readonly :autosize="{minRows: 5,maxRows: 30}" /></i-col>
     </Row>
 </div>
+</div>
 <script>
 var vm = new Vue({
     el: '#app',
diff --git a/demo/apps/tables/templates/Tables/list.html b/demo/apps/tables/templates/Tables/list.html
@@ -1,19 +1,23 @@
 {{extend "Tables/layout.html"}}
 
+{{block content_header_title}}<h1>apijson-table examples</h1>{{end content_header_title}}
+
 {{block content_main}}
 {{use "ui.vue"}}
 {{use "ui.iview"}}
 {{include "vue/inc_apijson_table.html"}}
 {{if role!="ADMIN":}}
 <div class="alert alert-warning" role="alert">You should <a class="btn btn-primary btn-sm" href="{{=url_for('uliweb_apps.login.views.login')}}" role="button">login</a> with user <strong>admin</strong> to view all the tables</div>
 {{pass #if}}
-<div id="app">
+<div id="app" class='box'>
+<div class="box-body">
     <tabs v-model:value="tab_current" type="card">
         <tab-pane v-for="item in tabs" :key="item" :label="item" :name="item">
             <apijson-table :model_name="item" :config="apijson_tables[item]"></apijson-table>
         </tab-pane>
     </tabs>
 </div>
+</div>
 
 <script>
 var vm = new Vue({
