From ef24d652f0ef88a16f67f4d49c9cfceaf87e8a0c Mon Sep 17 00:00:00 2001 From: Olu Date: Wed, 19 Apr 2023 15:55:36 -0400 Subject: [PATCH 1/6] add external link class --- resources/images/external-link-alt-solid.svg | 1 + resources/scss/components/_menu-icon.scss | 22 ++++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 resources/images/external-link-alt-solid.svg diff --git a/resources/images/external-link-alt-solid.svg b/resources/images/external-link-alt-solid.svg new file mode 100644 index 00000000..304bdf85 --- /dev/null +++ b/resources/images/external-link-alt-solid.svg @@ -0,0 +1 @@ + diff --git a/resources/scss/components/_menu-icon.scss b/resources/scss/components/_menu-icon.scss index 439084de..7d1bcca0 100644 --- a/resources/scss/components/_menu-icon.scss +++ b/resources/scss/components/_menu-icon.scss @@ -19,3 +19,25 @@ .menu-icon:hover::after { @apply bg-gray-400 shadow-grey; } + +// For under menu items that have class to designate external link +.main-menu .external { + a::after { + content: url('/_resources/images/external-link-alt-solid.svg'); + display: inline-block; + margin-left: 0.4em; + width: 1em; + height: 1em; + } +} + +.under-menu .external { + div div::after { + content: url('/_resources/images/external-link-alt-solid.svg'); + display: inline-block; + margin-left: 0.4em; + width: 1em; + height: 1em; + vertical-align: text-top; + } +} From fec9151656953ac0134f5f4f53023ba512b203a8 Mon Sep 17 00:00:00 2001 From: Olu Date: Fri, 21 Apr 2023 09:32:01 -0400 Subject: [PATCH 2/6] update external link icon --- resources/images/external-link-alt-solid.svg | 1 - resources/images/external-link.svg | 1 + resources/scss/components/_menu-icon.scss | 4 ++-- 3 files changed, 3 insertions(+), 3 deletions(-) delete mode 100644 resources/images/external-link-alt-solid.svg create mode 100644 resources/images/external-link.svg diff --git a/resources/images/external-link-alt-solid.svg b/resources/images/external-link-alt-solid.svg deleted file mode 100644 index 304bdf85..00000000 --- a/resources/images/external-link-alt-solid.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/resources/images/external-link.svg b/resources/images/external-link.svg new file mode 100644 index 00000000..c4a22642 --- /dev/null +++ b/resources/images/external-link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/scss/components/_menu-icon.scss b/resources/scss/components/_menu-icon.scss index 7d1bcca0..372f6c78 100644 --- a/resources/scss/components/_menu-icon.scss +++ b/resources/scss/components/_menu-icon.scss @@ -23,7 +23,7 @@ // For under menu items that have class to designate external link .main-menu .external { a::after { - content: url('/_resources/images/external-link-alt-solid.svg'); + content: url('/_resources/images/external-link.svg'); display: inline-block; margin-left: 0.4em; width: 1em; @@ -33,7 +33,7 @@ .under-menu .external { div div::after { - content: url('/_resources/images/external-link-alt-solid.svg'); + content: url('/_resources/images/external-link.svg'); display: inline-block; margin-left: 0.4em; width: 1em; From 930e9b93f2494545285d7baaccde2acb8ab0652c Mon Sep 17 00:00:00 2001 From: Olu Date: Fri, 21 Apr 2023 11:09:09 -0400 Subject: [PATCH 3/6] adding example to styleguide --- styleguide/Pages/MenuExternal.php | 31 +++++++++++++++++++++++++++++++ styleguide/menu.json | 10 ++++++++++ 2 files changed, 41 insertions(+) create mode 100644 styleguide/Pages/MenuExternal.php diff --git a/styleguide/Pages/MenuExternal.php b/styleguide/Pages/MenuExternal.php new file mode 100644 index 00000000..4bb034c1 --- /dev/null +++ b/styleguide/Pages/MenuExternal.php @@ -0,0 +1,31 @@ +create(1, true, [ + 'page' => [ + 'controller' => 'MenuTopController', + 'title' => 'Menu external', + 'id' => 103100102, + 'content' => [ + 'main' => ' +

Setup

+
    +
  • Add class "external" to menu links and under-menu items
    • +
  • Suggestion: Use full url for any link considered external.
    • +
+ ', + ], + ], + ]); + } +} diff --git a/styleguide/menu.json b/styleguide/menu.json index 001d8b98..96f41d5e 100644 --- a/styleguide/menu.json +++ b/styleguide/menu.json @@ -371,6 +371,16 @@ "class_name": "", "relative_url": "/styleguide/menu/top", "submenu": [] + }, + "103100102": { + "menu_item_id": 103100102, + "is_active": 1, + "page_id": 103100102, + "target": "", + "display_name": "External menu icon", + "class_name": "external", + "relative_url": "/styleguide/menu/external", + "submenu": [] } } }, From 2dc22e95279cacad1d0e7b0d43648b57aebcfdf5 Mon Sep 17 00:00:00 2001 From: Olu Date: Wed, 26 Apr 2023 13:46:12 -0400 Subject: [PATCH 4/6] SVG update --- resources/images/external-link.svg | 4 +++- resources/scss/components/_menu-icon.scss | 7 +++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/resources/images/external-link.svg b/resources/images/external-link.svg index c4a22642..10ac5f9f 100644 --- a/resources/images/external-link.svg +++ b/resources/images/external-link.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/resources/scss/components/_menu-icon.scss b/resources/scss/components/_menu-icon.scss index 372f6c78..41d16d8f 100644 --- a/resources/scss/components/_menu-icon.scss +++ b/resources/scss/components/_menu-icon.scss @@ -28,6 +28,13 @@ margin-left: 0.4em; width: 1em; height: 1em; + filter: invert(100%); + } + + @screen mt { + a::after { + filter: invert(0); + } } } From 1b9da932274b92a325ff16efb51396dc6fb2086d Mon Sep 17 00:00:00 2001 From: Jenny Porada Date: Thu, 27 Jul 2023 11:09:29 -0400 Subject: [PATCH 5/6] Changed icon to background, added accessible text (external link) and changed appropriate styling --- resources/scss/components/_menu-icon.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/resources/scss/components/_menu-icon.scss b/resources/scss/components/_menu-icon.scss index 41d16d8f..cb30b7af 100644 --- a/resources/scss/components/_menu-icon.scss +++ b/resources/scss/components/_menu-icon.scss @@ -23,12 +23,17 @@ // For under menu items that have class to designate external link .main-menu .external { a::after { - content: url('/_resources/images/external-link.svg'); + content: '(external link)'; + font-size: 0; + background-image: url('/_resources/images/external-link.svg'); + background-size: contain; display: inline-block; - margin-left: 0.4em; - width: 1em; - height: 1em; + margin-left: 7px; + width: 11px; + height: 11px; filter: invert(100%); + position: relative; + bottom: 1px; } @screen mt { From 6d07ad7286592f107715ec7ca01533918bb8f28c Mon Sep 17 00:00:00 2001 From: Jenny Porada Date: Fri, 28 Jul 2023 11:44:35 -0400 Subject: [PATCH 6/6] Under menu external link case (incomplete but not broken) --- resources/scss/components/_menu-icon.scss | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/resources/scss/components/_menu-icon.scss b/resources/scss/components/_menu-icon.scss index cb30b7af..0c476c03 100644 --- a/resources/scss/components/_menu-icon.scss +++ b/resources/scss/components/_menu-icon.scss @@ -43,13 +43,17 @@ } } -.under-menu .external { - div div::after { - content: url('/_resources/images/external-link.svg'); - display: inline-block; - margin-left: 0.4em; - width: 1em; - height: 1em; - vertical-align: text-top; - } +.external a.button div:first-of-type::after { + content: '(external link)'; + font-size: 0; + background-image: url('/_resources/images/external-link.svg'); + background-size: contain; + display: inline-block; + margin-left: 7px; + width: 11px; + height: 11px; + //filter: invert(100%); + position: relative; + top: -11px; + margin-bottom: -11px; }