From 3e70608400a78fea757d0c1b5d5dd780424971c1 Mon Sep 17 00:00:00 2001 From: Yen Shun Date: Fri, 19 Nov 2021 09:22:47 -0500 Subject: [PATCH 1/4] add wordpress block element --- components.info.yml | 4 ++ wordpress/block/README.md | 6 +++ wordpress/block/component.info.yml | 7 ++++ wordpress/block/layouts/block.php | 9 +++++ wordpress/block/module/block.php | 49 +++++++++++++++++++++++++ wordpress/block/module/js/block.js | 2 + wordpress/block/module/scss/_block.scss | 10 +++++ wordpress/block/module/views/block.twig | 15 ++++++++ wordpress/block/style-noncritical.scss | 1 + 9 files changed, 103 insertions(+) create mode 100644 wordpress/block/README.md create mode 100644 wordpress/block/component.info.yml create mode 100644 wordpress/block/layouts/block.php create mode 100644 wordpress/block/module/block.php create mode 100644 wordpress/block/module/js/block.js create mode 100644 wordpress/block/module/scss/_block.scss create mode 100644 wordpress/block/module/views/block.twig create mode 100644 wordpress/block/style-noncritical.scss diff --git a/components.info.yml b/components.info.yml index f1731d9..63891fc 100644 --- a/components.info.yml +++ b/components.info.yml @@ -157,3 +157,7 @@ wordpress: - description - button_label - button_url + block: + fields: + - primary_heading + - content \ No newline at end of file diff --git a/wordpress/block/README.md b/wordpress/block/README.md new file mode 100644 index 0000000..b19307f --- /dev/null +++ b/wordpress/block/README.md @@ -0,0 +1,6 @@ +# Block +## Usage +Add module as needed + +## Demo +[REPEAT Example WordPress | Block] diff --git a/wordpress/block/component.info.yml b/wordpress/block/component.info.yml new file mode 100644 index 0000000..b13b85f --- /dev/null +++ b/wordpress/block/component.info.yml @@ -0,0 +1,7 @@ +name: 'Block' +description: '' +post-install notes: '' +dependencies: + components: + composer: + plugins: diff --git a/wordpress/block/layouts/block.php b/wordpress/block/layouts/block.php new file mode 100644 index 0000000..ae34c41 --- /dev/null +++ b/wordpress/block/layouts/block.php @@ -0,0 +1,9 @@ + get_sub_field('primary_heading'), + 'content' => get_sub_field('content'), +); +$text = new TextBlock($args); +$text->render(); \ No newline at end of file diff --git a/wordpress/block/module/block.php b/wordpress/block/module/block.php new file mode 100644 index 0000000..5d38722 --- /dev/null +++ b/wordpress/block/module/block.php @@ -0,0 +1,49 @@ + get_field('heading'), + // 'description' => get_field('description'), + // 'button_url' => get_field('button_url'), + // 'button_label' => get_field('button_label'), + // ]; + // $new_module = new CTA($args); + // $new_module->render(); + +class Block { + protected $defaults; + protected $context; + + public function __construct( $args=[] ){ + $this->defaults = [ + 'primary_heading' => false, + 'content' => false, + 'classes' => [ + 'l-module', + 'block', + ] + ]; + extract(array_merge($this->defaults, $args)); + + + $id = ''; + if( $primary_heading && function_exists('taoti_inPageNav_get_increment_counter') ){ + $id = 'section-'.taoti_inPageNav_get_increment_counter(); + } + + + $this->context = Timber::get_context(); + $this->context['primary_heading'] = $primary_heading; + $this->context['content'] = $content; + $this->context['id'] = $id; + + } + + public function render(){ + Timber::render('block.twig', $this->context); + } + +} diff --git a/wordpress/block/module/js/block.js b/wordpress/block/module/js/block.js new file mode 100644 index 0000000..2e4faf0 --- /dev/null +++ b/wordpress/block/module/js/block.js @@ -0,0 +1,2 @@ +// Not necessarily specific to this module, but there is a library in use for responsive tables - /js/development/after-libs/responsive-tables.js +// https://zurb.com/playground/responsive-tables diff --git a/wordpress/block/module/scss/_block.scss b/wordpress/block/module/scss/_block.scss new file mode 100644 index 0000000..6b225ee --- /dev/null +++ b/wordpress/block/module/scss/_block.scss @@ -0,0 +1,10 @@ +.textBlock { + padding: 0 2.8rem; + + .textBlock-inner { + max-width: $max-inner-content-small; + margin: 0 auto; + + } + +} \ No newline at end of file diff --git a/wordpress/block/module/views/block.twig b/wordpress/block/module/views/block.twig new file mode 100644 index 0000000..94a1fc4 --- /dev/null +++ b/wordpress/block/module/views/block.twig @@ -0,0 +1,15 @@ +{% block block %} +
+
+ + {% if primary_heading %} +

{{ primary_heading }}

+ {% endif %} + + {% if content %} +
{{ content }}
+ {% endif %} + +
+
+{% endblock %} diff --git a/wordpress/block/style-noncritical.scss b/wordpress/block/style-noncritical.scss new file mode 100644 index 0000000..123173f --- /dev/null +++ b/wordpress/block/style-noncritical.scss @@ -0,0 +1 @@ +@import '../modules/block/scss/block'; From 136398dc73ae237bb2a0d3893d328c263d30a1be Mon Sep 17 00:00:00 2001 From: Yen Shun Date: Fri, 19 Nov 2021 09:32:29 -0500 Subject: [PATCH 2/4] change block by item --- wordpress/block/README.md | 6 - wordpress/block/component.info.yml | 7 - wordpress/block/layouts/block.php | 9 -- wordpress/block/module/views/block.twig | 15 --- wordpress/block/style-noncritical.scss | 1 - wordpress/table/block/js/table.js | 2 + .../table/block/scss/_responsive-tables.scss | 38 ++++++ wordpress/table/block/scss/_table.scss | 121 ++++++++++++++++++ wordpress/table/block/table.php | 109 ++++++++++++++++ wordpress/table/block/views/table.twig | 27 ++++ .../block/js/textBlock.js} | 0 .../block/scss/_textBlock.scss} | 0 .../block/textBlock.php} | 6 +- .../textBlock/block/views/textBlock.twig | 15 +++ 14 files changed, 315 insertions(+), 41 deletions(-) delete mode 100644 wordpress/block/README.md delete mode 100644 wordpress/block/component.info.yml delete mode 100644 wordpress/block/layouts/block.php delete mode 100644 wordpress/block/module/views/block.twig delete mode 100644 wordpress/block/style-noncritical.scss create mode 100644 wordpress/table/block/js/table.js create mode 100644 wordpress/table/block/scss/_responsive-tables.scss create mode 100644 wordpress/table/block/scss/_table.scss create mode 100644 wordpress/table/block/table.php create mode 100644 wordpress/table/block/views/table.twig rename wordpress/{block/module/js/block.js => textBlock/block/js/textBlock.js} (100%) rename wordpress/{block/module/scss/_block.scss => textBlock/block/scss/_textBlock.scss} (100%) rename wordpress/{block/module/block.php => textBlock/block/textBlock.php} (91%) create mode 100644 wordpress/textBlock/block/views/textBlock.twig diff --git a/wordpress/block/README.md b/wordpress/block/README.md deleted file mode 100644 index b19307f..0000000 --- a/wordpress/block/README.md +++ /dev/null @@ -1,6 +0,0 @@ -# Block -## Usage -Add module as needed - -## Demo -[REPEAT Example WordPress | Block] diff --git a/wordpress/block/component.info.yml b/wordpress/block/component.info.yml deleted file mode 100644 index b13b85f..0000000 --- a/wordpress/block/component.info.yml +++ /dev/null @@ -1,7 +0,0 @@ -name: 'Block' -description: '' -post-install notes: '' -dependencies: - components: - composer: - plugins: diff --git a/wordpress/block/layouts/block.php b/wordpress/block/layouts/block.php deleted file mode 100644 index ae34c41..0000000 --- a/wordpress/block/layouts/block.php +++ /dev/null @@ -1,9 +0,0 @@ - get_sub_field('primary_heading'), - 'content' => get_sub_field('content'), -); -$text = new TextBlock($args); -$text->render(); \ No newline at end of file diff --git a/wordpress/block/module/views/block.twig b/wordpress/block/module/views/block.twig deleted file mode 100644 index 94a1fc4..0000000 --- a/wordpress/block/module/views/block.twig +++ /dev/null @@ -1,15 +0,0 @@ -{% block block %} -
-
- - {% if primary_heading %} -

{{ primary_heading }}

- {% endif %} - - {% if content %} -
{{ content }}
- {% endif %} - -
-
-{% endblock %} diff --git a/wordpress/block/style-noncritical.scss b/wordpress/block/style-noncritical.scss deleted file mode 100644 index 123173f..0000000 --- a/wordpress/block/style-noncritical.scss +++ /dev/null @@ -1 +0,0 @@ -@import '../modules/block/scss/block'; diff --git a/wordpress/table/block/js/table.js b/wordpress/table/block/js/table.js new file mode 100644 index 0000000..46c280b --- /dev/null +++ b/wordpress/table/block/js/table.js @@ -0,0 +1,2 @@ +// Not necessarily specific to this module, but there is a library in use for responsive tables - /js/development/libs/responsive-tables.js +// https://zurb.com/playground/responsive-tables diff --git a/wordpress/table/block/scss/_responsive-tables.scss b/wordpress/table/block/scss/_responsive-tables.scss new file mode 100644 index 0000000..d749482 --- /dev/null +++ b/wordpress/table/block/scss/_responsive-tables.scss @@ -0,0 +1,38 @@ +/* Foundation v2.1.4 http://foundation.zurb.com */ +/* Artfully masterminded by ZURB */ + +/* -------------------------------------------------- + Table of Contents +----------------------------------------------------- +:: Shared Styles +:: Page Name 1 +:: Page Name 2 +*/ + + +/* ----------------------------------------- + Shared Styles +----------------------------------------- */ + +// table th { font-weight: bold; } +// table td, table th { padding: 9px 10px; text-align: left; } + +/* Mobile */ +@media only screen and (max-width: 767px) { + + table.responsive { margin-bottom: 0; } + + .pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } + .pinned table { border-right: none; border-left: none; width: 100%; } + .pinned table th, .pinned table td { white-space: nowrap; } + .pinned td:last-child { border-bottom: 0; } + + div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; } + div.table-wrapper div.scrollable { margin-left: 35%; } + div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; } + + table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; } + table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; } + + +} diff --git a/wordpress/table/block/scss/_table.scss b/wordpress/table/block/scss/_table.scss new file mode 100644 index 0000000..38ff767 --- /dev/null +++ b/wordpress/table/block/scss/_table.scss @@ -0,0 +1,121 @@ +.l-module.table { + min-width: 700px; + max-width: $content-width; + padding: 0 3.6rem; + + @media screen and (min-width: $tablet) { + padding: 0; + + } + + @media screen and (max-width: 767px) { + min-width: 0; + } +} + +.table-inner { + + .btn-container { + @media screen and (min-width: $tablet) { + display: flex; + width: 100%; + align-items: center; + } + + a { + margin-left: 2rem; + margin-bottom: 1.5rem; + + } + + a:first-of-type { + margin-left: auto; + } + } + + .table-main { + box-shadow: $boxshadow; + } + +} + +.table-table { + width: 100%; +} + +.table-th { + font-weight: 700; + font-size: 2.2rem; + // font-family: $sans; + text-align: left; + padding: 1.8rem 1.7rem; + vertical-align: bottom; +} + +.table-head .table-th { + border-bottom: 2px solid $text; + border-right: 2px solid $color-5; + background: $color-6; + font-size: 1.6rem; + font-family: $sans-serif; + font-weight: 600; + color: $invert; + + &:first-of-type { + @media screen and (min-width: $tablet) { + width: 40%; + + } + } + + &:last-of-type { + border-right: none; + } +} + +.table-td { + padding: 1rem 1.7rem; +} + +.table-body { + tr { + border-bottom: 2px solid $color-10; + + td { + background: $invert; + font-size: 1.6rem; + font-family: $roboto; + color: $color-6; + border-right: 2px solid $color-10; + + &:last-of-type { + border-right: none; + + } + + } + + &:last-of-type { + border-bottom: none; + + } + + } + + tr:nth-child(odd) td { + background-color: $invert; + } + + tr:nth-child(even) td { + background-color: $invert; + } + +} + + +// OVERRIDES + +// When a table module follows a textBlock module, remove the top margin from the table. This is to ensure that the client can associate a piece of text with a table. This should override the margin provided by the .l-module class. +.textBlock+.table { + margin-top: 0; +} diff --git a/wordpress/table/block/table.php b/wordpress/table/block/table.php new file mode 100644 index 0000000..665eda1 --- /dev/null +++ b/wordpress/table/block/table.php @@ -0,0 +1,109 @@ + get_sub_field('table'), + // ]; + // $new_module = new Table($args); + // $new_module->render(); + +class Table { + protected $defaults; + protected $context; + + public function __construct( $args=[] ){ + $this->defaults = [ + 'primary_heading' => false, + 'buttons' => false, + 'table_array' => false, + 'table_annotation' => false, + 'classes' => [ + 'l-module', + 'l-container', + 'table', + 'responsive', + ] + ]; + + extract(array_merge($this->defaults, $args)); + + + // Use the given array to generate the table HTML. + // https://wordpress.org/plugins/advanced-custom-fields-table-field/#how%20to%20output%20the%20table%20html%3F + $table_html = ''; + + if( is_array($table_array) && !empty( $table_array ) ){ + + $table_html .= ''; + + if( !empty( $table_array['caption'] ) ){ + $table_html .= ''; + } + + if( !empty( $table_array['header'] ) ){ + + $table_html .= ''; + + $table_html .= ''; + + foreach( $table_array['header'] as $th ){ + + $table_html .= ''; + } + + $table_html .= ''; + + $table_html .= ''; + } + + $table_html .= ''; + + foreach( $table_array['body'] as $tr ){ + + $table_html .= ''; + + foreach( $tr as $td ){ + + $table_html .= ''; + } + + $table_html .= ''; + } + + $table_html .= ''; + + $table_html .= '
' . $table_array['caption'] . '
'; + $table_html .= $th['c']; + $table_html .= '
'; + $table_html .= $td['c']; + $table_html .= '
'; + + } + + + $id = ''; + if( $primary_heading && function_exists('taoti_inPageNav_get_increment_counter') ){ + $id = 'section-'.taoti_inPageNav_get_increment_counter(); + } + + + $this->context = Timber::get_context(); + $this->context['table_array'] = $table_array; + $this->context['table_html'] = $table_html; + $this->context['primary_heading'] = $primary_heading; + $this->context['table_annotation'] = $table_annotation; + $this->context['buttons'] = $buttons; + $this->context['id'] = $id; + $this->context['classes'] = implode(' ', $classes); + + } + + public function render(){ + Timber::render('table.twig', $this->context); + } + +} diff --git a/wordpress/table/block/views/table.twig b/wordpress/table/block/views/table.twig new file mode 100644 index 0000000..04ad241 --- /dev/null +++ b/wordpress/table/block/views/table.twig @@ -0,0 +1,27 @@ +{% block table %} +
+
+ + {% if buttons %} +
+ {% if primary_heading %} +

{{ primary_heading }}

+ {% endif %} + {% for button in buttons %} + + {{ button.button_label }} + + {% endfor %} +
+ {% endif %} + + {% if table_html %} +
{{ table_html }} +
+ {% endif %} + {% if table_annotation %} + {{ table_annotation }} + {% endif %} +
+
+{% endblock %} diff --git a/wordpress/block/module/js/block.js b/wordpress/textBlock/block/js/textBlock.js similarity index 100% rename from wordpress/block/module/js/block.js rename to wordpress/textBlock/block/js/textBlock.js diff --git a/wordpress/block/module/scss/_block.scss b/wordpress/textBlock/block/scss/_textBlock.scss similarity index 100% rename from wordpress/block/module/scss/_block.scss rename to wordpress/textBlock/block/scss/_textBlock.scss diff --git a/wordpress/block/module/block.php b/wordpress/textBlock/block/textBlock.php similarity index 91% rename from wordpress/block/module/block.php rename to wordpress/textBlock/block/textBlock.php index 5d38722..32ae7be 100644 --- a/wordpress/block/module/block.php +++ b/wordpress/textBlock/block/textBlock.php @@ -13,7 +13,7 @@ // $new_module = new CTA($args); // $new_module->render(); -class Block { +class TextBlock { protected $defaults; protected $context; @@ -23,7 +23,7 @@ public function __construct( $args=[] ){ 'content' => false, 'classes' => [ 'l-module', - 'block', + 'textBlock', ] ]; extract(array_merge($this->defaults, $args)); @@ -43,7 +43,7 @@ public function __construct( $args=[] ){ } public function render(){ - Timber::render('block.twig', $this->context); + Timber::render('textBlock.twig', $this->context); } } diff --git a/wordpress/textBlock/block/views/textBlock.twig b/wordpress/textBlock/block/views/textBlock.twig new file mode 100644 index 0000000..a3dbfee --- /dev/null +++ b/wordpress/textBlock/block/views/textBlock.twig @@ -0,0 +1,15 @@ +{% block textBlock %} +
+
+ + {% if primary_heading %} +

{{ primary_heading }}

