From 736b63f61def0225c71d739ab9794f22e5671c55 Mon Sep 17 00:00:00 2001
From: busti <mbust@live.de>
Date: Thu, 14 Nov 2019 02:22:20 +0100
Subject: [PATCH] mock overall layout

---
 package-lock.json |  26 ++++++++
 package.json      |   3 +
 src/App.vue       | 155 +++++++++++++++++++++++++++++++++++++++++++---
 src/main.js       |  10 +++
 4 files changed, 186 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 47aa10f..86d199f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -925,6 +925,32 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.25",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.25.tgz",
+      "integrity": "sha512-3RuZPDuuPELd7RXtUqTCfed14fcny9UiPOkdr2i+cYxBoTOfQgxcDoq77fHiiHcgWuo1LoBUpvGxFF1H/y7s3Q=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.25",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.25.tgz",
+      "integrity": "sha512-MotKnn53JKqbkLQiwcZSBJVYtTgIKFbh7B8+kd05TSnfKYPFmjKKI59o2fpz5t0Hzl35vVGU6+N4twoOpZUrqA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.25"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.11.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz",
+      "integrity": "sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.25"
+      }
+    },
+    "@fortawesome/vue-fontawesome": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.8.tgz",
+      "integrity": "sha512-SdFiUD+vFDA/xKuEbnQTVrK8FDxoV0eyQaiHxmCcjAc0+vQe0Kf6oGm28opNPIt8MTgKWR3+Yg3xXP455Ae4tQ=="
+    },
     "@hapi/address": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.2.tgz",
diff --git a/package.json b/package.json
index b275487..51ad248 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.25",
+    "@fortawesome/free-solid-svg-icons": "^5.11.2",
+    "@fortawesome/vue-fontawesome": "^0.1.8",
     "bootstrap": "^4.3.1",
     "core-js": "^3.3.2",
     "jquery": "^3.4.1",
diff --git a/src/App.vue b/src/App.vue
index 6adedaa..5d2737d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,161 @@
 <template>
     <div id="app">
-        <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
-            <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Workingtitle</a>
-            <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
-            <ul class="navbar-nav px-3">
-                <li class="nav-item text-nowrap">
-                    <a class="nav-link" href="#">Sign out</a>
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
+            <div class="dropdown">
+                <button class="btn text-light dropdown-toggle" type="button" id="dropdownMenuButton"
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    36c3
+                </button>
+                <div class="dropdown-menu bg-dark" aria-labelledby="dropdownMenuButton">
+                    <a class="dropdown-item text-light" href="#">Action</a>
+                    <a class="dropdown-item text-light" href="#">Another action</a>
+                    <a class="dropdown-item text-light" href="#">Something else here</a>
+                </div>
+            </div>
+
+            <!--<ul class="navbar-nav mr-auto">
+                <li class="nav-item active">
+                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                 </li>
-            </ul>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Link</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+                </li>
+                <li class="nav-item">
+                    <form class="form-inline my-2 my-lg-0">
+                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+                    </form>
+                </li>
+            </ul>-->
+
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav">
+                    <li class="nav-item active">
+                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">Link</a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
+                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Dropdown
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <a class="dropdown-item" href="#">Action</a>
+                            <a class="dropdown-item" href="#">Another action</a>
+                            <div class="dropdown-divider"></div>
+                            <a class="dropdown-item" href="#">Something else here</a>
+                        </div>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+                    </li>
+                </ul>
+            </div>
+
+            <input class="form-control mr-sm-1" type="search" placeholder="Search" aria-label="Search">
+
         </nav>
+
+        <div class="input-group mt-2 mx-2">
+            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
+            <div class="input-group-append" id="button-addon4">
+                <button class="btn btn-outline-secondary" type="button">Button</button>
+                <button class="btn btn-outline-secondary" type="button">Button</button>
+            </div>
+        </div>
+
+        <div class="container mt-2">
+            <table class="table table-striped table-dark">
+                <thead>
+                <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">First</th>
+                    <th scope="col">Last</th>
+                    <th scope="col">Handle</th>
+                    <th scope="col">Buttons</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <th scope="row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>@mdo</td>
+                    <td>
+                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                            <button class="btn btn-success active">
+                                <font-awesome-icon icon="check-circle"/>
+                            </button>
+                            <button class="btn btn-secondary active">
+                                <font-awesome-icon icon="edit"/>
+                            </button>
+                            <button class="btn btn-danger active">
+                                <font-awesome-icon icon="trash"/>
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <th scope="row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>@fat</td>
+                    <td>
+                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                            <button class="btn btn-success active">
+                                <font-awesome-icon icon="check-circle"/>
+                            </button>
+                            <button class="btn btn-secondary active">
+                                <font-awesome-icon icon="edit"/>
+                            </button>
+                            <button class="btn btn-danger active">
+                                <font-awesome-icon icon="trash"/>
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <th scope="row">3</th>
+                    <td>Larry</td>
+                    <td>the Bird</td>
+                    <td>@twitter</td>
+                    <td>
+                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
+                            <button class="btn btn-success active">
+                                <font-awesome-icon icon="check-circle"/>
+                            </button>
+                            <button class="btn btn-secondary active">
+                                <font-awesome-icon icon="edit"/>
+                            </button>
+                            <button class="btn btn-danger active">
+                                <font-awesome-icon icon="trash"/>
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
 </template>
 
 <script>
 export default {
-  name: 'app'
+  name: 'app',
 };
 </script>
 
 <style>
+    body, html, #app {
+        background: #222;
+    }
 </style>
diff --git a/src/main.js b/src/main.js
index c3e9d6f..4a6d239 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,10 +2,20 @@ import Vue from 'vue';
 import App from './App.vue';
 import store from './store';
 
+// bootstrap
 import 'jquery/dist/jquery.min.js';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.min.js';
 
+// fontawesome
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlus, faCheckCircle, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+library.add(faPlus, faCheckCircle, faEdit, faTrash);
+
+Vue.component('font-awesome-icon', FontAwesomeIcon);
+
 new Vue({
   el: '#app',
   store,