The content length message was making the page jumpy and causing reflows in three ways. This commit addresses each of those ways: As the user scrolled --- The footer went from fixed to sticky and the spacing around the message changed. This change in spacing was needed so that the message looked right in both contexts. I think the best way to resolve this is to not use the sticky footer when editing text message or broadcast templates. On my 1440×900 screen I can fit a 5 fragment text message, plus the ‘will be charged as 5 text messages’ message, plus the save button. Our top 10 screen resolutions according to our analytics are: Position | Resolution | Percentage of users ---------|------------|-------------------- 1 | 1920x1080 | 27.37% 2 | 1280×720 | 11.07% 3 | 1366×768 | 8.88% 4 | 1536×864 | 5.79% 5 | 1440×900 | 4.52% 6 | 1600×900 | 3.71% 7 | 1280×1024 | 3.10% 8 | 1680×1050 | 2.42% 9 | 1920×1200 | 2.33% 10 | 2560×1440 | 1.99% When the page first loaded --- The message is empty so takes up no space, then the javascript fires and inserts the message, taking up a line of space. This is resolved by making the empty message take up space with a non-breaking space character. When the user first typed --- We previously didn’t show any message until the user started typing. This meant that, with the above fix, there was a larger than normal empty space between the textarea and the save button. This is resolved by always showing the message, even when the user hasn’t typed anything yet. *** These are design decisions which made sense when the message was displayed along side the button, but we’ve had to change now that the message is above the button.
notifications-admin
GOV.UK Notify admin application - https://www.notifications.service.gov.uk/
Features of this application
- Register and manage users
- Create and manage services
- Send batch emails and SMS by uploading a CSV
- Show history of notifications
First-time setup
1. Install Homebrew
Install Homebrew, a package manager for OSX:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
2. Make sure you're using correct language versions
Languages needed
Need to install node? Run:
brew install node
2.1. pyenv For Python version management
pyenv is a program to manage and swap between different versions of Python. To install:
brew install pyenv
And then follow the further installation instructions in https://github.com/pyenv/pyenv#installation to configure it.
2.2. n For Node version management
NPM is Node's package management tool. n is a tool for managing
different versions of Node. The following installs n and uses the long term support (LTS)
version of Node.
npm install -g n
n lts
3. Install NPM dependencies
npm install
npm rebuild node-sass
4. Install and use virtualenvwrapper (optional)
We suggest using a virtualenv to separate the python dependencies for this project from python dependencies for other projects.
Install virtualenvwrapper:
pip install virtualenvwrapper
Then follow the virtualenvwrapper installation instructions docs to configure virtualenvwrapper for your terminal.
Set up your virtualenv:
mkvirtualenv notifications-admin
If you need to specify a certain version of python you can do this using -p, for example:
mkvirtualenv -p ~/.pyenv/versions/3.6.3/bin/python notifications-admin
Activate your virtualenv:
workon notifications-admin
5. Install Python dependencies
Install dependencies and build the frontend assets:
./scripts/bootstrap.sh
Note: You may need versions of both Python 3 and Python 2 accessible to build the python dependencies. pyenv is great for that, and making both Python versions accessible can be done like so:
pyenv global 3.6.3 2.7.15
6. Create a local environment.sh file
In the root directory of the application, run:
echo "
export NOTIFY_ENVIRONMENT='development'
export FLASK_APP=application.py
export FLASK_DEBUG=1
export WERKZEUG_DEBUG_PIN=off
"> environment.sh
7. AWS credentials
Your aws credentials should be stored in a folder located at ~/.aws. Follow Amazon's instructions for storing them correctly
8. Running the application
In the root directory of the application, run:
./scripts/run_app.sh
Then visit localhost:6012
Updating application dependencies
requirements.txt file is generated from the requirements-app.txt in order to pin
versions of all nested dependencies. If requirements-app.txt has been changed (or
we want to update the unpinned nested dependencies) requirements.txt should be
regenerated with
make freeze-requirements
requirements.txt should be committed alongside requirements-app.txt changes.
Automatically rebuild the frontend assets
If you want the front end assets to re-compile on changes, leave this running in a separate terminal from the app
npm run watch
Working with static assets
When running locally static assets are served by Flask at http://localhost:6012/static/…
When running on preview, staging and production there’s a bit more to it:
