From 93e562a9940e7294b66b85d0845c18103b604ae0 Mon Sep 17 00:00:00 2001 From: "Lucas Cumsille M." Date: Thu, 3 Oct 2024 05:57:13 +0000 Subject: [PATCH] Pending changes exported from your codespace --- www/docs/js/main.js | 2 +- www/docs/style/sass/accordion.scss | 22 --- www/docs/style/sass/app.scss | 56 +++--- www/docs/style/sass/parts/_accordion.scss | 169 ++++++++++++++++++ .../templates/html/alert/alert-mockup.php | 147 +++++++++++++-- 5 files changed, 339 insertions(+), 57 deletions(-) delete mode 100644 www/docs/style/sass/accordion.scss create mode 100644 www/docs/style/sass/parts/_accordion.scss diff --git a/www/docs/js/main.js b/www/docs/js/main.js index a543ddd684..52e992880d 100644 --- a/www/docs/js/main.js +++ b/www/docs/js/main.js @@ -461,7 +461,7 @@ function createAccordion(triggerSelector, contentSelector) { // Initialize accordion when DOM is loaded document.addEventListener('DOMContentLoaded', function() { - createAccordion('.accordion-trigger', '.accordion-content'); + createAccordion('.accordion-button', '.accordion-content'); }); $(function() { diff --git a/www/docs/style/sass/accordion.scss b/www/docs/style/sass/accordion.scss deleted file mode 100644 index 4dce08ee58..0000000000 --- a/www/docs/style/sass/accordion.scss +++ /dev/null @@ -1,22 +0,0 @@ -.accordion-content { - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease; -} - -.accordion-button[aria-expanded="true"] + .accordion-content { - max-height: 1000px; - transition: max-height 0.3s ease; -} - -.accordion-button { - display: block; - width: 100%; - text-align: left; - padding: 10px; - font-size: 1.2em; - cursor: pointer; - border: none; - background: #f0f0f0; -} - \ No newline at end of file diff --git a/www/docs/style/sass/app.scss b/www/docs/style/sass/app.scss index 2c66610093..39c3b186b4 100644 --- a/www/docs/style/sass/app.scss +++ b/www/docs/style/sass/app.scss @@ -57,16 +57,15 @@ @import "compass/css3"; @import "_twfy-mixins.scss"; @import "accessible-autocomplete"; -@import "accordion"; @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic&display=swap); @import url(https://fonts.googleapis.com/css2?family=Manrope:wght@700&family=Merriweather:wght@400;700&display=swap); /* Foundation Icons v 3.0 MIT License */ @font-face { - font-family: "foundation-icons"; - src: url("/style/foundation-icons/foundation-icons.woff") format("woff"); - font-weight: normal; - font-style: normal; + font-family: "foundation-icons"; + src: url("/style/foundation-icons/foundation-icons.woff") format("woff"); + font-weight: normal; + font-style: normal; } .fi-social-facebook:before, @@ -76,17 +75,22 @@ .fi-megaphone:before, .fi-pound:before, .fi-magnifying-glass:before, -.fi-heart:before +.fi-heart:before, +.fi-plus:before, +.fi-pause:before, +.fi-trash:before, +.fi-page-edit:before, +.fi-x:before { - font-family: "foundation-icons"; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - display: inline-block; - text-decoration: inherit; + font-family: "foundation-icons"; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + display: inline-block; + text-decoration: inherit; } // https://github.com/zurb/foundation-icon-fonts/blob/master/_foundation-icons.scss @@ -98,6 +102,11 @@ .fi-pound:before {content: "\f19a"} .fi-magnifying-glass:before {content: "\f16c"} .fi-heart:before { content: "\f159"; } +.fi-plus:before { content: "\f199"; } +.fi-pause:before { content: "\f191"; } +.fi-trash:before { content: "\f204"; } +.fi-page-edit:before { content: "\f184"; } +.fi-x:before { content: "\f217"; } html, body { @@ -130,13 +139,13 @@ h3 { } .pull-right { - @media (min-width: $medium-screen) { + @media (min-width: $medium-screen) { float: right; margin-left: 1em; } } .pull-left { - @media (min-width: $medium-screen) { + @media (min-width: $medium-screen) { float: left; margin-left: 1em; } @@ -167,12 +176,12 @@ ul { a { overflow-wrap: break-word; word-wrap: break-word; - + -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; - + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + color: $links; } @@ -199,7 +208,7 @@ a:focus { // for .button elements!! vertical-align: -0.4em; } - + &.tertiary { @include button-style($bg: $links); } @@ -232,6 +241,7 @@ form { @import "parts/panels"; @import "parts/promo-banner"; +@import "parts/accordion"; @import "pages/mp"; @import "pages/topics"; diff --git a/www/docs/style/sass/parts/_accordion.scss b/www/docs/style/sass/parts/_accordion.scss new file mode 100644 index 0000000000..d0a6091418 --- /dev/null +++ b/www/docs/style/sass/parts/_accordion.scss @@ -0,0 +1,169 @@ +.label { + background-color: #fff; + color: $primary-color; + padding: 0.25rem 0.5rem; + border-radius: 1rem; + font-size: 0.75rem; + + &--primary-light { + background-color: $primary-color-200; + color: $body-font-color; + } + + &--red { + background-color: lighten($color-red, 40%); + color: $body-font-color; + } +} + +.alert-page-header { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; +} + +.accordion-button { + width: 100%; + display: flex; + justify-content: space-between; + text-align: left; + padding: 10px; + font-size: 1.2em; + cursor: pointer; + border: none; + + &[aria-expanded="true"] { + background-color: $primary-color-200; + color: $body-font-color; + & + .accordion-content{ + max-height: 1000px; + transition: max-height 0.3s ease; + } + + i { + transform: rotate(45deg); + } + } + + .accordion-button--content { + display: flex; + flex-direction: row; + align-content: center; + align-items: center; + gap: 0.75rem; + + .content-subtitle { + @extend .label; + } + } +} + +.accordion-content { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + + .alert-controller-wrapper { + margin-bottom: 2rem; + button { + margin-bottom: 0; + span { + margin-right: 0.2rem; + } + } + } + + .accordion-section { + margin-bottom: 2rem; + } + + dl { + display: flex; + flex-direction: row; + flex-wrap: wrap; + column-gap: 4rem; + row-gap: 1rem; + align-items: center; + + dt { + color: $light-text; + font-size: 0.9rem; + } + } + + .add-remove-tool { + display: flex; + flex-direction: row; + + input { + margin: 0; + height: 40px; + } + + button { + max-width: 100px; + height: 40px; + } + } + + label { + font-size: inherit; + color: inherit; + } + + select { + max-width: 350px; + } +} + +.keyword-list { + ul { + list-style: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0.5rem; + margin-left: 0; + + li { + font-weight: bold; + i { + margin-left: 0.25rem; + } + } + + } +} + +.heading-with-bold-word { + font-weight: 400; + + span { + font-weight: bold; + } +} + +button { + i { + margin-left: 0.25rem; + } +} + +.internal-comment { + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + font-size: 0.8rem; + color: rgb(114, 8, 8); + background-color: rgb(230, 170, 170); + padding: 1rem; + border-radius: 1rem; +} + +.fi-x { + display: none; +} + +.display-none { + display:none !important; +} diff --git a/www/includes/easyparliament/templates/html/alert/alert-mockup.php b/www/includes/easyparliament/templates/html/alert/alert-mockup.php index a7e59dfc5d..ce40c7fd8a 100644 --- a/www/includes/easyparliament/templates/html/alert/alert-mockup.php +++ b/www/includes/easyparliament/templates/html/alert/alert-mockup.php @@ -1,26 +1,151 @@ + +

Initial view for alert page. This assumes the user has already created some group alerts

+
+

Keywords alerts

+ +
+
- -
- - -
- -