From 838c598f87a50f2b25bf8e068d5769507047e539 Mon Sep 17 00:00:00 2001
From: long2ice <long2ice@prismslight.com>
Date: Mon, 27 Apr 2020 00:16:44 +0800
Subject: [PATCH] fix css

---
 front/src/App.vue               | 106 +++++++++++++++-----------------
 front/src/components/Footer.vue |  31 ++++------
 front/src/views/CustomTable.vue |   3 -
 front/src/views/Layout.vue      |  13 ++--
 4 files changed, 68 insertions(+), 85 deletions(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index 64f9ce2..d93b53f 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -1,72 +1,68 @@
 <template>
   <div id="app">
     <router-view></router-view>
-    <vue-snotify/>
-    <iframe :src="$store.state.downloadUrl" style="width:0;height:0;border:none;"></iframe>
+    <vue-snotify></vue-snotify>
     <div v-html="$store.state.site.html"></div>
   </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
-import { types } from "./store";
+  import {mapState} from "vuex";
+  import {types} from "./store";
 
-export default {
-  name: "app",
-  components: {},
-  data() {
-    return {
-      frameSrc: "",
-      path: []
-    };
-  },
-  watch: {
-    "site.name"(name) {
-      window.document.title = name || "FASTAPI-ADMIN DASHBOARD";
+  export default {
+    name: "app",
+    components: {},
+    data() {
+      return {
+        frameSrc: "",
+        path: []
+      };
     },
-    "site.skin"(name) {
-      const tag = document.getElementById("css-skin");
-      tag.setAttribute(
-        "href",
-        `https://cdn.bootcss.com/bootswatch/4.1.1/${name}/bootstrap.min.css`
-      );
+    watch: {
+      "site.name"(name) {
+        window.document.title = name || "FASTAPI-ADMIN DASHBOARD";
+      },
+      "site.skin"(name) {
+        const tag = document.getElementById("css-skin");
+        tag.setAttribute(
+          "href",
+          `https://cdn.bootcss.com/bootswatch/4.1.1/${name}/bootstrap.min.css`
+        );
+      },
+      "site.css"(files) {
+        files.map(item => {
+          const tag = document.createElement("link");
+          tag.setAttribute("href", item);
+          tag.setAttribute("rel", "stylesheet");
+          document.head.appendChild(tag);
+        });
+      },
+      "site.js"(files) {
+        files.map(item => {
+          const tag = document.createElement("script");
+          tag.setAttribute("src", item);
+          document.body.appendChild(tag);
+        });
+      },
+      "$route.path"() {
+        this.$store.dispatch(types.FETCH_PAGE_HEADER);
+      }
     },
-    "site.css"(files) {
-      files.map(item => {
-        const tag = document.createElement("link");
-        tag.setAttribute("href", item);
-        tag.setAttribute("rel", "stylesheet");
-        document.head.appendChild(tag);
-      });
+    computed: {
+      ...mapState(["site"])
     },
-    "site.js"(files) {
-      files.map(item => {
-        const tag = document.createElement("script");
-        tag.setAttribute("src", item);
-        document.body.appendChild(tag);
-      });
-    },
-    "$route.path"() {
-      this.$store.dispatch(types.FETCH_PAGE_HEADER);
+    created() {
+      this.$store.dispatch(types.FETCH_SITE);
     }
-  },
-  computed: {
-    ...mapState(["site"])
-  },
-  created() {
-    this.$store.dispatch(types.FETCH_SITE);
-  }
-};
+  };
 </script>
 
 <style>
-body {
-  /* background: darkgrey !important; */
-}
-#app {
-  /* background:#fff; */
-  /* width:1200px; */
-  /* margin:0 auto; */
-  /* box-shadow:0 0 30px #333; */
-}
+  body {
+    /* background: darkgrey !important; */
+  }
+
+  #app {
+  }
 </style>
diff --git a/front/src/components/Footer.vue b/front/src/components/Footer.vue
index 37261a8..d029f3c 100644
--- a/front/src/components/Footer.vue
+++ b/front/src/components/Footer.vue
@@ -4,32 +4,25 @@
     <footer v-else>
       <span class="ml-auto">
         GitHub
-        <a href="https://github.com/long2ice/fastapi-admin">FASTAPI-ADMIN</a>
+        <a href="https://github.com/long2ice/fastapi-admin">FASTAPI-ADMIN</a> - FastAPI Admin Dashboard
       </span>
     </footer>
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
-export default {
-  computed: {
-    ...mapState(["site"])
-  }
-};
+  import {mapState} from "vuex";
+
+  export default {
+    computed: {
+      ...mapState(["site"])
+    }
+  };
 </script>
 <style lang="scss">
-.app-footer {
-  bottom: 0;
-  right: 0;
-  margin-top: 10px;
-  width: 100%;
-  z-index: 9;
-  letter-spacing: 1px;
-
-  & > footer {
-    // margin-left: 215px;
-    padding: 0.5em;
+  .app-footer {
+    width: 100%;
+    margin-top: 1vh;
+    letter-spacing: 1px;
     text-align: center;
   }
-}
 </style>
diff --git a/front/src/views/CustomTable.vue b/front/src/views/CustomTable.vue
index 112a6f3..8d20e87 100644
--- a/front/src/views/CustomTable.vue
+++ b/front/src/views/CustomTable.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="custom-table">
     <div class="row">
-      <div class="col col-md-8 d-none">
-        <!-- <legend v-html="table.title || header"></legend> -->
-      </div>
       <div class="col col-md-12">
         <b-btn
           class="mr-2"
diff --git a/front/src/views/Layout.vue b/front/src/views/Layout.vue
index 912479f..a800393 100644
--- a/front/src/views/Layout.vue
+++ b/front/src/views/Layout.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <b-row>
-      <b-col class="h-scroll" :cols="6" md="3" lg="2" xl="2"
+      <b-col :cols="6" md="3" lg="2" xl="2"
              :class="{[`fold-${foldLevel}`]: true}">
         <b-sidebar :collapsed="collapsed"></b-sidebar>
       </b-col>
-      <b-col class="h-scroll" style="overflow-x: auto;">
+      <b-col style="overflow-x: auto;">
         <main class="pt-3">
           <b-loading
             :active="$store.state.loading && $store.state.site.enable_loading"
@@ -32,10 +32,12 @@
               </div>
             </div>
           </div>
-          <b-footer/>
         </main>
       </b-col>
     </b-row>
+    <b-row>
+      <b-footer/>
+    </b-row>
   </div>
 </template>
 
@@ -105,9 +107,4 @@
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
-
-  /* main.main {
-    margin-left: 200px;
-    padding-bottom: 2em;
-  } */
 </style>