simplified docker builds

Kindly cross check & approve

.github/workflows/bump-and-release.yaml

@@ -1,19 +1,13 @@
 name: Bump & release
 
 on:
-  pull_request:
-    types: [closed]
-    branches:
-      - master
   push: # Ensure a new release is created for each new tag
     tags:
       - '[0-9]+.[0-9]+.[0-9]+'
 
 jobs:
   bump-version-and-release:
-    if: > # Push => Ensure only changes from master. PR => to not trigger when closing PR without merging
+    if: github.event.base_ref == 'refs/heads/master'
-      (github.event_name == 'push' && github.event.base_ref == 'refs/heads/master')
-      || github.event.pull_request.merged == true 
     runs-on: ubuntu-latest
     steps:
       - 
@@ -21,3 +15,4 @@ jobs:
         with:
           user: undergroundwires-bot
           release-token: ${{secrets.BUMP_GITHUB_PAT}} # Does not trigger release pipeline if we use default token: https://github.community/t5/GitHub-Actions/Github-Action-trigger-on-release-not-working-if-releases-was/td-p/34559
+                                                      # GitHub does not inject secrets if pipeline runs from fork or a fork is merged to main repo.

CHANGELOG.md

@@ -0,0 +1,115 @@
+# Changelog
+
+## 0.4.7 (2020-06-30)
+
+* removed HKU tweak as all HKU's are changed #10 | [commit](https://github.com/undergroundwires/privacy.sexy/commit/c937af8ee7da9aa95131e56abf7bf24800390fe6)
+* Fixed types + script in "Clear Windows log files" (#15) | [commit](https://github.com/undergroundwires/privacy.sexy/commit/461a4f122b342369db5cc08c5e30961c64e68cdd)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.4.6...0.4.7)
+
+## 0.4.6 (2020-06-16)
+
+* Fixed Some More Issues (#12) | [commit](https://github.com/undergroundwires/privacy.sexy/commit/52d5713a99422cdf900aba819e49e998abac33cc)
+* removed failing continuous deployment #14 | [commit](https://github.com/undergroundwires/privacy.sexy/commit/583c5660d6ac934b845a044e013357aa91f61c15)
+* Updated Some Tweaks (#11) | [commit](https://github.com/undergroundwires/privacy.sexy/commit/0fc18459cde57684f00764815062f838f932aed5)
+* Updated Some More Tweaks (#13) | [commit](https://github.com/undergroundwires/privacy.sexy/commit/019b838925e963b7ec052ac76c6faf5650b9eb67)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.4.5...0.4.6)
+
+## 0.4.5 (2020-06-13)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.4.4...0.4.5)
+
+## 0.4.4 (2020-05-24)
+
+* fixed close card button not being visible & cleanup | [commit](https://github.com/undergroundwires/privacy.sexy/commit/0d2efe5b05aa965458b78b8fa43754ce2f4fe11b)
+* new footer with privacy policy | [commit](https://github.com/undergroundwires/privacy.sexy/commit/e2ab124fb799f56ada3570fdc911361cb803e889)
+* one command to lint everything "npm run lint" | [commit](https://github.com/undergroundwires/privacy.sexy/commit/bb98d20637cbf1d524ebb2973e308773006e3153)
+* fix "group by" overflows on smaller screens | [commit](https://github.com/undergroundwires/privacy.sexy/commit/c668a97950a1cb7c8bf2a7fd8a72d1101e65e8ce)
+* clicking outside of a card closes it | [commit](https://github.com/undergroundwires/privacy.sexy/commit/aab8f21a8d8dbed54798af581e6e1ad9e86a4be1)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.4.3...0.4.4)
+
+## 0.4.3 (2020-05-23)
+
+* removed redundant documentation | [commit](https://github.com/undergroundwires/privacy.sexy/commit/749a140eb8dba09cb67fec2f8dec937e66e3cff5)
+* fixed broke link | [commit](https://github.com/undergroundwires/privacy.sexy/commit/97b7e03233d9718a8df30cb01ce06ca9489a0295)
+* simplified heading | [commit](https://github.com/undergroundwires/privacy.sexy/commit/226074c5342f7463c06fcff1457d352ca30295a3)
+* reading version from package.json instead of version file #5 | [commit](https://github.com/undergroundwires/privacy.sexy/commit/691f989682179016ddcbf55a05cded29155288c9)
+* automatically increases patch number #5 | [commit](https://github.com/undergroundwires/privacy.sexy/commit/3e3bc07576f7c7e74e3e11fc7d197cbb9a9fb8c0)
+* using deployment operations from aws-static-site-with-cd | [commit](https://github.com/undergroundwires/privacy.sexy/commit/997be7113f676888892ffa35566d9ebb58a3e9ea)
+* automated using bump-everywhere + more quality checks (#8) | [commit](https://github.com/undergroundwires/privacy.sexy/commit/4a91e8ccd8a707bc6bea34ee28cff7fa4f66ee2f)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.4.2...0.4.3)
+
+## 0.4.2 (2020-02-29)
+
+* added missing semicolon for masking | [commit](https://github.com/undergroundwires/privacy.sexy/commit/e63ac4ae67da68243a525af149ff30e5d485b641)
+* set font on input | [commit](https://github.com/undergroundwires/privacy.sexy/commit/0c39a06be5e4b0a2031ad5e9f5220dd669afee53)
+* shortened all HKEY paths | [commit](https://github.com/undergroundwires/privacy.sexy/commit/802b36bdd8dcc1f0a2853fe7da2ea2fccd69a88c)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.4.1...0.4.2)
+
+## 0.4.1 (2020-01-11)
+
+* fixed search bug | [commit](https://github.com/undergroundwires/privacy.sexy/commit/31364bdfec503af09ffbb58044a17dfb833fc8d9)
+* hide grouping while searching | [commit](https://github.com/undergroundwires/privacy.sexy/commit/92f1a36bcb1e1fe7c90efe8ccd3ede55991e9d9c)
+* 👀🔍  showing search queries | [commit](https://github.com/undergroundwires/privacy.sexy/commit/97a7747933d2b515cc03ab8243e6a8ae702ef16a)
+* more efficient queries with single lowercase | [commit](https://github.com/undergroundwires/privacy.sexy/commit/19813b691746d98670823025c460480400e34b6e)
+* using right 🔍 input type | [commit](https://github.com/undergroundwires/privacy.sexy/commit/0ce354ea0956391ad3f37b252daac1127bfc601a)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.4.0...0.4.1)
+
+## 0.4.0 (2020-01-11)
+
+* 🔍 support for search | [commit](https://github.com/undergroundwires/privacy.sexy/commit/89862b2775703257b9dc2e19fbebde2c0d0fbda0)
+* more scripts & better organized | [commit](https://github.com/undergroundwires/privacy.sexy/commit/95baf3175b0d2c7df516f7893a96346b94ac8eca)
+* refactorings | [commit](https://github.com/undergroundwires/privacy.sexy/commit/e3f82e069e305f6d94eab335470c8e7b44295dd6)
+* more margin for the scripts | [commit](https://github.com/undergroundwires/privacy.sexy/commit/5ea46ecbf52236953d19f09a8eade08b83e6cd34)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.3.0...0.4.0)
+
+## 0.3.0 (2020-01-09)
+
+* added description & more descriptive title | [commit](https://github.com/undergroundwires/privacy.sexy/commit/99576340b648550149871e2c0fe0b0d8c2dd0d7c)
+* allow robots | [commit](https://github.com/undergroundwires/privacy.sexy/commit/eee0e785ec2c5e6bed53d21b4126a57773e35dba)
+* removed unused references | [commit](https://github.com/undergroundwires/privacy.sexy/commit/cfd888f3afc5c260a0a4a73f2843b86b9f1df2cd)
+* 🚫 disable NVIDIA telemetry | [commit](https://github.com/undergroundwires/privacy.sexy/commit/ab28f4ed8538d51e1777c86302a63a0cd9c3cb2a)
+* backwards compatibility for fonts | [commit](https://github.com/undergroundwires/privacy.sexy/commit/4bc13e11926a6df77079646499e799742153b4ab)
+* added back meta needed for responsiveness | [commit](https://github.com/undergroundwires/privacy.sexy/commit/ed872ef3d9f6c92afc0ce0d06998c60463a8b4e8)
+* fancy-font is renamed to main and now used | [commit](https://github.com/undergroundwires/privacy.sexy/commit/6825001c61426194dc363b96b57a321241f3ba57)
+* added support for grouping | [commit](https://github.com/undergroundwires/privacy.sexy/commit/ec6b3c54072a77bb4305da1c234db6c649218b88)
+* less hyphens as it looks better on mobile | [commit](https://github.com/undergroundwires/privacy.sexy/commit/e0b080af69157f46ba12e2c25e794f5384671b51)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.2.0...0.3.0)
+
+## 0.2.0 (2020-01-06)
+
+* added GitHub Actions badge for build & deploy | [commit](https://github.com/undergroundwires/privacy.sexy/commit/a229aca68a92bbcd8e8176ac1dd25ce03509e074)
+* more badges 📛🏆📜 | [commit](https://github.com/undergroundwires/privacy.sexy/commit/090e8319091044e53484ba8338510f6fb7c3cb80)
+* typo fixes + whitespace refactorings | [commit](https://github.com/undergroundwires/privacy.sexy/commit/e99f210c9dcf61a21e445e2a331384b6066f2c98)
+* switched content information to "why" section | [commit](https://github.com/undergroundwires/privacy.sexy/commit/beb3c8339f83a224ca66ad8a911a9265ffe7c9c0)
+* fixed contribution URL | [commit](https://github.com/undergroundwires/privacy.sexy/commit/7b4277d7706ccf6ba7e4b7b01aa46f8e3852cfc6)
+* fixed wrong relation + lighter style | [commit](https://github.com/undergroundwires/privacy.sexy/commit/8d05b03c9f3c9fc015be6615da8c283809712065)
+* better URL validation | [commit](https://github.com/undergroundwires/privacy.sexy/commit/aff463dd64fecff92a786fcba88621dff6b1cf73)
+* refactoring to new function | [commit](https://github.com/undergroundwires/privacy.sexy/commit/c646c102730481c3f4648eb714dc0a84ce35b13c)
+* optimized find queries & refactorings | [commit](https://github.com/undergroundwires/privacy.sexy/commit/d38f6cd6a8b33e11df854c7abea05974dc04d4ce)
+* 🎨  styled no JS error | [commit](https://github.com/undergroundwires/privacy.sexy/commit/c359f1d89c6874b3cc94154b993e33f58bd32268)
+* simplified finding duplicates | [commit](https://github.com/undergroundwires/privacy.sexy/commit/57037aaefcc0e80f0f4719cea89568490a731028)
+* fixed maintainability badge URL | [commit](https://github.com/undergroundwires/privacy.sexy/commit/aaea47e7d15fe41dea26968db0107a0c53d108f3)
+* fixed wrong line dumps | [commit](https://github.com/undergroundwires/privacy.sexy/commit/5ccc7c59528885ae7729197df3dfa00f924a2b3f)
+* refactorings in parsing | [commit](https://github.com/undergroundwires/privacy.sexy/commit/2aa3742e30646bf1d1f3779419d161c3fb6c4808)
+* using free function | [commit](https://github.com/undergroundwires/privacy.sexy/commit/20020af7c1d8de13948d8761fd4e7f0affb2badb)
+* default selection is now none | [commit](https://github.com/undergroundwires/privacy.sexy/commit/3140cc663b86394d543de90228aa53e6a304d8d9)
+* added hyphen lines for longer names | [commit](https://github.com/undergroundwires/privacy.sexy/commit/cced601d686d550f4225018e5311b7433efbb5ae)
+* more descriptive subtitle | [commit](https://github.com/undergroundwires/privacy.sexy/commit/2cf9214b14d9720f747a71b3864ba7a28acf0ff4)
+* added footer with version | [commit](https://github.com/undergroundwires/privacy.sexy/commit/10a34fae2f1a219ec52db0c74edb39b46ebd8abc)
+* using font variables | [commit](https://github.com/undergroundwires/privacy.sexy/commit/60e6348dc8d53f1e81ebdb2ec0e1962aac1e9842)
+* code-gen refactorings | [commit](https://github.com/undergroundwires/privacy.sexy/commit/246e753ddc9dc8bf630e538663584bf3423cc749)
+* added text when nothing is chosen | [commit](https://github.com/undergroundwires/privacy.sexy/commit/a7da75d4428090423b692ce45423f5bd300d8442)
+
+[compare](https://github.com/undergroundwires/privacy.sexy/compare/0.1.0...0.2.0)
+
+## 0.1.0 (2019-12-31)
+
+Initial release | [commits](https://github.com/undergroundwires/privacy.sexy/commit/4e7f244190c6ffbf7b20443e3e69cf2402c4268a)

Dockerfile

@@ -1,20 +1,12 @@
-# +-+-+-+-+-+ +-+-+-+-+-+
+# Build
-# |B|u|i|l|d| |S|t|a|g|e|
-# +-+-+-+-+-+ +-+-+-+-+-+
 FROM node:lts-alpine as build-stage
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
 RUN npm run build
-# For testing purposes, it's easy to run http-server on lts-alpine such as continuing from here:
-#       RUN npm install -g http-server
-#       EXPOSE 8080
-#       CMD [ "http-server", "dist" ]
 
-# +-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+
+# Production stage
-# |P|r|o|d|u|c|t|i|o|n| |S|t|a|g|e|
-# +-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+
 FROM nginx:stable-alpine as production-stage
 COPY --from=build-stage /app/dist /usr/share/nginx/html
 EXPOSE 80

README.md

@@ -28,16 +28,16 @@ Fork it & add more scripts in [application.yaml](src/application/application.yam
 
 ## Commands
 
-- Setup and run
+- Project setup: `npm install`
-  - For development:
+- Testing
-    - `npm install` to project setup.
+  - Run unit tests: `npm run test:unit`
-    - `npm run serve` to compile & hot-reload for development.
+  - Lint: `npm run lint`
-  - Production (using Docker):
+- **Webpage**
-    - Build `docker build -t undergroundwires/privacy.sexy .`
+  - Development: `npm run serve` to compile & hot-reload for development.
-    - Run `docker run -it -p 8080:8080 --rm --name privacy.sexy-1 undergroundwires/privacy.sexy`
+  - Production: `npm run build` to prepare files for distribution.
-- Prepare for production: `npm run build`
+  - Or run using Docker:
-- Run tests: `npm run test:unit`
+    1. Build: `docker build -t undergroundwires/privacy.sexy:0.4.8 .`
-- Lint and fix files: `npm run lint`
+    2. Run: `docker run -it -p 8080:80 --rm --name privacy.sexy-0.4.8 undergroundwires/privacy.sexy:0.4.8`
 
 ## Architecture
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "privacy.sexy",
-  "version": "0.1.0",
+  "version": "0.4.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -9792,6 +9792,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.1.tgz",
@@ -12164,6 +12169,14 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-js-modal": {
+      "version": "2.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/vue-js-modal/-/vue-js-modal-2.0.0-rc.3.tgz",
+      "integrity": "sha512-Q9L9FsIUMuzCKSuB41D8LxV+Yc2q+zWHzzUdWaQ2KeHPS+78+X6AAnBztVoophbjt8UXHO7rQSRgER1MMw5qsw==",
+      "requires": {
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
     "vue-loader": {
       "version": "15.8.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.8.3.tgz",
@@ -12869,9 +12882,9 @@
       }
     },
     "websocket-extensions": {
-      "version": "0.1.3",
+      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
     "whatwg-encoding": {

package.json

@@ -1,13 +1,14 @@
 {
   "name": "privacy.sexy",
-  "version": "0.4.3",
+  "version": "0.4.7",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "npm run lint:vue && npm run lint:yaml && npm run lint:md && npm run lint:md:relative-urls && npm run lint:md:consistency",
     "lint:vue": "vue-cli-service lint --no-fix",
     "lint:yaml": "yamllint **/*.yaml --ignore=node_modules/**/*.yaml",
-    "test:unit": "vue-cli-service test:unit",
     "lint:md": "markdownlint **/*.md --ignore node_modules",
     "lint:md:relative-urls": "remark . --frail --use remark-validate-links",
     "lint:md:consistency": "remark . --frail --use remark-preset-lint-consistent"
@@ -25,6 +26,7 @@
     "v-tooltip": "^2.0.2",
     "vue": "^2.6.11",
     "vue-class-component": "^7.1.0",
+    "vue-js-modal": "^2.0.0-rc.3",
     "vue-property-decorator": "^8.3.0"
   },
   "devDependencies": {

src/App.vue

@@ -5,7 +5,7 @@
           <TheSearchBar class="row" />
           <TheScripts class="row"/>
           <TheCodeArea class="row" theme="xcode" />
-          <TheCodeButtons class="row" />
+          <TheCodeButtons class="row code-buttons" />
           <TheFooter />
       </div>
    </div>
@@ -67,6 +67,10 @@ body {
     .row {
       margin-bottom: 10px;
     }
+
+    .code-buttons {
+      padding-bottom: 10px;
+    }
   }
 }
 

src/presentation/Bootstrapping/ApplicationBootstrapper.ts

@@ -1,3 +1,4 @@
+import { VModalBootstrapper } from './Modules/VModalBootstrapper';
 import { TreeBootstrapper } from './Modules/TreeBootstrapper';
 import { IconBootstrapper } from './Modules/IconBootstrapper';
 import { VueConstructor, IVueBootstrapper } from './IVueBootstrapper';
@@ -19,6 +20,7 @@ export class ApplicationBootstrapper implements IVueBootstrapper {
             new TreeBootstrapper(),
             new VueBootstrapper(),
             new TooltipBootstrapper(),
+            new VModalBootstrapper(),
         ];
     }
 }

src/presentation/Bootstrapping/Modules/VModalBootstrapper.ts

@@ -0,0 +1,8 @@
+import VModal from 'vue-js-modal';
+import { VueConstructor, IVueBootstrapper } from './../IVueBootstrapper';
+
+export class VModalBootstrapper implements IVueBootstrapper {
+    public bootstrap(vue: VueConstructor): void {
+        vue.use(VModal, { dynamic: true, injectModalsContainer: true });
+    }
+}

src/presentation/Scripts/Cards/CardList.vue

@@ -4,6 +4,7 @@
       <CardListItem
         class="card"
         v-for="categoryId of categoryIds"
+        :data-category="categoryId"
         v-bind:key="categoryId"
         :categoryId="categoryId"
         :activeCategoryId="activeCategoryId"
@@ -32,6 +33,9 @@ export default class CardList extends StatefulVue {
   public async mounted() {
     const state = await this.getCurrentStateAsync();
     this.setCategories(state.app.categories);
+    this.onOutsideOfActiveCardClicked(() => {
+      this.activeCategoryId = null;
+    });
   }
 
   public onSelected(categoryId: number, isExpanded: boolean) {
@@ -41,7 +45,21 @@ export default class CardList extends StatefulVue {
   private setCategories(categories: ReadonlyArray<ICategory>): void {
     this.categoryIds = categories.map((category) => category.id);
   }
+
+  private onOutsideOfActiveCardClicked(callback) {
+    const outsideClickListener = (event) => {
+      if (!this.activeCategoryId) {
+        return;
+      }
+      const element = document.querySelector(`[data-category="${this.activeCategoryId}"]`);
+      if (!element.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener('click', outsideClickListener);
+  }
 }
+
 </script>
 
 <style scoped lang="scss">

src/presentation/Scripts/Cards/CardListItem.vue

@@ -8,11 +8,15 @@
       <div class="card__inner">
         <span v-if="cardTitle && cardTitle.length > 0">{{cardTitle}}</span>
         <span v-else>Oh no 😢</span>
-        <font-awesome-icon :icon="['far', isExpanded ? 'folder-open' : 'folder']" class="expand-button"  />
+        <font-awesome-icon :icon="['far', isExpanded ? 'folder-open' : 'folder']" class="card__inner__expand-icon" />
       </div>
       <div class="card__expander" v-on:click.stop>
-          <font-awesome-icon :icon="['fas', 'times']"  class="close-button" v-on:click="onSelected(false)"/>
+        <div class="card__expander__content">
           <ScriptsTree :categoryId="categoryId"></ScriptsTree>
+        </div>
+        <div class="card__expander__close-button">
+          <font-awesome-icon :icon="['fas', 'times']"  v-on:click="onSelected(false)"/>
+        </div>
     </div>
     </div>
 </template>
@@ -63,73 +67,66 @@ export default class CardListItem extends StatefulVue {
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
 
+$big-screen-width: 991px;
+$medium-screen-width: 767px;
+$small-screen-width: 380px;
+
 .card {
   margin: 15px; 
   width: calc((100% / 3) - 30px);
   transition: all 0.2s ease-in-out;
 
-  //media queries for stacking cards
+  // Media queries for stacking cards
-  @media screen and (max-width: 991px) {
+  @media screen and (max-width: $big-screen-width) {  width: calc((100% / 2) - 30px); }
-    width: calc((100% / 2) - 30px);
+  @media screen and (max-width: $medium-screen-width) {  width: 100%; }
-  }
+  @media screen and (max-width: $small-screen-width) {  width: 90%; }
 
-  @media screen and (max-width: 767px) {
+  &__inner {  
-    width: 100%;
-  }
-  
-  @media screen and (max-width: 380px) {
-    width: 90%;
-  }
-
-  &:hover {
-    .card__inner {
-      background-color: $accent;
-      transform: scale(1.05);
-    }
-  }
-
-  &__inner {
-    width: 100%;
     padding: 30px;
     position: relative;
     cursor: pointer;
-    
     background-color: $gray;
     color: $light-gray;
     font-size: 1.5em;
     text-transform: uppercase;
     text-align: center;
-
     transition: all 0.2s ease-in-out;
-    
+
+    &:hover {
+      background-color: $accent;
+      transform: scale(1.05);
+    }
     &:after {
       transition: all 0.3s ease-in-out;
     }
-    
+  
-    .expand-button {
+    &__expand-icon {
       width: 100%;
       margin-top: .25em;
     }
   }
 
-  //Expander
   &__expander {
     transition: all 0.2s ease-in-out;
-    background-color: $slate;
-    width: 100%;
     position: relative;
-    
+    background-color: $slate;
+    color: $light-gray;
     display: flex;
-    justify-content: center;
     align-items: center;
+
+    &__content {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      word-break: break-word;
+    }
     
-    .close-button {
+    &__close-button {
-      font-size: 0.75em;
+      width: auto;
-      position: absolute;
+      font-size: 1.5em;
-      top: 10px;
+      align-self: flex-start;
-      right: 10px;
+      margin-right:0.25em;
       cursor: pointer;
-      
       &:hover {
         opacity: 0.9;
       }
@@ -137,33 +134,27 @@ export default class CardListItem extends StatefulVue {
   }
 
   &.is-collapsed {
-    
     .card__inner {
       &:after {
         content: "";
         opacity: 0;
       }
     }
+
     .card__expander {
       max-height: 0;
       min-height: 0;
       overflow: hidden;
-      margin-top: 0;
       opacity: 0;
     }
   }
 
   &.is-expanded {
-
     .card__inner {
       background-color: $accent;
-      
       &:after{
         content: "";
-        opacity: 1;
         display: block;
-        height: 0;
-        width: 0;
         position: absolute;
         bottom: -30px;
         left: calc(50% - 15px);
@@ -171,14 +162,12 @@ export default class CardListItem extends StatefulVue {
         border-right: 15px solid transparent;
         border-bottom: 15px solid #333a45;
       }
-      
     }
 
     .card__expander {
       min-height: 200px;
       // max-height: 1000px;
       // overflow-y: auto;
-
       margin-top: 30px;
       opacity: 1;
     }
@@ -205,12 +194,7 @@ export default class CardListItem extends StatefulVue {
   }
 }
 
-
+@media screen and (min-width: $big-screen-width) { // when 3 cards in a row
-//Expander Widths
-
-//when 3 cards in a row
-@media screen and (min-width: 992px) {
-
   .card:nth-of-type(3n+2) .card__expander {
     margin-left: calc(-100% - 30px);
   }
@@ -223,12 +207,9 @@ export default class CardListItem extends StatefulVue {
   .card__expander {
     width: calc(300% + 60px);
   }
-
 }
 
-//when 2 cards in a row
+@media screen and (min-width: $medium-screen-width) and (max-width: $big-screen-width) { // when 2 cards in a row
-@media screen and (min-width: 768px) and (max-width: 991px) {
-
   .card:nth-of-type(2n+2) .card__expander {
     margin-left: calc(-100% - 30px);
   }
@@ -238,6 +219,5 @@ export default class CardListItem extends StatefulVue {
   .card__expander {
     width: calc(200% + 30px);
   }
-
 }
 </style>

src/presentation/Scripts/TheScripts.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <div class="help-container">
-            <TheSelector class="left" />
+            <TheSelector />
-            <TheGrouper class="right"
+            <TheGrouper
                 v-on:groupingChanged="onGroupingChanged($event)"
                 v-show="!this.isSearching" />
         </div>
@@ -119,19 +119,10 @@
         }
     }
 }
+
 .help-container {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  flex-wrap: wrap;
-  .center {
-      justify-content: center;
-  }
-  .left {
-      justify-content: flex-start;
-  }
-  .right {
-      justify-content: flex-end;
-  }
 }
-
 </style>

src/presentation/TheFooter.vue

@@ -1,20 +1,41 @@
 <template>
-    <div id="footer">
+  <div class="footer">
-        {{text}}
+    <div class="item">
+      <a :href="releaseUrl" target="_blank">{{ version }}</a>
+      </div>
+    <div class="item">
+      <a @click="$modal.show(modalName)">Privacy</a> <!-- href to #privacy to avoid scrolling to top -->
     </div>
+    <modal :name="modalName" height="auto" :scrollable="true" :adaptive="true">
+      <div class="modal">
+        <ThePrivacyPolicy class="modal__content"/>
+        <div class="modal__close-button">
+          <font-awesome-icon :icon="['fas', 'times']"  @click="$modal.hide(modalName)"/>
+        </div>
+      </div>
+    </modal>
+  </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 import { StatefulVue } from './StatefulVue';
+import ThePrivacyPolicy from './ThePrivacyPolicy.vue';
 
-@Component
+@Component({
+  components: {
+    ThePrivacyPolicy,
+  },
+})
 export default class TheFooter extends StatefulVue {
-  private text: string = '';
+  private readonly modalName = 'privacy-policy';
+  private version: string = '';
+  private releaseUrl: string = '';
 
   public async mounted() {
     const state = await this.getCurrentStateAsync();
-    this.text = `v${state.app.version}`;
+    this.version = `v${state.app.version}`;
+    this.releaseUrl = `${state.app.repositoryUrl}/releases/tag/${state.app.version}`;
   }
 }
 </script>
@@ -22,10 +43,45 @@ export default class TheFooter extends StatefulVue {
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
 @import "@/presentation/styles/fonts.scss";
-#footer {
+.footer {
-    color: $gray;
+    display: flex;
-    font-size: 0.7em;
+    color: $dark-gray;
-    font-family: $artistic-font;
+    font-size: 1rem;
-    text-align: center;
+    font-family: $normal-font;
+    align-self: center;
+    
+    a {
+      color:inherit;
+      text-decoration: underline;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .item:not(:first-child)::before {
+      content: "|";
+      padding: 0 5px;
+    }
+}
+.modal {
+    margin-bottom: 10px;
+    display: flex;
+    flex-direction: row;
+
+    &__content {
+      width: 100%;
+    }
+
+    &__close-button {
+      width: auto;
+      font-size: 1.5em;
+      margin-right:0.25em;
+      align-self: flex-start;
+      cursor: pointer;
+      &:hover {
+        opacity: 0.9;
+      }
+    }
 }
 </style>

src/presentation/ThePrivacyPolicy.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="privacy-policy">
+        <div class="line">
+            <div class="line__emoji">🚫🍪</div>
+            <div>No cookies!</div>
+        </div>
+        <div class="line">
+            <div class="line__emoji">🚫👀</div>
+            <div>No user behavior / IP adress collection!</div>
+        </div>
+        <div class="line">
+            <div class="line__emoji">🤖</div>
+            <div>Website is deployed automatically from master branch
+            of the <a :href="repositoryUrl" target="_blank">source code</a> with no changes.</div>
+        </div>
+        <div class="line">
+            <div class="line__emoji">📈</div>
+            <div>Basic <a href="https://aws.amazon.com/cloudfront/reporting/" target="_blank">CDN statistics</a>
+            are collected by AWS but they cannot be related to you or your behavior.</div>
+        </div>
+        <div class="line">
+            <div class="line__emoji">🎉</div>
+            <div>As almost no data is colected, the website gets better only with your active feedback.
+            Feel free to <a :href="feedbackUrl" target="_blank">create an issue</a> 😊</div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { StatefulVue } from '@/presentation/StatefulVue';
+
+@Component
+export default class TheFooter extends StatefulVue {
+  private repositoryUrl: string = '';
+  private feedbackUrl: string = '';
+
+  public async mounted() {
+    const state = await this.getCurrentStateAsync();
+    this.repositoryUrl = state.app.repositoryUrl;
+    this.feedbackUrl = `${state.app.repositoryUrl}/issues`;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@/presentation/styles/fonts.scss";
+.privacy-policy {
+    display: flex;
+    flex-direction: column;
+    font-family: $normal-font;
+    text-align:center;
+
+    .line {
+        display: flex;
+        flex-direction: column;
+
+        &:not(:first-child) {
+          margin-top:0.2rem;
+        }
+    }
+
+    a {
+      color:inherit;
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+}
+</style>