+ {% endif %} + + {% if content %} +
{{ content }}
+ {% endif %} + +
+
+{% endblock %} From 92c4f08f648261ce49f214c07d253508726e7710 Mon Sep 17 00:00:00 2001 From: Yen Shun Date: Fri, 19 Nov 2021 09:40:28 -0500 Subject: [PATCH 3/4] remove block component --- components.info.yml | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/components.info.yml b/components.info.yml index 63891fc..a871364 100644 --- a/components.info.yml +++ b/components.info.yml @@ -156,8 +156,4 @@ wordpress: - primary_heading - description - button_label - - button_url - block: - fields: - - primary_heading - - content \ No newline at end of file + - button_url \ No newline at end of file From ebde53059ae2843fb958d39f362724cbbfe0c208 Mon Sep 17 00:00:00 2001 From: Yen Shun Date: Fri, 19 Nov 2021 10:23:35 -0500 Subject: [PATCH 4/4] Add block feature --- wordpress/accordion/block/accordion.php | 57 ++++++ wordpress/accordion/block/js/accordion.js | 0 .../accordion/block/scss/_accordion.scss | 165 ++++++++++++++++++ .../accordion/block/views/accordion.twig | 43 +++++ wordpress/cta/block/cta.php | 79 +++++++++ wordpress/cta/block/js/cta.js | 0 wordpress/cta/block/scss/_cta.scss | 92 ++++++++++ wordpress/cta/block/views/cta.twig | 19 ++ .../fullWidthMedia/block/fullWidthMedia.php | 68 ++++++++ .../fullWidthMedia/block/js/fullWidthMedia.js | 0 .../block/scss/_fullWidthMedia.scss | 54 ++++++ .../block/views/fullWidthMedia.twig | 25 +++ wordpress/hero/block/hero.php | 75 ++++++++ wordpress/hero/block/js/hero.js | 0 wordpress/hero/block/scss/_hero.scss | 137 +++++++++++++++ wordpress/hero/block/views/hero.twig | 22 +++ wordpress/quote/block/js/quote.js | 0 wordpress/quote/block/quote.php | 48 +++++ wordpress/quote/block/scss/_quote.scss | 23 +++ wordpress/quote/block/views/quote.twig | 27 +++ wordpress/textImage/block/js/textImage.js | 2 + .../textImage/block/scss/_textImage.scss | 48 +++++ wordpress/textImage/block/textImage.php | 68 ++++++++ .../textImage/block/views/textImage.twig | 25 +++ 24 files changed, 1077 insertions(+) create mode 100644 wordpress/accordion/block/accordion.php create mode 100644 wordpress/accordion/block/js/accordion.js create mode 100644 wordpress/accordion/block/scss/_accordion.scss create mode 100644 wordpress/accordion/block/views/accordion.twig create mode 100644 wordpress/cta/block/cta.php create mode 100644 wordpress/cta/block/js/cta.js create mode 100644 wordpress/cta/block/scss/_cta.scss create mode 100644 wordpress/cta/block/views/cta.twig create mode 100644 wordpress/fullWidthMedia/block/fullWidthMedia.php create mode 100644 wordpress/fullWidthMedia/block/js/fullWidthMedia.js create mode 100644 wordpress/fullWidthMedia/block/scss/_fullWidthMedia.scss create mode 100644 wordpress/fullWidthMedia/block/views/fullWidthMedia.twig create mode 100644 wordpress/hero/block/hero.php create mode 100644 wordpress/hero/block/js/hero.js create mode 100644 wordpress/hero/block/scss/_hero.scss create mode 100644 wordpress/hero/block/views/hero.twig create mode 100644 wordpress/quote/block/js/quote.js create mode 100644 wordpress/quote/block/quote.php create mode 100644 wordpress/quote/block/scss/_quote.scss create mode 100644 wordpress/quote/block/views/quote.twig create mode 100644 wordpress/textImage/block/js/textImage.js create mode 100644 wordpress/textImage/block/scss/_textImage.scss create mode 100644 wordpress/textImage/block/textImage.php create mode 100644 wordpress/textImage/block/views/textImage.twig diff --git a/wordpress/accordion/block/accordion.php b/wordpress/accordion/block/accordion.php new file mode 100644 index 0000000..6524b04 --- /dev/null +++ b/wordpress/accordion/block/accordion.php @@ -0,0 +1,57 @@ + get_sub_field('accordion_items'), + // ); + // $accordion = new Accordion($args); + // $accordion->render(); + +class Accordion { + protected $defaults; + protected $context; + + public function __construct( $args=[] ){ + $this->defaults = [ + 'primary_heading' => false, + 'accordion_items' => false, + 'classes' => [ + 'l-module', + 'l-has-no-background', + 'accordion', + ] + ]; + + extract(array_merge($this->defaults, $args)); + + // echo "
"; print_r($accordion_items); echo "
"; + + + $id = ''; + if( $primary_heading && function_exists('taoti_inPageNav_get_increment_counter') ){ + $id = 'section-'.taoti_inPageNav_get_increment_counter(); + } + + + // The accordion works via checkbox inputs, which need unique IDs so that multiple accordions on the same page don't conflict with each other. + $string_for_unique_id = random_int(1, 1000); + $unique_input_id_prefix = md5( $primary_heading.$string_for_unique_id ); + + + $this->context = Timber::get_context(); + $this->context['primary_heading'] = $primary_heading; + $this->context['accordion_items'] = $accordion_items; + // $this->context['icon_arrow'] = file_get_contents( get_template_directory().'/images/icon-arrow-down.svg' ); + $this->context['id'] = $id; + $this->context['unique_input_id_prefix'] = $unique_input_id_prefix; + $this->context['classes'] = implode(' ', $classes); + + } + + public function render(){ + Timber::render('accordion.twig', $this->context); + } + +} diff --git a/wordpress/accordion/block/js/accordion.js b/wordpress/accordion/block/js/accordion.js new file mode 100644 index 0000000..e69de29 diff --git a/wordpress/accordion/block/scss/_accordion.scss b/wordpress/accordion/block/scss/_accordion.scss new file mode 100644 index 0000000..172baf0 --- /dev/null +++ b/wordpress/accordion/block/scss/_accordion.scss @@ -0,0 +1,165 @@ +.accordion-main-heading { + max-width: $max-width-text; + margin: 0 auto; +} + +.accordion-inner { + max-width: $max-width-text; + margin: 0 auto; + box-shadow: $boxshadow; +} + +ul.accordion-list { + padding-left: 0; +} + +.accordion-listItem { + position: relative; + padding: 1rem 2rem .7rem 0; + border-bottom: 2px solid $color-3; + background: $invert; + + &:before { + content: none; + } + + @media screen and (max-width: 480px) { + padding: 3rem; + } + + // +.accordion-listItem { + // border-top: 1px solid $color-1; + // } +} + + +.accordion-headingLabel { + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + transition: color 100ms linear; + padding-left: 2.6rem; + + &:hover { + color: $hover; + } +} + +.accordion-heading { + font-family: $sans-serif; + font-weight: 600; + color: $color-1; + font-size: 1.4rem; + + @media screen and (min-width: $tablet) { + font-size: 1.6rem; + } + +} + +.accordion-toggleIcon { + font-size: 2.2rem; + font-family: sans-serif; + font-weight: 700; + line-height: 1; + background: $color-2; + border-radius: 50%; + margin-left: auto; + padding: 0.3rem 0.7rem 0.3rem 0.8rem; + transform: rotate3d(1, 1, 1, 0deg); + font-style: normal; + + &::before { + content: '\002B'; // + + } +} + +.accordion-text { + max-height: 0; + font-family: $roboto; + font-size: 1.8rem; + color: $text; + overflow: hidden; + overflow-y: auto; + transition: max-height 200ms ease-out, margin 1ms linear 200ms; + margin-top: 0; + + .btn-filled { + margin: 2rem 1rem 0 0; + } +} + + + +// This is the checkbox . The checked/unchecked state is what toggles the visibility of the answer. +.accordion-toggle { + position: absolute; + top: 0; + right: 0; + visibility: hidden; + + &:checked { + + +.accordion-headingLabel { + &::after { + align-items: center; + background: radial-gradient(at 50% 0, #000, transparent 60%); + background-repeat: no-repeat; + background-size: 100% 15px; + display: flex; + flex: 1; + height: 15px; + justify-content: flex-start; + margin: 0 auto; + opacity: 0.4; + width: 70%; + } + } + + ~.accordion-text { + transition: max-height 400ms ease-in, margin 1ms linear; + max-height: 100vh; + margin: 3.6rem; + } + + +.accordion-headingLabel .accordion-toggleIcon { + transform: rotate3d(1, 1, 1, 360deg); + + &::before { + content: '\2212'; // - + } + } + + } + +} + + + +.accordionConsortiums { + .accordion-heading { + clear: both; + font-size: 2rem; + max-width: 17.7rem; + padding-right: 2rem; + width: 100%; + + @media screen and (max-width: 600px) { + max-width: none; + width: auto; + } + } +} + +// .accordion-institutionNames { + +// } + +.accordion-subheading { + font-family: $sans-serif; + font-size: 1.4rem; + font-weight: 600; + color: $color-16; + display: inline-block; +} \ No newline at end of file diff --git a/wordpress/accordion/block/views/accordion.twig b/wordpress/accordion/block/views/accordion.twig new file mode 100644 index 0000000..5ff64e9 --- /dev/null +++ b/wordpress/accordion/block/views/accordion.twig @@ -0,0 +1,43 @@ +{% block accordion %} +
+ {% if primary_heading %} +

