Commit cf8c4d76 authored by Kent Nielsen's avatar Kent Nielsen
Browse files

Merge branch 'feature/grid-components' into 'develop'

Feature/grid components

See merge request !2
parents 7e407ab0 b9f2cd03
Pipeline #48482 passed with stages
in 1 minute and 59 seconds
......@@ -9,7 +9,8 @@
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
"vue-router": "^4.0.0-0",
"vue-svg-inline-plugin": "^2.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
......@@ -1504,9 +1505,9 @@
"dev": true
},
"node_modules/@types/node": {
"version": "14.14.35",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.35.tgz",
"integrity": "sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag==",
"version": "14.14.36",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.36.tgz",
"integrity": "sha512-kjivUwDJfIjngzbhooRnOLhGYz6oRFi+L+EpMjxroDYXwDw9lHrJJ43E+dJ6KAd3V3WxWAJ/qZE9XKYHhjPOFQ==",
"dev": true
},
"node_modules/@types/normalize-package-data": {
......@@ -1550,9 +1551,9 @@
"dev": true
},
"node_modules/@types/tapable": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz",
"integrity": "sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==",
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.7.tgz",
"integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==",
"dev": true
},
"node_modules/@types/uglify-js": {
......@@ -1574,29 +1575,29 @@
}
},
"node_modules/@types/webpack": {
"version": "4.41.26",
"resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz",
"integrity": "sha512-7ZyTfxjCRwexh+EJFwRUM+CDB2XvgHl4vfuqf1ZKrgGvcS5BrNvPQqJh3tsZ0P6h6Aa1qClVHaJZszLPzpqHeA==",
"version": "4.41.27",
"resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.27.tgz",
"integrity": "sha512-wK/oi5gcHi72VMTbOaQ70VcDxSQ1uX8S2tukBK9ARuGXrYM/+u4ou73roc7trXDNmCxCoerE8zruQqX/wuHszA==",
"dev": true,
"dependencies": {
"@types/anymatch": "*",
"@types/node": "*",
"@types/tapable": "*",
"@types/tapable": "^1",
"@types/uglify-js": "*",
"@types/webpack-sources": "*",
"source-map": "^0.6.0"
}
},
"node_modules/@types/webpack-dev-server": {
"version": "3.11.2",
"resolved": "https://registry.npmjs.org/@types/webpack-dev-server/-/webpack-dev-server-3.11.2.tgz",
"integrity": "sha512-13w1VhaghN+G1rYjkBPgN/GFRoHd9uI2fwK9cSKvLutdmZ22L9iicFEvt69by40DP2I6uNcClaGTyPY6nYhIgQ==",
"version": "3.11.3",
"resolved": "https://registry.npmjs.org/@types/webpack-dev-server/-/webpack-dev-server-3.11.3.tgz",
"integrity": "sha512-p9B/QClflreKDeamKhBwuo5zqtI++wwb9QNG/CdIZUFtHvtaq0dWVgbtV7iMl4Sr4vWzEFj0rn16pgUFANjLPA==",
"dev": true,
"dependencies": {
"@types/connect-history-api-fallback": "*",
"@types/express": "*",
"@types/serve-static": "*",
"@types/webpack": "*",
"@types/webpack": "^4",
"http-proxy-middleware": "^1.0.0"
}
},
......@@ -5565,9 +5566,9 @@
}
},
"node_modules/electron-to-chromium": {
"version": "1.3.699",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.699.tgz",
"integrity": "sha512-fjt43CPXdPYwD9ybmKbNeLwZBmCVdLY2J5fGZub7/eMPuiqQznOGNXv/wurnpXIlE7ScHnvG9Zi+H4/i6uMKmw==",
"version": "1.3.700",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.700.tgz",
"integrity": "sha512-wQtaxVZzpOeCjW1CGuC5W3bYjE2jglvk076LcTautBOB9UtHztty7wNzjVsndiMcSsdUsdMy5w76w5J1U7OPTQ==",
"dev": true
},
"node_modules/elliptic": {
......@@ -7959,6 +7960,11 @@
"node": ">=6"
}
},
"node_modules/intersection-observer": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.0.tgz",
"integrity": "sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ=="
},
"node_modules/ip": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
......@@ -12337,9 +12343,9 @@
}
},
"node_modules/sockjs-client": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.0.tgz",
"integrity": "sha512-8Dt3BDi4FYNrCFGTL/HtwVzkARrENdwOUf1ZoW/9p3M8lZdFT35jVdrHza+qgxuG9H3/shR4cuX/X9umUrjP8Q==",
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.1.tgz",
"integrity": "sha512-VnVAb663fosipI/m6pqRXakEOw7nvd7TUgdr3PlR/8V2I95QIdwT8L4nMxhyU8SmDBHYXU1TOElaKOmKLfYzeQ==",
"dev": true,
"dependencies": {
"debug": "^3.2.6",
......@@ -12347,7 +12353,7 @@
"faye-websocket": "^0.11.3",
"inherits": "^2.0.4",
"json3": "^3.3.3",
"url-parse": "^1.4.7"
"url-parse": "^1.5.1"
}
},
"node_modules/sockjs-client/node_modules/debug": {
......@@ -13389,15 +13395,18 @@
}
},
"node_modules/unbox-primitive": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.0.tgz",
"integrity": "sha512-P/51NX+JXyxK/aigg1/ZgyccdAxm5K1+n8+tvqSntjOivPt19gvm1VC49RWYetsiub8WViUchdxl/KWHHB0kzA==",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
"integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
"dev": true,
"dependencies": {
"function-bind": "^1.1.1",
"has-bigints": "^1.0.0",
"has-symbols": "^1.0.0",
"which-boxed-primitive": "^1.0.1"
"has-bigints": "^1.0.1",
"has-symbols": "^1.0.2",
"which-boxed-primitive": "^1.0.2"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/unicode-canonical-property-names-ecmascript": {
......@@ -13964,6 +13973,16 @@
"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
"dev": true
},
"node_modules/vue-svg-inline-plugin": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/vue-svg-inline-plugin/-/vue-svg-inline-plugin-2.2.0.tgz",
"integrity": "sha512-IgSs4csRkcxB1JqIpUgkXRjW4n7V1rZvC3AR1upnO/MPmC1GlnQ8DDsCV5S1r770PeLvppd2RhluLci/rUDjRw==",
"dependencies": {
"core-js": "^3.8.3",
"intersection-observer": "^0.12.0",
"whatwg-fetch": "^3.5.0"
}
},
"node_modules/vue-template-es2015-compiler": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
......@@ -14885,6 +14904,11 @@
"node": ">=0.8.0"
}
},
"node_modules/whatwg-fetch": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
"integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
},
"node_modules/which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
......@@ -16538,9 +16562,9 @@
"dev": true
},
"@types/node": {
"version": "14.14.35",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.35.tgz",
"integrity": "sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag==",
"version": "14.14.36",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.36.tgz",
"integrity": "sha512-kjivUwDJfIjngzbhooRnOLhGYz6oRFi+L+EpMjxroDYXwDw9lHrJJ43E+dJ6KAd3V3WxWAJ/qZE9XKYHhjPOFQ==",
"dev": true
},
"@types/normalize-package-data": {
......@@ -16584,9 +16608,9 @@
"dev": true
},
"@types/tapable": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz",
"integrity": "sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==",
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.7.tgz",
"integrity": "sha512-0VBprVqfgFD7Ehb2vd8Lh9TG3jP98gvr8rgehQqzztZNI7o8zS8Ad4jyZneKELphpuE212D8J70LnSNQSyO6bQ==",
"dev": true
},
"@types/uglify-js": {
......@@ -16607,14 +16631,14 @@
}
},
"@types/webpack": {
"version": "4.41.26",
"resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz",
"integrity": "sha512-7ZyTfxjCRwexh+EJFwRUM+CDB2XvgHl4vfuqf1ZKrgGvcS5BrNvPQqJh3tsZ0P6h6Aa1qClVHaJZszLPzpqHeA==",
"version": "4.41.27",
"resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.27.tgz",
"integrity": "sha512-wK/oi5gcHi72VMTbOaQ70VcDxSQ1uX8S2tukBK9ARuGXrYM/+u4ou73roc7trXDNmCxCoerE8zruQqX/wuHszA==",
"dev": true,
"requires": {
"@types/anymatch": "*",
"@types/node": "*",
"@types/tapable": "*",
"@types/tapable": "^1",
"@types/uglify-js": "*",
"@types/webpack-sources": "*",
"source-map": "^0.6.0"
......@@ -16629,15 +16653,15 @@
}
},
"@types/webpack-dev-server": {
"version": "3.11.2",
"resolved": "https://registry.npmjs.org/@types/webpack-dev-server/-/webpack-dev-server-3.11.2.tgz",
"integrity": "sha512-13w1VhaghN+G1rYjkBPgN/GFRoHd9uI2fwK9cSKvLutdmZ22L9iicFEvt69by40DP2I6uNcClaGTyPY6nYhIgQ==",
"version": "3.11.3",
"resolved": "https://registry.npmjs.org/@types/webpack-dev-server/-/webpack-dev-server-3.11.3.tgz",
"integrity": "sha512-p9B/QClflreKDeamKhBwuo5zqtI++wwb9QNG/CdIZUFtHvtaq0dWVgbtV7iMl4Sr4vWzEFj0rn16pgUFANjLPA==",
"dev": true,
"requires": {
"@types/connect-history-api-fallback": "*",
"@types/express": "*",
"@types/serve-static": "*",
"@types/webpack": "*",
"@types/webpack": "^4",
"http-proxy-middleware": "^1.0.0"
}
},
......@@ -19862,9 +19886,9 @@
"dev": true
},
"electron-to-chromium": {
"version": "1.3.699",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.699.tgz",
"integrity": "sha512-fjt43CPXdPYwD9ybmKbNeLwZBmCVdLY2J5fGZub7/eMPuiqQznOGNXv/wurnpXIlE7ScHnvG9Zi+H4/i6uMKmw==",
"version": "1.3.700",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.700.tgz",
"integrity": "sha512-wQtaxVZzpOeCjW1CGuC5W3bYjE2jglvk076LcTautBOB9UtHztty7wNzjVsndiMcSsdUsdMy5w76w5J1U7OPTQ==",
"dev": true
},
"elliptic": {
......@@ -21754,6 +21778,11 @@
}
}
},
"intersection-observer": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.0.tgz",
"integrity": "sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ=="
},
"ip": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
......@@ -25326,9 +25355,9 @@
}
},
"sockjs-client": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.0.tgz",
"integrity": "sha512-8Dt3BDi4FYNrCFGTL/HtwVzkARrENdwOUf1ZoW/9p3M8lZdFT35jVdrHza+qgxuG9H3/shR4cuX/X9umUrjP8Q==",
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.1.tgz",
"integrity": "sha512-VnVAb663fosipI/m6pqRXakEOw7nvd7TUgdr3PlR/8V2I95QIdwT8L4nMxhyU8SmDBHYXU1TOElaKOmKLfYzeQ==",
"dev": true,
"requires": {
"debug": "^3.2.6",
......@@ -25336,7 +25365,7 @@
"faye-websocket": "^0.11.3",
"inherits": "^2.0.4",
"json3": "^3.3.3",
"url-parse": "^1.4.7"
"url-parse": "^1.5.1"
},
"dependencies": {
"debug": {
......@@ -26197,15 +26226,15 @@
}
},
"unbox-primitive": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.0.tgz",
"integrity": "sha512-P/51NX+JXyxK/aigg1/ZgyccdAxm5K1+n8+tvqSntjOivPt19gvm1VC49RWYetsiub8WViUchdxl/KWHHB0kzA==",
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
"integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
"dev": true,
"requires": {
"function-bind": "^1.1.1",
"has-bigints": "^1.0.0",
"has-symbols": "^1.0.0",
"which-boxed-primitive": "^1.0.1"
"has-bigints": "^1.0.1",
"has-symbols": "^1.0.2",
"which-boxed-primitive": "^1.0.2"
}
},
"unicode-canonical-property-names-ecmascript": {
......@@ -26668,6 +26697,16 @@
}
}
},
"vue-svg-inline-plugin": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/vue-svg-inline-plugin/-/vue-svg-inline-plugin-2.2.0.tgz",
"integrity": "sha512-IgSs4csRkcxB1JqIpUgkXRjW4n7V1rZvC3AR1upnO/MPmC1GlnQ8DDsCV5S1r770PeLvppd2RhluLci/rUDjRw==",
"requires": {
"core-js": "^3.8.3",
"intersection-observer": "^0.12.0",
"whatwg-fetch": "^3.5.0"
}
},
"vue-template-es2015-compiler": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
......@@ -27397,6 +27436,11 @@
"integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
"dev": true
},
"whatwg-fetch": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz",
"integrity": "sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA=="
},
"which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
......@@ -10,7 +10,8 @@
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
"vue-router": "^4.0.0-0",
"vue-svg-inline-plugin": "^2.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
......
......@@ -22,15 +22,31 @@
<style lang="scss">
body, html {
height: 100%;
margin: 0;
}
#app {
body {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
color: $text-color;
background-color: $bg-color;
}
div {
box-sizing: border-box;
}
a {
color: $text-color;
&:hover, &:focus {
color: #42b983
}
}
#app {
height: 100%;
}
......
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 119.72" style="enable-background:new 0 0 122.88 119.72" xml:space="preserve"><g><path d="M22.72,0h77.45c6.25,0,11.93,2.56,16.05,6.67c4.11,4.11,6.67,9.79,6.67,16.05v74.29c0,6.25-2.56,11.93-6.67,16.05 l-0.32,0.29c-4.09,3.94-9.64,6.38-15.73,6.38H22.72c-6.25,0-11.93-2.56-16.05-6.67l-0.3-0.32C2.43,108.64,0,103.09,0,97.01V22.71 c0-6.25,2.55-11.93,6.67-16.05C10.78,2.55,16.46,0,22.72,0L22.72,0z M55.47,38.34c0-3.3,2.67-5.97,5.97-5.97 c3.3,0,5.97,2.67,5.97,5.97v15.55h15.55c3.3,0,5.97,2.67,5.97,5.97c0,3.3-2.67,5.97-5.97,5.97H67.41v15.55 c0,3.3-2.67,5.97-5.97,5.97c-3.3,0-5.97-2.67-5.97-5.97V65.83H39.91c-3.3,0-5.97-2.67-5.97-5.97c0-3.3,2.67-5.97,5.97-5.97h15.55 V38.34L55.47,38.34z M100.16,10.24H22.72c-3.43,0-6.54,1.41-8.81,3.67c-2.26,2.26-3.67,5.38-3.67,8.81v74.29 c0,3.33,1.31,6.35,3.43,8.59l0.24,0.22c2.26,2.26,5.38,3.67,8.81,3.67h77.45c3.32,0,6.35-1.31,8.59-3.44l0.21-0.23 c2.26-2.26,3.67-5.38,3.67-8.81V22.71c0-3.42-1.41-6.54-3.67-8.81C106.71,11.65,103.59,10.24,100.16,10.24L100.16,10.24z"/></g></svg>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 122.879" enable-background="new 0 0 122.88 122.879" xml:space="preserve"><g><path d="M61.44,0c16.96,0,32.328,6.882,43.453,17.986c11.104,11.125,17.986,26.494,17.986,43.453 c0,16.961-6.883,32.328-17.986,43.453C93.769,115.998,78.4,122.879,61.44,122.879c-16.96,0-32.329-6.881-43.454-17.986 C6.882,93.768,0,78.4,0,61.439C0,44.48,6.882,29.111,17.986,17.986C29.112,6.882,44.48,0,61.44,0L61.44,0z M73.452,39.152 c2.75-2.792,7.221-2.805,9.986-0.026c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.077,12.25 c2.728,2.77,2.689,7.256-0.081,10.021c-2.772,2.766-7.229,2.758-9.954-0.012L61.445,71.541L49.428,83.729 c-2.75,2.793-7.22,2.805-9.985,0.025c-2.763-2.775-2.776-7.291-0.026-10.082L51.48,61.435l-12.078-12.25 c-2.726-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.954,0.013L61.435,51.34L73.452,39.152L73.452,39.152z M96.899,25.98C87.826,16.907,75.29,11.296,61.44,11.296c-13.851,0-26.387,5.611-35.46,14.685 c-9.073,9.073-14.684,21.609-14.684,35.459s5.611,26.387,14.684,35.459c9.073,9.074,21.609,14.686,35.46,14.686 c13.85,0,26.386-5.611,35.459-14.686c9.073-9.072,14.684-21.609,14.684-35.459S105.973,35.054,96.899,25.98L96.899,25.98z"/></g></svg>
\ No newline at end of file
......@@ -22,7 +22,6 @@
a {
font-weight: bold;
color: #2c3e50;
padding-left: 25px;
padding-right: 25px;
......
......@@ -47,11 +47,12 @@
}
#notifications {
position: fixed;
position: absolute;
z-index: 1;
width: 20em;
transform: translate(-45%);
background-color: white;
background-color: $white-bg-color;
border: 2px solid lightgray;
border-radius: 10px;
......
<template>
<div class="active-courses">
<h2>Aktive kurser</h2>
<ul>
<li v-for="(course, index) in courses" :key="index"><a href="/about">{{ course }}</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'ActiveCourses',
data() {
return {
courses: ['Calculus Beta', 'Databaser', 'etc.']
}
}
}
</script>
<style scoped lang="scss">
.active-courses {
@include block;
}
li {
margin: 10px 0;
}
</style>
\ No newline at end of file
<template>
<div class="deadlines">
<h2>Deadlines</h2>
<hr/>
<ul>
<li v-for="(deadline, index) in deadlines" :key="index">
<span class="course-name">{{ deadline.course }}</span>
<span class="due-date" :class="{ close: (deadline.date - new Date()) / (1000 * 60 * 60 * 24) < 1 }">
{{ deadline.date.toLocaleDateString('da-dk').replace(/\./g, '/') + ' ' + deadline.date.toLocaleTimeString('da-dk').slice(0, -3) }}
</span>
<br/>
<a class="handin-name" href="#">{{ deadline.name }}</a>
<hr/>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Deadlines',
data() {
return {
deadlines: [{ course: "Calculus Beta", name: "Aflevering 1", date: new Date() },
{ course: "Databaser", name: "SQL", date: new Date("10 Apr 2021") }]
}
}
}
</script>
<style scoped lang="scss">
.deadlines {
@include block;
}
.due-date {
float: right;
&.close {
color: rgb(220, 0, 0)
}
}
.handin-name {
font-size: 1.1em;
}
</style>
\ No newline at end of file
<template>
<div class="feed">
<h2>Feed</h2>
<ul>
<li v-for="(message, index) in messages" :key="index" @click="$router.push('/about')" @keypress.enter="$router.push('/about')" tabindex=0>
<a href="/about">{{ message.course }}</a>
<span class="msg-date">{{ message.date.toLocaleDateString('da-dk').replace(/\./g, '/') }}</span>
<p>{{ message.text }}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Feed',
data() {
return {
messages: [
{
course: 'Calculus Beta',
date: new Date(),
text: 'Suspendisse at eros vel ligula sollicitudin dignissim. Morbi ligula metus, rhoncus at ultrices eget, ultricies quis ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sit amet odio orci. Donec a velit at urna facilisis commodo nec a justo. Nulla facilisi. Nulla maximus fermentum.',
},
{
course: 'Databaser',
date: new Date(),
text: `It came to my attention that some students have been asking what the word "same" means in the expression "beverages of the same name".
It is natural that the expression "same" means "same", therefore the expression "beverages of the same name" denotes beverages of the same name.
Any assumption that the word "same" means "same or different" is wrong and cannot be taken as correct.`,
}
]
}
}
}
</script>
<style scoped lang="scss">
.feed {
@include block;
}
li {
border: solid 1px rgb(160, 160, 160);
padding: 5px;
&:hover, &:focus {
border-color: black;
cursor: pointer;
}
&:not(:last-child) {
margin-bottom: 20px;
}
}
.msg-date {
float: right;
}
p {
margin: 0.4em 0 0 0;
@include multiline-ellipsis($line-height: 1.2em, $line-count: 3)
}
</style>
\ No newline at end of file
<template>
<div class="mail">
<h2>Post</h2>
<hr/>
<ul>
<li v-for="(mail, index) in mails" :key="index">
<span>{{ mail.sender }}</span>
<span class="send-date">{{ mail.date.toLocaleDateString('da-dk').replace(/\./g, '/') }}</span>
<br/>
<a class="subject" href="/about">{{ mail.subject }}</a>
<hr/>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Mail',
data() {
return {
mails: [
{
sender: 'henrikb@post.au.dk',
subject: 'TDD Break',
date: new Date(),
},
{
sender: '202201010@post.au.dk',
subject: 'I\'m from the future',
date: new Date(),
}
]
}
}
}
</script>
<style scoped lang="scss">
.mail {
@include block;
}
.send-date {
float: right;
}
.subject {
font-size: 1.1em;
}
</style>
\ No newline at end of file
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueSvgInlinePlugin from 'vue-svg-inline-plugin';
createApp(App).use(router).mount('#app')
createApp(App)
.use(router)