mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-20 14:29:51 -04:00
Revert "Replace govuk template with govuk frontend components"
This commit is contained in:
Tom Byers
@@ -53,7 +53,7 @@
|
||||
}
|
||||
Footer.prototype.buttonContent = {
|
||||
change: (fieldLabel) => `Choose ${fieldLabel}s`,
|
||||
done: (fieldLabel) => `Done<span class="govuk-visually-hidden"> choosing ${fieldLabel}s</span>`
|
||||
done: (fieldLabel) => `Done<span class="visuallyhidden"> choosing ${fieldLabel}s</span>`
|
||||
};
|
||||
Footer.prototype.getEl = function (expanded) {
|
||||
const buttonState = expanded ? 'done' : 'change';
|
||||
@@ -118,7 +118,7 @@
|
||||
this.$heading = $(`<h${headingLevel} class="heading-small">${this.legendText}</h${headingLevel}>`);
|
||||
this.$fieldset.before(this.$heading);
|
||||
|
||||
this.$fieldset.find('legend').addClass('govuk-visually-hidden');
|
||||
this.$fieldset.find('legend').addClass('visuallyhidden');
|
||||
};
|
||||
CollapsibleCheckboxes.prototype.expand = function(e) {
|
||||
if (e !== undefined) { e.preventDefault(); }
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var root = this;
|
||||
if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
|
||||
|
||||
GOVUK.addCookieMessage = function () {
|
||||
var message = document.getElementById('global-cookie-message'),
|
||||
hasCookieMessage = (message && GOVUK.cookie('seen_cookie_message') === null);
|
||||
|
||||
if (hasCookieMessage) {
|
||||
message.style.display = 'block';
|
||||
GOVUK.cookie('seen_cookie_message', 'yes', { days: 28 });
|
||||
}
|
||||
};
|
||||
}).call(this);
|
||||
@@ -1,62 +0,0 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var root = this;
|
||||
if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
|
||||
|
||||
/*
|
||||
Cookie methods
|
||||
==============
|
||||
|
||||
Usage:
|
||||
|
||||
Setting a cookie:
|
||||
GOVUK.cookie('hobnob', 'tasty', { days: 30 });
|
||||
|
||||
Reading a cookie:
|
||||
GOVUK.cookie('hobnob');
|
||||
|
||||
Deleting a cookie:
|
||||
GOVUK.cookie('hobnob', null);
|
||||
*/
|
||||
GOVUK.cookie = function (name, value, options) {
|
||||
if(typeof value !== 'undefined'){
|
||||
if(value === false || value === null) {
|
||||
return GOVUK.setCookie(name, '', { days: -1 });
|
||||
} else {
|
||||
return GOVUK.setCookie(name, value, options);
|
||||
}
|
||||
} else {
|
||||
return GOVUK.getCookie(name);
|
||||
}
|
||||
};
|
||||
GOVUK.setCookie = function (name, value, options) {
|
||||
if(typeof options === 'undefined') {
|
||||
options = {};
|
||||
}
|
||||
var cookieString = name + "=" + value + "; path=/";
|
||||
if (options.days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (options.days * 24 * 60 * 60 * 1000));
|
||||
cookieString = cookieString + "; expires=" + date.toGMTString();
|
||||
}
|
||||
if (document.location.protocol == 'https:'){
|
||||
cookieString = cookieString + "; Secure";
|
||||
}
|
||||
document.cookie = cookieString;
|
||||
};
|
||||
GOVUK.getCookie = function (name) {
|
||||
var nameEQ = name + "=";
|
||||
var cookies = document.cookie.split(';');
|
||||
for(var i = 0, len = cookies.length; i < len; i++) {
|
||||
var cookie = cookies[i];
|
||||
while (cookie.charAt(0) == ' ') {
|
||||
cookie = cookie.substring(1, cookie.length);
|
||||
}
|
||||
if (cookie.indexOf(nameEQ) === 0) {
|
||||
return decodeURIComponent(cookie.substring(nameEQ.length));
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
}).call(this);
|
||||
@@ -28,7 +28,7 @@
|
||||
ListEntry.prototype.entryTemplate = Hogan.compile(
|
||||
'<div class="list-entry">' +
|
||||
'<label for="{{{id}}}" class="text-box-number-label">' +
|
||||
'<span class="govuk-visually-hidden">{{listItemName}} number </span>{{number}}.' +
|
||||
'<span class="visuallyhidden">{{listItemName}} number </span>{{number}}.' +
|
||||
'</label>' +
|
||||
'<input' +
|
||||
' name="{{name}}-{{index}}"' +
|
||||
@@ -38,7 +38,7 @@
|
||||
'/>' +
|
||||
'{{#button}}' +
|
||||
'<button type="button" class="button-secondary list-entry-remove">' +
|
||||
'Remove<span class="govuk-visually-hidden"> {{listItemName}} number {{number}}</span>' +
|
||||
'Remove<span class="visuallyhidden"> {{listItemName}} number {{number}}</span>' +
|
||||
'</button>' +
|
||||
'{{/button}}' +
|
||||
'</div>'
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
window.GOVUK.Frontend.initAll();
|
||||
|
||||
$(() => GOVUK.addCookieMessage());
|
||||
|
||||
$(() => $("time.timeago").timeago());
|
||||
|
||||
$(() => GOVUK.stickAtTopWhenScrolling.init());
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
// JS Module used to combine all the JS modules used in the application into a single entry point,
|
||||
// a bit like `app/__init__` in the Flask app.
|
||||
//
|
||||
// When processed by a bundler, this is turned into a Immediately Invoked Function Expression (IIFE)
|
||||
// The IIFE format allows it to run in browsers that don't support JS Modules.
|
||||
//
|
||||
// Exported items will be added to the window.GOVUK namespace.
|
||||
// For example, `export { Frontend }` will assign `Frontend` to `window.Frontend`
|
||||
import Header from 'govuk-frontend/components/header/header';
|
||||
|
||||
// Copy of the initAll function from https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/all.js
|
||||
// except it only includes, and initialises, the components used by this application.
|
||||
function initAll (options) {
|
||||
// Set the options to an empty object by default if no options are passed.
|
||||
options = typeof options !== 'undefined' ? options : {}
|
||||
|
||||
// Allow the user to initialise GOV.UK Frontend in only certain sections of the page
|
||||
// Defaults to the entire document if nothing is set.
|
||||
var scope = typeof options.scope !== 'undefined' ? options.scope : document
|
||||
|
||||
// Find first header module to enhance.
|
||||
var $toggleButton = scope.querySelector('[data-module="header"]')
|
||||
new Header($toggleButton).init()
|
||||
}
|
||||
|
||||
// Create separate namespace for GOVUK Frontend.
|
||||
var Frontend = {
|
||||
"Header": Header,
|
||||
"initAll": initAll
|
||||
}
|
||||
|
||||
export {
|
||||
Frontend
|
||||
}
|
||||
@@ -127,7 +127,7 @@
|
||||
});
|
||||
|
||||
if (opts.hasOwnProperty('nonvisualText')) {
|
||||
$btn.append(`<span class="govuk-visually-hidden"> ${opts.nonvisualText}</span>`);
|
||||
$btn.append(`<span class="visuallyhidden"> ${opts.nonvisualText}</span>`);
|
||||
}
|
||||
|
||||
return $btn;
|
||||
|
||||
@@ -1,4 +1,62 @@
|
||||
// Extra CSS overlaying elements
|
||||
|
||||
#global-header-bar {
|
||||
background-color: $govuk-blue;
|
||||
}
|
||||
|
||||
#global-header,
|
||||
#global-header.with-proposition {
|
||||
|
||||
#logo {
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
#product-name {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
.header-global {
|
||||
.header-logo {
|
||||
|
||||
@include media(desktop) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-proposition {
|
||||
#proposition-links {
|
||||
li {
|
||||
padding: 0 0 0 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include media(desktop) {
|
||||
#proposition-menu {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
&:visited {
|
||||
color: $link-colour;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-1-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
.notify-cookie-message {
|
||||
@include govuk-font($size: 16);
|
||||
padding: govuk-spacing(3) 0;
|
||||
|
||||
.js-enabled & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
// needed for IE10 desktop snap mode: http://menacingcloud.com/?c=cssViewportOrMetaTag
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.js-enabled .js-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// To be removed when all search inputs use the GOV.UK Frontend text input component:
|
||||
// https://design-system.service.gov.uk/components/text-input/
|
||||
/*
|
||||
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: searchfield-cancel-button;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// To be removed when all links follow the GOV.UK Frontend conventions:
|
||||
// https://design-system.service.gov.uk/styles/typography/#links
|
||||
a {
|
||||
&:link {
|
||||
color: $link-colour;
|
||||
}
|
||||
|
||||
&:visited {
|
||||
color: $link-visited-colour;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-colour;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $link-active-colour;
|
||||
}
|
||||
}
|
||||
|
||||
// Each selector, and then the whole block when only one remains, to be removed when the
|
||||
// element comes from the corresponding GOV.UK Frontend component:
|
||||
// - https://design-system.service.gov.uk/components/text-input/
|
||||
// - https://design-system.service.gov.uk/components/textarea/
|
||||
// - https://design-system.service.gov.uk/components/select/
|
||||
// - https://design-system.service.gov.uk/components/button/
|
||||
|
||||
// Global styles for form controls
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus,
|
||||
button:focus {
|
||||
outline: 3px solid $focus-colour;
|
||||
outline-offset: 0;
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
// Version of node_modules/govuk-frontend/components/all.scss specific to Notify
|
||||
// Included to allow us to only include the components we need
|
||||
// All imports come from node_modules/govuk-frontend
|
||||
|
||||
// set asset URL root to match that of application
|
||||
$govuk-assets-path: "/static/";
|
||||
|
||||
@import "settings/all";
|
||||
@import "tools/all";
|
||||
@import "helpers/all";
|
||||
|
||||
@import "core/all";
|
||||
@import "objects/all";
|
||||
|
||||
// section replacing @import 'components/all', specifying which components to include
|
||||
@import 'components/skip-link/_skip-link';
|
||||
@import 'components/header/_header';
|
||||
@import 'components/footer/_footer';
|
||||
|
||||
@import "utilities/all";
|
||||
@import "overrides/all";
|
||||
|
||||
// Styles extending those from GOV.UK Frontend
|
||||
@import './extensions';
|
||||
|
||||
// Styles for GOV.UK Frontend components specific to this application
|
||||
@import './overrides';
|
||||
@@ -1,9 +0,0 @@
|
||||
// Extends footer column styles to allow 4 columns
|
||||
@include mq ($from: desktop) {
|
||||
.govuk-footer__list--columns-4 {
|
||||
// TODO: Move support for legacy properties to something like Post-CSS's auto-prefixer
|
||||
-webkit-column-count: 4;
|
||||
-moz-column-count: 4;
|
||||
column-count: 4;
|
||||
}
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
// Overrides for certain GOV.UK Frontend styles to make its components match this application's design
|
||||
|
||||
// Notify's header navigation aligns to the right
|
||||
.govuk-header__navigation {
|
||||
text-align: right;
|
||||
|
||||
// reset the alignment of each item to left-to-right
|
||||
.govuk-header__navigation-item {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// The GOV.UK Frontend header component wraps content that is `position: relative`
|
||||
// This changes its z-index position, putting it above the `<main>` section
|
||||
// We need the `<main>` section to be above it, like the default order, to hide the theme colour
|
||||
// bar on full-width pages
|
||||
.govuk-main-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Additional padding-bottom override, following the GOV.UK Frontend spacing scale:
|
||||
// https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale
|
||||
.govuk-\!-padding-bottom-12 {
|
||||
padding-bottom: 70px;
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-footer__navigation {
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap
|
||||
}
|
||||
|
||||
.govuk-footer__section {
|
||||
-webkit-flex-basis: 200px;
|
||||
-ms-flex-preferred-size: 200px;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
@include govuk-media-query($from: tablet) {
|
||||
|
||||
.govuk-footer__navigation {
|
||||
-webkit-flex-wrap: nowrap;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap
|
||||
}
|
||||
|
||||
.govuk-footer__section {
|
||||
-webkit-flex-basis: 200px;
|
||||
-ms-flex-preferred-size: 200px;
|
||||
flex-basis: 200px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -16,9 +16,6 @@ $path: '/static/images/';
|
||||
// Dependencies from GOVU.UK Frontend Toolkit, rewritten for this application
|
||||
@import 'url-helpers';
|
||||
|
||||
// Specific to this application, needs to go at the top of the cascade
|
||||
@import 'globals';
|
||||
|
||||
// Dependencies from GOV.UK Elements
|
||||
// https://github.com/alphagov/govuk_elements
|
||||
@import 'elements/helpers';
|
||||
@@ -34,12 +31,9 @@ $path: '/static/images/';
|
||||
@import 'elements/panels';
|
||||
@import 'elements/tables';
|
||||
|
||||
// Dependencies from GOV.UK Frontend, packaged to be specific to this application
|
||||
@import './govuk-frontend/all';
|
||||
|
||||
// Specific to this application
|
||||
@import 'grids';
|
||||
@import 'components/cookie-message';
|
||||
@import 'components/site-footer';
|
||||
@import 'components/placeholder';
|
||||
@import 'components/sms-message';
|
||||
|
||||
@@ -1,85 +0,0 @@
|
||||
// sass-lint:disable no-important
|
||||
// set asset URL root to match that of application
|
||||
$govuk-assets-path: "/static/";
|
||||
|
||||
@import "settings/all";
|
||||
@import "tools/all";
|
||||
@import "helpers/all";
|
||||
|
||||
@import "core/all";
|
||||
@import "objects/all";
|
||||
|
||||
* {
|
||||
background: transparent;
|
||||
color: black;
|
||||
text-shadow: none;
|
||||
filter: none;
|
||||
-ms-filter: none;
|
||||
}
|
||||
|
||||
body {
|
||||
@include govuk-font($size: 14);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
a[href^="/"]:after,
|
||||
a[href^="http://"]:after,
|
||||
a[href^="https://"]:after {
|
||||
content: " (" attr(href) ")";
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
a[href^="javascript:"]:after,
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
select {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.govuk-header {
|
||||
|
||||
.govuk-header__logo {
|
||||
@include govuk-font($size: 19);
|
||||
text-rendering: optimizeLegibility;
|
||||
|
||||
a {
|
||||
&,
|
||||
&:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.govuk-visually-hidden,
|
||||
.govuk-visually-hidden-focusable,
|
||||
.notify-cookie-message,
|
||||
.govuk-skip-link,
|
||||
.govuk-footer {
|
||||
display: none !important;
|
||||
}
|
||||
Reference in New Issue
Block a user