{{ primary_heading }}

+ {% endif %} + +
+ {% if accordion_items %} +
    + {% for row in accordion_items %} + +
  • + + + + + +
    +
    {{ row.description }}
    + {% if row.buttons %} + {% for button in row.buttons %} + + {{ button.button_label }} + + {% endfor %} + {% endif %} +
    + +
    • + + {% endfor %} +
+ {% endif %} + +
+
+{% endblock %} diff --git a/wordpress/cta/block/cta.php b/wordpress/cta/block/cta.php new file mode 100644 index 0000000..e8c11fa --- /dev/null +++ b/wordpress/cta/block/cta.php @@ -0,0 +1,79 @@ + get_sub_field('heading'), + // 'description' => get_sub_field('description'), + // 'button_label' => get_sub_field('button_label'), + // 'button_url' => get_sub_field('button_url'), + // 'background_image' => get_sub_field('background_image'), + // 'overlay_color' => get_sub_field('overlay_color'), + // ); + // $cta = new CTA($args); + // $cta->render(); + +class CTA { + protected $defaults; + protected $context; + + public function __construct( $args=[] ){ + $this->defaults = [ + 'heading' => false, + 'description' => false, + 'button_url' => false, + 'button_label' => false, + 'background_image' => false, + 'background_image_url' => false, + 'overlay_color' => false, + 'classes' => [ + 'l-module', + 'l-has-background', + 'cta', + ] + ]; + + extract(array_merge($this->defaults, $args)); + + // If no specific background image url was given, pull one from the image array. + if( !$background_image_url ){ + + if( isset( $background_image['sizes']['1080p'] ) ){ + $background_image_url = $background_image['sizes']['1080p']; + + } elseif( isset( $background_image['sizes']['720p'] ) ){ + $background_image_url =$background_image['sizes']['720p']; + + } + + } + + // Add the lazyload class for the background image to be lazyloaded. + if( $background_image_url ){ + $classes[] = 'lazyload'; + } + + + if( is_string( $overlay_color ) ){ + $classes[] = 'cta-'.$overlay_color; + } + + + $this->context = Timber::get_context(); + $this->context['heading'] = $heading; + $this->context['description'] = $description; + $this->context['button_url'] = $button_url; + $this->context['button_label'] = $button_label; + $this->context['background_image'] = $background_image; + $this->context['background_image_url'] = $background_image_url; + $this->context['overlay_color'] = $overlay_color; + $this->context['classes'] = implode(' ', $classes); + + } + + public function render(){ + Timber::render('cta.twig', $this->context); + } + +} diff --git a/wordpress/cta/block/js/cta.js b/wordpress/cta/block/js/cta.js new file mode 100644 index 0000000..e69de29 diff --git a/wordpress/cta/block/scss/_cta.scss b/wordpress/cta/block/scss/_cta.scss new file mode 100644 index 0000000..58ac257 --- /dev/null +++ b/wordpress/cta/block/scss/_cta.scss @@ -0,0 +1,92 @@ +.cta { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + color: $invert; + position: relative; + text-align: center; + + &::before { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: $color-5; + opacity: .75; + + @supports (mix-blend-mode: hard-light){ + opacity: 1; + mix-blend-mode: hard-light; + } + + } + + &.cta-red::before { + background-color: $color-4; + } + + &.cta-blue::before { + background-color: $color-2; + } + +} + +.cta-inner { + @include l-container('content-1'); + padding-bottom: 19rem; + padding-top: 19.5rem; + position: relative; +} + +.cta-heading { + font-size: 3rem; + padding-top: 8.7rem; + position: relative; + + &::before { + border: 1px solid $invert; + content: ''; + display: block; + height: 14px; + left: calc(50% - 7px); + position: absolute; + top: 0; + transform-origin: center; + transform: rotate(45deg); + width: 14px; + } + + &::after { + background-color: $invert; + content: ''; + display: block; + height: 1px; + left: calc(50% - 40px); + position: absolute; + top: 4.6rem; + width: 81px; + } + +} + +.cta-description { + font-size: 1.4rem; + margin-top: 2rem; + line-height: 1.75; +} + +.cta-button { + @include button(); + margin-top: 4.3rem; + margin-left: auto; + margin-right: auto; + border: 1px solid $invert; + color: $invert; + + &:hover { + color: $invert; + } +} diff --git a/wordpress/cta/block/views/cta.twig b/wordpress/cta/block/views/cta.twig new file mode 100644 index 0000000..a987a45 --- /dev/null +++ b/wordpress/cta/block/views/cta.twig @@ -0,0 +1,19 @@ +{% block cta %} +
+
+ + {% if heading %} +

