diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 38d9388..43892fc 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -12,6 +12,7 @@
"@fortawesome/fontawesome-svg-core": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/vue-fontawesome": "^3.0.8",
+ "mitt": "^3.0.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"vuedraggable": "^4.1.0"
@@ -1275,6 +1276,12 @@
"@jridgewell/sourcemap-codec": "^1.5.0"
}
},
+ "node_modules/mitt": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+ "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+ "license": "MIT"
+ },
"node_modules/nanoid": {
"version": "3.3.11",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 391158d..6641b9b 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -13,6 +13,7 @@
"@fortawesome/fontawesome-svg-core": "^6.7.2",
"@fortawesome/free-solid-svg-icons": "^6.7.2",
"@fortawesome/vue-fontawesome": "^3.0.8",
+ "mitt": "^3.0.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"vuedraggable": "^4.1.0"
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index a7b9d2b..3368ae1 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -8,13 +8,60 @@
Bug Report
+
+
+
+
+
+
diff --git a/webapp/src/assets/css/style.css b/webapp/src/assets/css/style.css
index 9b8468f..7a21471 100644
--- a/webapp/src/assets/css/style.css
+++ b/webapp/src/assets/css/style.css
@@ -131,30 +131,76 @@ button:focus-visible,
flex-direction: row;
align-items: center;
}
+#header .short-bug {
+ display: flex;
+ flex-direction: row;
+ flex-grow: 2;
+ /* border: 1px red solid; */
+ padding: 0px 20px;
+ align-items: center;
+ justify-content: center
+}
+#header .short-bug input {
+ width: 80%;
+ padding: 5px;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ background-color: var(--color-bg2);
+ color: var(--color-text0);
+}
#header .menu {
display: flex;
flex-direction: row;
}
#header .menu a,
-#header .menu a:visited {
+#header .menu a:visited,
+#header button {
border: 1px solid var(--color-text0);
padding: 5px 10px;
border-radius: 5px;
margin-left: 20px;
transition: all 0.3s;
}
-#header .menu a:hover {
+#header .menu a:hover,
+#header button:hover {
color: var(--color-text1);
background-color: var(--color-bg1);
}
+#header .short-bug button {
+ margin: 0px;
+
+ /* height: 30px; */
+}
#header h1 {
display: inline-block;
}
+@media (max-width: 1400px) {
+ #header {
+ flex-wrap: wrap;
+ }
+ #header .short-bug {
+ width: 50%;
+ padding: 0px;
+ align-items: end;
+ justify-content: flex-end;
+ }
+ #header .menu {
+ width: 100%;
+ align-items: end;
+ justify-content: flex-end;
+ padding-top: 20px;
+ }
+}
@media (max-width: 900px) {
#header {
flex-direction: column;
align-items: center;
}
+ #header .short-bug {
+ width: 100%;
+ align-items: center;
+ justify-content: center
+ }
#header .menu {
flex-wrap: wrap;
justify-content: center;
@@ -163,6 +209,11 @@ button:focus-visible,
margin: 5px;
}
}
+@media (max-width: 600px) {
+ #header .short-bug {
+ flex-direction: column;
+ }
+}
/* ----------------------------------------------------
03 - DASHBOARD
diff --git a/webapp/src/events.js b/webapp/src/events.js
new file mode 100644
index 0000000..2b60227
--- /dev/null
+++ b/webapp/src/events.js
@@ -0,0 +1,5 @@
+import mitt from "mitt";
+
+const events = mitt();
+
+export default events;
diff --git a/webapp/src/views/Dashboard.vue b/webapp/src/views/Dashboard.vue
index b88579f..e3b64f0 100644
--- a/webapp/src/views/Dashboard.vue
+++ b/webapp/src/views/Dashboard.vue
@@ -141,6 +141,7 @@ import ReportBox from "../components/ReportBox.vue";
import draggable from "vuedraggable";
import { backend } from "../backend";
import FullScreenLoader from "../components/FullScreenLoader.vue";
+import events from "../events";
export default {
components: {
@@ -231,6 +232,13 @@ export default {
},
mounted() {
this.loadData();
+ events.on("reports-changed", () => {
+ console.log("Dashoboard reports-changed");
+ this.loadData(false);
+ });
},
+ unmounted() {
+ events.off("reports-changed");
+ }
};