From dd7ee28de6baa2eed172177818722c5cedae3a1a Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Thu, 8 Aug 2024 16:07:47 +0100 Subject: [PATCH 1/2] Fix broken icons - fixes broken icons across the site - icons are glyphicons from bootstrap, which are included as part of that dependency and can't be directly modified - problem is caused by the compiled Sass not being able to find and download the icon font files e.g. https://content-tagger.publishing.service.gov.uk/assets/content-tagger/bootstrap/glyphicons-halflings-regular.eot - this appears to be because the syntax in bootstrap for defining these files uses `url(font-path(path))` which doesn't seem to work anymore, could be related to the recent dart-sass migration but unclear - as a workaround have copied the font-face declaration from the bootstrap CSS into our own, and replaced the above with `url(path)`, which works - this occurs after the bootstrap declaration, overriding it and allowing the icon font file to be found and loaded correctly --- app/assets/stylesheets/application.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 9a30cfa7d..b98867740 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -86,3 +86,9 @@ .nav.nav-tabs { margin-bottom: 20px; } + +@font-face { + font-family: "Glyphicons Halflings"; + src: url("bootstrap/glyphicons-halflings-regular.eot"); + src: url("bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),url("bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),url("bootstrap/glyphicons-halflings-regular.woff") format("woff"),url("bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),url("bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg") +} From 74b2ea69ec3bad9a5903649a2a4a9ba1aec13d4c Mon Sep 17 00:00:00 2001 From: Andy Sellick Date: Fri, 9 Aug 2024 09:33:39 +0100 Subject: [PATCH 2/2] Fix missing remove icons - these icons appear on the edit a page page and should be on the left of things that can be added or removed from a page - can't be fixed by the previous change as this isn't a glyphicon, for some reason, is part of a dependency so can't directly modify the now not-compiling-in-dart-sass image page - easiest thing is to switch to a glyphicon instead - adding some custom styles to position it properly, have to make it this specific as there's an override to float all glyphicons in this element to the right, where there's already an icon - also adding a JS class for the JavaScript hook --- .../javascripts/views/related-content-tagger.js | 2 +- app/assets/stylesheets/application.scss | 15 +++++++++++++++ app/views/taggings/_tagging_entry.html.erb | 2 +- 3 files changed, 17 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/views/related-content-tagger.js b/app/assets/javascripts/views/related-content-tagger.js index b1dfd15f3..1dc36b08d 100644 --- a/app/assets/javascripts/views/related-content-tagger.js +++ b/app/assets/javascripts/views/related-content-tagger.js @@ -10,7 +10,7 @@ var $templateTag = $fieldset.find('.related-item-template > li').first() var $fieldErrors = $fieldset.find('.related-item-error-message') - $fieldset.on('click', '.select2-search-choice-close', removeItem) + $fieldset.on('click', '.js-remove-related', removeItem) $basePathInput.on('keypress', lookUpBasePathOnEnterPress) $lookupButton.on('click', lookUpBasePath) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index b98867740..30b5a4199 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -92,3 +92,18 @@ src: url("bootstrap/glyphicons-halflings-regular.eot"); src: url("bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),url("bootstrap/glyphicons-halflings-regular.woff2") format("woff2"),url("bootstrap/glyphicons-halflings-regular.woff") format("woff"),url("bootstrap/glyphicons-halflings-regular.ttf") format("truetype"),url("bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg") } + +.sortable-list .glyphicon.remove-icon { + float: left; + margin-left: -20px; + margin-right: 10px; +} + +// overrides for select2 as it doesn't compile properly in dart-sass, uses image-url +.select2-container .select2-choice .select2-arrow { + background: url("select2.png") no-repeat 0 1px; +} + +.select2-search-choice-close { + background: url("select2.png") right top no-repeat; +} diff --git a/app/views/taggings/_tagging_entry.html.erb b/app/views/taggings/_tagging_entry.html.erb index 9ef5aebdb..9e990327a 100644 --- a/app/views/taggings/_tagging_entry.html.erb +++ b/app/views/taggings/_tagging_entry.html.erb @@ -7,7 +7,7 @@ <%= tagging_update.title_for_related_link(base_path) %> (<%= base_path %>) - +