{{ heading }}

+ {% endif %} + + {% if description %} +
{{ description }}
+ {% endif %} + + {% if button_url and button_label %} + {{ button_label }} + {% endif %} + +
+
+{% endblock %} diff --git a/wordpress/fullWidthMedia/block/fullWidthMedia.php b/wordpress/fullWidthMedia/block/fullWidthMedia.php new file mode 100644 index 0000000..3866b20 --- /dev/null +++ b/wordpress/fullWidthMedia/block/fullWidthMedia.php @@ -0,0 +1,68 @@ + get_sub_field('image_or_video'), + // 'image_array' => get_sub_field('image'), + // 'video_embed' => get_sub_field('video_embed'), + // 'caption' => get_sub_field('caption'), + // ]; + // $new_module = new FullWidthMedia($args); + // $new_module->render(); + +class FullWidthMedia { + protected $defaults; + protected $context; + + public function __construct( $args=[] ){ + $this->defaults = [ + 'image_or_video' => false, + 'image_array' => false, + 'video_embed' => false, + 'caption' => false, + 'classes' => [ + 'l-module', + 'l-has-no-background', + 'fullWidthMedia', + ] + ]; + + extract(array_merge($this->defaults, $args)); + + $classes[] = 'fullWidthMedia-has'.ucwords( $image_or_video ); + + if( !$caption && isset($image_array['caption']) && $image_array['caption'] ){ + $caption = esc_html( $image_array['caption'] ); + } + + $image_args = [ + 'image_array' => $image_array, + 'size' => '1080p', + 'classes' => [ + 'fullWidthMedia-image' + ], + ]; + $image_html = Get::image_html($image_args); + + if( !$image_html ){ + $image_args['size'] = '720p'; + $image_html = Get::image_html($image_args); + } + + $this->context = Timber::get_context(); + $this->context['image_or_video'] = $image_or_video; + $this->context['image_html'] = $image_html; + $this->context['video_embed'] = $video_embed; + $this->context['caption'] = $caption; + $this->context['classes'] = implode(' ', $classes); + + } + + public function render(){ + Timber::render('fullWidthMedia.twig', $this->context); + } + +} diff --git a/wordpress/fullWidthMedia/block/js/fullWidthMedia.js b/wordpress/fullWidthMedia/block/js/fullWidthMedia.js new file mode 100644 index 0000000..e69de29 diff --git a/wordpress/fullWidthMedia/block/scss/_fullWidthMedia.scss b/wordpress/fullWidthMedia/block/scss/_fullWidthMedia.scss new file mode 100644 index 0000000..9d906cf --- /dev/null +++ b/wordpress/fullWidthMedia/block/scss/_fullWidthMedia.scss @@ -0,0 +1,54 @@ +.fullWidthMedia-inner { + @include l-container('content-2'); + position: relative; +} + +.videoContainer { + height: 0; + margin-bottom: .4rem; + padding-bottom: 56.25%; // 16:9 + padding-top: 25px; + position: relative; + + iframe { + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + } +} + +.fullWidthMedia-imageContainer { + position: relative; + + &::after { + background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, transparentize($color-1, .1) 100%); + bottom: 0; + content: ''; + height: 50%; + left: 0; + pointer-events: none; + position: absolute; + width: 100%; + } +} + +.fullWidthMedia-image { + display: block; + height: auto; + width: 100%; +} + +.fullWidthMedia-caption { + border-left: 4rem solid $color-3; + bottom: 0; + color: $invert; + font-family: $sans-2; + left: 0; + padding: 2rem; + position: absolute; + text-transform: uppercase; + width: 100%; + z-index: 1; +} diff --git a/wordpress/fullWidthMedia/block/views/fullWidthMedia.twig b/wordpress/fullWidthMedia/block/views/fullWidthMedia.twig new file mode 100644 index 0000000..656adad --- /dev/null +++ b/wordpress/fullWidthMedia/block/views/fullWidthMedia.twig @@ -0,0 +1,25 @@ +{% block fullWidthMedia %} +{% if image_html or video_embed %} +
+
+ + {% if image_html %} +
+ {{ image_html }} + + {% if caption %} +
{{ caption }}
+ {% endif %} +
+ + {% elseif video_embed %} +
+ {{ video_embed }} +
+ + {% endif %} + +
+
+{% endif %} +{% endblock %} diff --git a/wordpress/hero/block/hero.php b/wordpress/hero/block/hero.php new file mode 100644 index 0000000..6be2540 --- /dev/null +++ b/wordpress/hero/block/hero.php @@ -0,0 +1,75 @@ + get_field('heading'), + // 'description' => get_field('description'), + // 'button_url' => get_field('button_url'), + // 'button_label' => get_field('button_label'), + // ]; + // $new_module = new Hero($args); + // $new_module->render(); + +class hero { + protected $defaults; + protected $context; + + public function __construct( $args=[] ){ + $this->defaults = [ + 'heading' => false, + 'alternative_heading' => false, + 'overlay_options' => false, + 'description' => false, + 'breadcrumbs_output' => false, + 'background_image_url' => false, + 'classes' => [ + 'l-module', + 'hero', + ] + ]; + + extract(array_merge($this->defaults, $args)); + + if( !is_search() && !$breadcrumbs_output && function_exists('yoast_breadcrumb') ) { + ob_start(); + yoast_breadcrumb( '','' ); + $breadcrumbs_output = ob_get_clean(); + } + + if( !$background_image_url ){ + + // Try to get a 1080p size featured image first... + $background_image_url = Get::featured_image_url( 'hero', get_the_ID() ); + // Try to get a 1080p size featured image first... + $background_image_url = Get::featured_image_url( '1080p', get_the_ID() ); + + // ... or if that's not available, try for a 720p... + if( !$background_image_url ){ + $background_image_url = Get::featured_image_url( '720p', get_the_ID() ); + } + + } + + if( $background_image_url ){ + $classes[] = 'lazyload'; + } + + $this->context = Timber::get_context(); + $this->context['heading'] = $heading; + $this->context['alternative_heading'] = $alternative_heading; + $this->context['overlay_options'] = $overlay_options; + $this->context['breadcrumbs_output'] = $breadcrumbs_output; + $this->context['description'] = $description; + $this->context['background_image_url'] = $background_image_url; + $this->context['classes'] = implode(' ', $classes); + + } + + public function render(){ + Timber::render('hero.twig', $this->context); + } + +} \ No newline at end of file diff --git a/wordpress/hero/block/js/hero.js b/wordpress/hero/block/js/hero.js new file mode 100644 index 0000000..e69de29 diff --git a/wordpress/hero/block/scss/_hero.scss b/wordpress/hero/block/scss/_hero.scss new file mode 100644 index 0000000..ee77089 --- /dev/null +++ b/wordpress/hero/block/scss/_hero.scss @@ -0,0 +1,137 @@ +.hero { + margin-top: 0; + background: $color-1; + padding-top: 8rem; + padding-bottom: 6rem; + background-size: cover; + position: relative; + overflow: hidden; + + svg { + width: 125%; + height: 400px; + opacity: 0.8; + fill: $color-1; + + } +} + +.hero-overlay { + background: url('/wp-content/themes/elder-research/images/landing-header-overlay-circle.svg') no-repeat; + background-size: cover; + background-position: center center; + position: absolute; + left: 0; + top: 0; + width: 76%; + height: 100%; + z-index: 1; + + &.square { + background: url('/wp-content/themes/elder-research/images/landing-header-overlay-square.svg') no-repeat; + background-size: cover; + background-position: center center; + + } + + &.pentagon { + background: url('/wp-content/themes/elder-research/images/landing-header-overlay-pentagon.svg') no-repeat; + background-size: cover; + background-position: center center; + + } + +} + +body:not(.single-blog):not(.single-events):not(.single-news):not(.single-people) { + + .hero-heading, + .hero-description, + .breadcrumbs { + @media screen and (min-width: $breakpoint-tablet) { + max-width: 65%; + + } + + @media screen and (min-width: $breakpoint-desktop) { + width: 76%; + + } + + } + + .hero-overlay { + width: 135%; + background-position: right; + + @media screen and (min-width: $breakpoint-tablet) { + width: 100%; + background-position: right; + + } + + @media screen and (min-width: $breakpoint-desktop) { + width: 90%; + background-position: right; + + } + + } + + +} + + + +.hero-heading { + color: $invert; + font-family: $serif; + padding-bottom: 2rem; + font-size: 3.2rem; + line-height: 3.2rem; + + @media screen and (min-width: $breakpoint-tablet) { + font-size: 5.2rem; + line-height: 5.2rem; + + } + + &.max { + @media screen and (min-width: $breakpoint-tablet) { + max-width: 70%; + + } + } + + +} + + + +.hero-description { + color: $invert; + max-width: 75.2rem; + font-size: 1.8rem; + + +} + +.hero-inner { + z-index: 2; + position: relative; +} + +.breadcrumbs { + color: $invert; + font-size: 1.4rem; + padding-bottom: 2rem; +} + +.breadcrumbs a { + color: $invert; + + + &:hover { + color: $color-2; + } +} \ No newline at end of file diff --git a/wordpress/hero/block/views/hero.twig b/wordpress/hero/block/views/hero.twig new file mode 100644 index 0000000..96f1def --- /dev/null +++ b/wordpress/hero/block/views/hero.twig @@ -0,0 +1,22 @@ +{% block hero %} +
+
+
+ +
+
+ {{ breadcrumbs_output }} +
+ {% if alternative_heading %} +

