From a268ef25b4ac1af4afeebe5b750febf6829c3179 Mon Sep 17 00:00:00 2001 From: Beth Skurrie Date: Sun, 14 Nov 2021 17:43:19 +1100 Subject: [PATCH] fix: load images from the correct path when the Pact Broker application is run from a non root context --- .../api/renderers/html_pact_renderer.rb | 4 ++++ .../ui/views/index/_css_and_js.haml | 1 + lib/pact_broker/ui/views/layouts/main.haml | 4 ++++ lib/pact_broker/ui/views/matrix/show.haml | 1 + public/javascripts/set-css-asset-base-url.js | 23 +++++++++++++++++++ public/stylesheets/index.css | 19 +++++++++++---- public/stylesheets/matrix.css | 7 +++++- public/stylesheets/pact.css | 7 +++++- 8 files changed, 59 insertions(+), 7 deletions(-) create mode 100644 public/javascripts/set-css-asset-base-url.js diff --git a/lib/pact_broker/api/renderers/html_pact_renderer.rb b/lib/pact_broker/api/renderers/html_pact_renderer.rb index 6d8607cee..87c38f571 100644 --- a/lib/pact_broker/api/renderers/html_pact_renderer.rb +++ b/lib/pact_broker/api/renderers/html_pact_renderer.rb @@ -44,6 +44,10 @@ def head + + diff --git a/lib/pact_broker/ui/views/index/_css_and_js.haml b/lib/pact_broker/ui/views/index/_css_and_js.haml index 07cba370f..870995982 100644 --- a/lib/pact_broker/ui/views/index/_css_and_js.haml +++ b/lib/pact_broker/ui/views/index/_css_and_js.haml @@ -9,3 +9,4 @@ %script{type: 'text/javascript', src:"#{base_url}/javascripts/index.js?v=#{PactBroker::VERSION}"} %script{type: 'text/javascript', src:"#{base_url}/javascripts/clipboard.js?v=#{PactBroker::VERSION}"} %script{type: 'text/javascript', src:"#{base_url}/javascripts/jquery-confirm.min.js?v=#{PactBroker::VERSION}"} +%script{type: 'text/javascript', src:"#{base_url}/javascripts/set-css-asset-base-url.js?v=#{PactBroker::VERSION}"} diff --git a/lib/pact_broker/ui/views/layouts/main.haml b/lib/pact_broker/ui/views/layouts/main.haml index ceec28fc0..a485980b8 100644 --- a/lib/pact_broker/ui/views/layouts/main.haml +++ b/lib/pact_broker/ui/views/layouts/main.haml @@ -8,4 +8,8 @@ %link{rel: 'stylesheet', href: "#{base_url}/css/bootstrap.min.css?v=#{PactBroker::VERSION}"} %script{type: 'text/javascript', src:"#{base_url}/javascripts/jquery-3.5.1.min.js?v=#{PactBroker::VERSION}"} %script{type: 'text/javascript', src:"#{base_url}/js/bootstrap.bundle.min.js?v=#{PactBroker::VERSION}"} + + :javascript + const BASE_URL = '#{base_url}'; + != yield diff --git a/lib/pact_broker/ui/views/matrix/show.haml b/lib/pact_broker/ui/views/matrix/show.haml index fac34cca8..dfc037a43 100644 --- a/lib/pact_broker/ui/views/matrix/show.haml +++ b/lib/pact_broker/ui/views/matrix/show.haml @@ -9,6 +9,7 @@ %script{type: 'text/javascript', src: "#{base_url}/javascripts/matrix.js?v=#{PactBroker::VERSION}"} %script{type: 'text/javascript', src: "#{base_url}/javascripts/clipboard.js?v=#{PactBroker::VERSION}"} %script{type: 'text/javascript', src: "#{base_url}/js/bootstrap.bundle.min.js?v=#{PactBroker::VERSION}"} + %script{type: 'text/javascript', src: "#{base_url}/javascripts/set-css-asset-base-url.js?v=#{PactBroker::VERSION}"} .container %nav{'aria-label': 'breadcrumb'} diff --git a/public/javascripts/set-css-asset-base-url.js b/public/javascripts/set-css-asset-base-url.js new file mode 100644 index 000000000..488276cfc --- /dev/null +++ b/public/javascripts/set-css-asset-base-url.js @@ -0,0 +1,23 @@ +/* + Set the base URL of the background images + so they load from the right path when the base + URL of the app is not / + Must be loaded after the css but before any of the elements have started to render. +*/ + +function setCssAssetBaseUrl(base_url, varName) { + const urlVar = getComputedStyle(document.documentElement).getPropertyValue(varName) + if (urlVar) { + const absoluteUrlVar = urlVar.replace(/\//, (base_url + '/')); + const root = document.querySelector(':root'); + root.style.setProperty(varName, absoluteUrlVar); + } +} + +setCssAssetBaseUrl(BASE_URL, '--kebab-url'); +setCssAssetBaseUrl(BASE_URL, '--pact-kebab-url'); +setCssAssetBaseUrl(BASE_URL, '--clock-url'); +setCssAssetBaseUrl(BASE_URL, '--arrow-switch-url'); +setCssAssetBaseUrl(BASE_URL, '--alert-url'); +setCssAssetBaseUrl(BASE_URL, '--copy-url'); +setCssAssetBaseUrl(BASE_URL, '--check-url'); diff --git a/public/stylesheets/index.css b/public/stylesheets/index.css index f6f60b370..f3cc0b8d6 100644 --- a/public/stylesheets/index.css +++ b/public/stylesheets/index.css @@ -1,3 +1,12 @@ +:root { + /* See public/javascripts/set-css-asset-base-url.js */ + --kebab-url: url('/images/kebab-horizontal.svg'); + --arrow-switch-url: url('/images/arrow-switch.svg'); + --alert-url: url('/images/alert.svg'); + --copy-url: url('/images/copy.svg'); + --check-url: url('/images/check.svg'); +} + .table-striped>tbody>tr>td.pact, .table-striped>thead>tr>th.pact { border-left: none; border-right: none; @@ -173,7 +182,7 @@ span.integration-settings { } span.kebab-horizontal { - background-image: url('/images/kebab-horizontal.svg'); + background-image: var(--kebab-url); background-repeat: no-repeat; display:block; position: relative; @@ -183,7 +192,7 @@ span.kebab-horizontal { } span.sort-icon { - background-image: url('/images/arrow-switch.svg'); + background-image: var(--arrow-switch-url); background-repeat: no-repeat; display:inline-block; position: relative; @@ -194,7 +203,7 @@ span.sort-icon { } span.warning-icon { - background-image: url('/images/alert.svg'); + background-image: var(--alert-url); background-repeat: no-repeat; display:inline-block; position: relative; @@ -213,7 +222,7 @@ span.warning-icon { } span.copy-icon { - background-image: url('/images/copy.svg'); + background-image: var(--copy-url); background-size: 16px 16px; background-repeat: no-repeat; display:block; @@ -224,7 +233,7 @@ span.copy-icon { } span.copy-success-icon { - background-image: url('/images/check.svg'); + background-image: var(--check-url); background-size: 16px 16px; background-repeat: no-repeat; display:block; diff --git a/public/stylesheets/matrix.css b/public/stylesheets/matrix.css index dce3da347..140291dc8 100644 --- a/public/stylesheets/matrix.css +++ b/public/stylesheets/matrix.css @@ -1,3 +1,8 @@ +:root { + /* See public/javascripts/set-css-asset-base-url.js */ + --clock-url: url('/images/clock.svg'); +} + div { /*border: 1px solid red;*/ } @@ -33,7 +38,7 @@ div.tag, div.version { span.pre-verified-icon { color: #337ab7; - background-image: url('/images/clock.svg'); + background-image: var(--clock-url); background-repeat: no-repeat; display:inline-block; position: relative; diff --git a/public/stylesheets/pact.css b/public/stylesheets/pact.css index 2d8e400f8..12c634f59 100644 --- a/public/stylesheets/pact.css +++ b/public/stylesheets/pact.css @@ -1,3 +1,8 @@ +:root { + /* See public/javascripts/set-css-asset-base-url.js */ + --pact-kebab-url: url('/images/kebab-horizontal.svg'); +} + div.pact-metadata { margin-top: 40px; float: right; @@ -30,7 +35,7 @@ div.pact-badge-markdown { } span.kebab-horizontal { - background-image: url('/images/kebab-horizontal.svg'); + background-image: var(--pact-kebab-url); background-repeat: no-repeat; display:block; position: relative;