From b1012129b5f38f6a9331591db89549aa64f2696a Mon Sep 17 00:00:00 2001 From: left23 Date: Thu, 5 May 2022 14:29:26 +0200 Subject: [PATCH 01/36] RW-482 variables from sass, add brand stylesheet to global --- .../common_design_subtheme.libraries.yml | 2 +- .../common_design_subtheme/css/brand.css | 35 +++++++++++++++++++ 2 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 html/themes/custom/common_design_subtheme/css/brand.css diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index 0c2d0a22c..6433fa381 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -1,7 +1,7 @@ global-styling: css: theme: - css/styles.css: {} + css/brand.css: {} dependencies: - common_design_subtheme/rw-external-links - common_design_subtheme/rw-form diff --git a/html/themes/custom/common_design_subtheme/css/brand.css b/html/themes/custom/common_design_subtheme/css/brand.css new file mode 100644 index 000000000..f4bac3ca8 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/css/brand.css @@ -0,0 +1,35 @@ +:root { + /** + * Site-specific brand colors + * + * Set these variables and the CD Header/Footer will re-color to your brand. + * + * In the future the Component library will adhere to these vars as well. + */ + --brand-primary: var(--cd-reliefweb-brand-blue--dark); + --brand-primary--light: var(--cd-blue--bright); + --brand-primary--dark: #04415a;; + --brand-highlight: var(--cd-reliefweb-brand-red--dark); + --brand-grey: var(--cd-reliefweb-brand-grey--light); + --brand-logo-width: 140px; + + --cd-reliefweb-brand-red: #f65c51; + + /* Color palette */ + --cd-reliefweb-brand-blue: #0988bb; + --cd-reliefweb-brand-red: #f65c51; + --cd-reliefweb-brand-blue--dark: #055372; + --cd-reliefweb-brand-red--dark: #eb1405; + --cd-reliefweb-brand-grey--dark: #2e3436; + /* #2e3436 with 0.85 opacity on white. */ + --cd-reliefweb-brand-grey--mid: #4d5254; + --cd-reliefweb-brand-grey--light: #e6ecef; + + /* RGB variables to use with rgba() */ + --cd-rgb-reliefweb-brand-blue: 9, 136, 187; + --cd-rgb-reliefweb-brand-red: 246, 92, 81; + --cd-rgb-reliefweb-brand-blue--dark: 4, 82, 112; + --cd-rgb-reliefweb-brand-red--dark: 235, 20, 5; + --cd-rgb-reliefweb-brand-grey--dark: 46, 52, 54; + --cd-rgb-reliefweb-brand-grey--light: 230, 236, 239; +} \ No newline at end of file From 52d0f22bc93374734040fd978960d6bc7a05d365 Mon Sep 17 00:00:00 2001 From: left23 Date: Thu, 5 May 2022 16:54:33 +0200 Subject: [PATCH 02/36] RW-482 component for rw cd header footer styles --- .../common_design_subtheme.libraries.yml | 15 ++++++- .../rw-cd-header-footer/cd-footer.css | 43 +++++++++++++++++++ .../rw-cd-header-footer/cd-header.css | 3 ++ .../cd-language-switcher.css | 7 +++ .../rw-cd-header-footer/cd-logo.css | 3 ++ .../rw-cd-header-footer/cd-ocha.css | 3 ++ 6 files changed, 72 insertions(+), 2 deletions(-) create mode 100644 html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-footer.css create mode 100644 html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-header.css create mode 100644 html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-language-switcher.css create mode 100644 html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-logo.css create mode 100644 html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-ocha.css diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index 6433fa381..b8ac22cb6 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -1,8 +1,11 @@ global-styling: css: theme: + css/styles.css: {} css/brand.css: {} + css/typography.css: {} dependencies: + - common_design_subtheme/rw-cd-header-footer - common_design_subtheme/rw-external-links - common_design_subtheme/rw-form - common_design_subtheme/rw-site-slogan @@ -403,6 +406,15 @@ rw-view-more: - common_design_subtheme/rw-icons # CD components extended +rw-cd-header-footer: + css: + theme: + components/rw-cd-header-footer/cd-footer.css: {} + components/rw-cd-header-footer/cd-header.css: {} + components/rw-cd-header-footer/cd-language-switcher.css: {} + components/rw-cd-header-footer/cd-logo.css: {} + components/rw-cd-header-footer/cd-ocha.css: {} + cd-block-title: css: theme: @@ -411,5 +423,4 @@ cd-block-title: cd-button: css: theme: - components/cd-button/cd-button.css: {} - + components/cd-button/cd-button.css: {} \ No newline at end of file diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-footer.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-footer.css new file mode 100644 index 000000000..ebcf19fcc --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-footer.css @@ -0,0 +1,43 @@ +.cd-footer a:focus { + outline: 3px solid var(--cd-reliefweb-brand-blue); +} + +/** + * Copyright. + * + * RelieWeb's copyright notice. + */ +.cd-footer-copyright { + display: block; + margin-top: 0; + text-align: right; + color: white; + font-size: 12px; + font-weight: lighter; +} +.cd-footer-copyright p { + margin: 0; +} +.cd-footer-copyright a { + display: inline-block; + overflow: hidden; + width: 140px; + height: 60px; + margin: 0 0 -4px 0; + /* The padding combined with the overflow: hidden, hides the text. */ + padding: 0 0 0 140px; + background: url("../../img/logos/rw-logo-sprite.png") 0 -60px no-repeat; + background: rgba(0, 0, 0, 0) url("../../img/logos/rw-logo-sprite.svg") 0 -60px no-repeat; +} +.cd-footer-copyright a:hover, +.cd-footer-copyright a:active, +.cd-footer-copyright a:focus { + opacity: 0.8; +} + +@media all and (max-width: 1023px) { + .cd-footer-copyright { + width: 100%; + text-align: center; + } +} diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-header.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-header.css new file mode 100644 index 000000000..44f9afe0b --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-header.css @@ -0,0 +1,3 @@ +.cd-header button:focus { + outline: 3px solid var(--cd-reliefweb-brand-blue); +} diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-language-switcher.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-language-switcher.css new file mode 100644 index 000000000..7860fec22 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-language-switcher.css @@ -0,0 +1,7 @@ +.cd-language-switcher__btn:focus { + outline: 3px solid var(--cd-reliefweb-brand-blue); +} + +.cd-user-menu__dropdown li a:focus { + outline: 3px solid var(--cd-reliefweb-brand-blue); +} diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-logo.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-logo.css new file mode 100644 index 000000000..0c2c5af57 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-logo.css @@ -0,0 +1,3 @@ +.cd-site-logo:focus { + outline: 3px solid var(--cd-reliefweb-brand-blue); +} diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-ocha.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-ocha.css new file mode 100644 index 000000000..f32e3c5bf --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-ocha.css @@ -0,0 +1,3 @@ +.cd-ocha-dropdown__link a:focus { + outline: 3px solid var(--cd-reliefweb-brand-blue); +} From a8348370f2ffed09012510626f3ab5110419d500 Mon Sep 17 00:00:00 2001 From: left23 Date: Thu, 5 May 2022 17:08:25 +0200 Subject: [PATCH 03/36] RW-482 remove uneeded sass partials in favour of base theme, retain those with mixins, compile css --- .../common_design_subtheme/css/styles.css | 2 +- .../sass/base/_typography.scss | 185 ------------------ .../sass/cd/_cd-variables.scss | 1 - .../common_design_subtheme/sass/cd/_cd.scss | 11 -- .../sass/cd/cd-footer/_cd-footer.scss | 53 ----- .../sass/cd/cd-footer/_cd-soft-footer.scss | 15 -- .../sass/cd/cd-header/_cd-dropdowns.scss | 15 +- .../sass/cd/cd-header/_cd-header.scss | 21 -- .../cd/cd-header/_cd-language-switcher.scss | 15 -- .../sass/cd/cd-header/_cd-logo.scss | 23 --- .../sass/cd/cd-header/_cd-menu--main.scss | 6 - .../sass/cd/cd-header/_cd-nav.scss | 95 --------- .../sass/cd/cd-header/_cd-ocha.scss | 10 - .../sass/cd/cd-header/_cd-search--inline.scss | 63 ------ .../sass/cd/cd-header/_cd-search.scss | 41 ---- .../sass/cd/cd-header/_cd-user-menu.scss | 83 +++----- .../common_design_subtheme/sass/styles.scss | 9 - 17 files changed, 27 insertions(+), 621 deletions(-) delete mode 100644 html/themes/custom/common_design_subtheme/sass/base/_typography.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-footer/_cd-footer.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-footer/_cd-soft-footer.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-header.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-language-switcher.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-logo.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-menu--main.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-nav.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-ocha.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-search--inline.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-search.scss diff --git a/html/themes/custom/common_design_subtheme/css/styles.css b/html/themes/custom/common_design_subtheme/css/styles.css index 2c256cc5a..7f2cdc3e5 100644 --- a/html/themes/custom/common_design_subtheme/css/styles.css +++ b/html/themes/custom/common_design_subtheme/css/styles.css @@ -1 +1 @@ -@import"https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400%3B500%3B700&display=swap";@import"https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,300%3B0,400%3B0,500%3B0,700%3B0,900%3B1,400%3B1,700&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400%3B700&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400%3B700&display=swap";:root{--cd-reliefweb-brand-blue: #0988bb;--cd-reliefweb-brand-red: #f65c51;--cd-reliefweb-brand-blue--dark: #055372;--cd-reliefweb-brand-red--dark: #eb1405;--cd-reliefweb-brand-grey--dark: #2e3436;--cd-reliefweb-brand-grey--mid: #4d5254;--cd-reliefweb-brand-grey--light: #e6ecef;--cd-rgb-reliefweb-brand-blue: 9, 136, 187;--cd-rgb-reliefweb-brand-red: 246, 92, 81;--cd-rgb-reliefweb-brand-blue--dark: 4, 82, 112;--cd-rgb-reliefweb-brand-red--dark: 235, 20, 5;--cd-rgb-reliefweb-brand-grey--dark: 46, 52, 54;--cd-rgb-reliefweb-brand-grey--light: 230, 236, 239;--cd-reliefweb-grey--light: #d9d9d9;--cd-reliefweb-grey--light--bg: rgba(217, 217, 217, 0.2);--cd-reliefweb-orange: #f49e2c;--cd-reliefweb-orange--bg: rgba(244, 158, 44, 0.2);--cd-reliefweb-blue: #076d96;--cd-reliefweb-blue--bg: rgba(7, 109, 150, 0.2);--cd-reliefweb-green: #88bb09;--cd-reliefweb-green--bg: rgba(136, 187, 9, 0.2);--cd-reliefweb-red: #da190b;--cd-reliefweb-red--bg: rgba(218, 25, 11, 0.2);--cd-reliefweb-purple: #9509bb;--cd-reliefweb-purple--bg: rgba(149, 9, 187, 0.2);--cd-reliefweb-grey: #4b4b4b;--cd-reliefweb-grey--bg: rgba(75, 75, 75, 0.2);--cd-reliefweb-brown: #8f5507;--cd-reliefweb-brown--bg: rgba(143, 85, 7, 0.2);--cd-reliefweb-yellow: #f5cb2f;--cd-reliefweb-yellow--bg: rgba(245, 203, 47, 0.2);--cd-reliefweb-cyan: #56c9f7;--cd-reliefweb-cyan--bg: rgba(86, 201, 247, 0.2);--cd-reliefweb-orange--alert: #eb8705;--cd-reliefweb-pink: rgba(246, 92, 81, 0.2);--cd-reliefweb-grey--disable: rgba(230, 236, 239, 0.5);--cd-ocha-blue: #1f69b3;--cd-blue--dark: #144372;--cd-blue--bright: #82b5e9;--cd-blue--light: #d4e5f7;--cd-highlight-red: #e56a54;--cd-contrast-red: #e00000;--cd-white: #fff;--cd-grey--light: #f2f2f2;--cd-grey--mid: #595959;--cd-grey--dark: #4a4a4a;--cd-default-text-color: var(--cd-grey--dark);--cd-black: #000;--cd-blue-grey: #e6ecf1;--cd-blue-grey--dark: #d3dde5;--cd-blue-grey--light: #ebf0f4;--cd-rgb-ocha-blue: 2, 108, 182;--cd-rgb-grey--mid: 89, 89, 89;--cd-rgb-grey--dark: 74, 74, 74;--cd-rgb-highlight-red: 229, 106, 84;--cd-rgb-blue-grey--dark: 211, 221, 229;--cd-max-content-width: 820px;--cd-max-body-width: 1400px;--cd-max-width: 1220px;--cd-container-padding: 0.75rem;--cd-container-padding-tablet: 1.5rem;--cd-container-padding-xlarge: 2.5rem;--cd-flow-space: 1rem;--cd-bumper-space: 1rem;--cd-footer-row-number: 5;--cd-red: #cd3a1f;--cd-red--light: #f8d8d3;--cd-orange: #db7b18;--cd-orange--light: #fae6d1;--cd-yellow: #d5de26;--cd-yellow--light: #f7f8d3;--cd-green: #7fb92f;--cd-green--light: #e8f5d6;--cd-font-size--tiny: 0.75rem;--cd-font-size--small: 0.875rem;--cd-font-size--base: 1.125rem;--cd-font-size--medium: 1.375rem;--cd-font-size--large: 1.5rem;--cd-font-size--2xbase: 1.875rem;--cd-font-size--2xmedium: 2.375rem;--cd-font-size--2xlarge: 2.875rem;--cd-font: helvetica, arial, sans-serif;--cd-font--system: system-ui;--cd-font--noto: "Noto Sans", sans-serif;--cd-font--noto-kufi: "Noto Kufi Arabic", sans-serif;--cd-font--roboto: "Roboto", helvetica, arial, sans-serif;--cd-font--roboto-condensed: "Roboto Condensed", helvetica, arial, sans-serif;--cd-font--roboto-slab: "Roboto Slab", helvetica, arial, sans-serif}@supports(display: grid){@media(min-width: 768px){.cd-layout-container{grid-template-rows:151px auto 1fr auto}}}@media(min-width: 768px){.cd-layout-container .cd-layout-content-wrapper{display:flex;flex-wrap:wrap}}@media(min-width: 768px){.cd-layout-content{flex-basis:0;flex-grow:999}}.cd-global-header__dropdown{background:var(--cd-reliefweb-brand-blue--dark)}.cd-global-header button[aria-expanded=true]::before{border-color:transparent transparent var(--cd-reliefweb-brand-blue--dark)}@media(max-width: 767px){.cd-global-header button[aria-expanded] span[class*=__btn-label]{position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;word-wrap:normal}}.cd-header button:focus{outline:3px solid var(--cd-reliefweb-brand-blue)}.cd-global-header{background:var(--cd-reliefweb-brand-blue--dark);background-image:linear-gradient(-180deg, var(--cd-reliefweb-brand-blue--dark) 67%, #04415a 97%)}@supports(display: grid){.cd-site-header__inner{grid-template-columns:52px 1fr}@media(min-width: 768px){.cd-site-header__inner{grid-template-columns:186px 1fr}}}.cd-language-switcher__btn:focus{outline:3px solid var(--cd-reliefweb-brand-blue)}.cd-user-menu__dropdown li a:focus{outline:3px solid var(--cd-reliefweb-brand-blue)}.cd-site-logo{width:52px}.cd-site-logo:focus{outline:3px solid var(--cd-reliefweb-brand-blue)}@media(max-width: 767px){.cd-site-logo{background:url("../img/logos/rw-logo-mobile.svg") center no-repeat;background:linear-gradient(transparent, transparent),url("../img/logos/rw-logo-mobile.svg") center no-repeat}}@media(min-width: 768px){.cd-site-logo{width:140px}}.menu--main button[aria-expanded] .cd-icon--arrow-down{fill:var(--cd-reliefweb-brand-red--dark)}.cd-nav__btn[aria-expanded] .cd-icon--arrow-down{fill:var(--cd-reliefweb-brand-red--dark)}.cd-nav__btn[aria-expanded=true]::before{background:var(--cd-reliefweb-brand-red--dark)}@media(max-width: 1023px){.cd-site-header__nav-holder .cd-nav>ul>li>a.is-active::before,.cd-site-header__nav-holder .cd-nav>ul>li>button.is-active::before{background:var(--cd-reliefweb-brand-red--dark)}.cd-site-header__nav-holder .cd-nav>ul>li.menu-item--collapsed>a.is-active::before,.cd-site-header__nav-holder .cd-nav>ul>li.menu-item--collapsed>button.is-active::before,.cd-site-header__nav-holder .cd-nav>ul>li.menu-item--expanded>a.is-active::before,.cd-site-header__nav-holder .cd-nav>ul>li.menu-item--expanded>button.is-active::before{background:rgba(var(--cd-rgb-reliefweb-brand-red--dark), 0.2)}.cd-site-header__nav-holder .cd-nav>ul>li.menu-item--active-trail a::before,.cd-site-header__nav-holder .cd-nav>ul>li.menu-item--active-trail button::before{background:rgba(var(--cd-rgb-reliefweb-brand-red--dark), 0.2)}.cd-site-header__nav-holder .cd-nav>ul>li.menu-item--active-trail a.is-active::before,.cd-site-header__nav-holder .cd-nav>ul>li.menu-item--active-trail button.is-active::before{background:var(--cd-reliefweb-brand-red--dark)}.cd-site-header__nav-holder .cd-nav>ul>li>ul>li.menu-item--active-trail a::before,.cd-site-header__nav-holder .cd-nav>ul>li>ul>li.menu-item--active-trail button::before{background:rgba(var(--cd-rgb-reliefweb-brand-red--dark), 0.6)}.cd-site-header__nav-holder .cd-nav>ul>li>ul>li.menu-item--active-trail a.is-active::before,.cd-site-header__nav-holder .cd-nav>ul>li>ul>li.menu-item--active-trail button.is-active::before{background:var(--cd-reliefweb-brand-red--dark)}}@media(min-width: 1024px){.cd-site-header__nav-holder .cd-nav>.menu>.menu-item.menu-item--active-trail a::before,.cd-site-header__nav-holder .cd-nav>.menu>.menu-item.menu-item--active-trail button::before{background:var(--cd-reliefweb-brand-red--dark)}.cd-site-header__nav-holder .cd-nav>.menu>.menu-item>a.is-active::before,.cd-site-header__nav-holder .cd-nav>.menu>.menu-item>a:focus::before,.cd-site-header__nav-holder .cd-nav>.menu>.menu-item button.is-active::before,.cd-site-header__nav-holder .cd-nav>.menu>.menu-item button:focus::before{background:var(--cd-reliefweb-brand-red--dark)}.cd-site-header__nav-holder .cd-nav>.menu>li>ul a.is-active,.cd-site-header__nav-holder .cd-nav>.menu>li>ul button.is-active{border-left:3px solid var(--cd-reliefweb-brand-red--dark)}.cd-site-header__nav-holder .cd-nav>.menu>li>ul>li.menu-item--active-trail .is-active{border-left:3px solid var(--cd-reliefweb-brand-red--dark)}}.cd-ocha-dropdown__link a:focus{outline:3px solid var(--cd-reliefweb-brand-blue)}.cd-search__btn{color:var(--cd-reliefweb-brand-blue--dark)}.cd-search__btn svg{fill:var(--cd-reliefweb-brand-blue--dark)}.cd-search__btn:hover,.cd-search__btn:focus{color:#04415a}.cd-search__btn:hover svg,.cd-search__btn:focus svg{fill:#04415a}.cd-search__btn:focus{color:var(--cd-reliefweb-brand-red--dark)}.cd-search__btn:focus svg{fill:var(--cd-reliefweb-brand-red--dark)}.cd-search__btn[aria-expanded=true]{color:var(--cd-reliefweb-brand-red--dark)}.cd-search__btn[aria-expanded=true] svg{fill:var(--cd-reliefweb-brand-red--dark)}.cd-search__submit:focus{background-color:var(--cd-reliefweb-brand-red--dark)}.cd-user-menu--no-language-switcher li:last-child a,.cd-user-menu--no-language-switcher li:last-child button{padding-right:0}.cd-user-menu--no-language-switcher li:last-child a::after,.cd-user-menu--no-language-switcher li:last-child button::after{content:none}.cd-user-menu__item:focus,.cd-global-header .menu>li a:focus,.cd-global-header .menu>li button:focus{outline:3px solid var(--cd-reliefweb-brand-blue)}.cd-global-header__user-menu+.cd-global-header__user-menu li:last-child a,.cd-global-header__user-menu+.cd-global-header__user-menu li:last-child button{padding-right:0}.cd-global-header__user-menu+.cd-global-header__user-menu li:last-child a::after,.cd-global-header__user-menu+.cd-global-header__user-menu li:last-child button::after{content:none}@media(max-width: 767px){.cd-global-header__user-menu a svg+span{position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;word-wrap:normal}}[dir=ltr] .admin-menu__btn svg+span{margin-left:10px}[dir=rtl] .admin-menu__btn svg+span{margin-right:10px}.admin-menu__btn .cd-icon:not(.cd-icon--arrow-down){display:inline-block;width:14px;height:14px;vertical-align:middle;fill:var(--cd-white)}.cd-footer{background:var(--cd-reliefweb-brand-blue--dark)}.cd-footer a:focus{outline:3px solid var(--cd-reliefweb-brand-blue)}.cd-footer-copyright{display:block;margin-top:0;text-align:right;color:#fff;font-size:12px;font-weight:lighter}.cd-footer-copyright p{margin:0}.cd-footer-copyright a{display:inline-block;overflow:hidden;width:140px;height:60px;margin:0 0 -4px 0;padding:0 0 0 140px;background:url("../img/logos/rw-logo-sprite.png") 0 -60px no-repeat;background:rgba(0,0,0,0) url("../img/logos/rw-logo-sprite.svg") 0 -60px no-repeat}.cd-footer-copyright a:hover,.cd-footer-copyright a:active,.cd-footer-copyright a:focus{opacity:.8}@media all and (max-width: 1023px){.cd-footer-copyright{width:100%;text-align:center}}.cd-soft-footer{background:rgba(var(--cd-rgb-ocha-blue), 0.9)}.cd-soft-footer a:focus{outline:3px solid var(--cd-reliefweb-brand-blue)}a{color:var(--cd-reliefweb-brand-blue--dark)}a:hover,a:focus{color:var(--cd-reliefweb-brand-blue--dark)}h1,h2{margin:0 0 24px 0;letter-spacing:.5px;font-size:24px;font-weight:bold;line-height:1.3}@media screen and (min-width: 480px){h1{font-size:var(--cd-font-size--2xbase)}h2{font-size:var(--cd-font-size--large)}}h3{margin:0 0 16px 0;letter-spacing:.5px;font-size:20px;font-weight:bold;line-height:1.3}h4{margin:0 0 16px 0;letter-spacing:.5px;font-size:18px;font-weight:bold;line-height:1.3}h5{margin:0 0 16px 0;letter-spacing:.5px;font-size:17px;font-weight:bold;font-style:italic}h6{margin:0 0 16px 0;letter-spacing:.5px;font-size:16px;font-weight:bold}.rw-article__content *+h3,.rw-article__content *+h4,.rw-article__content *+h5,.rw-article__content *+h6{margin-top:16px}@media all and (max-width: 479px){#main h2{font-size:24px}}p{margin:1rem 0;line-height:1.6}p:first-child{margin-top:0}p:last-child{margin-bottom:0}input[type=search]{-moz-appearance:none;-webkit-appearance:none;appearance:none}input::-webkit-search-decoration{-webkit-appearance:none}input:-ms-input-placeholder{opacity:.7;color:inherit;font-style:italic}input::-moz-placeholder{opacity:.7;color:inherit;font-style:italic}input::placeholder{opacity:.7;color:inherit;font-style:italic}select{max-width:100%}select:not([multitple]){-moz-appearance:menulist-button;-webkit-appearance:menulist-button}fieldset{min-inline-size:auto}table{width:100%;border-collapse:collapse}table caption{margin:12px 0;font-weight:bold}table th,table td{padding:8px;border:1px solid var(--cd-reliefweb-brand-grey--light)}table th{border-left-color:#fff;background:var(--cd-reliefweb-brand-grey--light)}table thead th{border-left-color:#fff}th.field-label>h4.label{margin:0}table thead th:first-child{border-left-color:var(--cd-reliefweb-brand-grey--light)}table tbody th{border-top-color:#fff}table tbody th:first-child{border-top-color:var(--cd-reliefweb-brand-grey--light)}code{padding:2px;background:var(--cd-reliefweb-brand-grey--light);font-family:monospace} +@import"https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400%3B500%3B700&display=swap";@import"https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,300%3B0,400%3B0,500%3B0,700%3B0,900%3B1,400%3B1,700&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400%3B700&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400%3B700&display=swap";:root{--cd-reliefweb-brand-blue: #0988bb;--cd-reliefweb-brand-red: #f65c51;--cd-reliefweb-brand-blue--dark: #055372;--cd-reliefweb-brand-red--dark: #eb1405;--cd-reliefweb-brand-grey--dark: #2e3436;--cd-reliefweb-brand-grey--mid: #4d5254;--cd-reliefweb-brand-grey--light: #e6ecef;--cd-rgb-reliefweb-brand-blue: 9, 136, 187;--cd-rgb-reliefweb-brand-red: 246, 92, 81;--cd-rgb-reliefweb-brand-blue--dark: 4, 82, 112;--cd-rgb-reliefweb-brand-red--dark: 235, 20, 5;--cd-rgb-reliefweb-brand-grey--dark: 46, 52, 54;--cd-rgb-reliefweb-brand-grey--light: 230, 236, 239;--cd-reliefweb-grey--light: #d9d9d9;--cd-reliefweb-grey--light--bg: rgba(217, 217, 217, 0.2);--cd-reliefweb-orange: #f49e2c;--cd-reliefweb-orange--bg: rgba(244, 158, 44, 0.2);--cd-reliefweb-blue: #076d96;--cd-reliefweb-blue--bg: rgba(7, 109, 150, 0.2);--cd-reliefweb-green: #88bb09;--cd-reliefweb-green--bg: rgba(136, 187, 9, 0.2);--cd-reliefweb-red: #da190b;--cd-reliefweb-red--bg: rgba(218, 25, 11, 0.2);--cd-reliefweb-purple: #9509bb;--cd-reliefweb-purple--bg: rgba(149, 9, 187, 0.2);--cd-reliefweb-grey: #4b4b4b;--cd-reliefweb-grey--bg: rgba(75, 75, 75, 0.2);--cd-reliefweb-brown: #8f5507;--cd-reliefweb-brown--bg: rgba(143, 85, 7, 0.2);--cd-reliefweb-yellow: #f5cb2f;--cd-reliefweb-yellow--bg: rgba(245, 203, 47, 0.2);--cd-reliefweb-cyan: #56c9f7;--cd-reliefweb-cyan--bg: rgba(86, 201, 247, 0.2);--cd-reliefweb-orange--alert: #eb8705;--cd-reliefweb-pink: rgba(246, 92, 81, 0.2);--cd-reliefweb-grey--disable: rgba(230, 236, 239, 0.5);--cd-ocha-blue: #1f69b3;--cd-blue--dark: #144372;--cd-blue--bright: #82b5e9;--cd-blue--light: #d4e5f7;--cd-highlight-red: #e56a54;--cd-contrast-red: #e00000;--cd-white: #fff;--cd-grey--light: #f2f2f2;--cd-grey--mid: #595959;--cd-grey--dark: #4a4a4a;--cd-default-text-color: var(--cd-grey--dark);--cd-black: #000;--cd-blue-grey: #e6ecf1;--cd-blue-grey--dark: #d3dde5;--cd-blue-grey--light: #ebf0f4;--cd-rgb-ocha-blue: 2, 108, 182;--cd-rgb-grey--mid: 89, 89, 89;--cd-rgb-grey--dark: 74, 74, 74;--cd-rgb-highlight-red: 229, 106, 84;--cd-rgb-blue-grey--dark: 211, 221, 229;--cd-max-content-width: 820px;--cd-max-body-width: 1400px;--cd-max-width: 1220px;--cd-container-padding: 0.75rem;--cd-container-padding-tablet: 1.5rem;--cd-container-padding-xlarge: 2.5rem;--cd-flow-space: 1rem;--cd-bumper-space: 1rem;--cd-footer-row-number: 5;--cd-red: #cd3a1f;--cd-red--light: #f8d8d3;--cd-orange: #db7b18;--cd-orange--light: #fae6d1;--cd-yellow: #d5de26;--cd-yellow--light: #f7f8d3;--cd-green: #7fb92f;--cd-green--light: #e8f5d6;--cd-font-size--tiny: 0.75rem;--cd-font-size--small: 0.875rem;--cd-font-size--base: 1.125rem;--cd-font-size--medium: 1.375rem;--cd-font-size--large: 1.5rem;--cd-font-size--2xbase: 1.875rem;--cd-font-size--2xmedium: 2.375rem;--cd-font-size--2xlarge: 2.875rem;--cd-font: helvetica, arial, sans-serif;--cd-font--system: system-ui;--cd-font--noto: "Noto Sans", sans-serif;--cd-font--noto-kufi: "Noto Kufi Arabic", sans-serif;--cd-font--roboto: "Roboto", helvetica, arial, sans-serif;--cd-font--roboto-condensed: "Roboto Condensed", helvetica, arial, sans-serif;--cd-font--roboto-slab: "Roboto Slab", helvetica, arial, sans-serif}@supports(display: grid){@media(min-width: 768px){.cd-layout-container{grid-template-rows:151px auto 1fr auto}}}@media(min-width: 768px){.cd-layout-container .cd-layout-content-wrapper{display:flex;flex-wrap:wrap}}@media(min-width: 768px){.cd-layout-content{flex-basis:0;flex-grow:999}}@media(max-width: 767px){.cd-global-header button[aria-expanded] span[class*=__btn-label]{position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;word-wrap:normal}}.cd-user-menu__item:focus{outline:3px solid var(--cd-reliefweb-brand-blue)}.cd-global-header__user-menu+.cd-global-header__user-menu li:last-child a{padding-right:0}.cd-global-header__user-menu+.cd-global-header__user-menu li:last-child a::after{content:none}@media(max-width: 767px){.cd-global-header__user-menu a svg+span{position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;word-wrap:normal}}[dir=ltr] .admin-menu__btn svg+span{margin-left:10px}[dir=rtl] .admin-menu__btn svg+span{margin-right:10px}.admin-menu__btn .cd-icon:not(.cd-icon--arrow-down){display:inline-block;width:14px;height:14px;vertical-align:middle;fill:var(--cd-white)} diff --git a/html/themes/custom/common_design_subtheme/sass/base/_typography.scss b/html/themes/custom/common_design_subtheme/sass/base/_typography.scss deleted file mode 100644 index e045674d5..000000000 --- a/html/themes/custom/common_design_subtheme/sass/base/_typography.scss +++ /dev/null @@ -1,185 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Typography -//—————————————————————————————————————————————————————————————————————————————— - -//body { -// /* Default font size for the main content. */ -// font-size: 16px; -//} - -a { - color: $implementation-primary; - - &:hover, - &:focus { - color: $implementation-primary; - } -} - -/** - * Headings. - * - * Base heading styles in the main content. They start at h2 because h1 is the - * the ReliefWeb logo in the header. h2 are always used for the main section(s) - * or article of the page (main content heading). h3 are for sub-sections - * or articles. Their style differs whether they are section headings or article - * headings. - */ - -h1, -h2 { - margin: 0 0 24px 0; - letter-spacing: 0.5px; - font-size: 24px; - font-weight: bold; - line-height: 1.3; -} - -@media screen and (min-width: 480px) { - h1 { - font-size: var(--cd-font-size--2xbase); - } - h2 { - font-size: var(--cd-font-size--large); - } -} -h3 { - margin: 0 0 16px 0; - letter-spacing: 0.5px; - font-size: 20px; - font-weight: bold; - line-height: 1.3; -} -h4 { - margin: 0 0 16px 0; - letter-spacing: 0.5px; - font-size: 18px; - font-weight: bold; - line-height: 1.3; -} -h5 { - margin: 0 0 16px 0; - letter-spacing: 0.5px; - font-size: 17px; - font-weight: bold; - font-style: italic; -} -h6 { - margin: 0 0 16px 0; - letter-spacing: 0.5px; - font-size: 16px; - font-weight: bold; -} -/* Headings in content following something. */ -.rw-article__content * + h3, -.rw-article__content * + h4, -.rw-article__content * + h5, -.rw-article__content * + h6 { - margin-top: 16px; -} -/* Smaller size on small screen to reduce used real estate. */ -@media all and (max-width: 479px) { - #main h2 { - font-size: 24px; - } -} - -p { - margin: 1rem 0; - line-height: 1.6; -} -p:first-child { - margin-top: 0; -} -p:last-child { - margin-bottom: 0; -} - -/* Allow styling of search inputs. */ -input[type="search"] { - -moz-appearance: none; - -ms-appearance: none; - -webkit-appearance: none; - appearance: none; -} -/* Fix Safari and older Chrome extra padding. */ -input::-webkit-search-decoration { - -webkit-appearance: none; -} -/* Placeholder style. */ -input::-webkit-input-placeholder { - opacity: 0.7; - color: inherit; - font-style: italic; -} -input:-ms-input-placeholder { - opacity: 0.7; - color: inherit; - font-style: italic; -} -input::-moz-placeholder { - opacity: 0.7; - color: inherit; - font-style: italic; -} -input::placeholder { - opacity: 0.7; - color: inherit; - font-style: italic; -} - -/* Prevent select from not respecting their container width. */ -select { - max-width: 100%; -} -/* Ensure the button is displayed for select dropdowns while allowing a bit - * more flexibility in the styling like setting a height. */ -select:not([multitple]) { - -moz-appearance: menulist-button; - -webkit-appearance: menulist-button; -} -/* Prevent weird behavior with select inside a fieldset not respecting the - * wanted max-width; */ -fieldset { - min-inline-size: auto; -} - -/* Tables. */ -table { - width: 100%; - border-collapse: collapse; -} -table caption { - margin: 12px 0; - font-weight: bold; -} -table th, -table td { - padding: 8px; - border: 1px solid $cd-reliefweb-brand-grey--light; -} -table th { - border-left-color: white; - background: $cd-reliefweb-brand-grey--light; -} -table thead th { - border-left-color: white; -} -th.field-label > h4.label { - margin: 0; -} -table thead th:first-child { - border-left-color: $cd-reliefweb-brand-grey--light; -} -table tbody th { - border-top-color: white; -} -table tbody th:first-child { - border-top-color: $cd-reliefweb-brand-grey--light; -} - -code { - padding: 2px; - background: $cd-reliefweb-brand-grey--light; - font-family: monospace; -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/_cd-variables.scss b/html/themes/custom/common_design_subtheme/sass/cd/_cd-variables.scss index fd44f34e4..3c1b28dd3 100644 --- a/html/themes/custom/common_design_subtheme/sass/cd/_cd-variables.scss +++ b/html/themes/custom/common_design_subtheme/sass/cd/_cd-variables.scss @@ -276,5 +276,4 @@ $implementation-primary-dark: #04415a; $implementation-secondary: var(--cd-reliefweb-brand-blue); $implementation-highlight: var(--cd-reliefweb-brand-red--dark); $cd-contrast-red: var(--cd-reliefweb-brand-red--dark); -$cd-blue-grey: var(--cd-reliefweb-brand-grey--light); $cd-reliefweb-brand-grey--light: var(--cd-reliefweb-brand-grey--light); diff --git a/html/themes/custom/common_design_subtheme/sass/cd/_cd.scss b/html/themes/custom/common_design_subtheme/sass/cd/_cd.scss index 0e28a82aa..200ff15f9 100644 --- a/html/themes/custom/common_design_subtheme/sass/cd/_cd.scss +++ b/html/themes/custom/common_design_subtheme/sass/cd/_cd.scss @@ -11,15 +11,4 @@ // Header @import "cd-header/cd-dropdowns"; -@import "cd-header/cd-header"; -@import "cd-header/cd-language-switcher"; -@import "cd-header/cd-logo"; -@import "cd-header/cd-menu--main"; -@import "cd-header/cd-nav"; -@import "cd-header/cd-ocha"; -@import "cd-header/cd-search"; @import "cd-header/cd-user-menu"; - -// Footer -@import "cd-footer/cd-footer"; -@import "cd-footer/cd-soft-footer"; diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-footer/_cd-footer.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-footer/_cd-footer.scss deleted file mode 100644 index 8663153c7..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-footer/_cd-footer.scss +++ /dev/null @@ -1,53 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Footer -//—————————————————————————————————————————————————————————————————————————————— - -.cd-footer { - background: $implementation-primary; - - a { - &:focus { - outline: 3px solid $implementation-secondary; - } - } -} - -/** - * Copyright. - * - * RelieWeb's copyright notice. - */ -.cd-footer-copyright { - display: block; - margin-top: 0; - text-align: right; - color: white; - font-size: 12px; - font-weight: lighter; -} -.cd-footer-copyright p { - margin: 0; -} -.cd-footer-copyright a { - display: inline-block; - overflow: hidden; - width: 140px; - height: 60px; - margin: 0 0 -4px 0; - /* The padding combined with the overflow: hidden, hides the text. */ - padding: 0 0 0 140px; - background: url("../img/logos/rw-logo-sprite.png") 0 -60px no-repeat; - background: rgba(0, 0, 0, 0) url("../img/logos/rw-logo-sprite.svg") 0 -60px no-repeat; -} -.cd-footer-copyright a:hover, -.cd-footer-copyright a:active, -.cd-footer-copyright a:focus { - opacity: 0.8; -} - -@media all and (max-width: 1023px) { - .cd-footer-copyright { - width: 100%; - text-align: center; - } -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-footer/_cd-soft-footer.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-footer/_cd-soft-footer.scss deleted file mode 100644 index b7d6068a7..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-footer/_cd-soft-footer.scss +++ /dev/null @@ -1,15 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Soft Footer -// -// Optional space for a CTA, newsletter sign-up, etc -//—————————————————————————————————————————————————————————————————————————————— - -.cd-soft-footer { - background: rgba($cd-rgb-ocha-blue, 0.9); - - a { - &:focus { - outline: 3px solid $implementation-secondary; - } - } -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-dropdowns.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-dropdowns.scss index 23c62470a..599ac4913 100644 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-dropdowns.scss +++ b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-dropdowns.scss @@ -1,20 +1,7 @@ //—————————————————————————————————————————————————————————————————————————————— // Common Design: Dropdowns -//—————————————————————————————————————————————————————————————————————————————— - -/** - * Global header specific dropdown styles. - */ -.cd-global-header__dropdown { - background: $implementation-primary; -} -// Triangle on toggle when active. -.cd-global-header button[aria-expanded="true"] { - &::before { - border-color: transparent transparent $implementation-primary; - } -} +//—————————————————————————————————————————————————————————————————————————————— // Hide label on mobile. .cd-global-header button[aria-expanded] span[class*="__btn-label"] { diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-header.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-header.scss deleted file mode 100644 index a4107ffd3..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-header.scss +++ /dev/null @@ -1,21 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Header -//—————————————————————————————————————————————————————————————————————————————— -.cd-header button:focus { - outline: 3px solid $implementation-secondary; -} - -.cd-global-header { - background: $implementation-primary; - background-image: linear-gradient(-180deg, $implementation-primary 67%, $implementation-primary-dark 97%); -} - -.cd-site-header__inner { - @supports (display: grid) { - grid-template-columns: 52px 1fr; - - @include tablet { - grid-template-columns: 186px 1fr; - } - } -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-language-switcher.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-language-switcher.scss deleted file mode 100644 index 205eb6fcd..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-language-switcher.scss +++ /dev/null @@ -1,15 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Language Switcher -//—————————————————————————————————————————————————————————————————————————————— - -.cd-language-switcher__btn { - &:focus { - outline: 3px solid $implementation-secondary; - } -} - -.cd-user-menu__dropdown { - li a:focus { - outline: 3px solid $implementation-secondary; - } -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-logo.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-logo.scss deleted file mode 100644 index d29e3445c..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-logo.scss +++ /dev/null @@ -1,23 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Logo -// -// Replace images with your site logo. -//—————————————————————————————————————————————————————————————————————————————— - -.cd-site-logo { - width: 52px; - - &:focus { - outline: 3px solid $implementation-secondary; - } - - // Logo for mobile. - @include max-width(md) { - background: url("../img/logos/rw-logo-mobile.svg") center no-repeat; - background: linear-gradient(transparent, transparent), url("../img/logos/rw-logo-mobile.svg") center no-repeat; - } - - @include tablet { - width: 140px; // width may need to be adjusted depending on logo width. - } -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-menu--main.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-menu--main.scss deleted file mode 100644 index 268118bad..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-menu--main.scss +++ /dev/null @@ -1,6 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Drupal dropdowns for nested menus -//—————————————————————————————————————————————————————————————————————————————— -.menu--main button[aria-expanded] .cd-icon--arrow-down { - fill: $implementation-highlight; -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-nav.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-nav.scss deleted file mode 100644 index 085c13c9d..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-nav.scss +++ /dev/null @@ -1,95 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Main Navigation -//—————————————————————————————————————————————————————————————————————————————— -.cd-nav__btn { - &[aria-expanded] .cd-icon--arrow-down { - fill: $implementation-highlight; - } - - &[aria-expanded="true"] { - &::before { - background: $implementation-highlight; - } - } -} - -.cd-site-header__nav-holder { - // Active trail for mobile menu. - @include max-width(lg) { - .cd-nav > ul > li { - > a.is-active::before, - > button.is-active::before { - background: $implementation-highlight; - } - - // First level menu item with children. - // Classes based on Drupal menu item configuration. - &.menu-item--collapsed, - &.menu-item--expanded { - > a.is-active::before, - > button.is-active::before { - background: rgba(var(--cd-rgb-reliefweb-brand-red--dark), 0.2); - } - } - - &.menu-item--active-trail { - a, - button { - &::before { - background: rgba(var(--cd-rgb-reliefweb-brand-red--dark), 0.2); - } - - &.is-active::before { - background: $implementation-highlight; - } - } - } - - > ul > li.menu-item--active-trail { - a::before, - button::before { - background: rgba(var(--cd-rgb-reliefweb-brand-red--dark), 0.6); - } - - a.is-active::before, - button.is-active::before { - background: $implementation-highlight; - } - } - } - } - - @include desktop { - .cd-nav > .menu { - > .menu-item { - &.menu-item--active-trail a::before, - &.menu-item--active-trail button::before { - background: $implementation-highlight; - } - - > a, - button { - &.is-active, - &:focus { - &::before { - background: $implementation-highlight; - } - } - } - } - - > li > ul { - a, - button { - &.is-active { - border-left: 3px solid $implementation-highlight; - } - } - - > li.menu-item--active-trail .is-active { - border-left: 3px solid $implementation-highlight; - } - } - } - } -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-ocha.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-ocha.scss deleted file mode 100644 index 70b5f480a..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-ocha.scss +++ /dev/null @@ -1,10 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Sites Menu ('OCHA Services') -//—————————————————————————————————————————————————————————————————————————————— -.cd-ocha-dropdown__link { - a { - &:focus { - outline: 3px solid $implementation-secondary; - } - } -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-search--inline.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-search--inline.scss deleted file mode 100644 index 69e18f88a..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-search--inline.scss +++ /dev/null @@ -1,63 +0,0 @@ -/** - * Common Design Search form in header. - */ - -.cd-search--inline__btn { - svg { - fill: $implementation-primary; - } - - &:hover, - &:focus { - color: $implementation-primary-dark; - - svg { - fill: $implementation-primary-dark; - } - } - - &:focus { - color: $implementation-highlight; - - svg { - fill: $implementation-primary-dark; - } - } - - &[aria-expanded="true"] { - color: $implementation-highlight; - - svg { - fill: $implementation-highlight; - } - } -} - -.cd-search--inline__submit { - &:hover, - &:focus { - background: $implementation-highlight; - - svg { - fill: $cd-white; - } - } -} - -// Start inline search for desktop only. -@include desktop { - .cd-search--inline__input { - &:focus { - border-bottom: 3px solid $implementation-secondary; - } - } - - .cd-search--inline__submit { - &:hover, - &:focus { - svg { - fill: $implementation-highlight; - } - } - } -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-search.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-search.scss deleted file mode 100644 index 9dcfc25c2..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-search.scss +++ /dev/null @@ -1,41 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Search -//—————————————————————————————————————————————————————————————————————————————— -.cd-search__btn { - color: $implementation-primary; - - svg { - fill: $implementation-primary; - } - - &:hover, - &:focus { - color: $implementation-primary-dark; - - svg { - fill: $implementation-primary-dark; - } - } - - &:focus { - color: $implementation-highlight; - - svg { - fill: $implementation-highlight; - } - } - - &[aria-expanded="true"] { - color: $implementation-highlight; - - svg { - fill: $implementation-highlight; - } - } -} - -.cd-search__submit { - &:focus { - background-color: $implementation-highlight; - } -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-user-menu.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-user-menu.scss index d5b86dca6..a826246bd 100644 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-user-menu.scss +++ b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-user-menu.scss @@ -4,53 +4,24 @@ // Includes user-centered settings and/or actions. // //—————————————————————————————————————————————————————————————————————————————— -.cd-user-menu { - &--no-language-switcher { - li:last-child a, - li:last-child button { - padding-right: 0; - - &::after { - content: none; - } - } - } -} - -.cd-user-menu__item { - &:focus { - outline: 3px solid $implementation-secondary; - } -} - -//—————————————————————————————————————————————————————————————————————————————— -// Drupal selectors -//—————————————————————————————————————————————————————————————————————————————— - -.cd-global-header .menu > li a, -.cd-global-header .menu > li button { - @extend .cd-user-menu__item; -} - -.cd-global-header .menu { - @extend .cd-user-menu; - - // If there's no language switcher in the Global Header, uncomment this line - // to apply special treatment to the last link in the list. - //@extend .cd-user-menu--no-language-switcher; +// .cd-global-header .menu li:last-child a { +// padding-right: 0; +// } +// .cd-global-header .menu li:last-child a::after { +// content: none; +// } +.cd-user-menu__item:focus { + outline: 3px solid var(--cd-reliefweb-brand-blue); } // If there's a second menu in the Global Header and no language switcher, // uncomment this rule to apply special treatment to the last link in the list. -.cd-global-header__user-menu + .cd-global-header__user-menu { - li:last-child a, - li:last-child button { - padding-right: 0; +.cd-global-header__user-menu + .cd-global-header__user-menu li:last-child a { + padding-right: 0; +} - &::after { - content: none; - } - } +.cd-global-header__user-menu + .cd-global-header__user-menu li:last-child a::after { + content: none; } .cd-global-header__user-menu a svg + span { @@ -59,22 +30,18 @@ } } -.admin-menu__btn { - svg + span { - [dir="ltr"] & { - margin-left: 10px; - } +[dir="ltr"] .admin-menu__btn svg + span { + margin-left: 10px; +} - [dir="rtl"] & { - margin-right: 10px; - } - } +[dir="rtl"] .admin-menu__btn svg + span { + margin-right: 10px; +} - .cd-icon:not(.cd-icon--arrow-down) { - display: inline-block; - width: 14px; - height: 14px; - vertical-align: middle; - fill: $cd-white; - } +.admin-menu__btn .cd-icon:not(.cd-icon--arrow-down) { + display: inline-block; + width: 14px; + height: 14px; + vertical-align: middle; + fill: $cd-white; } diff --git a/html/themes/custom/common_design_subtheme/sass/styles.scss b/html/themes/custom/common_design_subtheme/sass/styles.scss index 927ce271e..b82df4c8f 100644 --- a/html/themes/custom/common_design_subtheme/sass/styles.scss +++ b/html/themes/custom/common_design_subtheme/sass/styles.scss @@ -5,12 +5,3 @@ // in this theme for the Header/Footer will carry Common Design branding. //—————————————————————————————————————————————————————————————————————————————— @import "cd/cd"; - -//—————————————————————————————————————————————————————————————————————————————— -// Theme extras -// -// These optional Sass files can be used to start out with a more complete theme -// if you want something to get you started quickly. -//—————————————————————————————————————————————————————————————————————————————— - -@import "base/typography"; From a8f77124842a833f8ae149fe526aaa3a5495a31b Mon Sep 17 00:00:00 2001 From: left23 Date: Thu, 5 May 2022 17:09:15 +0200 Subject: [PATCH 04/36] RW-482 convert typography sass partial to css, update rules --- .../common_design_subtheme/css/typography.css | 180 ++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 html/themes/custom/common_design_subtheme/css/typography.css diff --git a/html/themes/custom/common_design_subtheme/css/typography.css b/html/themes/custom/common_design_subtheme/css/typography.css new file mode 100644 index 000000000..2d1075b41 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/css/typography.css @@ -0,0 +1,180 @@ +//—————————————————————————————————————————————————————————————————————————————— +// Typography +//—————————————————————————————————————————————————————————————————————————————— + +a { + color: var(--brand-primary); +} + +a:hover, +a:focus { + color: var(--brand-primary); +} + +/** + * Headings. + * + * Base heading styles in the main content. They start at h2 because h1 is the + * the ReliefWeb logo in the header. h2 are always used for the main section(s) + * or article of the page (main content heading). h3 are for sub-sections + * or articles. Their style differs whether they are section headings or article + * headings. + */ + +h1, +h2 { + margin: 0 0 24px 0; + letter-spacing: 0.5px; + font-size: 24px; + font-weight: bold; + line-height: 1.3; +} + +@media screen and (min-width: 480px) { + h1 { + font-size: var(--cd-font-size--2xbase); + } + h2 { + font-size: var(--cd-font-size--large); + } +} +h3 { + margin: 0 0 16px 0; + letter-spacing: 0.5px; + font-size: 20px; + font-weight: bold; + line-height: 1.3; +} +h4 { + margin: 0 0 16px 0; + letter-spacing: 0.5px; + font-size: 18px; + font-weight: bold; + line-height: 1.3; +} +h5 { + margin: 0 0 16px 0; + letter-spacing: 0.5px; + font-size: 17px; + font-weight: bold; + font-style: italic; +} +h6 { + margin: 0 0 16px 0; + letter-spacing: 0.5px; + font-size: 16px; + font-weight: bold; +} +/* Headings in content following something. */ +.rw-article__content * + h3, +.rw-article__content * + h4, +.rw-article__content * + h5, +.rw-article__content * + h6 { + margin-top: 16px; +} +/* Smaller size on small screen to reduce used real estate. */ +@media all and (max-width: 479px) { + #main h2 { + font-size: 24px; + } +} + +p { + margin: 1rem 0; + line-height: 1.6; +} +p:first-child { + margin-top: 0; +} +p:last-child { + margin-bottom: 0; +} + +/* Allow styling of search inputs. */ +input[type="search"] { + -moz-appearance: none; + -ms-appearance: none; + -webkit-appearance: none; + appearance: none; +} +/* Fix Safari and older Chrome extra padding. */ +input::-webkit-search-decoration { + -webkit-appearance: none; +} +/* Placeholder style. */ +input::-webkit-input-placeholder { + opacity: 0.7; + color: inherit; + font-style: italic; +} +input:-ms-input-placeholder { + opacity: 0.7; + color: inherit; + font-style: italic; +} +input::-moz-placeholder { + opacity: 0.7; + color: inherit; + font-style: italic; +} +input::placeholder { + opacity: 0.7; + color: inherit; + font-style: italic; +} + +/* Prevent select from not respecting their container width. */ +select { + max-width: 100%; +} +/* Ensure the button is displayed for select dropdowns while allowing a bit + * more flexibility in the styling like setting a height. */ +select:not([multitple]) { + -moz-appearance: menulist-button; + -webkit-appearance: menulist-button; +} +/* Prevent weird behavior with select inside a fieldset not respecting the + * wanted max-width; */ +fieldset { + min-inline-size: auto; +} + +/* Tables. */ +table { + width: 100%; + border-collapse: collapse; +} +table caption { + margin: 12px 0; + font-weight: bold; +} +table th, +table td { + padding: 8px; + border: 1px solid var(--cd-reliefweb-brand-grey--light); +} +table th { + border-left-color: white; + background: var(--cd-reliefweb-brand-grey--light); +} +table thead th { + border-left-color: white; +} +th.field-label > h4.label { + margin: 0; +} +table thead th:first-child { + border-left-color: var(--cd-reliefweb-brand-grey--light); +} +table tbody th { + border-top-color: white; +} +table tbody th:first-child { + border-top-color: var(--cd-reliefweb-brand-grey--light); +} + +code { + padding: 2px; + background: var(--cd-reliefweb-brand-grey--light); + font-family: monospace; +} From 29a710f048ae3695968922dc840dcdfbce2b29d0 Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 23 May 2022 13:58:43 +0200 Subject: [PATCH 05/36] RW-482 convert remaining sass partials to css, add to library --- .../common_design_subtheme.libraries.yml | 5 +- .../rw-cd-header-footer/cd-dropdowns.css | 11 +++++ .../rw-cd-header-footer/cd-layout.css | 22 +++++++++ .../rw-cd-header-footer/cd-logo.css | 7 +++ .../rw-cd-header-footer/cd-user-menu.css | 38 +++++++++++++++ .../sass/cd/cd-header/_cd-dropdowns.scss | 11 ----- .../sass/cd/cd-header/_cd-user-menu.scss | 47 ------------------- .../sass/cd/cd-layout/_cd-layout.scss | 27 ----------- 8 files changed, 82 insertions(+), 86 deletions(-) create mode 100644 html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-dropdowns.css create mode 100644 html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-layout.css create mode 100644 html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-user-menu.css delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-dropdowns.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-user-menu.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/cd-layout/_cd-layout.scss diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index b8ac22cb6..0adc3aa8a 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -409,11 +409,14 @@ rw-view-more: rw-cd-header-footer: css: theme: + components/rw-cd-header-footer/cd-dropdown.css: {} components/rw-cd-header-footer/cd-footer.css: {} components/rw-cd-header-footer/cd-header.css: {} components/rw-cd-header-footer/cd-language-switcher.css: {} + components/rw-cd-header-footer/cd-layout.css: {} components/rw-cd-header-footer/cd-logo.css: {} components/rw-cd-header-footer/cd-ocha.css: {} + components/rw-cd-header-footer/cd-user-menu.css: {} cd-block-title: css: @@ -423,4 +426,4 @@ cd-block-title: cd-button: css: theme: - components/cd-button/cd-button.css: {} \ No newline at end of file + components/cd-button/cd-button.css: {} diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-dropdowns.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-dropdowns.css new file mode 100644 index 000000000..c354465f0 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-dropdowns.css @@ -0,0 +1,11 @@ +/* Hide label on mobile */ +@media all and (max-width: 767px) { + .cd-global-header button[aria-expanded] span [class*="__btn-label"] { + position: absolute !important; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + width: 1px; + height: 1px; + word-wrap: normal; + } +} diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-layout.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-layout.css new file mode 100644 index 000000000..135cfd9d1 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-layout.css @@ -0,0 +1,22 @@ +@media screen and (min-width: 768px) { + + /* Decrease breakpoints from base theme + To facilitate the sticky TOC + */ + .cd-layout-container .cd-layout-content-wrapper { + display: flex; + flex-wrap: wrap; + } + + .cd-layout-content { + flex-basis: 0; + flex-grow: 999; + } + + @supports (display: grid) { + .cd-layout-container { + /* Increase grid row height to accommodate site-slogan 50px */ + grid-template-rows: 151px auto 1fr auto; + } + } +} diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-logo.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-logo.css index 0c2c5af57..54ddd7960 100644 --- a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-logo.css +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-logo.css @@ -1,3 +1,10 @@ +/* Logo for mobile. */ +@media all and (max-width: 767px) { + .cd-site-logo { + background: url("../../img/logos/rw-logo-mobile.svg") center no-repeat; + } +} + .cd-site-logo:focus { outline: 3px solid var(--cd-reliefweb-brand-blue); } diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-user-menu.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-user-menu.css new file mode 100644 index 000000000..b57393cf3 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-user-menu.css @@ -0,0 +1,38 @@ +.cd-user-menu__item:focus { + outline: 3px solid var(--cd-reliefweb-brand-blue); +} + +.cd-global-header__user-menu + .cd-global-header__user-menu li:last-child a { + padding-right: 0; +} + +.cd-global-header__user-menu + .cd-global-header__user-menu li:last-child a::after { + content: none; +} + +@media all and (max-width: 767px) { + .cd-global-header__user-menu a svg + span { + position: absolute !important; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + width: 1px; + height: 1px; + word-wrap: normal; + } +} + +[dir="ltr"] .admin-menu__btn svg + span { + margin-left: 10px; +} + +[dir="rtl"] .admin-menu__btn svg + span { + margin-right: 10px; +} + +.admin-menu__btn .cd-icon:not(.cd-icon--arrow-down) { + display: inline-block; + width: 14px; + height: 14px; + vertical-align: middle; + fill: $cd-white; +} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-dropdowns.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-dropdowns.scss deleted file mode 100644 index 599ac4913..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-dropdowns.scss +++ /dev/null @@ -1,11 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Dropdowns - -//—————————————————————————————————————————————————————————————————————————————— - -// Hide label on mobile. -.cd-global-header button[aria-expanded] span[class*="__btn-label"] { - @include max-width(md) { - @include visually-hidden; - } -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-user-menu.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-user-menu.scss deleted file mode 100644 index a826246bd..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-header/_cd-user-menu.scss +++ /dev/null @@ -1,47 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: User Menu -// -// Includes user-centered settings and/or actions. -// -//—————————————————————————————————————————————————————————————————————————————— -// .cd-global-header .menu li:last-child a { -// padding-right: 0; -// } -// .cd-global-header .menu li:last-child a::after { -// content: none; -// } -.cd-user-menu__item:focus { - outline: 3px solid var(--cd-reliefweb-brand-blue); -} - -// If there's a second menu in the Global Header and no language switcher, -// uncomment this rule to apply special treatment to the last link in the list. -.cd-global-header__user-menu + .cd-global-header__user-menu li:last-child a { - padding-right: 0; -} - -.cd-global-header__user-menu + .cd-global-header__user-menu li:last-child a::after { - content: none; -} - -.cd-global-header__user-menu a svg + span { - @include max-width(md) { - @include visually-hidden; - } -} - -[dir="ltr"] .admin-menu__btn svg + span { - margin-left: 10px; -} - -[dir="rtl"] .admin-menu__btn svg + span { - margin-right: 10px; -} - -.admin-menu__btn .cd-icon:not(.cd-icon--arrow-down) { - display: inline-block; - width: 14px; - height: 14px; - vertical-align: middle; - fill: $cd-white; -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/cd-layout/_cd-layout.scss b/html/themes/custom/common_design_subtheme/sass/cd/cd-layout/_cd-layout.scss deleted file mode 100644 index b14dbd193..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/cd-layout/_cd-layout.scss +++ /dev/null @@ -1,27 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Layout -//—————————————————————————————————————————————————————————————————————————————— -.cd-layout-container { - @supports (display: grid) { - @include tablet { - /* Increase grid row height to accommodate site-slogan 50px */ - grid-template-rows: 151px auto 1fr auto; - } - } -} - -/* Decrease breakpoints from base theme - To facilitate the sticky TOC -*/ -.cd-layout-container .cd-layout-content-wrapper { - @include tablet { - display: flex; - flex-wrap: wrap; - } -} -.cd-layout-content { - @include tablet { - flex-basis: 0; - flex-grow: 999; - } -} From 239da47e4d75a24c7e308ed421ee5cf97864ca41 Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 23 May 2022 13:59:33 +0200 Subject: [PATCH 06/36] RW-482 correct syntax --- .../custom/common_design_subtheme/css/brand.css | 4 ++-- .../common_design_subtheme/css/typography.css | 14 -------------- 2 files changed, 2 insertions(+), 16 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/css/brand.css b/html/themes/custom/common_design_subtheme/css/brand.css index f4bac3ca8..af77199c2 100644 --- a/html/themes/custom/common_design_subtheme/css/brand.css +++ b/html/themes/custom/common_design_subtheme/css/brand.css @@ -8,7 +8,7 @@ */ --brand-primary: var(--cd-reliefweb-brand-blue--dark); --brand-primary--light: var(--cd-blue--bright); - --brand-primary--dark: #04415a;; + --brand-primary--dark: #04415a; --brand-highlight: var(--cd-reliefweb-brand-red--dark); --brand-grey: var(--cd-reliefweb-brand-grey--light); --brand-logo-width: 140px; @@ -32,4 +32,4 @@ --cd-rgb-reliefweb-brand-red--dark: 235, 20, 5; --cd-rgb-reliefweb-brand-grey--dark: 46, 52, 54; --cd-rgb-reliefweb-brand-grey--light: 230, 236, 239; -} \ No newline at end of file +} diff --git a/html/themes/custom/common_design_subtheme/css/typography.css b/html/themes/custom/common_design_subtheme/css/typography.css index 2d1075b41..afd444fc1 100644 --- a/html/themes/custom/common_design_subtheme/css/typography.css +++ b/html/themes/custom/common_design_subtheme/css/typography.css @@ -1,7 +1,3 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Typography -//—————————————————————————————————————————————————————————————————————————————— - a { color: var(--brand-primary); } @@ -11,16 +7,6 @@ a:focus { color: var(--brand-primary); } -/** - * Headings. - * - * Base heading styles in the main content. They start at h2 because h1 is the - * the ReliefWeb logo in the header. h2 are always used for the main section(s) - * or article of the page (main content heading). h3 are for sub-sections - * or articles. Their style differs whether they are section headings or article - * headings. - */ - h1, h2 { margin: 0 0 24px 0; From 2f16353589a3d1c36a25cf84c5400c78540dc894 Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 23 May 2022 14:03:41 +0200 Subject: [PATCH 07/36] RW-482 remove remaining sass partials and compiled css --- .../common_design_subtheme.libraries.yml | 1 - .../common_design_subtheme/css/styles.css | 1 - .../sass/cd/_cd-mixins.scss | 149 ---------- .../sass/cd/_cd-variables.scss | 279 ------------------ .../common_design_subtheme/sass/cd/_cd.scss | 14 - .../common_design_subtheme/sass/styles.scss | 7 - 6 files changed, 451 deletions(-) delete mode 100644 html/themes/custom/common_design_subtheme/css/styles.css delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/_cd-mixins.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/_cd-variables.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/cd/_cd.scss delete mode 100644 html/themes/custom/common_design_subtheme/sass/styles.scss diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index 0adc3aa8a..30ab42b25 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -1,7 +1,6 @@ global-styling: css: theme: - css/styles.css: {} css/brand.css: {} css/typography.css: {} dependencies: diff --git a/html/themes/custom/common_design_subtheme/css/styles.css b/html/themes/custom/common_design_subtheme/css/styles.css deleted file mode 100644 index 7f2cdc3e5..000000000 --- a/html/themes/custom/common_design_subtheme/css/styles.css +++ /dev/null @@ -1 +0,0 @@ -@import"https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400%3B500%3B700&display=swap";@import"https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,300%3B0,400%3B0,500%3B0,700%3B0,900%3B1,400%3B1,700&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400%3B700&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400%3B700&display=swap";:root{--cd-reliefweb-brand-blue: #0988bb;--cd-reliefweb-brand-red: #f65c51;--cd-reliefweb-brand-blue--dark: #055372;--cd-reliefweb-brand-red--dark: #eb1405;--cd-reliefweb-brand-grey--dark: #2e3436;--cd-reliefweb-brand-grey--mid: #4d5254;--cd-reliefweb-brand-grey--light: #e6ecef;--cd-rgb-reliefweb-brand-blue: 9, 136, 187;--cd-rgb-reliefweb-brand-red: 246, 92, 81;--cd-rgb-reliefweb-brand-blue--dark: 4, 82, 112;--cd-rgb-reliefweb-brand-red--dark: 235, 20, 5;--cd-rgb-reliefweb-brand-grey--dark: 46, 52, 54;--cd-rgb-reliefweb-brand-grey--light: 230, 236, 239;--cd-reliefweb-grey--light: #d9d9d9;--cd-reliefweb-grey--light--bg: rgba(217, 217, 217, 0.2);--cd-reliefweb-orange: #f49e2c;--cd-reliefweb-orange--bg: rgba(244, 158, 44, 0.2);--cd-reliefweb-blue: #076d96;--cd-reliefweb-blue--bg: rgba(7, 109, 150, 0.2);--cd-reliefweb-green: #88bb09;--cd-reliefweb-green--bg: rgba(136, 187, 9, 0.2);--cd-reliefweb-red: #da190b;--cd-reliefweb-red--bg: rgba(218, 25, 11, 0.2);--cd-reliefweb-purple: #9509bb;--cd-reliefweb-purple--bg: rgba(149, 9, 187, 0.2);--cd-reliefweb-grey: #4b4b4b;--cd-reliefweb-grey--bg: rgba(75, 75, 75, 0.2);--cd-reliefweb-brown: #8f5507;--cd-reliefweb-brown--bg: rgba(143, 85, 7, 0.2);--cd-reliefweb-yellow: #f5cb2f;--cd-reliefweb-yellow--bg: rgba(245, 203, 47, 0.2);--cd-reliefweb-cyan: #56c9f7;--cd-reliefweb-cyan--bg: rgba(86, 201, 247, 0.2);--cd-reliefweb-orange--alert: #eb8705;--cd-reliefweb-pink: rgba(246, 92, 81, 0.2);--cd-reliefweb-grey--disable: rgba(230, 236, 239, 0.5);--cd-ocha-blue: #1f69b3;--cd-blue--dark: #144372;--cd-blue--bright: #82b5e9;--cd-blue--light: #d4e5f7;--cd-highlight-red: #e56a54;--cd-contrast-red: #e00000;--cd-white: #fff;--cd-grey--light: #f2f2f2;--cd-grey--mid: #595959;--cd-grey--dark: #4a4a4a;--cd-default-text-color: var(--cd-grey--dark);--cd-black: #000;--cd-blue-grey: #e6ecf1;--cd-blue-grey--dark: #d3dde5;--cd-blue-grey--light: #ebf0f4;--cd-rgb-ocha-blue: 2, 108, 182;--cd-rgb-grey--mid: 89, 89, 89;--cd-rgb-grey--dark: 74, 74, 74;--cd-rgb-highlight-red: 229, 106, 84;--cd-rgb-blue-grey--dark: 211, 221, 229;--cd-max-content-width: 820px;--cd-max-body-width: 1400px;--cd-max-width: 1220px;--cd-container-padding: 0.75rem;--cd-container-padding-tablet: 1.5rem;--cd-container-padding-xlarge: 2.5rem;--cd-flow-space: 1rem;--cd-bumper-space: 1rem;--cd-footer-row-number: 5;--cd-red: #cd3a1f;--cd-red--light: #f8d8d3;--cd-orange: #db7b18;--cd-orange--light: #fae6d1;--cd-yellow: #d5de26;--cd-yellow--light: #f7f8d3;--cd-green: #7fb92f;--cd-green--light: #e8f5d6;--cd-font-size--tiny: 0.75rem;--cd-font-size--small: 0.875rem;--cd-font-size--base: 1.125rem;--cd-font-size--medium: 1.375rem;--cd-font-size--large: 1.5rem;--cd-font-size--2xbase: 1.875rem;--cd-font-size--2xmedium: 2.375rem;--cd-font-size--2xlarge: 2.875rem;--cd-font: helvetica, arial, sans-serif;--cd-font--system: system-ui;--cd-font--noto: "Noto Sans", sans-serif;--cd-font--noto-kufi: "Noto Kufi Arabic", sans-serif;--cd-font--roboto: "Roboto", helvetica, arial, sans-serif;--cd-font--roboto-condensed: "Roboto Condensed", helvetica, arial, sans-serif;--cd-font--roboto-slab: "Roboto Slab", helvetica, arial, sans-serif}@supports(display: grid){@media(min-width: 768px){.cd-layout-container{grid-template-rows:151px auto 1fr auto}}}@media(min-width: 768px){.cd-layout-container .cd-layout-content-wrapper{display:flex;flex-wrap:wrap}}@media(min-width: 768px){.cd-layout-content{flex-basis:0;flex-grow:999}}@media(max-width: 767px){.cd-global-header button[aria-expanded] span[class*=__btn-label]{position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;word-wrap:normal}}.cd-user-menu__item:focus{outline:3px solid var(--cd-reliefweb-brand-blue)}.cd-global-header__user-menu+.cd-global-header__user-menu li:last-child a{padding-right:0}.cd-global-header__user-menu+.cd-global-header__user-menu li:last-child a::after{content:none}@media(max-width: 767px){.cd-global-header__user-menu a svg+span{position:absolute !important;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;word-wrap:normal}}[dir=ltr] .admin-menu__btn svg+span{margin-left:10px}[dir=rtl] .admin-menu__btn svg+span{margin-right:10px}.admin-menu__btn .cd-icon:not(.cd-icon--arrow-down){display:inline-block;width:14px;height:14px;vertical-align:middle;fill:var(--cd-white)} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/_cd-mixins.scss b/html/themes/custom/common_design_subtheme/sass/cd/_cd-mixins.scss deleted file mode 100644 index 722d1a4db..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/_cd-mixins.scss +++ /dev/null @@ -1,149 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Mixins -//—————————————————————————————————————————————————————————————————————————————— - -// -// Standard clearfix. -// -// Drupal 7.59 system.base.css -// -@mixin clearfix { - &::after { - display: block; - visibility: hidden; - clear: both; - height: 0; - content: "."; - } -} - -// -// from Drupal v8.6.2 see _cd-extends.scss -// -@mixin visually-hidden { - position: absolute !important; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - width: 1px; - height: 1px; - word-wrap: normal; -} - -//—————————————————————————————————————————————————————————————————————————————— -// Breakpoints -// -// `min-width` and `max-width` mixins are supplied, with convenience functions -// for CD dimensions. All CD convenience functions are `min-width`. -//—————————————————————————————————————————————————————————————————————————————— -@mixin min-width($breakpoint) { - @if map-has-key($grid-breakpoints, $breakpoint) { - @media (min-width: #{map-get($grid-breakpoints, $breakpoint)}) { - @content; - } - } - - @else { - @warn "`#{$breakpoint}` not found in `$grid-breakpoints` map."; - } -} - -@mixin max-width($breakpoint) { - @if map-has-key($grid-breakpoints, $breakpoint) { - @media (max-width: #{map-get($grid-breakpoints, $breakpoint)-1}) { - @content; - } - } - - @else { - @warn "`#{$breakpoint}` not found in `$grid-breakpoints` map."; - } -} - -// -// Grid breakpoints -// -@mixin xs { - @include min-width("xs") { - @content; - } -} - -@mixin sm { - @include min-width("sm") { - @content; - } -} - -@mixin md { - @include min-width("md") { - @content; - } -} - -@mixin lg { - @include min-width("lg") { - @content; - } -} - -@mixin xl { - @include min-width("xl") { - @content; - } -} - -@mixin xxl { - @include min-width("xxl") { - @content; - } -} - -// -// CD breakpoints -// -@mixin mobile { - @include sm { - @content; - } -} - -@mixin tablet { - @include md { - @content; - } -} - -@mixin desktop { - @include lg { - @content; - } -} - -@mixin xlarge { - @include xl { - @content; - } -} - -@mixin xxlarge { - @include xxl { - @content; - } -} - -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: z-index -// -// Provides syntactic sugar for common z-index values. -// -// Usage: @include z-index(dropdown); -//—————————————————————————————————————————————————————————————————————————————— -@mixin z-index($value: 0) { - @if map-has-key($zindex, $value) { - z-index: #{map-get($zindex, $value)}; - } - - @else { - @warn "`#{$value}` not found in `$zindex` map."; - } -} diff --git a/html/themes/custom/common_design_subtheme/sass/cd/_cd-variables.scss b/html/themes/custom/common_design_subtheme/sass/cd/_cd-variables.scss deleted file mode 100644 index 3c1b28dd3..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/_cd-variables.scss +++ /dev/null @@ -1,279 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: Variables -//—————————————————————————————————————————————————————————————————————————————— - -//—————————————————————————————————————————————————————————————————————————————— -// Google fonts -//—————————————————————————————————————————————————————————————————————————————— - -// Multilingual -// https://brand.unocha.org/d/xEPytAUjC3sH/visual-identity#/basics/fonts/multi-language-typefaces-1 -@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400%3B500%3B700&display=swap"); - -// Roboto -// https://brand.unocha.org/d/xEPytAUjC3sH/visual-identity#/basics/fonts/advanced-users -@import url("https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,300%3B0,400%3B0,500%3B0,700%3B0,900%3B1,400%3B1,700&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400%3B700&display=swap"); -@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400%3B700&display=swap"); - -//—————————————————————————————————————————————————————————————————————————————— -// Colours -//—————————————————————————————————————————————————————————————————————————————— -:root { - /* Color palette */ - --cd-reliefweb-brand-blue: #0988bb; - --cd-reliefweb-brand-red: #f65c51; - --cd-reliefweb-brand-blue--dark: #055372; - --cd-reliefweb-brand-red--dark: #eb1405; - --cd-reliefweb-brand-grey--dark: #2e3436; - /* #2e3436 with 0.85 opacity on white. */ - --cd-reliefweb-brand-grey--mid: #4d5254; - --cd-reliefweb-brand-grey--light: #e6ecef; - - /* RGB variables to use with rgba() */ - --cd-rgb-reliefweb-brand-blue: 9, 136, 187; - --cd-rgb-reliefweb-brand-red: 246, 92, 81; - --cd-rgb-reliefweb-brand-blue--dark: 4, 82, 112; - --cd-rgb-reliefweb-brand-red--dark: 235, 20, 5; - --cd-rgb-reliefweb-brand-grey--dark: 46, 52, 54; - --cd-rgb-reliefweb-brand-grey--light: 230, 236, 239; - - // Moderation - --cd-reliefweb-grey--light: #d9d9d9; - --cd-reliefweb-grey--light--bg: rgba(217, 217, 217, 0.2); - // Orange - --cd-reliefweb-orange: #f49e2c; - --cd-reliefweb-orange--bg: rgba(244, 158, 44, 0.2); - // Blue - --cd-reliefweb-blue: #076d96; - --cd-reliefweb-blue--bg: rgba(7, 109, 150, 0.2); - // Green - --cd-reliefweb-green: #88bb09; - --cd-reliefweb-green--bg: rgba(136, 187, 9, 0.2); - // Red - --cd-reliefweb-red: #da190b; - --cd-reliefweb-red--bg: rgba(218, 25, 11, 0.2); - // Purple - --cd-reliefweb-purple: #9509bb; - --cd-reliefweb-purple--bg: rgba(149, 9, 187, 0.2); - // Grey - --cd-reliefweb-grey: #4b4b4b; - --cd-reliefweb-grey--bg: rgba(75, 75, 75, 0.2); - // Brown - --cd-reliefweb-brown: #8f5507; - --cd-reliefweb-brown--bg: rgba(143, 85, 7, 0.2); - // Yellow - --cd-reliefweb-yellow: #f5cb2f; - --cd-reliefweb-yellow--bg: rgba(245, 203, 47, 0.2); - // Cyan - --cd-reliefweb-cyan: #56c9f7; - --cd-reliefweb-cyan--bg: rgba(86, 201, 247, 0.2); - - // Colour variations. - --cd-reliefweb-orange--alert: #eb8705; - --cd-reliefweb-pink: rgba(246, 92, 81, 0.2); - --cd-reliefweb-grey--disable: rgba(230, 236, 239, 0.5); - - /* OCHA blue is one colour ramp darker than brand blue */ - --cd-ocha-blue: #1f69b3; - /* Dark blue is two colour ramps darker than brand blue */ - --cd-blue--dark: #144372; - /* Bright blue is one colour ramp lighter than brand blue */ - --cd-blue--bright: #82b5e9; - --cd-blue--light: #d4e5f7; - --cd-highlight-red: #e56a54; - // This shade of red has been selected based on WCAG AAA requirements for contrast. - --cd-contrast-red: #e00000; - --cd-white: #fff; - --cd-grey--light: #f2f2f2; - --cd-grey--mid: #595959; - --cd-grey--dark: #4a4a4a; - --cd-default-text-color: var(--cd-grey--dark); - --cd-black: #000; - --cd-blue-grey: #e6ecf1; - --cd-blue-grey--dark: #d3dde5; - --cd-blue-grey--light: #ebf0f4; - - // Colours used with rgba(). - // https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable - --cd-rgb-ocha-blue: 2, 108, 182; - --cd-rgb-grey--mid: 89, 89, 89; - --cd-rgb-grey--dark: 74, 74, 74; - --cd-rgb-highlight-red: 229, 106, 84; - --cd-rgb-blue-grey--dark: 211, 221, 229; - - /* Measurements */ - --cd-max-content-width: 820px; - --cd-max-body-width: 1400px; - --cd-max-width: 1220px; - --cd-container-padding: 0.75rem; /* 12px */ - --cd-container-padding-tablet: 1.5rem; /* 24px */ - --cd-container-padding-xlarge: 2.5rem; /* 40px */ - - /* Vertical Rhythm */ - --cd-flow-space: 1rem; - --cd-bumper-space: 1rem; - - // Adjust this depending on number of rows in .cd-layout-container. - // This ensures the footer is always the last element. - --cd-footer-row-number: 5; - - /* From https://brand.unocha.org/d/xEPytAUjC3sH/visual-identity#/basics/colours */ - --cd-red: #cd3a1f; - --cd-red--light: #f8d8d3; - --cd-orange: #db7b18; - --cd-orange--light: #fae6d1; - --cd-yellow: #d5de26; - --cd-yellow--light: #f7f8d3; - --cd-green: #7fb92f; - --cd-green--light: #e8f5d6; - - /* Fonts sizes in REMs */ - --cd-font-size--tiny: 0.75rem; /* 12px */ - --cd-font-size--small: 0.875rem; /* 14px */ - --cd-font-size--base: 1.125rem; /* 18px */ - --cd-font-size--medium: 1.375rem; /* 22px */ - --cd-font-size--large: 1.5rem; /* 24px */ - --cd-font-size--2xbase: 1.875rem; /* 30px */ - --cd-font-size--2xmedium: 2.375rem; /* 38px */ - --cd-font-size--2xlarge: 2.875rem; /* 46px */ - - /* Fonts */ - --cd-font: helvetica, arial, sans-serif; - --cd-font--system: system-ui; - - // Multilingual - // https://brand.unocha.org/d/xEPytAUjC3sH/visual-identity#/basics/fonts/multi-language-typefaces-1 - --cd-font--noto: "Noto Sans", sans-serif; - --cd-font--noto-kufi: "Noto Kufi Arabic", sans-serif; - - // Roboto - // https://brand.unocha.org/d/xEPytAUjC3sH/visual-identity#/basics/fonts/advanced-users - --cd-font--roboto: "Roboto", helvetica, arial, sans-serif; - --cd-font--roboto-condensed: "Roboto Condensed", helvetica, arial, sans-serif; - --cd-font--roboto-slab: "Roboto Slab", helvetica, arial, sans-serif; -} - -//—————————————————————————————————————————————————————————————————————————————— -// Measurements -//—————————————————————————————————————————————————————————————————————————————— -$cd-max-body-width: var(--cd-max-body-width); -$cd-max-width: var(--cd-max-width); - -$cd-container-padding: var(--cd-container-padding); -$cd-container-padding-tablet: var(--cd-container-padding-tablet); -$cd-container-padding-xlarge: var(--cd-container-padding-xlarge); - -$cd-global-header-height: 35px; -$cd-site-header-height: 60px; - -// Colour palette -$cd-ocha-blue: var(--cd-ocha-blue); -$cd-blue--dark: var(--cd-blue--dark); -$cd-blue--bright: var(--cd-blue--bright); -$cd-blue--light: var(--cd-blue--light); - -$cd-grey--light: var(--cd-grey--light); -$cd-grey--mid: var(--cd-grey--mid); -$cd-grey--dark: var(--cd-grey--dark); - -// Default text colour. -$cd-default-text-color: var(--cd-default-text-color); - -$cd-white: var(--cd-white); -$cd-black: var(--cd-black); - -// Site background colour. -$cd-blue-grey--dark: var(--cd-blue-grey--dark); -$cd-blue-grey: var(--cd-blue-grey); -$cd-blue-grey--light: var(--cd-blue-grey--light); - -$cd-highlight-red: var(--cd-highlight-red); -$cd-contrast-red: var(--cd-contrast-red); - -$cd-rgb-ocha-blue: var(--cd-rgb-ocha-blue); -$cd-rgb-grey--mid: var(--cd-rgb-grey--mid); -$cd-rgb-grey--dark: var(--cd-rgb-grey--dark); -$cd-rgb-highlight-red: var(--cd-rgb-highlight-red); -$cd-rgb-blue-grey--dark: var(--cd-rgb-blue-grey--dark); - -// Brand colours -$cd-primary: $cd-ocha-blue; -$cd-primary--dark: $cd-blue--dark; - -//—————————————————————————————————————————————————————————————————————————————— -// Fonts -//—————————————————————————————————————————————————————————————————————————————— - -$cd-font: var(--cd-font); -$cd-font--system: var(--cd-font--system); -$cd-font--noto: var(--cd-font--noto); -$cd-font--noto-kufi: var(--cd-font--noto-kufi); -$cd-font--roboto: var(--cd-font--roboto); -$cd-font--roboto-condensed: var(--cd-font--roboto-condensed); -$cd-font--roboto-slab: var(--cd-font--roboto-slab); - -//—————————————————————————————————————————————————————————————————————————————— -// Font sizes -//—————————————————————————————————————————————————————————————————————————————— - -$cd-font-size--tiny: var(--cd-font-size--tiny); -$cd-font-size--small: var(--cd-font-size--small); -$cd-font-size--base: var(--cd-font-size--base); -$cd-font-size--medium: var(--cd-font-size--medium); -$cd-font-size--large: var(--cd-font-size--large); -$cd-font-size--2xbase: var(--cd-font-size--2xbase); -$cd-font-size--2xmedium: var(--cd-font-size--2xmedium); -$cd-font-size--2xlarge: var(--cd-font-size--2xlarge); - -//—————————————————————————————————————————————————————————————————————————————— -// Don't use any maps directly. Please refer to `_cd-mixins.scss` partial. -//—————————————————————————————————————————————————————————————————————————————— - -// -// Grid Breakpoints -// -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 1024px, - xl: 1200px, - xxl: 1400px -) !default; - -// -// CD Breakpoints correspond to the following grid breakpoints: -// -$cd-breakpoints: ( - tablet: #{map-get($grid-breakpoints, "md")}, - desktop: #{map-get($grid-breakpoints, "lg")}, - xlarge: #{map-get($grid-breakpoints, "xl")}, - xxlarge: #{map-get($grid-breakpoints, "xxl")} -); - -//—————————————————————————————————————————————————————————————————————————————— -// z-indices -//—————————————————————————————————————————————————————————————————————————————— - -$zindex: ( - default: 1, - hidden: -1, - sidebar: 110, - sidebar-underlay: 100, - main-menu: 199, - search: 200, - dropdown: 201, - skip-link: 1000 -); - -//—————————————————————————————————————————————————————————————————————————————— -// Implementation colours -//—————————————————————————————————————————————————————————————————————————————— - -$implementation-primary: var(--cd-reliefweb-brand-blue--dark); -$implementation-primary-dark: #04415a; -$implementation-secondary: var(--cd-reliefweb-brand-blue); -$implementation-highlight: var(--cd-reliefweb-brand-red--dark); -$cd-contrast-red: var(--cd-reliefweb-brand-red--dark); -$cd-reliefweb-brand-grey--light: var(--cd-reliefweb-brand-grey--light); diff --git a/html/themes/custom/common_design_subtheme/sass/cd/_cd.scss b/html/themes/custom/common_design_subtheme/sass/cd/_cd.scss deleted file mode 100644 index 200ff15f9..000000000 --- a/html/themes/custom/common_design_subtheme/sass/cd/_cd.scss +++ /dev/null @@ -1,14 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design: root file -//—————————————————————————————————————————————————————————————————————————————— - -// Sass utilities -@import "cd-variables"; -@import "cd-mixins"; - -// Layout -@import "cd-layout/cd-layout"; - -// Header -@import "cd-header/cd-dropdowns"; -@import "cd-header/cd-user-menu"; diff --git a/html/themes/custom/common_design_subtheme/sass/styles.scss b/html/themes/custom/common_design_subtheme/sass/styles.scss deleted file mode 100644 index b82df4c8f..000000000 --- a/html/themes/custom/common_design_subtheme/sass/styles.scss +++ /dev/null @@ -1,7 +0,0 @@ -//—————————————————————————————————————————————————————————————————————————————— -// Common Design -// -// Imports everything in the `cd` folder and ensures that the templates provided -// in this theme for the Header/Footer will carry Common Design branding. -//—————————————————————————————————————————————————————————————————————————————— -@import "cd/cd"; From dbe9a8bfcc8c1abb2b327d24427197888157918c Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 23 May 2022 14:20:41 +0200 Subject: [PATCH 08/36] RW-482 remove sass compile steps --- docker/Dockerfile | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/docker/Dockerfile b/docker/Dockerfile index 87e7cccc9..97e893df7 100644 --- a/docker/Dockerfile +++ b/docker/Dockerfile @@ -17,12 +17,8 @@ RUN rm -rf ./vendor && \ composer selfupdate && \ composer install --no-interaction -# Clean up previous npm installation and run new one. Those commands correspond -# to running `composer sass` but without hitting the PHP timeout from composer. +# Clean up previous npm installation. RUN cd html/themes/custom/common_design_subtheme && \ - rm -rf ./node_modules && \ - npm install --omit=dev -f && \ - ./node_modules/.bin/sass sass:build && \ rm -rf ./node_modules # Copy settings to default site location. From 4fc5dc444f629889b249266b36ca6c3df3034862 Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 23 May 2022 14:36:01 +0200 Subject: [PATCH 09/36] RW-482 remove more subtheme-related build steps --- docker/Dockerfile | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docker/Dockerfile b/docker/Dockerfile index 97e893df7..f10750a8e 100644 --- a/docker/Dockerfile +++ b/docker/Dockerfile @@ -17,10 +17,6 @@ RUN rm -rf ./vendor && \ composer selfupdate && \ composer install --no-interaction -# Clean up previous npm installation. -RUN cd html/themes/custom/common_design_subtheme && \ - rm -rf ./node_modules - # Copy settings to default site location. RUN cp -a docker/settings.php docker/services.yml docker/redis.services.yml html/sites/default From e7d450b6e15dfc36f288f10b72240f053bbf29f8 Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 24 May 2022 16:09:02 +0200 Subject: [PATCH 10/36] RW-482 add variable for adjusting font-size--large --- html/themes/custom/common_design_subtheme/css/brand.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/html/themes/custom/common_design_subtheme/css/brand.css b/html/themes/custom/common_design_subtheme/css/brand.css index af77199c2..9364af32c 100644 --- a/html/themes/custom/common_design_subtheme/css/brand.css +++ b/html/themes/custom/common_design_subtheme/css/brand.css @@ -32,4 +32,7 @@ --cd-rgb-reliefweb-brand-red--dark: 235, 20, 5; --cd-rgb-reliefweb-brand-grey--dark: 46, 52, 54; --cd-rgb-reliefweb-brand-grey--light: 230, 236, 239; + + /* Fonts sizes in REMs */ + --cd-font-size--large: 1.5rem; /* 24px */ } From 41c3691ffb535d5552d4c430f729fb24738ab958 Mon Sep 17 00:00:00 2001 From: left23 Date: Wed, 25 May 2022 15:10:16 +0200 Subject: [PATCH 11/36] RW-482 transfer search fix from PR #345 --- .../components/rw-cd-header-footer/cd-header.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-header.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-header.css index 44f9afe0b..432fc7f12 100644 --- a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-header.css +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-header.css @@ -1,3 +1,8 @@ .cd-header button:focus { outline: 3px solid var(--cd-reliefweb-brand-blue); } + +/* This can be removed once it is added to the base theme, see CD-397. */ +.no-js .cd-search__form form { + min-width: unset; +} From fb6308633f532b1550d98a8ed790a9f8218faf52 Mon Sep 17 00:00:00 2001 From: orakili Date: Tue, 14 Jun 2022 06:19:57 +0000 Subject: [PATCH 12/36] feat: add script to generate lighter DB dump Refs: 565 --- scripts/light-dump.sh | 115 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100755 scripts/light-dump.sh diff --git a/scripts/light-dump.sh b/scripts/light-dump.sh new file mode 100755 index 000000000..9a4a0a024 --- /dev/null +++ b/scripts/light-dump.sh @@ -0,0 +1,115 @@ +#!/usr/bin/env sh + +alias docker_exec="docker exec -u appuser rwint9-site" + +DB_INFO=$(docker_exec drush sql-connect) +DB_NAME=$(echo "$DB_INFO" | sed -E 's/.*--database=(\S+).*/\1/g') +DB_USER=$(echo "$DB_INFO" | sed -E 's/.*--user=(\S+).*/\1/g') +DB_PASS=$(echo "$DB_INFO" | sed -E 's/.*--password=(\S+).*/\1/g') +DB_HOST=$(echo "$DB_INFO" | sed -E 's/.*--host=(\S+).*/\1/g') +DB_PORT=$(echo "$DB_INFO" | sed -E 's/.*--port=(\S+).*/\1/g') + +MYSQLDUMP="mysqldump --user=$DB_USER --password=$DB_PASS --host=$DB_HOST --port=$DB_PORT $DB_NAME" + +DUMP_FILE="light-dump.sql" + +LIMIT=1000 + +# Get the most recent reports, training, jobs and all the other type nodes. +NODE_IDS=$(docker_exec drush sql-query " + (SELECT nid FROM node WHERE type = 'report' ORDER BY nid DESC LIMIT $LIMIT) + UNION + (SELECT nid FROM node WHERE type = 'job' ORDER BY nid DESC LIMIT $LIMIT) + UNION + (SELECT nid FROM node WHERE type = 'training' ORDER BY nid DESC LIMIT $LIMIT) + UNION + (SELECT nid FROM node WHERE type NOT IN ('report', 'job', 'training')) +" | awk '{printf("%s,",$0)} END { printf " " }' | sed -E 's/,+\s*$//') + +#--------- NODE TABLES ---------# + +# Node tables +TABLE_QUERY=" +SELECT table_name +FROM information_schema.tables +WHERE table_schema = '$DB_NAME' +AND table_name IN ('node', 'node_revision', 'node_field_data', 'node_field_revision') +ORDER BY table_name ASC +" + +# Get the list of tables. +TABLES=$(docker_exec drush sql-query "$TABLE_QUERY" | awk '{printf("%s ",$0)} END { printf "\n" }') + +# Dump the tables. +docker_exec $MYSQLDUMP $TABLES --where="nid IN ($NODE_IDS)" > "$DUMP_FILE" + +#--------- NODE FIELD TABLES ---------# + +# Node tables +TABLE_QUERY=" +SELECT table_name +FROM information_schema.tables +WHERE table_schema = '$DB_NAME' +AND table_name REGEXP 'node(_revision)?__(body|field_.+)' +ORDER BY table_name ASC +" + +# Get the list of tables and +TABLES=$(docker_exec drush sql-query "$TABLE_QUERY" | awk '{printf("%s ",$0)} END { printf "\n" }') + +# Condition to limit the number of records. +CONDITION="--where=\"entity_id IN ($NODE_IDS)\"" + +# Dump the tables. +docker_exec $MYSQLDUMP $TABLES --where="entity_id IN ($NODE_IDS)" >> "$DUMP_FILE" + +#--------- TERM TABLES ---------# + +# Term tables. +TABLE_QUERY=" +SELECT table_name +FROM information_schema.tables +WHERE table_schema = '$DB_NAME' +AND table_name LIKE 'taxonomy_term%' +ORDER BY table_name ASC +" + +# Get the list of tables. +TABLES=$(docker_exec drush sql-query "$TABLE_QUERY" | awk '{printf("%s ",$0)} END { printf "\n" }') + +# Dump the tables. +docker_exec $MYSQLDUMP $TABLES >> "$DUMP_FILE" + +#--------- TAXONOMY INDEX TABLE ---------# + +# Dump the table. +docker_exec $MYSQLDUMP taxonomy_index --where="nid IN ($NODE_IDS)" >> "$DUMP_FILE" + +#--------- PATH ALIAS TABLE ---------# + +# Dump the table. +docker_exec $MYSQLDUMP path_alias --where="path NOT LIKE '/node/%' OR SUBSTR(path, 7) IN ($NODE_IDS)" >> "$DUMP_FILE" + +#--------- OTHER TABLES ---------# + +# Non-node/term tables. +TABLE_QUERY=" +SELECT CASE + WHEN table_name LIKE 'cache%' THEN CONCAT(table_name, ' --ignore-table-data=$DB_NAME.', table_name) + WHEN table_name IN ('batch', 'queue', 'semaphore', 'sessions', 'watchdog') THEN CONCAT(table_name, ' --ignore-table-data=$DB_NAME.', table_name) + ELSE table_name +END +FROM information_schema.tables +WHERE table_schema = '$DB_NAME' +AND table_name NOT LIKE 'migrate_%' +AND table_name NOT LIKE 'taxonomy_term%' +AND table_name NOT REGEXP 'node(_revision)?__(body|field_.+)' +AND table_name NOT IN ('node', 'node_revision', 'node_field_data', 'node_field_revision', 'taxonomy_index', 'path_alias', 'reliefweb_migrate_uri_mapping') +ORDER BY table_name ASC +" + +# Get the list of tables and additional parameters to ignore data. +TABLES=$(docker_exec drush sql-query "$TABLE_QUERY" | awk '{printf("%s ",$0)} END { printf "\n" }') + +# Dump the tables. +docker_exec $MYSQLDUMP $TABLES >> "$DUMP_FILE" From 480b56d57f347af3f5ba856f667032182086be53 Mon Sep 17 00:00:00 2001 From: Peter Lieverdink Date: Wed, 15 Jun 2022 13:27:21 +1000 Subject: [PATCH 13/36] fix(test): See if the previous docker image also fails testing on numberFormats. --- docker/Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docker/Dockerfile b/docker/Dockerfile index 5e73b7b45..37f44fb91 100644 --- a/docker/Dockerfile +++ b/docker/Dockerfile @@ -31,7 +31,7 @@ RUN cp -a docker/settings.php docker/services.yml docker/memcache.services.yml h ################################################################################ # Generate the image. -FROM public.ecr.aws/unocha/php-k8s:8.0-NR-stable +FROM public.ecr.aws/unocha/php-k8s:8.0.19-r1-NR-202206-01 ARG VCS_REF ARG VCS_URL From c20ecf283b7831c5406326f4704cb040aa5b79ba Mon Sep 17 00:00:00 2001 From: Peter Lieverdink Date: Wed, 15 Jun 2022 13:37:23 +1000 Subject: [PATCH 14/36] fix(test): See if adding icu-data-full solves the issue. --- docker/Dockerfile | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docker/Dockerfile b/docker/Dockerfile index 37f44fb91..7aa077690 100644 --- a/docker/Dockerfile +++ b/docker/Dockerfile @@ -31,7 +31,7 @@ RUN cp -a docker/settings.php docker/services.yml docker/memcache.services.yml h ################################################################################ # Generate the image. -FROM public.ecr.aws/unocha/php-k8s:8.0.19-r1-NR-202206-01 +FROM public.ecr.aws/unocha/php-k8s:8.0-NR-stable ARG VCS_REF ARG VCS_URL @@ -54,7 +54,8 @@ LABEL info.humanitarianresponse.build.date=$BUILD_DATE \ info.humanitarianresponse.build.vcs-url=$VCS_URL \ info.humanitarianresponse.build.vcs-ref=$VCS_REF -RUN mkdir -p /etc/nginx/custom && \ +RUN apk add -U icu-data-full && \ + mkdir -p /etc/nginx/custom && \ # Install lua resty library to generate UUIDs. cd /tmp && \ git clone --branch=0.0.7 https://github.com/thibaultcha/lua-resty-jit-uuid.git && \ From 063969bee1e8cc3fedabb20c9b39515c4fb9b639 Mon Sep 17 00:00:00 2001 From: Peter Lieverdink Date: Wed, 15 Jun 2022 13:51:15 +1000 Subject: [PATCH 15/36] Update docker/Dockerfile --- docker/Dockerfile | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docker/Dockerfile b/docker/Dockerfile index 7aa077690..5e73b7b45 100644 --- a/docker/Dockerfile +++ b/docker/Dockerfile @@ -54,8 +54,7 @@ LABEL info.humanitarianresponse.build.date=$BUILD_DATE \ info.humanitarianresponse.build.vcs-url=$VCS_URL \ info.humanitarianresponse.build.vcs-ref=$VCS_REF -RUN apk add -U icu-data-full && \ - mkdir -p /etc/nginx/custom && \ +RUN mkdir -p /etc/nginx/custom && \ # Install lua resty library to generate UUIDs. cd /tmp && \ git clone --branch=0.0.7 https://github.com/thibaultcha/lua-resty-jit-uuid.git && \ From d4d29140f4a4f7f3d117efaa6255c4bdd81ed153 Mon Sep 17 00:00:00 2001 From: orakili Date: Fri, 17 Jun 2022 05:07:42 +0000 Subject: [PATCH 16/36] fix: use image field for media thumbnails in media library widget Refs: RW-551 --- ...y_view_display.media.image_blog_post.media_library.yml | 4 ++-- ...entity_view_display.media.image_book.media_library.yml | 4 ++-- ...tity_view_display.media.image_source.media_library.yml | 4 ++-- ...ntity_view_display.media.image_topic.media_library.yml | 8 ++++---- .../components/rw-form/rw-form--widget.css | 8 ++++++++ 5 files changed, 18 insertions(+), 10 deletions(-) diff --git a/config/core.entity_view_display.media.image_blog_post.media_library.yml b/config/core.entity_view_display.media.image_blog_post.media_library.yml index 087f704a5..47326525d 100644 --- a/config/core.entity_view_display.media.image_blog_post.media_library.yml +++ b/config/core.entity_view_display.media.image_blog_post.media_library.yml @@ -16,7 +16,7 @@ targetEntityType: media bundle: image_blog_post mode: media_library content: - thumbnail: + field_media_image: type: image label: hidden settings: @@ -33,7 +33,7 @@ hidden: created: true field_copyright: true field_description: true - field_media_image: true langcode: true name: true + thumbnail: true uid: true diff --git a/config/core.entity_view_display.media.image_book.media_library.yml b/config/core.entity_view_display.media.image_book.media_library.yml index bc4d65fc7..09de42651 100644 --- a/config/core.entity_view_display.media.image_book.media_library.yml +++ b/config/core.entity_view_display.media.image_book.media_library.yml @@ -16,7 +16,7 @@ targetEntityType: media bundle: image_book mode: media_library content: - thumbnail: + field_media_image: type: image label: hidden settings: @@ -33,7 +33,7 @@ hidden: created: true field_copyright: true field_description: true - field_media_image: true langcode: true name: true + thumbnail: true uid: true diff --git a/config/core.entity_view_display.media.image_source.media_library.yml b/config/core.entity_view_display.media.image_source.media_library.yml index 22d6da61b..e4f0fb964 100644 --- a/config/core.entity_view_display.media.image_source.media_library.yml +++ b/config/core.entity_view_display.media.image_source.media_library.yml @@ -14,7 +14,7 @@ targetEntityType: media bundle: image_source mode: media_library content: - thumbnail: + field_media_image: type: image label: hidden settings: @@ -29,7 +29,7 @@ content: region: content hidden: created: true - field_media_image: true langcode: true name: true + thumbnail: true uid: true diff --git a/config/core.entity_view_display.media.image_topic.media_library.yml b/config/core.entity_view_display.media.image_topic.media_library.yml index 4b7ac9dd0..c0b351d32 100644 --- a/config/core.entity_view_display.media.image_topic.media_library.yml +++ b/config/core.entity_view_display.media.image_topic.media_library.yml @@ -14,22 +14,22 @@ targetEntityType: media bundle: image_topic mode: media_library content: - thumbnail: + field_media_image: type: image label: hidden settings: image_link: '' image_style: icon svg_attributes: - width: 64 - height: 64 + width: null + height: null svg_render_as_image: true third_party_settings: { } weight: 0 region: content hidden: created: true - field_media_image: true langcode: true name: true + thumbnail: true uid: true diff --git a/html/themes/custom/common_design_subtheme/components/rw-form/rw-form--widget.css b/html/themes/custom/common_design_subtheme/components/rw-form/rw-form--widget.css index 2cde20a1a..a3a357f9a 100644 --- a/html/themes/custom/common_design_subtheme/components/rw-form/rw-form--widget.css +++ b/html/themes/custom/common_design_subtheme/components/rw-form/rw-form--widget.css @@ -68,6 +68,10 @@ form .js-media-library-widget .field-suffix + .description { .js-media-library-views-form table tbody td a { color: var(--cd-reliefweb-brand-blue--dark); } +.js-media-library-views-form .views-field-field-media-image img { + max-width: 220px; + max-height: 140px; +} form .views-field-media-library-select-form .form-type-checkbox:only-of-type { margin-right: 24px; @@ -93,6 +97,10 @@ form .media-library-item__preview-wrapper .media-library-item__name { word-break: break-all; font-size: 16px; } +form .media-library-item__preview-wrapper .media-library-item__preview img.image-style-icon { + width: 64px; + height: 64px; +} /* Inline enity form styling. */ form .ief-entity-table .ief-entity-operations { From d5a5a2f668d2ebad0f6d96980d4c243527bc95bb Mon Sep 17 00:00:00 2001 From: orakili Date: Fri, 17 Jun 2022 05:16:49 +0000 Subject: [PATCH 17/36] feat: add drush command to generate legacy redirection symlinks and handle that in nginx Refs: OPS-8377 --- .../lua/01_legacy_attachment_redirections.lua | 38 +++-- .../custom/reliefweb_files/drush.services.yml | 2 +- .../src/Commands/ReliefWebFilesCommands.php | 145 ++++++++++++++++++ 3 files changed, 174 insertions(+), 11 deletions(-) diff --git a/docker/etc/nginx/custom/lua/01_legacy_attachment_redirections.lua b/docker/etc/nginx/custom/lua/01_legacy_attachment_redirections.lua index 76ba3766c..c2ab5dfb8 100644 --- a/docker/etc/nginx/custom/lua/01_legacy_attachment_redirections.lua +++ b/docker/etc/nginx/custom/lua/01_legacy_attachment_redirections.lua @@ -1,17 +1,35 @@ local attachment_file = ngx.var.attachment_file --- The generation of the UUID from the legacy URL is similar to what is done --- in \Drupal\reliefeb_utility\Helpers\LegacyHelper::getAttachmentUuid(). +-- Try to get the attachment from a potential symlink. +-- This handles the redirection for some location maps so that they all have +-- the same pattern for example to compensate for some inconsistencies between +-- the URL, URI in DB and file on disk in D7. +-- This can also be used to handle aliases for some specific files. +local symlink = ngx.var.document_root .. '/sites/default/files/legacy-attachments/' .. attachment_file; +local handle = io.popen('readlink "' .. symlink .. '"') +local target = handle:read() +handle:close() --- Strip the % characters. -attachment_file = string.gsub(attachment_file, "%%", '') +-- If there was no symlink then we generated the target based on the filename. +if target == nil or target == '' then + -- The generation of the UUID from the legacy URL is similar to what is done + -- in \Drupal\reliefeb_utility\Helpers\LegacyHelper::getAttachmentUuid(). --- Consolidate the URL. -local legacy_url = 'https://reliefweb.int/sites/reliefweb.int/files/resources/' .. attachment_file + -- Strip the % characters. + attachment_file = string.gsub(attachment_file, "%%", '') --- Generate the UUID corresponding to the URL. -local jit_uuid = require 'resty.jit-uuid' -local uuid = jit_uuid.generate_v3('6ba7b811-9dad-11d1-80b4-00c04fd430c8', legacy_url) + -- Consolidate the URL. + local legacy_url = 'https://reliefweb.int/sites/reliefweb.int/files/resources/' .. attachment_file + + -- Generate the UUID corresponding to the URL. + local jit_uuid = require 'resty.jit-uuid' + local uuid = jit_uuid.generate_v3('6ba7b811-9dad-11d1-80b4-00c04fd430c8', legacy_url) + + target = uuid .. '/' .. attachment_file +else + local uuid = string.gsub(target, '../attachments/[^/]+/[^/]+/([^.]+).+', '%1') + target = uuid .. '/' .. attachment_file +end -- Redirect to the new URL. -return ngx.redirect('/attachments/' .. uuid .. '/' .. attachment_file, 301) +return ngx.redirect('/attachments/' .. target, 301) diff --git a/html/modules/custom/reliefweb_files/drush.services.yml b/html/modules/custom/reliefweb_files/drush.services.yml index 78d202748..446c1fbd6 100644 --- a/html/modules/custom/reliefweb_files/drush.services.yml +++ b/html/modules/custom/reliefweb_files/drush.services.yml @@ -1,6 +1,6 @@ services: reliefweb_files.commands: class: \Drupal\reliefweb_files\Commands\ReliefWebFilesCommands - arguments: ['@config.factory', '@database', '@entity_field.manager', '@entity_type.manager', '@reliefweb_files.client'] + arguments: ['@config.factory', '@database', '@entity_field.manager', '@entity_type.manager', '@file_system', '@reliefweb_files.client'] tags: - { name: drush.command } diff --git a/html/modules/custom/reliefweb_files/src/Commands/ReliefWebFilesCommands.php b/html/modules/custom/reliefweb_files/src/Commands/ReliefWebFilesCommands.php index 1eb3dfb53..7ed650322 100644 --- a/html/modules/custom/reliefweb_files/src/Commands/ReliefWebFilesCommands.php +++ b/html/modules/custom/reliefweb_files/src/Commands/ReliefWebFilesCommands.php @@ -8,12 +8,14 @@ use Drupal\Core\Database\Database; use Drupal\Core\Entity\EntityFieldManagerInterface; use Drupal\Core\Entity\EntityTypeManagerInterface; +use Drupal\Core\File\FileSystemInterface; use Drupal\reliefweb_files\Plugin\Field\FieldType\ReliefWebFile; use Drupal\reliefweb_files\Services\DocstoreClient; use Drupal\reliefweb_utility\Helpers\LegacyHelper; use Drupal\reliefweb_utility\Helpers\UrlHelper; use Drupal\reliefweb_utility\Traits\EntityDatabaseInfoTrait; use Drush\Commands\DrushCommands; +use Symfony\Component\Uid\Uuid; /** * ReliefWeb migration Drush commandfile. @@ -52,6 +54,13 @@ class ReliefWebFilesCommands extends DrushCommands { */ protected $entityTypeManager; + /** + * The file system service. + * + * @var \Drupal\Core\File\FileSystemInterface + */ + protected $fileSystem; + /** * The docstore client service. * @@ -67,12 +76,14 @@ public function __construct( Connection $database, EntityFieldManagerInterface $entity_field_manager, EntityTypeManagerInterface $entity_type_manager, + FileSystemInterface $file_system, DocstoreClient $docstore_client, ) { $this->configFactory = $config_factory; $this->database = $database; $this->entityFieldManager = $entity_field_manager; $this->entityTypeManager = $entity_type_manager; + $this->fileSystem = $file_system; $this->docstoreClient = $docstore_client; } @@ -896,4 +907,138 @@ public function generateRedirectionSymlinks() { ])); } + /** + * Generate a symlink of a legacy URL. + * + * This generates a symlink to handle a file whose filename differs from + * its URI basename because the nginx redirection logic cannot work in that + * case as the UUID from the URL will not match the actual UUID of the file. + * So we generate a symlink using the relevant part from the URL to the + * given preview or attachment with the given UUID. + * + * Ex: public://file1.pdf with filename file1_compressed.pdf. + * + * @param string $url + * Legacy attachment or preview URL. + * @param string $uuid + * UUID of the file in the new system. + * + * @command rw-files:generate-redirection-symlink + * + * @usage rw-files:generate-redirection-symlink URL UUID + * Generate the symlink for the URL to the file with the given UUID. + * + * @validate-module-enabled reliefweb_files + */ + public function generateRedirectionSymlink($url, $uuid) { + if (!Uuid::isValid($uuid)) { + $this->logger()->error(dt('Invalid UUID: @uuid', [ + '@uuid' => $uuid, + ])); + return FALSE; + } + + $base_directory = rtrim($this->fileSystem->realpath('public://'), '/'); + + // Preview. + if (preg_match('#^https?://[^/]+/sites/[^/]+/files/resource-previews/(\d+)-[^/]+$#', $url, $match) === 1) { + $extension = 'png'; + $directory = $base_directory . '/legacy-previews'; + $target = '../previews/' . substr($uuid, 0, 2) . '/' . substr($uuid, 2, 2) . '/' . $uuid . '.' . $extension; + $link = $directory . '/' . $match[1] . '.' . $extension; + } + // Attachment. + elseif (preg_match('#^https?://[^/]+/sites/[^/]+/files/resources/([^/]+)$#', $url, $match) === 1) { + $extension = ReliefWebFile::extractFileExtension($match[1]); + $directory = $base_directory . '/legacy-attachments'; + $target = '../attachments/' . substr($uuid, 0, 2) . '/' . substr($uuid, 2, 2) . '/' . $uuid . '.' . $extension; + $link = $directory . '/' . $match[1]; + } + else { + $this->logger()->error(dt('Invalid attachment or preview URL: @url', [ + '@url' => $url, + ])); + return FALSE; + } + + // Create the legacy directory. + if (!$this->fileSystem->prepareDirectory($directory, $this->fileSystem::CREATE_DIRECTORY)) { + $this->logger()->error(dt('Unable to create @directory', [ + '@directory' => $directory, + ])); + return FALSE; + } + + // Remove any previous link. + if (is_link($link)) { + @unlink($link); + } + + // Create the symlink. + if (!@symlink($target, $link)) { + $this->logger()->error(dt('Unable to create symlink: @link => @target', [ + '@link' => $link, + '@target' => $target, + ])); + return FALSE; + } + + $this->logger()->success(dt('Successfully created symlink: @link => @target', [ + '@link' => $link, + '@target' => $target, + ])); + return TRUE; + } + + /** + * Remove a symlink of a legacy URL. + * + * @param string $url + * Legacy attachment or preview URL. + * + * @command rw-files:remove-redirection-symlink + * + * @usage rw-files:remove-redirection-symlink + * Remove a legacy symlink. + * + * @validate-module-enabled reliefweb_files + */ + public function removeRedirectionSymlink($url) { + $base_directory = rtrim($this->fileSystem->realpath('public://'), '/'); + + // Preview. + if (preg_match('#^https?://[^/]+/sites/[^/]+/files/resource-previews/(\d+)-[^/]+$#', $url, $match) === 1) { + $extension = '.png'; + $directory = $base_directory . '/legacy-previews'; + $link = $directory . '/' . $match[1] . $extension; + } + // Attachment. + elseif (preg_match('#^https?://[^/]+/sites/[^/]+/files/resources/([^/]+)$#', $url, $match) === 1) { + $extension = ReliefWebFile::extractFileExtension($match[1]); + $directory = $base_directory . '/legacy-attachments'; + $link = $directory . '/' . $match[1]; + } + else { + $this->logger()->error(dt('Invalid attachment or preview URL: @url', [ + '@url' => $url, + ])); + return FALSE; + } + + // Remove any previous link. + if (is_link($link)) { + @unlink($link); + + $this->logger()->success(dt('Successfully removed symlink @link', [ + '@link' => $link, + ])); + } + else { + $this->logger()->notice(dt('Symlink @link didn\'t exist', [ + '@link' => $link, + ])); + } + return TRUE; + } + } From 65a57b10886af7df18695b18f9ce829485d42dc5 Mon Sep 17 00:00:00 2001 From: left23 Date: Thu, 16 Jun 2022 14:00:40 +0200 Subject: [PATCH 18/36] RW-482 add missing variables --- .../common_design_subtheme/css/brand.css | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/html/themes/custom/common_design_subtheme/css/brand.css b/html/themes/custom/common_design_subtheme/css/brand.css index 9364af32c..026624f65 100644 --- a/html/themes/custom/common_design_subtheme/css/brand.css +++ b/html/themes/custom/common_design_subtheme/css/brand.css @@ -33,6 +33,41 @@ --cd-rgb-reliefweb-brand-grey--dark: 46, 52, 54; --cd-rgb-reliefweb-brand-grey--light: 230, 236, 239; + --cd-reliefweb-grey--light: #d9d9d9; + --cd-reliefweb-grey--light--bg: rgba(217, 217, 217, 0.2); + /* Orange */ + --cd-reliefweb-orange: #f49e2c; + --cd-reliefweb-orange--bg: rgba(244, 158, 44, 0.2); + /* Blue */ + --cd-reliefweb-blue: #076d96; + --cd-reliefweb-blue--bg: rgba(7, 109, 150, 0.2); + /* Green */ + --cd-reliefweb-green: #88bb09; + --cd-reliefweb-green--bg: rgba(136, 187, 9, 0.2); + /* Red */ + --cd-reliefweb-red: #da190b; + --cd-reliefweb-red--bg: rgba(218, 25, 11, 0.2); + /* Purple */ + --cd-reliefweb-purple: #9509bb; + --cd-reliefweb-purple--bg: rgba(149, 9, 187, 0.2); + /* Grey */ + --cd-reliefweb-grey: #4b4b4b; + --cd-reliefweb-grey--bg: rgba(75, 75, 75, 0.2); + /* Brown */ + --cd-reliefweb-brown: #8f5507; + --cd-reliefweb-brown--bg: rgba(143, 85, 7, 0.2); + /* Yellow */ + --cd-reliefweb-yellow: #f5cb2f; + --cd-reliefweb-yellow--bg: rgba(245, 203, 47, 0.2); + /* Cyan */ + --cd-reliefweb-cyan: #56c9f7; + --cd-reliefweb-cyan--bg: rgba(86, 201, 247, 0.2); + + /* Colour variations. */ + --cd-reliefweb-orange--alert: #eb8705; + --cd-reliefweb-pink: rgba(246, 92, 81, 0.2); + --cd-reliefweb-grey--disable: rgba(230, 236, 239, 0.5); + /* Fonts sizes in REMs */ --cd-font-size--large: 1.5rem; /* 24px */ } From 306687a62ff068f1c4423af2add8302c9b92d926 Mon Sep 17 00:00:00 2001 From: left23 Date: Thu, 16 Jun 2022 14:41:31 +0200 Subject: [PATCH 19/36] RW-482 update variable syntax --- .../components/rw-cd-header-footer/cd-user-menu.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-user-menu.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-user-menu.css index b57393cf3..12fb0dc8e 100644 --- a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-user-menu.css +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-user-menu.css @@ -34,5 +34,5 @@ width: 14px; height: 14px; vertical-align: middle; - fill: $cd-white; + fill: var(--cd-white); } From ce75ba97e863587d4890bb4443096a5970fa8555 Mon Sep 17 00:00:00 2001 From: left23 Date: Thu, 16 Jun 2022 16:53:40 +0200 Subject: [PATCH 20/36] RW-482 replace non-existance variable --- .../components/rw-admin-menu/rw-admin-menu.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html/themes/custom/common_design_subtheme/components/rw-admin-menu/rw-admin-menu.css b/html/themes/custom/common_design_subtheme/components/rw-admin-menu/rw-admin-menu.css index 847602eaf..851843a7f 100644 --- a/html/themes/custom/common_design_subtheme/components/rw-admin-menu/rw-admin-menu.css +++ b/html/themes/custom/common_design_subtheme/components/rw-admin-menu/rw-admin-menu.css @@ -43,7 +43,7 @@ height: calc(35px / 3); content: ""; transform: translateY(-50%); - background: var(--cd-blue--light); + background: var(--brand-grey); } .admin-menu-dropdown__inner { From 32956f0bcbf2ad9389d3b6cf86dd169ddd41785b Mon Sep 17 00:00:00 2001 From: left23 Date: Thu, 16 Jun 2022 17:01:44 +0200 Subject: [PATCH 21/36] RW-482 correct typos --- .../common_design_subtheme/common_design_subtheme.libraries.yml | 2 +- .../components/rw-cd-header-footer/cd-dropdowns.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index 30ab42b25..25c43506c 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -408,7 +408,7 @@ rw-view-more: rw-cd-header-footer: css: theme: - components/rw-cd-header-footer/cd-dropdown.css: {} + components/rw-cd-header-footer/cd-dropdowns.css: {} components/rw-cd-header-footer/cd-footer.css: {} components/rw-cd-header-footer/cd-header.css: {} components/rw-cd-header-footer/cd-language-switcher.css: {} diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-dropdowns.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-dropdowns.css index c354465f0..de7b757a2 100644 --- a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-dropdowns.css +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-dropdowns.css @@ -1,6 +1,6 @@ /* Hide label on mobile */ @media all and (max-width: 767px) { - .cd-global-header button[aria-expanded] span [class*="__btn-label"] { + .cd-global-header button[aria-expanded] span[class*="__btn-label"] { position: absolute !important; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); From 5ccb0f2a617b764d9650e57780838b6abfc5f476 Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 20 Jun 2022 11:46:52 +0200 Subject: [PATCH 22/36] RW-591 add support for Google Search --- .../templates/layout/html.html.twig | 76 ++++++++++++++++++- 1 file changed, 72 insertions(+), 4 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/templates/layout/html.html.twig b/html/themes/custom/common_design_subtheme/templates/layout/html.html.twig index d8648edb6..e3d302699 100644 --- a/html/themes/custom/common_design_subtheme/templates/layout/html.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/layout/html.html.twig @@ -1,7 +1,75 @@ -{% embed '@common_design/layout/html.html.twig' %} +{# +/** + * @file + * Theme override for the basic structure of a single Drupal page. + * + * Variables: + * - logged_in: A flag indicating if user is logged in. + * - root_path: The root path of the current page (e.g., node, admin, user). + * - node_type: The content type for the current node, if the page is a node. + * - head_title: List of text elements that make up the head_title variable. + * May contain one or more of the following: + * - title: The title of the page. + * - name: The name of the site. + * - slogan: The slogan of the site. + * - page_top: Initial rendered markup. This should be printed before 'page'. + * - page: The rendered page markup. + * - page_bottom: Closing rendered markup. This variable should be printed after + * 'page'. + * - db_offline: A flag indicating if the database is offline. + * - placeholder_token: The token for generating head, css, js and js-bottom + * placeholders. + * + * @see template_preprocess_html() + */ +#} +{% + set body_classes = [ + logged_in ? 'user-logged-in', + not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class, + node_type ? 'page-node-type-' ~ node_type|clean_class, + db_offline ? 'db-offline', + ] +%} + + + + + {{ head_title|safe_join(' | ') }} + + + + + + {# + Keyboard navigation/accessibility link to main content section in + page.html.twig. + #} + + {{ page_top }} + {{ page }} + {{ page_bottom }} - {% block icons %} + {% block icons %} {% include '@common_design_subtheme/cd/cd-icons/cd-icons.html.twig' %} - {% endblock %} + {% endblock %} -{% endembed %} + + + From 8ed35246c7dd126f8324011db4c6da60dbe1ea6c Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 20 Jun 2022 12:54:14 +0200 Subject: [PATCH 23/36] RW-589 add soft-footer css file and to library --- .../common_design_subtheme.libraries.yml | 1 + .../rw-cd-header-footer/cd-soft-footer.css | 59 +++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-soft-footer.css diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index 25c43506c..be7210066 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -415,6 +415,7 @@ rw-cd-header-footer: components/rw-cd-header-footer/cd-layout.css: {} components/rw-cd-header-footer/cd-logo.css: {} components/rw-cd-header-footer/cd-ocha.css: {} + components/rw-cd-header-footer/cd-soft-footer.css: {} components/rw-cd-header-footer/cd-user-menu.css: {} cd-block-title: diff --git a/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-soft-footer.css b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-soft-footer.css new file mode 100644 index 000000000..99bb8d12a --- /dev/null +++ b/html/themes/custom/common_design_subtheme/components/rw-cd-header-footer/cd-soft-footer.css @@ -0,0 +1,59 @@ +.cd-soft-footer::before { + background: var(--brand-primary); +} + +.cd-soft-footer .visually-hidden { + position: absolute !important; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + width: 1px; + height: 1px; + word-wrap: normal; +} + +.cd-soft-footer .mc-field-group { + display: flex; + flex-direction: column; +} + +.cd-soft-footer .cd-button { + margin-top: 0.5rem; + padding: 10px 12px; + text-transform: uppercase; + color: var(--cd-white); + background: var(--brand-highlight); + font-weight: 700; +} + +.cd-soft-footer label { + flex: 0 1 100%; + margin: 0; + padding: 10px 12px 10px 0; + text-align: left; + color: var(--cd-white); +} + +.cd-soft-footer__inner input[type="email"] { + padding: 10px 12px; + color: var(--cd-default-text-color); +} + +.cd-soft-footer .cd-button:hover, +.cd-soft-footer .cd-button:focus { + background: var(--brand-primary); +} + +.cd-soft-footer input:focus, +.cd-soft-footer .cd-button:focus { + outline: 3px solid var(--brand-primary--light); + outline-offset: -2px; +} + +@media (min-width: 576px) { + .cd-soft-footer .mc-field-group { + flex-direction: row; + } + .cd-soft-footer .cd-button { + margin-top: 0; + } +} From dc821f0e2fc0fbe44c8812a6aed4e16daee859eb Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 20 Jun 2022 13:33:32 +0200 Subject: [PATCH 24/36] RW-589 add template for soft footer region with mailchimp markup and add to page templates --- .../cd/cd-footer/cd-soft-footer.html.twig | 27 +++++++++++++++++++ .../templates/layout/page--403.html.twig | 4 +++ .../templates/layout/page--404.html.twig | 4 +++ .../layout/page--node--edit.html.twig | 3 +++ .../templates/layout/page.html.twig | 4 +++ 5 files changed, 42 insertions(+) create mode 100644 html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-soft-footer.html.twig diff --git a/html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-soft-footer.html.twig b/html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-soft-footer.html.twig new file mode 100644 index 000000000..fbc702467 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-soft-footer.html.twig @@ -0,0 +1,27 @@ +
+
+ +
+
+
+ +
+ + + + +
+
+ + +
+ + +
+
+
+ +
+
diff --git a/html/themes/custom/common_design_subtheme/templates/layout/page--403.html.twig b/html/themes/custom/common_design_subtheme/templates/layout/page--403.html.twig index c00bb489b..228be986c 100644 --- a/html/themes/custom/common_design_subtheme/templates/layout/page--403.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/layout/page--403.html.twig @@ -54,6 +54,10 @@ {% endblock %} + {% block footer_soft %} + {% include '@common_design_subtheme/cd/cd-footer/cd-soft-footer.html.twig' %} + {% endblock %} + {% block footer %} {% include '@common_design_subtheme/cd/cd-footer/cd-footer.html.twig' %} {% endblock %} diff --git a/html/themes/custom/common_design_subtheme/templates/layout/page--404.html.twig b/html/themes/custom/common_design_subtheme/templates/layout/page--404.html.twig index c8abb042d..a0c31ac68 100644 --- a/html/themes/custom/common_design_subtheme/templates/layout/page--404.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/layout/page--404.html.twig @@ -54,6 +54,10 @@ {% endblock %} + {% block footer_soft %} + {% include '@common_design_subtheme/cd/cd-footer/cd-soft-footer.html.twig' %} + {% endblock %} + {% block footer %} {% include '@common_design_subtheme/cd/cd-footer/cd-footer.html.twig' %} {% endblock %} diff --git a/html/themes/custom/common_design_subtheme/templates/layout/page--node--edit.html.twig b/html/themes/custom/common_design_subtheme/templates/layout/page--node--edit.html.twig index 20ce54c6f..51534ccac 100644 --- a/html/themes/custom/common_design_subtheme/templates/layout/page--node--edit.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/layout/page--node--edit.html.twig @@ -24,6 +24,9 @@ {% endblock %} + {% block footer_soft %} + {% endblock %} + {% block footer %} {% include '@common_design_subtheme/cd/cd-footer/cd-footer.html.twig' %} {% endblock %} diff --git a/html/themes/custom/common_design_subtheme/templates/layout/page.html.twig b/html/themes/custom/common_design_subtheme/templates/layout/page.html.twig index 2f187d914..2cd2e09e1 100644 --- a/html/themes/custom/common_design_subtheme/templates/layout/page.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/layout/page.html.twig @@ -4,6 +4,10 @@ {% include '@common_design_subtheme/cd/cd-header/cd-header.html.twig' %} {% endblock %} + {% block footer_soft %} + {% include '@common_design_subtheme/cd/cd-footer/cd-soft-footer.html.twig' %} + {% endblock %} + {% block footer %} {% include '@common_design_subtheme/cd/cd-footer/cd-footer.html.twig' %} {% endblock %} From 5d4a47d61830aa670cb1dc87ab9234192b1ff1bf Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 20 Jun 2022 13:34:03 +0200 Subject: [PATCH 25/36] RW-589 place soft footer in region --- config/block.block.soft_footer.yml | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 config/block.block.soft_footer.yml diff --git a/config/block.block.soft_footer.yml b/config/block.block.soft_footer.yml new file mode 100644 index 000000000..30b26b74f --- /dev/null +++ b/config/block.block.soft_footer.yml @@ -0,0 +1,20 @@ +uuid: f56298fa-014b-462a-a177-b767582d60c1 +langcode: en +status: true +dependencies: + module: + - system + theme: + - common_design_subtheme +id: soft_footer +theme: common_design_subtheme +region: footer_soft +weight: 0 +provider: null +plugin: system_powered_by_block +settings: + id: system_powered_by_block + label: 'Soft Footer' + label_display: '0' + provider: system +visibility: { } From 633ffff896b01ce5741316976cc862e63870c7f5 Mon Sep 17 00:00:00 2001 From: left23 Date: Mon, 20 Jun 2022 13:52:42 +0200 Subject: [PATCH 26/36] RW-590 remove help description --- config/field.field.node.topic.field_icon.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/field.field.node.topic.field_icon.yml b/config/field.field.node.topic.field_icon.yml index be24f2be7..49a81d8fd 100644 --- a/config/field.field.node.topic.field_icon.yml +++ b/config/field.field.node.topic.field_icon.yml @@ -11,7 +11,7 @@ field_name: field_icon entity_type: node bundle: topic label: Icon -description: 'Use relevant icons from OCHA''s Humanitarian and Country Icons 2018 with modifications in size (600x600) and color (ReliefWeb blue: #0988bb).' +description: '' required: true translatable: false default_value: { } From 0801de0a9c626561f5cc74077b4e5b5f198b14d0 Mon Sep 17 00:00:00 2001 From: orakili Date: Tue, 21 Jun 2022 05:36:08 +0000 Subject: [PATCH 27/36] [RW-589] Add translations for softfooter mailchimp form --- .../templates/cd/cd-footer/cd-soft-footer.html.twig | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-soft-footer.html.twig b/html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-soft-footer.html.twig index fbc702467..bb1e5db9f 100644 --- a/html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-soft-footer.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/cd/cd-footer/cd-soft-footer.html.twig @@ -4,12 +4,12 @@
- +
- - - - + + + +
From e6751c4c8d02be95b2e4c7a87b6ad1e7b7af2254 Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 21 Jun 2022 09:13:19 +0200 Subject: [PATCH 28/36] RW-591 reset html template override --- .../templates/layout/html.html.twig | 79 ++----------------- 1 file changed, 6 insertions(+), 73 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/templates/layout/html.html.twig b/html/themes/custom/common_design_subtheme/templates/layout/html.html.twig index e3d302699..a0932ec80 100644 --- a/html/themes/custom/common_design_subtheme/templates/layout/html.html.twig +++ b/html/themes/custom/common_design_subtheme/templates/layout/html.html.twig @@ -1,75 +1,8 @@ -{# -/** - * @file - * Theme override for the basic structure of a single Drupal page. - * - * Variables: - * - logged_in: A flag indicating if user is logged in. - * - root_path: The root path of the current page (e.g., node, admin, user). - * - node_type: The content type for the current node, if the page is a node. - * - head_title: List of text elements that make up the head_title variable. - * May contain one or more of the following: - * - title: The title of the page. - * - name: The name of the site. - * - slogan: The slogan of the site. - * - page_top: Initial rendered markup. This should be printed before 'page'. - * - page: The rendered page markup. - * - page_bottom: Closing rendered markup. This variable should be printed after - * 'page'. - * - db_offline: A flag indicating if the database is offline. - * - placeholder_token: The token for generating head, css, js and js-bottom - * placeholders. - * - * @see template_preprocess_html() - */ -#} -{% - set body_classes = [ - logged_in ? 'user-logged-in', - not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class, - node_type ? 'page-node-type-' ~ node_type|clean_class, - db_offline ? 'db-offline', - ] -%} - - - - - {{ head_title|safe_join(' | ') }} - - - - - - {# - Keyboard navigation/accessibility link to main content section in - page.html.twig. - #} - - {{ page_top }} - {{ page }} - {{ page_bottom }} +{% embed '@common_design/layout/html.html.twig' %} - {% block icons %} - {% include '@common_design_subtheme/cd/cd-icons/cd-icons.html.twig' %} - {% endblock %} + {% block icons %} + {% include '@common_design_subtheme/cd/cd-icons/cd-icons.html.twig' %} + {% endblock %} + +{% endembed %} - - - From a4a6a2d296c0c8b6c559c87f9a143ed357ff0767 Mon Sep 17 00:00:00 2001 From: left23 Date: Tue, 21 Jun 2022 09:13:53 +0200 Subject: [PATCH 29/36] RW-591 override html template for homepage, add script to body --- .../templates/layout/html--home.html.twig | 77 +++++++++++++++++++ 1 file changed, 77 insertions(+) create mode 100644 html/themes/custom/common_design_subtheme/templates/layout/html--home.html.twig diff --git a/html/themes/custom/common_design_subtheme/templates/layout/html--home.html.twig b/html/themes/custom/common_design_subtheme/templates/layout/html--home.html.twig new file mode 100644 index 000000000..19715cd13 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/templates/layout/html--home.html.twig @@ -0,0 +1,77 @@ +{# +/** + * @file + * Theme override for the basic structure of a single Drupal page. + * + * Variables: + * - logged_in: A flag indicating if user is logged in. + * - root_path: The root path of the current page (e.g., node, admin, user). + * - node_type: The content type for the current node, if the page is a node. + * - head_title: List of text elements that make up the head_title variable. + * May contain one or more of the following: + * - title: The title of the page. + * - name: The name of the site. + * - slogan: The slogan of the site. + * - page_top: Initial rendered markup. This should be printed before 'page'. + * - page: The rendered page markup. + * - page_bottom: Closing rendered markup. This variable should be printed after + * 'page'. + * - db_offline: A flag indicating if the database is offline. + * - placeholder_token: The token for generating head, css, js and js-bottom + * placeholders. + * + * @see template_preprocess_html() + */ +#} +{% + set body_classes = [ + logged_in ? 'user-logged-in', + not root_path ? 'path-frontpage' : 'path-' ~ root_path|clean_class, + node_type ? 'page-node-type-' ~ node_type|clean_class, + db_offline ? 'db-offline', + ] +%} + + + + + {{ head_title|safe_join(' | ') }} + + + + {# + Keyboard navigation/accessibility link to main content section in + page.html.twig. + #} + + {{ page_top }} + {{ page }} + {{ page_bottom }} + + {% block icons %} + {% include '@common_design/cd/cd-icons/cd-icons.html.twig' %} + {% endblock %} + + + + + + + + From 9912490178bc6048f21e49344f3cb2d641250edd Mon Sep 17 00:00:00 2001 From: left23 Date: Wed, 22 Jun 2022 12:20:22 +0200 Subject: [PATCH 30/36] RW-600 adjust meta description for Reports --- html/modules/custom/reliefweb_meta/reliefweb_meta.module | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/html/modules/custom/reliefweb_meta/reliefweb_meta.module b/html/modules/custom/reliefweb_meta/reliefweb_meta.module index eae89481d..24f139161 100644 --- a/html/modules/custom/reliefweb_meta/reliefweb_meta.module +++ b/html/modules/custom/reliefweb_meta/reliefweb_meta.module @@ -232,10 +232,10 @@ function reliefweb_meta_get_node_metatags(NodeInterface $node) { // Note: for countries we don't use 'reliefweb_meta_description_term_list' // to ensure the primary country is the first in the list. // - // Language. - $description = reliefweb_meta_description_term($node, $terms, 'language'); // Content format. - $description .= reliefweb_meta_description_term($node, $terms, 'content_format', ' '); + $description = reliefweb_meta_description_term($node, $terms, 'content_format', ' '); + // Language. + $description .= reliefweb_meta_description_term($node, $terms, 'language', ' in '); // Countries. if (!$node->field_primary_country->isEmpty()) { $description .= reliefweb_meta_description_term($node, $terms, 'primary_country', ' on '); From 811eaaf38537ed684df90f59b45c71e9f25a2158 Mon Sep 17 00:00:00 2001 From: left23 Date: Wed, 22 Jun 2022 12:30:22 +0200 Subject: [PATCH 31/36] RW-600 add country to Job meta data title --- html/modules/custom/reliefweb_meta/reliefweb_meta.module | 2 ++ 1 file changed, 2 insertions(+) diff --git a/html/modules/custom/reliefweb_meta/reliefweb_meta.module b/html/modules/custom/reliefweb_meta/reliefweb_meta.module index 24f139161..3c016f11a 100644 --- a/html/modules/custom/reliefweb_meta/reliefweb_meta.module +++ b/html/modules/custom/reliefweb_meta/reliefweb_meta.module @@ -205,6 +205,8 @@ function reliefweb_meta_get_node_metatags(NodeInterface $node) { // "Category Type in Country about Theme, requiring Years of experience, // from Source; closing on Date" // + // Add the country to the title. + $title .= reliefweb_meta_description_term($node, $terms, 'country', ' - '); // Category. $description = reliefweb_meta_description_term($node, $terms, 'career_categories'); // Job type. From 069daac6b32fcb18473a32c0c6d32b03d1a31918 Mon Sep 17 00:00:00 2001 From: orakili Date: Thu, 23 Jun 2022 01:46:18 +0000 Subject: [PATCH 32/36] feat: add command to migrate legacy redirections Refs: RW-558 --- .../src/Commands/ReliefWebMigrateCommands.php | 158 ++++++++++++++++++ 1 file changed, 158 insertions(+) diff --git a/html/modules/custom/reliefweb_migrate/src/Commands/ReliefWebMigrateCommands.php b/html/modules/custom/reliefweb_migrate/src/Commands/ReliefWebMigrateCommands.php index d50fb56cf..e57506b2e 100644 --- a/html/modules/custom/reliefweb_migrate/src/Commands/ReliefWebMigrateCommands.php +++ b/html/modules/custom/reliefweb_migrate/src/Commands/ReliefWebMigrateCommands.php @@ -20,11 +20,13 @@ use Drupal\migrate\Exception\RequirementsException; use Drupal\migrate\Plugin\MigrationPluginManager; use Drupal\migrate\Plugin\RequirementsInterface; +use Drupal\reliefweb_migrate\Entity\AccumulatedRedirectStorage; use Drupal\reliefweb_migrate\Plugin\migrate\source\SourceMigrationHighWaterInterface; use Drupal\reliefweb_migrate\Plugin\migrate\source\SourceMigrationStatusInterface; use Drupal\reliefweb_utility\Helpers\LegacyHelper; use Drush\Commands\DrushCommands; use GuzzleHttp\Psr7\Utils; +use Symfony\Component\Uid\Uuid; /** * ReliefWeb migration Drush commandfile. @@ -1838,4 +1840,160 @@ public function migrateContentFormatRevisions(array $options = [ } } + /** + * Migrate the legacy redirections. + * + * @command rw-migrate:migrate-legacy-redirections + * + * @usage rw-migrate:migrate-legacy-redirections + * Migrate legacy redirections. + * + * @validate-module-enabled reliefweb_migrate + */ + public function migrateLegacyRedirections() { + $storage = AccumulatedRedirectStorage::createInstance( + // phpcs:ignore + \Drupal::getContainer(), + $this->entityTypeManager->getDefinition('redirect') + ); + $database = Database::getConnection('default', 'rwint7'); + + $bundles = [ + 'country', + 'disaster', + 'job', + 'report', + 'source', + 'training', + ]; + + // List of legacy paths to exclude because they already exist as a path + // alias or redirect, in order to avoid redirection loops. + // This only concern country and disaster legacy URLs because they get + // rewritten by nginx to the path alias patterns. + $exclude = []; + + // Get the path aliases for disasters and countries. + $alias_records = $this->database + ->select('path_alias', 'pa') + ->fields('pa', ['alias']) + ->condition('alias', '^/(disaster|country)/', 'REGEXP') + ->execute() ?? []; + foreach ($alias_records as $record) { + $exclude[mb_strtolower($record->alias)] = TRUE; + } + + // Get the redirects for disasters and countries. + $redirect_records = $this->database + ->select('redirect', 'r') + ->fields('r', ['redirect_source__path']) + ->condition('r.redirect_source__path', '^(disaster|country)/', 'REGEXP') + ->execute() ?? []; + foreach ($redirect_records as $record) { + $exclude['/' . mb_strtolower($record->redirect_source__path)] = TRUE; + } + + // Get the list of already migrated redirects. They can be identified by + // their creation date (see below). + $migrated = $this->database + ->select('redirect', 'r') + ->fields('r', ['uuid', 'uid']) + ->condition('r.created', 844128000, '=') + ->execute() + ?->fetchAllKeyed(0, 1) ?? []; + + $this->logger()->info(dt('@already_migrated legacy URLs already migrated', [ + '@already_migrated' => count($migrated), + ])); + + // Retrieve the legacy redirects. + $records = $database + ->select('feeds_item', 'fi') + ->fields('fi', ['entity_type', 'entity_id', 'url', 'id']) + ->condition('fi.id', $bundles, 'IN') + ->condition('fi.url', '', '<>') + ->execute() ?? []; + + // Transform and store the legacy redirects to migrate. + $legacy_paths = []; + foreach ($records as $record) { + if (empty($record->url) || empty($record->entity_type) || empty($record->entity_id)) { + continue; + } + + $url = 'https://reliefweb.int/rw/' . str_replace('http://www.reliefweb.int/rw/', '', $record->url); + $uuid = Uuid::v3(Uuid::fromString(Uuid::NAMESPACE_URL), $url)->toRfc4122(); + $url_parts = UrlHelper::parse($url); + $path = parse_url($url_parts['path'], \PHP_URL_PATH); + $query = $url_parts['query'] ?? []; + $target = 'entity:' . $record->entity_type . '/' . $record->entity_id; + + switch ($record->id) { + case 'country': + if (empty($query['cc'])) { + continue; + } + $path = '/country/' . $query['cc']; + break; + + case 'disaster': + if (empty($query['emid'])) { + continue; + } + $path = '/disaster/' . $query['emid']; + break; + + default: + $path = str_replace('?OpenDocument', '', $path); + } + + $path = mb_strtolower($path); + if (!isset($exclude[$path]) && !isset($migrated[$uuid])) { + $legacy_paths[$path] = [ + 'uuid' => $uuid, + 'target' => $target, + ]; + } + } + + $total = count($legacy_paths); + if ($total === 0) { + $this->logger()->info(dt('Nothing new to migrate')); + } + else { + $this->logger()->info(dt('@total legacy URLs to migrate', [ + '@total' => $total, + ])); + + // Create the redirects for the legacy URLs. + $count = 0; + foreach (array_chunk($legacy_paths, 1000, TRUE) as $chunk) { + foreach ($chunk as $path => $info) { + $entity = $storage->create([ + 'uuid' => $info['uuid'], + 'uid' => 2, + 'status_code' => 301, + // We use the ReliefWeb creation date so that we can identify + // migrated content: 1996-10-01T00:00:00+00:00. + 'created' => 844128000, + ]); + $entity->setSource($path); + // Not using `setRedirect` so it doesn't prefix the target URI with + // `internal:/`... + $entity->redirect_redirect->set(0, ['uri' => $info['target']]); + + $storage->saveAccumulated($entity); + $count++; + } + + $storage->flushAccumulated(); + + $this->logger()->info(dt('Migrated @count/@total legacy URLs', [ + '@count' => $count, + '@total' => $total, + ])); + } + } + } + } From ab6e974c7be7a198c07734a5e789a07098ae74c4 Mon Sep 17 00:00:00 2001 From: orakili Date: Thu, 23 Jun 2022 02:03:14 +0000 Subject: [PATCH 33/36] [RW-600] Adjust comment and remove prefix --- html/modules/custom/reliefweb_meta/reliefweb_meta.module | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/html/modules/custom/reliefweb_meta/reliefweb_meta.module b/html/modules/custom/reliefweb_meta/reliefweb_meta.module index 3c016f11a..a958064c3 100644 --- a/html/modules/custom/reliefweb_meta/reliefweb_meta.module +++ b/html/modules/custom/reliefweb_meta/reliefweb_meta.module @@ -200,13 +200,14 @@ function reliefweb_meta_get_node_metatags(NodeInterface $node) { break; case 'job': + // Add the country to the title. + $title .= reliefweb_meta_description_term($node, $terms, 'country', ' - '); + // Description in the form: // // "Category Type in Country about Theme, requiring Years of experience, // from Source; closing on Date" // - // Add the country to the title. - $title .= reliefweb_meta_description_term($node, $terms, 'country', ' - '); // Category. $description = reliefweb_meta_description_term($node, $terms, 'career_categories'); // Job type. @@ -229,13 +230,13 @@ function reliefweb_meta_get_node_metatags(NodeInterface $node) { // Description in the form: // - // "Language Type on Country about Tags; published on Date by Sources" + // "Type in Language on Country about Tags; published on Date by Sources" // // Note: for countries we don't use 'reliefweb_meta_description_term_list' // to ensure the primary country is the first in the list. // // Content format. - $description = reliefweb_meta_description_term($node, $terms, 'content_format', ' '); + $description = reliefweb_meta_description_term($node, $terms, 'content_format'); // Language. $description .= reliefweb_meta_description_term($node, $terms, 'language', ' in '); // Countries. From 88693d4f38b156a972981b52066c976f5fd87c0e Mon Sep 17 00:00:00 2001 From: "Peter Droogmans (attiks)" Date: Tue, 21 Jun 2022 15:19:32 +0200 Subject: [PATCH 34/36] feat: Intermediate page for login Refs: #RW-599 --- config/social_auth_hid.settings.yml | 2 +- .../common_design_subtheme.libraries.yml | 2 ++ .../js/login_destination.js | 35 +++++++++++++++++++ 3 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 html/themes/custom/common_design_subtheme/js/login_destination.js diff --git a/config/social_auth_hid.settings.yml b/config/social_auth_hid.settings.yml index 8f4d94c9c..8991a460b 100644 --- a/config/social_auth_hid.settings.yml +++ b/config/social_auth_hid.settings.yml @@ -3,7 +3,7 @@ _core: client_id: CLIENT_ID client_secret: SECRET base_url: 'https://auth.humanitarian.id' -auto_redirect: true +auto_redirect: false disable_default: true disable_password_fields: true disable_email_field: false diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index be7210066..67cc7b32a 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -1,4 +1,6 @@ global-styling: + js: + js/login_destination.js: {} css: theme: css/brand.css: {} diff --git a/html/themes/custom/common_design_subtheme/js/login_destination.js b/html/themes/custom/common_design_subtheme/js/login_destination.js new file mode 100644 index 000000000..b299b24c2 --- /dev/null +++ b/html/themes/custom/common_design_subtheme/js/login_destination.js @@ -0,0 +1,35 @@ +/** + * @file + * Attach destination to login link. + */ + +(function () { + var loginLink = document.querySelector('a[href="/user/login"]'); + if (loginLink) { + loginLink.href += '?destination=' + location.pathname + location.search + location.hash; + + var loginLinks = document.querySelectorAll('a[href="/user/login/hid"]'); + if (loginLinks) { + var destination = '/'; + + if ('URLSearchParams' in window) { + const searchParams = new URLSearchParams(location.search); + if (searchParams.has('destination')) { + destination = searchParams.get('destination'); + } + } + + loginLinks.forEach(function (el) { + el.href += '?destination=' + destination; + }); + } + } + else { + loginLink = document.querySelector('a[href="/user/login/hid"]'); + if (loginLink) { + loginLink.href += '?destination=' + location.pathname + location.search + location.hash; + } + } + +}()); + From 784bed636f70c100c06976f1c6e6814e061abdaf Mon Sep 17 00:00:00 2001 From: orakili Date: Thu, 23 Jun 2022 04:10:19 +0000 Subject: [PATCH 35/36] feat: disable login destination script until consensus --- .../common_design_subtheme.libraries.yml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml index 67cc7b32a..5a20af851 100644 --- a/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml +++ b/html/themes/custom/common_design_subtheme/common_design_subtheme.libraries.yml @@ -1,6 +1,8 @@ global-styling: - js: - js/login_destination.js: {} + # RW-599: disabled as there is no consensus yet on whether that should be + # enabled or not. + # js: + # js/login_destination.js: {} css: theme: css/brand.css: {} From d260338254a4bfb21b3636a016a6ce45ac046271 Mon Sep 17 00:00:00 2001 From: orakili Date: Thu, 23 Jun 2022 04:15:34 +0000 Subject: [PATCH 36/36] feat: style the log in with HID link --- .../components/rw-document/rw-document.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/html/themes/custom/common_design_subtheme/components/rw-document/rw-document.css b/html/themes/custom/common_design_subtheme/components/rw-document/rw-document.css index 9e56e56c8..b73d31176 100644 --- a/html/themes/custom/common_design_subtheme/components/rw-document/rw-document.css +++ b/html/themes/custom/common_design_subtheme/components/rw-document/rw-document.css @@ -111,3 +111,21 @@ .rw-article__content ul + h2 { margin-top: 24px; } + +/* RW-599: Style direct links to log in with HID on book pages to look like + * a button like it was on the RW7 site. */ +.rw-document.rw-article--book .rw-article__content a[href*="/user/login/hid"] { + display: inline-block; + margin: 1rem 0 0 0; + padding: 12px 18px; + color: white; + border: none; + border-radius: 3px; + background: var(--cd-reliefweb-brand-blue--dark); + font-weight: bold; +} +.rw-document.rw-article--book .rw-article__content a[href*="/user/login/hid"]:hover, +.rw-document.rw-article--book .rw-article__content a[href*="/user/login/hid"]:focus, +.rw-document.rw-article--book .rw-article__content a[href*="/user/login/hid"]:active { + background: var(--cd-reliefweb-brand-red--dark); +}