diff --git a/package.json b/package.json
index dac6d67..33a30c4 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
- "bootstrap": "4.4.1",
+ "bootstrap": "^4.4.1",
"bootstrap-vue": "^2.3.0",
"core-js": "^3.4.4",
"vue": "^2.6.10"
@@ -19,7 +19,7 @@
"@vue/cli-plugin-eslint": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
- "bootstrap": "^4.3.1",
+ "bootstrap": "^4.4.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"mutationobserver-shim": "^0.3.3",
diff --git a/src/App.vue b/src/App.vue
index 4993f89..982b55f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,8 +2,8 @@
<div id="app">
<top-nav></top-nav>
<div class="container-fluid">
- <div class="row">
- <left-nav></left-nav>
+ <div class="d-flex">
+ <left-nav class="flox-grow-1"></left-nav>
<main-content></main-content>
</div>
</div>
@@ -11,9 +11,9 @@
</template>
<script>
-import MainContent from './components/MainContent.vue';
-import LeftNav from './components/LeftNav.vue';
-import TopNav from './components/TopNav.vue';
+import MainContent from './components/MainContent';
+import LeftNav from './components/LeftNav';
+import TopNav from './components/TopNav';
export default {
name: 'app',
diff --git a/src/components/LeftNav.vue b/src/components/LeftNav.vue
index 15635b7..942f241 100644
--- a/src/components/LeftNav.vue
+++ b/src/components/LeftNav.vue
@@ -1,6 +1,9 @@
<template >
- <nav class="col-md-2 d-none d-md-block bg-light sidebar">
+ <nav class="bg-light sidebar">
<div class="sidebar-sticky">
+ <ul class="nav flex-column mb-2">
+ <NavItem v-for="link in links" :key="link.id" :title="link.title" :id="link.id" :icon_url="link.icon"/>
+ </ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Slayer Masters</span>
</h6>
@@ -28,13 +31,16 @@ export default {
},
data() {
return {
- masters: master_json.masters,
- extraLinks: [
+ links: [
{
id: 100,
icon: 'hiscores.png',
title: 'Account settings',
},
+ ],
+ masters: master_json.masters,
+ extraLinks: [
+
{
id: 101,
icon: 'osrswiki.png',
diff --git a/src/components/MainContent.vue b/src/components/MainContent.vue
index 300eee1..ce0466d 100644
--- a/src/components/MainContent.vue
+++ b/src/components/MainContent.vue
@@ -1,11 +1,16 @@
<template>
- <main class="col-md-9 ml-sm-auto col-lg-10 px-4">
+ <main role="main" class="ml-sm-auto col-lg-10 px-4">
+ <section-content></section-content>
</main>
</template>
<script>
+import SectionContent from "./TableSection";
export default {
name: 'MainContent',
+ components: {
+ SectionContent,
+ },
props: {
headerText: String
}
@@ -13,5 +18,13 @@ export default {
</script>
<style scoped>
+ [role="main"] {
+ padding-top: 133px; /* Space for fixed navbar */
+ }
+ @media (min-width: 768px) {
+ [role="main"] {
+ padding-top: 48px; /* Space for fixed navbar */
+ }
+ }
</style>
diff --git a/src/components/TableSection.vue b/src/components/TableSection.vue
new file mode 100644
index 0000000..1623508
--- /dev/null
+++ b/src/components/TableSection.vue
@@ -0,0 +1,62 @@
+<template>
+ <section>
+ <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 my-2">
+ <h1 class="h3 text-uppercase">Dashboard</h1>
+ <div class="btn-toolbar mb-2 mb-md-0">
+ <div class="btn-group mr-2">
+ <button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
+ <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
+ </div>
+ <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
+ This week
+ </button>
+ </div>
+ </div>
+ <div class="table-responsive">
+ <b-table striped hover :items="filtered_items"></b-table>
+ </div>
+ </section>
+</template>
+
+<script>
+
+export default {
+ name: "TableSection",
+ props: {
+ tableData: Object,
+ },
+ data() {
+ return {
+ total_weight: 100,
+ items: [
+ { age_requirement: 40, first_name: 'Dickerson', last_name: 'Macdonald', combat_requirement: 10 },
+ { age_requirement: 21, first_name: 'Larsen', last_name: 'Shaw', combat_requirement: 0 },
+ { age_requirement: 89, first_name: 'Geneva', last_name: 'Wilson', combat_requirement: 50 },
+ { age_requirement: 38, first_name: 'Jami', last_name: 'Carney', combat_requirement: 0 }
+ ],
+ filters: {
+ age: 35,
+ combat_level: 49,
+ },
+ filtered_items: [],
+ }
+ },
+ methods: {
+ filterData() {
+ // this.filtered_items = this.items.filter(item => item.last_name.includes('Carney'));
+
+ this.filtered_items = this.items.filter(item => item.combat_requirement < this.filters.combat_level);
+ console.log(this.filtered_items)
+ },
+ },
+ mounted() {
+ this.filterData();
+ },
+
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/TopNav.vue b/src/components/TopNav.vue
index 57ae921..525edce 100644
--- a/src/components/TopNav.vue
+++ b/src/components/TopNav.vue
@@ -1,5 +1,5 @@
<template>
- <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow " role="navigation" aria-label="main navigation">
+ <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow " role="navigation" aria-label="main navigation">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Slayer Weight Calculator</a>
<small class="text-white-50 font-italic">A calculator for slayer geeks that need to know percentages.</small>