From bb4021d355c4c21ef27f1627d436e83bd3e0e349 Mon Sep 17 00:00:00 2001 From: Michael Weimann Date: Tue, 21 Sep 2021 23:56:17 +0200 Subject: [PATCH] implement search layout #32 #33 #35 --- .reuse/dep5 | 2 +- package-lock.json | 29 +++ package.json | 2 + .../img/bootstrap-icons-1.5.0/pencil.license | 1 - public/img/bootstrap-icons-1.5.0/pencil.svg | 3 - public/img/bootstrap-icons-1.5.0/plus-lg.svg | 3 - .../bootstrap-icons-1.5.0/plus-lg.svg.license | 1 - public/img/bootstrap-icons-1.5.0/search.svg | 3 - .../bootstrap-icons-1.5.0/search.svg.license | 1 - public/img/bootstrap-icons-1.5.0/trash.svg | 4 - .../bootstrap-icons-1.5.0/trash.svg.license | 1 - src/App.vue | 4 +- src/assets/global.scss | 7 + src/assets/img/wtf-header-bg.jpg | Bin 0 -> 109328 bytes src/assets/variables.scss | 2 + src/components/AutoComplete.vue | 5 +- src/components/Avatar.vue | 37 ++++ src/components/Navbar.vue | 40 ++-- src/components/ProfileList.vue | 5 +- src/components/SearchResult.vue | 54 ++++++ src/components/Spinner.vue | 9 + src/main.js | 1 + src/{store.js => store/index.js} | 5 + src/store/search.js | 100 ++++++++++ src/views/Index.vue | 80 ++++---- src/views/Search.vue | 183 +++++++++++------- 26 files changed, 426 insertions(+), 156 deletions(-) delete mode 100644 public/img/bootstrap-icons-1.5.0/pencil.license delete mode 100644 public/img/bootstrap-icons-1.5.0/pencil.svg delete mode 100644 public/img/bootstrap-icons-1.5.0/plus-lg.svg delete mode 100644 public/img/bootstrap-icons-1.5.0/plus-lg.svg.license delete mode 100644 public/img/bootstrap-icons-1.5.0/search.svg delete mode 100644 public/img/bootstrap-icons-1.5.0/search.svg.license delete mode 100644 public/img/bootstrap-icons-1.5.0/trash.svg delete mode 100644 public/img/bootstrap-icons-1.5.0/trash.svg.license create mode 100644 src/assets/img/wtf-header-bg.jpg create mode 100644 src/components/Avatar.vue create mode 100644 src/components/SearchResult.vue create mode 100644 src/components/Spinner.vue rename src/{store.js => store/index.js} (95%) create mode 100644 src/store/search.js diff --git a/.reuse/dep5 b/.reuse/dep5 index 688310d..3bf3a5c 100644 --- a/.reuse/dep5 +++ b/.reuse/dep5 @@ -11,7 +11,7 @@ Files: .browserslistrc .dockerignore .eslintrc.js .gitignore Copyright: WTF Kooperative eG License: AGPL-3.0-or-later -Files: src/assets/img/wtf_logo* +Files: src/assets/img/wtf* Copyright: WTF Kooperative eG License: LicenseRef-WTF diff --git a/package-lock.json b/package-lock.json index 5ce9315..2dd2b37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,12 +15,14 @@ "@vue/compiler-sfc": "^3.0.0", "babel-eslint": "^10.1.0", "bootstrap": "^5.0.1", + "bootstrap-icons": "^1.5.0", "core-js": "^3.6.5", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "sass": "^1.37.5", "sass-loader": "^10.2.0", "vue": "^3.0.0", + "vue-letter-avatar": "^0.1.6", "vue-router": "^4.0.0-0", "vuex": "^4.0.2" } @@ -2854,6 +2856,15 @@ "@popperjs/core": "^2.10.1" } }, + "node_modules/bootstrap-icons": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz", + "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==", + "dev": true, + "engines": { + "node": ">=10" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz", @@ -13188,6 +13199,12 @@ "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=", "dev": true }, + "node_modules/vue-letter-avatar": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/vue-letter-avatar/-/vue-letter-avatar-0.1.6.tgz", + "integrity": "sha512-SXpa42vBK6o04ux9iHLBu38jIlQN0R7Qk3v0eKm58drXQWamUACLs6gxHBZ4kpVIhWWC+dQik5tmeDhgKuKURg==", + "dev": true + }, "node_modules/vue-loader": { "version": "15.9.7", "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-15.9.7.tgz", @@ -17155,6 +17172,12 @@ "dev": true, "requires": {} }, + "bootstrap-icons": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.5.0.tgz", + "integrity": "sha512-44feMc7DE1Ccpsas/1wioN8ewFJNquvi5FewA06wLnqct7CwMdGDVy41ieHaacogzDqLfG8nADIvMNp9e4bfbA==", + "dev": true + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz?cache=0&sync_timestamp=1614010713935&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbrace-expansion%2Fdownload%2Fbrace-expansion-1.1.11.tgz", @@ -25818,6 +25841,12 @@ "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=", "dev": true }, + "vue-letter-avatar": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/vue-letter-avatar/-/vue-letter-avatar-0.1.6.tgz", + "integrity": "sha512-SXpa42vBK6o04ux9iHLBu38jIlQN0R7Qk3v0eKm58drXQWamUACLs6gxHBZ4kpVIhWWC+dQik5tmeDhgKuKURg==", + "dev": true + }, "vue-loader": { "version": "15.9.7", "resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-15.9.7.tgz", diff --git a/package.json b/package.json index 088c008..c7b4f13 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,14 @@ "@vue/compiler-sfc": "^3.0.0", "babel-eslint": "^10.1.0", "bootstrap": "^5.0.1", + "bootstrap-icons": "^1.5.0", "core-js": "^3.6.5", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", "sass": "^1.37.5", "sass-loader": "^10.2.0", "vue": "^3.0.0", + "vue-letter-avatar": "^0.1.6", "vue-router": "^4.0.0-0", "vuex": "^4.0.2" } diff --git a/public/img/bootstrap-icons-1.5.0/pencil.license b/public/img/bootstrap-icons-1.5.0/pencil.license deleted file mode 100644 index 290774b..0000000 --- a/public/img/bootstrap-icons-1.5.0/pencil.license +++ /dev/null @@ -1 +0,0 @@ -SPDX-License-Identifier: MIT \ No newline at end of file diff --git a/public/img/bootstrap-icons-1.5.0/pencil.svg b/public/img/bootstrap-icons-1.5.0/pencil.svg deleted file mode 100644 index f8dbfeb..0000000 --- a/public/img/bootstrap-icons-1.5.0/pencil.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/public/img/bootstrap-icons-1.5.0/plus-lg.svg b/public/img/bootstrap-icons-1.5.0/plus-lg.svg deleted file mode 100644 index 1723f2f..0000000 --- a/public/img/bootstrap-icons-1.5.0/plus-lg.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/public/img/bootstrap-icons-1.5.0/plus-lg.svg.license b/public/img/bootstrap-icons-1.5.0/plus-lg.svg.license deleted file mode 100644 index 290774b..0000000 --- a/public/img/bootstrap-icons-1.5.0/plus-lg.svg.license +++ /dev/null @@ -1 +0,0 @@ -SPDX-License-Identifier: MIT \ No newline at end of file diff --git a/public/img/bootstrap-icons-1.5.0/search.svg b/public/img/bootstrap-icons-1.5.0/search.svg deleted file mode 100644 index d3dc7ca..0000000 --- a/public/img/bootstrap-icons-1.5.0/search.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/public/img/bootstrap-icons-1.5.0/search.svg.license b/public/img/bootstrap-icons-1.5.0/search.svg.license deleted file mode 100644 index 290774b..0000000 --- a/public/img/bootstrap-icons-1.5.0/search.svg.license +++ /dev/null @@ -1 +0,0 @@ -SPDX-License-Identifier: MIT \ No newline at end of file diff --git a/public/img/bootstrap-icons-1.5.0/trash.svg b/public/img/bootstrap-icons-1.5.0/trash.svg deleted file mode 100644 index 0ba7218..0000000 --- a/public/img/bootstrap-icons-1.5.0/trash.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/public/img/bootstrap-icons-1.5.0/trash.svg.license b/public/img/bootstrap-icons-1.5.0/trash.svg.license deleted file mode 100644 index 290774b..0000000 --- a/public/img/bootstrap-icons-1.5.0/trash.svg.license +++ /dev/null @@ -1 +0,0 @@ -SPDX-License-Identifier: MIT \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index e221db0..477a9e1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -12,8 +12,8 @@ SPDX-License-Identifier: AGPL-3.0-or-later