{{ alternative_heading }}

+ {% else %} +

{{ heading }}

+ {% endif %} + + {% if description %} +
{{ description }}
+ {% endif %} +
+
+ +{% endblock %} \ No newline at end of file diff --git a/wordpress/quote/block/js/quote.js b/wordpress/quote/block/js/quote.js new file mode 100644 index 0000000..e69de29 diff --git a/wordpress/quote/block/quote.php b/wordpress/quote/block/quote.php new file mode 100644 index 0000000..e1ab826 --- /dev/null +++ b/wordpress/quote/block/quote.php @@ -0,0 +1,48 @@ + get_sub_field('primary_heading'), + // 'quoted_text' => get_sub_field('content'), + // ); + // $quote = new Quote($args); + // $quote->render(); + +class Quote { + protected $defaults; + protected $context; + + public function __construct( $args=[] ){ + $this->defaults = [ + 'primary_heading' => false, + 'quoted_text' => false, + 'classes' => [ + 'l-module', + 'quote', + ] + ]; + + extract(array_merge($this->defaults, $args)); + + + $id = ''; + if( $primary_heading && function_exists('taoti_inPageNav_get_increment_counter') ){ + $id = 'section-'.taoti_inPageNav_get_increment_counter(); + } + + $this->context = Timber::get_context(); + $this->context['primary_heading'] = $primary_heading; + $this->context['quoted_text'] = $quoted_text; + $this->context['id'] = $id; + $this->context['classes'] = implode(' ', $classes); + + } + + public function render(){ + Timber::render('quote.twig', $this->context); + } + +} diff --git a/wordpress/quote/block/scss/_quote.scss b/wordpress/quote/block/scss/_quote.scss new file mode 100644 index 0000000..43e9f2b --- /dev/null +++ b/wordpress/quote/block/scss/_quote.scss @@ -0,0 +1,23 @@ +.quote-body { + background: $color-1 url('/wp-content/themes/acs-openaccess/images/Blue-Texture-Small-Background@2x.jpg'); + color: $invert; + text-align: center; + padding: 2.4rem 3.6rem; + + .quote-icon { + font-size: 4.6rem; + margin-bottom: -1.5rem; + display: block; + + &:last-of-type { + margin-top: 0.5rem; + + } + } + + + .quote-quotedText { + font-style: italic; + } + +} \ No newline at end of file diff --git a/wordpress/quote/block/views/quote.twig b/wordpress/quote/block/views/quote.twig new file mode 100644 index 0000000..3486af3 --- /dev/null +++ b/wordpress/quote/block/views/quote.twig @@ -0,0 +1,27 @@ +{% block quote %} +
+
+ + {% if quoted_text %} +
+ + “ +
+ {{ quoted_text }} +
+ ” + + {% if primary_heading %} +
+

