Add toegankelijkheidsfilters; use font awesome webfonts instead svg+j…

…s which was superslow when called dynamically with some js + much bigger; use more icons
openstate · Mar 7, 2022 · 4eff48d · 4eff48d
1 parent 75b17a8
commit 4eff48d
Show file tree

Hide file tree

Showing 14 changed files with 391 additions and 132 deletions.
diff --git a/app/assets/package.json b/app/assets/package.json
@@ -13,16 +13,17 @@
   "dependencies": {
     "@fontsource/montserrat": "^4.5.1",
     "@fontsource/source-code-pro": "^4.5.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/fontawesome-svg-core": "^1.3.0",
+    "@fortawesome/fontawesome-free": "^6.0.0",
+    "@fortawesome/free-brands-svg-icons": "^6.0.0",
+    "@fortawesome/free-regular-svg-icons": "^6.0.0",
+    "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "bootstrap-filestyle": "1.2.1",
     "bootstrap-sass": "3.3.6",
     "bootstrap-select": "^1.13.5",
     "bootstrap-table": "1.19.1",
     "cross-env": "^5.2.1",
-    "fuse.js": "^3.2.0",
+    "fuse.js": "^6.5.3",
     "jquery": "2.2.4",
     "leaflet": "1.3.4",
     "leaflet.awesome-markers": "2.0.5",

diff --git a/app/assets/scripts/main.js b/app/assets/scripts/main.js
@@ -16,19 +16,6 @@ import home from './routes/home';
 import map from './routes/map';
 
 
-// Import the needed Font Awesome functionality
-import { config, library, dom } from '@fortawesome/fontawesome-svg-core';
-// Import required icons
-import { faPencilAlt, faEnvelope, faExternalLinkAlt, faQuestionCircle, faWheelchair, faBan, faCode, faMapMarkerAlt, faSearch, faCheck, faQuestion, faVolumeMute } from '@fortawesome/free-solid-svg-icons';
-import { faTwitter, faLinkedin, faFacebookF, faGithub } from '@fortawesome/free-brands-svg-icons';
-import { faEnvelope as faEnvelopeR } from '@fortawesome/free-regular-svg-icons';
-
-// Add the imported icons to the library
-library.add(faPencilAlt, faEnvelope, faExternalLinkAlt, faQuestionCircle, faWheelchair, faBan, faCode, faLinkedin, faTwitter, faFacebookF, faGithub, faEnvelopeR, faMapMarkerAlt, faSearch, faCheck, faQuestion, faVolumeMute);
-
-// Tell FontAwesome to watch the DOM and add the SVGs when it detects icon markup
-dom.watch();
-
 // Allows us to use jQuery in <script> elements in the .html files
 global.$ = global.jQuery = require('jquery');
 

diff --git a/app/assets/scripts/routes/map.js b/app/assets/scripts/routes/map.js
diff --git a/app/assets/styles/common/_global.scss b/app/assets/styles/common/_global.scss
@@ -29,7 +29,7 @@ a {
   text-decoration: underline;
 }
 
-#dag-filter {
+.filter {
   display: inline-block;
   width: 180px !important;
 }
@@ -58,6 +58,10 @@ a {
   color: $orange;
 }
 
+.text-green {
+  color: green;
+}
+
 .text-white {
   color: white;
 }
@@ -169,7 +173,7 @@ dd {
     font-size: 12px;
   }
 
-  #dag-filter {
+  .filter {
     margin: 7px 0;
     padding: 6px 0;
     width: 160px !important;

diff --git a/app/assets/styles/layouts/_footer.scss b/app/assets/styles/layouts/_footer.scss
@@ -13,15 +13,6 @@ footer {
     margin: 0;
     padding-left: 5px;
   }
-  ul.dashed {
-    list-style-type: none;
-  }
-  ul.dashed > li {
-    text-indent: -5px;
-  }
-  ul.dashed > li:before {
-    content: "- ";
-  }
 
   .osf-logo {
     width: 115px;

diff --git a/app/assets/styles/layouts/_header.scss b/app/assets/styles/layouts/_header.scss
@@ -55,7 +55,6 @@ nav {
 }
 
 .lead-text {
-  font-family: $font-family-monospace;
   font-size: 24px;
   line-height: 28px;
 }

diff --git a/app/assets/styles/layouts/_pages.scss b/app/assets/styles/layouts/_pages.scss
@@ -45,36 +45,26 @@
   }
 }
 
-.stembureau-info-icons {
-  .svg-inline--fa {
-    font-size: 20px;
-    color: dimgrey;
-    width: 26px;
-    margin: 1px 4.5px;
-  }
-
-  .fa-wheelchair {
-    top: 2px;
-  }
-
-  .fa-ban, .fa-question {
-    font-size: 26px;
-  }
+.stembureau-info-icons .fa {
+  color: dimgrey;
+}
 
-  .wc {
-    font-family: $font-family-title;
-    font-size: 14px;
-    line-height: 20px;
-  }
+.fa-stack {
+  z-index: 10;
+}
 
-  .stack {
-    z-index: 10;
-  }
+.wc {
+  color: dimgrey;
+  font-family: $font-family-title;
+  font-size: 14px;
+  position: relative;
+  top: -9px !important;
+  left: -18px !important;
 }
 
 .leaflet-popup .wc {
-  top: -17px !important;
-  left: -14px !important;
+  top: -8px !important;
+  left: -16px !important;
 }
 
 #form-search, #form-gemeente-search {

diff --git a/app/assets/styles/main.scss b/app/assets/styles/main.scss
@@ -9,11 +9,15 @@
 // @import "~some-node-module";
 @import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";
 @import "~bootstrap-table/dist/bootstrap-table.min.css";
-@import "~bootstrap-table/dist/extensions/sticky-header/bootstrap-table-sticky-header.css";
+@import "~bootstrap-table/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.css";
 @import "leaflet";
 @import "~leaflet.markercluster/dist/MarkerCluster.css";
 @import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
 @import "~leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
+@import "~@fortawesome/fontawesome-free/css/fontawesome.min.css";
+@import "~@fortawesome/fontawesome-free/css/brands.min.css";
+@import "~@fortawesome/fontawesome-free/css/solid.min.css";
+@import "~@fortawesome/fontawesome-free/css/regular.min.css";
 
 @import "common/_global";
 @import "components/_buttons";

diff --git a/app/assets/webpack.mix.js b/app/assets/webpack.mix.js
@@ -16,6 +16,7 @@ require('laravel-mix-imagemin');
 mix.setPublicPath('../static/dist');
 
 mix.copyDirectory('node_modules/bootstrap-sass/assets/fonts/bootstrap/', '../static/dist/fonts/');
+mix.copyDirectory('node_modules/@fortawesome/fontawesome-free/webfonts/', '../static/dist/webfonts/');
 
 mix.js('scripts/main.js', '../static/dist/scripts/');
 

diff --git a/app/assets/yarn.lock b/app/assets/yarn.lock
@@ -898,38 +898,43 @@
   resolved "https://registry.yarnpkg.com/@fontsource/source-code-pro/-/source-code-pro-4.5.1.tgz#7be223bf73e489330e5ad97de430251cda4ff0fb"
   integrity sha512-NVTR9MBd5Dkzd6JDolLft0KM92RISbw0rhNKUuywGMxovAD7LypE5Cb4u0+lAylV3tRzQkLAsspCwMLzclscdQ==
 
-"@fortawesome/fontawesome-common-types@^0.2.36":
-  version "0.2.36"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
-  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
+"@fortawesome/fontawesome-common-types@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.3.0.tgz#949995a05c0d8801be7e0a594f775f1dbaa0d893"
+  integrity sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w==
+
+"@fortawesome/fontawesome-free@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.0.0.tgz#6f3bd8e42997c7d536a1246877ed8bcd4f005a54"
+  integrity sha512-6LB4PYBST1Rx40klypw1SmSDArjFOcfBf2LeX9Zg5EKJT2eXiyiJq+CyBYKeXyK0sXS2FsCJWSPr/luyhuvh0Q==
 
-"@fortawesome/fontawesome-svg-core@^1.2.36":
-  version "1.2.36"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
-  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
+"@fortawesome/fontawesome-svg-core@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.3.0.tgz#343fac91fa87daa630d26420bfedfba560f85885"
+  integrity sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
 
-"@fortawesome/free-brands-svg-icons@^5.15.4":
-  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz#ec8a44dd383bcdd58aa7d1c96f38251e6fec9733"
-  integrity sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==
+"@fortawesome/free-brands-svg-icons@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.0.0.tgz#c69830ec2fad38c95945867f4e6927bf33cce6f8"
+  integrity sha512-BIhsy2YeGuk8+KQwpqmyayQDWo1lvGMHsMIE+z5ApPRgV7T+zGhmNzYVoBT4IrJMC6ep5WpGrxoHX+IvNxHnkw==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
 
-"@fortawesome/free-regular-svg-icons@^5.15.4":
-  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02"
-  integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==
+"@fortawesome/free-regular-svg-icons@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.0.0.tgz#f3cb91dac643472fe8138024b93fbfbdf05675cc"
+  integrity sha512-lYK6oyQL8HwZUAVWGqF7TGuwQBVfphNBVTdvPSD3h4gmQfGazm/xcwg3kmtcRycu3y6QspOC7hPXSoJbVqSYCw==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
 
-"@fortawesome/free-solid-svg-icons@^5.15.4":
-  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
-  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
+"@fortawesome/free-solid-svg-icons@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.0.0.tgz#bed4a501b631c6cfa35c09830f7cb63ffca1589d"
+  integrity sha512-o4FZ1XbndcgeWNb8Wh0y+Hgf73CjmyOQowUSaqQCtgIIdS+XliSBSOwCl330wER+I6CGYE96hT27bHBPmzX2Gg==
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
+    "@fortawesome/fontawesome-common-types" "^0.3.0"
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -3684,10 +3689,10 @@ function-bind@^1.1.1:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
-fuse.js@^3.2.0:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.6.1.tgz#7de85fdd6e1b3377c23ce010892656385fd9b10c"
-  integrity sha512-hT9yh/tiinkmirKrlv4KWOjztdoZo1mx9Qh4KvWqC7isoXwdUY3PNWUxceF4/qO9R6riA2C29jdTOeQOIROjgw==
+fuse.js@^6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.5.3.tgz#7446c0acbc4ab0ab36fa602e97499bdb69452b93"
+  integrity sha512-sA5etGE7yD/pOqivZRBvUBd/NaL2sjAu6QuSaFoe1H2BrJSkH/T/UXAJ8CdXdw7DvY3Hs8CXKYkDWX7RiP5KOg==
 
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"

diff --git a/app/templates/embed_gemeente.html b/app/templates/embed_gemeente.html
@@ -13,7 +13,7 @@
     <div class="row">
       <div class="col-xs-12">
         <div class="text-center">
-          <h1>Gemeente {{ gemeente }}</h1>
+          <h1><i class="fa fa-users text-blue"></i> Gemeente {{ gemeente }}</h1>
         </div>
       </div>
     </div>
@@ -39,7 +39,7 @@ <h1>Gemeente {{ gemeente }}</h1>
         <div class="col-xs-12 col-sm-12 col-md-3">
           {% if show_search %}
           <hr class="visible-xs-block visible-sm-block">
-          <h2>Stembureaus</h2>
+          <h2><i class="fa fa-pencil-alt text-red"></i> Stembureaus</h2>
           <div class="row">
             <div class="col-xs-12">
               <form action="" method="get" class="form-inline" id="form-search">