remove bootstrap + fontawesome

NetFrameworkTemplates · Jan 28, 2018 · 0580a28 · 0580a28
1 parent a9bb1f4
commit 0580a28
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 29 deletions.
diff --git a/MyApp/npm-shrinkwrap.json b/MyApp/npm-shrinkwrap.json
diff --git a/MyApp/package.json b/MyApp/package.json
@@ -21,9 +21,7 @@
   },
   "dependencies": {
     "@servicestack/client": "^1.0.0",
-    "bootstrap": "^4.0.0-beta.2",
     "es6-shim": "^0.35.3",
-    "font-awesome": "^4.7.0",
     "vue": "^2.5.2",
     "vue-property-decorator": "^6.0.0",
     "vue-router": "^3.0.1",

diff --git a/MyApp/src/App.vue b/MyApp/src/App.vue
@@ -9,9 +9,11 @@
     >
       <v-list>
         <v-list-tile 
-          value="true"
-          v-for="(item, i) in items"
+          router
+          :to="item.to"
           :key="i"
+          v-for="(item, i) in items"
+          exact
         >
           <v-list-tile-action>
             <v-icon v-html="item.icon"></v-icon>
@@ -33,6 +35,7 @@
       <v-btn icon @click.stop="fixed = !fixed">
         <v-icon>remove</v-icon>
       </v-btn>
+      <v-toolbar-title v-text="title"></v-toolbar-title>
       <v-spacer></v-spacer>
 
       <v-toolbar-items class="hidden-sm-and-down">
@@ -55,10 +58,10 @@
     </v-content>
     <v-footer :fixed="fixed" app style="justify-content:center">
       <div style="text-align:center;margin:10px;">
-        <h5>
-            <img src="./assets/img/logo.svg" height="32" />
+        <div>
+            <img src="./assets/img/logo.svg" height="32" style="vertical-align:middle;margin-right:5px;" />
             <a href="https://servicestack.net/vs-templates/vuetify-spa">Learn about this Vuetify VS.NET template</a>
-        </h5>
+        </div>
         <div>Copyright &copy; 2018</div>        
       </div>
     </v-footer>
@@ -75,10 +78,13 @@ export default class AppComponent extends Vue {
     drawer = true
     fixed = false
     items = [
-      { icon: 'bubble_chart', title: 'Inspire' }
+      { icon: 'home', title: 'Home', to: '/' },
+      { icon: 'bubble_chart', title: 'View 1', to: '/view1' },
+      { icon: 'contacts', title: 'View 1', to: '/view2' }
     ]
     miniVariant = true
     right = true
+    title = "MyApp"
     name = ""
 }
 </script>
diff --git a/MyApp/src/home/Home.spec.ts b/MyApp/src/home/Home.spec.ts
@@ -21,12 +21,12 @@ describe('Home.vue', () => {
         const vm = ctor({ name: 'Vue' });
         expect(vm.name).eq('Vue');
         expect(vm.$el.querySelector('input').type).eq('text');
-        expect(vm.$el.querySelector('h3.result').textContent).eq('');
+        expect(vm.$el.querySelector('h2.result').textContent).eq('');
 
         vm.result = "Bye Vue";
 
         Vue.nextTick(() => {
-            expect(vm.$el.querySelector('h3.result').textContent).eq('Bye Vue');
+            expect(vm.$el.querySelector('h2.result').textContent).eq('Bye Vue');
             done();
         });
     })

diff --git a/MyApp/src/home/Home.vue b/MyApp/src/home/Home.vue
@@ -30,7 +30,7 @@
                         ></v-text-field>
                     </v-form>
 
-                    <h3 class="result">{{result}}</h3>
+                    <h2 class="result">{{result}}</h2>
                 </div>                  
             </v-card-title>
             <v-card-actions style="justify-content:center">

diff --git a/MyApp/src/main.ts b/MyApp/src/main.ts
@@ -1,7 +1,5 @@
 /// <reference path="shared.d.ts" />
 
-import 'bootstrap/dist/css/bootstrap.css';
-import "font-awesome/css/font-awesome.css";
 import './app.scss';
 import 'es6-shim';
 import 'vuetify/dist/vuetify.css'

diff --git a/MyApp/src/view1/View1.spec.ts b/MyApp/src/view1/View1.spec.ts
@@ -8,7 +8,7 @@ describe('/view1 View.vue', () => {
 
     it ('should render correct contents', () => {
         const vm = ctor();
-        expect(vm.$el.querySelector('h3').textContent).eq('This is View 1');
+        expect(vm.$el.querySelector('h2').textContent).eq('This is View 1');
     })
 
 })
diff --git a/MyApp/src/view1/View1.vue b/MyApp/src/view1/View1.vue
@@ -4,7 +4,7 @@
             <v-card-media :src="require('../assets/img/desert.jpg')" height="200px"></v-card-media>
             <v-card-title primary-title style="justify-content:center">
                 <div>
-                    <h3>{{message}}</h3>
+                    <h2>{{message}}</h2>
                 </div>                  
             </v-card-title>
             <v-card-actions style="justify-content:center">
@@ -29,7 +29,7 @@ export default class View1Component extends Vue {
 <style lang="scss">
 @import '../app.scss';
 
-#view1 h3 {
+#view1 h2 {
     color: darken($navbar-background, 10%);
     text-shadow: 2px 2px 3px rgba(0,0,0,0.2);
 }

diff --git a/MyApp/src/view2/View2.vue b/MyApp/src/view2/View2.vue
@@ -4,7 +4,7 @@
             <v-card-media :src="require('../assets/img/desert.jpg')" height="200px"></v-card-media>
             <v-card-title primary-title style="justify-content:center">
                 <div>
-                    <h3>{{message}}</h3>
+                    <h2>{{message}}</h2>
                 </div>                  
             </v-card-title>
             <v-card-actions style="justify-content:center">

diff --git a/MyApp/webpack.config.vendor.js b/MyApp/webpack.config.vendor.js
@@ -1,8 +1,7 @@
 "use strict";
 
 const VENDOR = [
-    'bootstrap/dist/css/bootstrap.css',
-    'font-awesome/css/font-awesome.css',
+    'vuetify/dist/vuetify.css',
     'es6-shim',
     '@servicestack/client',
     'vue',