Feature: Migrate client-participation to webpack, remove node-sass

client-participation/.gitignore

@@ -1,10 +1,6 @@
-.polis_s3_creds_client.json
-.polis_scp_creds_client.json
-.polis_slack_creds.json
 .sass-cache/*
 *.log
 build
 dist
 js/tmpl/
 polisStatic/
-public

client-participation/README.md

@@ -1,53 +1,25 @@
-# polis-client-participation
+# Polis Client Participation
 
-The part of polis that conversation participants see.
+This is the front-end code that participants see. The site needs to be served through the `file-server` and the `server` before it will render correctly as data payloads are injected into the HTML as it is served.
 
 ## Dependencies
 
-* node `11.15.0`
-* npm `7.0.15`
+* node `18.12.1`
+* npm `8.19.2`
 
 ## Setup
 
 ```sh
-n 11.15.0
-npm install -g npm@7.0
+n 18.12.1
 npm install
 cp polis.config.template.js polis.config.js
 npm run build:prod
 ```
 
-Note:
+From here go to `file-server` and run `make` to copy the built files across.
 
-So... you might think that you should now be able to go to
-`http://localhost:5001` and see the polis interface. However, this is not the
-case. Because of preprocessing required of the `index.html` file before it will
-load (including the embedding of the initial data payload in the html), it is
-necessary that the application be accessed through a running instance of the
-your polis-server.
-
-Also note that the polisServer process will need to know via its config the port
-on which this, the participation client code, will be available. If you don't
-mess with any of the default port settings you shouldn't have to worry about all
-this nonsense. Just know that if you do, you will then need to update these port
-variables in multiple places.
+You can run `npm run build:dev` to get an unminified version which makes for easier in-browser debugging.
 
 ## Troubleshooting
 
-If you get an error that looks something like
-`Error: watch /home/csmall/code/polisClientParticipation/js ENOSPC` trying to
-run, this may be because your system has too many watches active. If you see
-this, try running
-`echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p`
-to increase the number of available watches on your system.
-
-## Deployment
-
-Before pushing to s3: `gulp dist`
-
-Then run `npm run deploy:preprod` or `npm run deploy:prod` scripts to deploy to
-preprod and prod environments respectively.
-
-### Other Requirements
-
-For gulp-ruby-sass to enable `sourcemap` options, it requires Sass >= 3.3.0
+If you get an error that looks something like `Error: watch /home/csmall/code/polisClientParticipation/js ENOSPC` trying to run, this may be because your system has too many watches active. If you see this, try running `echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p` to increase the number of available watches on your system.

client-participation/css/bootstrap_config/variables.scss

@@ -346,8 +346,8 @@ $container-lg:                 $container-large-desktop !default;
 $navbar-height:                    70px !default;
 $navbar-margin-bottom:             $line-height-computed !default;
 $navbar-border-radius:             0 !default;
-$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
-$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
+$navbar-padding-horizontal:        floor(calc($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical:          (calc(($navbar-height - $line-height-computed) / 2)) !default;
 $navbar-collapse-max-height:       340px !default;
 
 $navbar-default-color:             #777 !default;

client-participation/css/polis/base/_mixins.scss

@@ -74,6 +74,6 @@
 // }
 @mixin font-size($sizeValue: 16px) {
   font-size: $sizeValue;
-  font-size: ($sizeValue / 10px) + rem;
+  font-size: calc($sizeValue / 10px) + rem;
 }
 // end font sizing

client-participation/css/polis_main.scss

@@ -1,5 +1,7 @@
 // Copyright (C) 2012-present, The Authors. This program is free software: you can redistribute it and/or  modify it under the terms of the GNU Affero General Public License, version 3, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+$FontAwesomePath:    '../font';
+
 .svgIcon {
   display: inline-block;
   position: relative;