{{ primary_heading }}

+
+ {% endif %} + +
+ {% endif %} + +
+ +
+ +{% endblock %} diff --git a/wordpress/textImage/block/js/textImage.js b/wordpress/textImage/block/js/textImage.js new file mode 100644 index 0000000..2e4faf0 --- /dev/null +++ b/wordpress/textImage/block/js/textImage.js @@ -0,0 +1,2 @@ +// Not necessarily specific to this module, but there is a library in use for responsive tables - /js/development/after-libs/responsive-tables.js +// https://zurb.com/playground/responsive-tables diff --git a/wordpress/textImage/block/scss/_textImage.scss b/wordpress/textImage/block/scss/_textImage.scss new file mode 100644 index 0000000..d1a00ed --- /dev/null +++ b/wordpress/textImage/block/scss/_textImage.scss @@ -0,0 +1,48 @@ +.textImage { + padding: 0 2.8rem; +} + +.textImage-inner { + max-width: $max-inner-content; + margin: 0 auto; + + @media screen and (min-width: $tablet) { + display: flex; + } +} + +.text-container { + @media screen and (min-width: $tablet) { + width: 50%; + } + + .btn-filled { + margin-top: 3.6rem; + } +} + +.textImage-container { + //max-width: 36rem; + + @media screen and (min-width: $tablet) { + width: 50%; + padding-right: 5.4rem; + } + + &.right { + order: 2; + + @media screen and (min-width: $tablet) { + padding-left: 5.4rem; + padding-right: 0; + } + } + +} + +.textImage-large { + box-shadow: $boxshadow; + max-width: 100%; + height: auto; + display: block; +} diff --git a/wordpress/textImage/block/textImage.php b/wordpress/textImage/block/textImage.php new file mode 100644 index 0000000..a458910 --- /dev/null +++ b/wordpress/textImage/block/textImage.php @@ -0,0 +1,68 @@ + get_field('heading'), + // 'description' => get_field('description'), + // 'button_url' => get_field('button_url'), + // 'button_label' => get_field('button_label'), + // ]; + // $new_module = new CTA($args); + // $new_module->render(); + +class TextImage { + protected $defaults; + protected $context; + + public function __construct( $args=[] ){ + $this->defaults = [ + 'image_orientation' => false, + //'image' => false, + 'image_array' => false, + 'primary_heading' => false, + 'description' => false, + 'button_label' => false, + 'button_url' => false, + 'classes' => [ + 'l-module', + 'textImage', + ] + ]; + extract(array_merge($this->defaults, $args)); + + $image_args = [ + 'image_array' => $image, + 'size' => 'image-column-large', + 'classes' => [ + 'textImage-large' + ], + ]; + $image_html = Get::image_html($image_args); + + + $id = ''; + if( $primary_heading && function_exists('taoti_inPageNav_get_increment_counter') ){ + $id = 'section-'.taoti_inPageNav_get_increment_counter(); + } + + + $this->context = Timber::get_context(); + $this->context['image_orientation'] = $image_orientation; + $this->context['image_html'] = $image_html; + $this->context['primary_heading'] = $primary_heading; + $this->context['description'] = $description; + $this->context['button_label'] = $button_label; + $this->context['button_url'] = $button_url; + $this->context['id'] = $id; + $this->context['classes'] = implode(' ', $classes); + + } + + public function render(){ + Timber::render('textImage.twig', $this->context); + } + +} diff --git a/wordpress/textImage/block/views/textImage.twig b/wordpress/textImage/block/views/textImage.twig new file mode 100644 index 0000000..a677ab9 --- /dev/null +++ b/wordpress/textImage/block/views/textImage.twig @@ -0,0 +1,25 @@ +{% block TextImage %} +
+
+ +
+ {% if image_html %} + {{ image_html }} + {% endif %} +
+ +
+ {% if primary_heading %} +

{{ primary_heading }}

+ {% endif %} + {% if description %} +
{{ description }}
+ {% endif %} + {% if button_label and button_url %} + {{ button_label }} + {% endif %} +
+ +
+
+{% endblock %}