From 798b6bf70d5a7852c796efaf334f8e55b0edbc8b Mon Sep 17 00:00:00 2001 From: Rob Drew Date: Mon, 15 Oct 2018 13:20:01 -0300 Subject: [PATCH] templates --- .../node--journal-article.html.twig | 25 +++++-- .../dummy_content/article-mockup.html.twig | 28 ++++++++ .../article-title-mockup.html.twig | 19 +++++ templates/menu--author_tasks.html.twig | 56 +++++++++++++++ .../toc/block--tableofcontents-2.html.twig | 69 +++++++++++++++++++ .../toc/block--tableofcontents.html.twig | 62 +++++++++++++++++ templates/toc/toc-back-to-top.html.twig | 18 +++++ templates/toc/toc-header.html.twig | 17 +++++ templates/toc/toc-menu.html.twig | 26 +++++++ templates/toc/toc-responsive.html.twig | 20 ++++++ templates/toc/toc-tree.html.twig | 60 ++++++++++++++++ 11 files changed, 396 insertions(+), 4 deletions(-) create mode 100644 templates/dummy_content/article-mockup.html.twig create mode 100644 templates/dummy_content/article-title-mockup.html.twig create mode 100644 templates/menu--author_tasks.html.twig create mode 100644 templates/toc/block--tableofcontents-2.html.twig create mode 100644 templates/toc/block--tableofcontents.html.twig create mode 100644 templates/toc/toc-back-to-top.html.twig create mode 100644 templates/toc/toc-header.html.twig create mode 100644 templates/toc/toc-menu.html.twig create mode 100644 templates/toc/toc-responsive.html.twig create mode 100644 templates/toc/toc-tree.html.twig diff --git a/templates/article_pages/node--journal-article.html.twig b/templates/article_pages/node--journal-article.html.twig index fd31912..d43349f 100644 --- a/templates/article_pages/node--journal-article.html.twig +++ b/templates/article_pages/node--journal-article.html.twig @@ -66,7 +66,7 @@ * @see template_preprocess_node() */ #} -{{ dump() }} +{#{{ dump() }}#} {#{{ kint(node) }}#} {% @@ -82,6 +82,10 @@ %} {{ attach_library('classy/node') }} {{ attach_library('magazineplus/node') }} + + + +
{% block node_side %} @@ -123,13 +127,26 @@ {% endif %} {% endblock %} - {{content.field_article_contributors}} + {#{{content.field_article_contributors}}#} - {{content.group_article.group_article_text.field_journal_article_abstract}} + +{#dummy content#} + +{% include '@lmmi_journal/dummy_content/article-title-mockup.html.twig' %} + + +{% include '@lmmi_journal/dummy_content/article-mockup.html.twig' %} + + + + + + + {#{{content.group_article.group_article_text.field_journal_article_abstract}}#}
- {{content.group_article.group_article_text.body}} + {#{{content.group_article.group_article_text.body}}#} {% block content %} {{ content }} diff --git a/templates/dummy_content/article-mockup.html.twig b/templates/dummy_content/article-mockup.html.twig new file mode 100644 index 0000000..c2968c3 --- /dev/null +++ b/templates/dummy_content/article-mockup.html.twig @@ -0,0 +1,28 @@ + +
+ +
+

Abstract

+

Elit consectetur odio illo accusamus omnis, perferendis necessitatibus! Neque minus obcaecati nostrum quos ut perferendis. Sit aut sit recusandae libero possimus ratione esse? Quibusdam nihil recusandae neque tenetur saepe! Quaerat? + Sit iste facere dolorem delectus ut et aperiam. Itaque delectus odio nemo itaque ea dicta? Assumenda veritatis vel tempora praesentium laboriosam. Porro tempora sint fugit quas elit. Id expedita voluptates. +

+

Elit consectetur odio illo accusamus omnis, perferendis necessitatibus! Neque minus obcaecati nostrum quos ut perferendis. Sit aut sit recusandae libero possimus ratione esse? Quibusdam nihil recusandae neque tenetur saepe! Quaerat? + Sit iste facere dolorem delectus ut et aperiam. Itaque delectus odio nemo itaque ea dicta? Assumenda veritatis vel tempora praesentium laboriosam. Porro tempora sint fugit quas elit. Id expedita voluptates. +

+
+
+

Introduction

+

Elit consectetur odio illo accusamus omnis, perferendis necessitatibus! Neque minus obcaecati nostrum quos ut perferendis. Sit aut sit recusandae libero possimus ratione esse? Quibusdam nihil recusandae neque tenetur saepe! Quaerat? + Sit iste facere dolorem delectus ut et aperiam. Itaque delectus odio nemo itaque ea dicta? Assumenda veritatis vel tempora praesentium laboriosam. Porro tempora sint fugit quas elit. Id expedita voluptates. +

+

Elit consectetur odio illo accusamus omnis, perferendis necessitatibus! Neque minus obcaecati nostrum quos ut perferendis. Sit aut sit recusandae libero possimus ratione esse? Quibusdam nihil recusandae neque tenetur saepe! Quaerat? + Sit iste facere dolorem delectus ut et aperiam. Itaque delectus odio nemo itaque ea dicta? Assumenda veritatis vel tempora praesentium laboriosam. Porro tempora sint fugit quas elit. Id expedita voluptates. +

+

Elit consectetur odio illo accusamus omnis, perferendis necessitatibus! Neque minus obcaecati nostrum quos ut perferendis. Sit aut sit recusandae libero possimus ratione esse? Quibusdam nihil recusandae neque tenetur saepe! Quaerat? + Sit iste facere dolorem delectus ut et aperiam. Itaque delectus odio nemo itaque ea dicta? Assumenda veritatis vel tempora praesentium laboriosam. Porro tempora sint fugit quas elit. Id expedita voluptates. +

+

Elit consectetur odio illo accusamus omnis, perferendis necessitatibus! Neque minus obcaecati nostrum quos ut perferendis. Sit aut sit recusandae libero possimus ratione esse? Quibusdam nihil recusandae neque tenetur saepe! Quaerat? + Sit iste facere dolorem delectus ut et aperiam. Itaque delectus odio nemo itaque ea dicta? Assumenda veritatis vel tempora praesentium laboriosam. Porro tempora sint fugit quas elit. Id expedita voluptates. +

+
+
diff --git a/templates/dummy_content/article-title-mockup.html.twig b/templates/dummy_content/article-title-mockup.html.twig new file mode 100644 index 0000000..3f50096 --- /dev/null +++ b/templates/dummy_content/article-title-mockup.html.twig @@ -0,0 +1,19 @@ +
+

Example of an Fairly Long Article Title, One that is Likely Multi-line

+
+
+
+ Robert N. Drew +
+
University of Prince Edward Island
+
+
+
Article
+
+ Published September 20, 2018 +
+
+
+ +
+ diff --git a/templates/menu--author_tasks.html.twig b/templates/menu--author_tasks.html.twig new file mode 100644 index 0000000..c745499 --- /dev/null +++ b/templates/menu--author_tasks.html.twig @@ -0,0 +1,56 @@ +{# +/** + * @file + * Theme override to display a menu. + * + * Available variables: + * - menu_name: The machine name of the menu. + * - items: A nested list of menu items. Each menu item contains: + * - attributes: HTML attributes for the menu item. + * - below: The menu item child items. + * - title: The menu link title. + * - url: The menu link url, instance of \Drupal\Core\Url + * - localized_options: Menu link localized options. + * - is_expanded: TRUE if the link has visible children within the current + * menu tree. + * - is_collapsed: TRUE if the link has children within the current menu tree + * that are not currently visible. + * - in_active_trail: TRUE if the link is in the active trail. + */ +#} +{{ dump() }} +{% import _self as menus %} + +{# + We call a macro which calls itself to render the full tree. + @see http://twig.sensiolabs.org/doc/tags/macro.html +#} +{{ menus.menu_links(items, attributes, 0) }} + +{% macro menu_links(items, attributes, menu_level) %} + {% import _self as menus %} + {% if items %} + {% if menu_level == 0 %} + + {% else %} +
    + {% endif %} + {% for item in items %} + {% + set classes = [ + 'menu-item', + item.is_expanded ? 'menu-item--expanded', + item.is_collapsed ? 'menu-item--collapsed', + item.in_active_trail ? 'menu-item--active-trail', + ] + %} + + {{ link(item.title, item.url) }} + {% if item.below %} + {{ menus.menu_links(item.below, attributes, menu_level + 1) }} + {% endif %} + + {% endfor %} +
+ {% endif %} +{% endmacro %} diff --git a/templates/toc/block--tableofcontents-2.html.twig b/templates/toc/block--tableofcontents-2.html.twig new file mode 100644 index 0000000..dfd33ed --- /dev/null +++ b/templates/toc/block--tableofcontents-2.html.twig @@ -0,0 +1,69 @@ +{# +/** + * @file + * Magazine+'s theme implementation to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - module: The module that provided this block plugin. + * - cache: The cache settings. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - content_attributes: Same as attributes, except applied to the main content + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_block() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'toc-block--mobile', + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + ] +%} +{% + set title_classes = [ + 'title' + ] +%} + + {{ title_prefix }} + {% if label %} + Sections + {% endif %} + {{ title_suffix }} + {% block content %} + + {{ content }} +
+ {% endblock %} + + {##} +{#
#} + {#
#} + {#{% block content %}#} + {##} + {#{{ content }}#} + {#
#} + {#{% endblock %}#} + {#
#} +{##} diff --git a/templates/toc/block--tableofcontents.html.twig b/templates/toc/block--tableofcontents.html.twig new file mode 100644 index 0000000..18d0430 --- /dev/null +++ b/templates/toc/block--tableofcontents.html.twig @@ -0,0 +1,62 @@ +{# +/** + * @file + * Magazine+'s theme implementation to display a block. + * + * Available variables: + * - plugin_id: The ID of the block implementation. + * - label: The configured label of the block if visible. + * - configuration: A list of the block's configuration values. + * - label: The configured label for the block. + * - label_display: The display settings for the label. + * - module: The module that provided this block plugin. + * - cache: The cache settings. + * - Block plugin specific settings will also be stored here. + * - content: The content of this block. + * - attributes: array of HTML attributes populated by modules, intended to + * be added to the main container tag of this template. + * - id: A valid HTML ID and guaranteed unique. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - content_attributes: Same as attributes, except applied to the main content + * tag that appears in the template. + * - title_prefix: Additional output populated by modules, intended to be + * displayed in front of the main title tag that appears in the template. + * - title_suffix: Additional output populated by modules, intended to be + * displayed after the main title tag that appears in the template. + * + * @see template_preprocess_block() + * + * @ingroup themeable + */ +#} +{% + set classes = [ + 'toc-block--wide', + 'block', + 'block-' ~ configuration.provider|clean_class, + 'block-' ~ plugin_id|clean_class, + ] +%} +{% + set title_classes = [ + 'title' + ] +%} +
+ + +
+
+ {% block content %} + + {{ content }} +
+ {% endblock %} +
+
+ + + diff --git a/templates/toc/toc-back-to-top.html.twig b/templates/toc/toc-back-to-top.html.twig new file mode 100644 index 0000000..f80760e --- /dev/null +++ b/templates/toc/toc-back-to-top.html.twig @@ -0,0 +1,18 @@ +{# +/** + * @file + * Default theme implementation to display a back to top link. + * + * Returns HTML for a back to top link. + * + * Available variables: + * - item: A table of contents header item. + * - options: Options associated with the current header item. + * + * @ingroup themeable + */ +#} + +{% set classes = ['back-to-top'] %} + +{{ label }} diff --git a/templates/toc/toc-header.html.twig b/templates/toc/toc-header.html.twig new file mode 100644 index 0000000..ae7b638 --- /dev/null +++ b/templates/toc/toc-header.html.twig @@ -0,0 +1,17 @@ +{# +/** + * @file + * Default theme implementation to display a Table of contents header. + * + * Returns HTML for a Table of contents header. + * + * Available variables: + * - item: A table of contents header item. + * - options: Table of contents options. + * - header_options: Options associated with the current header item. + * + * @ingroup themeable + */ +#} + +<{{ tag }}{{ attributes }}>{% if header_options.display_number %}{{ header_options.number_prefix }}{% if options.number_path and path %}{{ path }}{% else %}{{ value }}{% endif %}{{ header_options.number_suffix }}{% endif %}{{ html }} diff --git a/templates/toc/toc-menu.html.twig b/templates/toc/toc-menu.html.twig new file mode 100644 index 0000000..b9d5f8f --- /dev/null +++ b/templates/toc/toc-menu.html.twig @@ -0,0 +1,26 @@ +{# +/** + * @file + * Default theme implementation to display a table of contents as a select menu. + * + * Returns HTML for a Table of contents select menu. + * + * Available variables: + * - index: List of header items. Each header item contains: + * - prefix: The header option prefix. Either indentation or the complete path. + * - title: The header title. + * - url: The header fragrment (ie hash) URL, instance of \Drupal\Core\Url. + * + * @ingroup themeable + */ +#} +{% set classes = ['toc', 'toc-menu'] %} +
+ +
+ diff --git a/templates/toc/toc-responsive.html.twig b/templates/toc/toc-responsive.html.twig new file mode 100644 index 0000000..3d7edff --- /dev/null +++ b/templates/toc/toc-responsive.html.twig @@ -0,0 +1,20 @@ +{# +/** + * @file + * Default theme implementation to display a responsive table of contents. + * + * Returns HTML for a responsive table of contents. + * + * Available variables: + * - desktop: A render array represent a table of content for desktop. + * - mobile: A render array represent a table of content for mobile. + * + * @ingroup themeable + */ +#} +{% set classes = ['toc', 'toc-responsive'] %} +
+ {{ desktop }} + {{ mobile }} +
+ diff --git a/templates/toc/toc-tree.html.twig b/templates/toc/toc-tree.html.twig new file mode 100644 index 0000000..692ae77 --- /dev/null +++ b/templates/toc/toc-tree.html.twig @@ -0,0 +1,60 @@ +{# +/** + * @file + * Default theme implementation to display a Table of contents as a tree. + * + * Returns HTML for a nested list representation of a Table of contents.. + * + * Available variables: + * - tree: A nested list of header items. Each header item contains: + * - list_tag: HTML tag for the list. + * - list_attributes: HTML attributes for the list. + * - attributes: HTML attributes for the table of contents or list item. + * - below: The table of contents child items. + * - title: The table of contents or header title. + * - url: The header fragrment (ie hash) URL, instance of \Drupal\Core\Url. + * + * @ingroup themeable + */ +#} +{# + We call a macro which calls itself to render the full tree. + @see http://twig.sensiolabs.org/doc/tags/macro.html +#} +{% import _self as toc_api_tree %} +{% set classes = ['toc', 'toc-tree'] %} + + + + {% if tree.title and not options.block %} +

{{ tree.title }}

+ {% endif %} + + {{ toc_api_tree.tree_links(tree) }} + + + +{% macro tree_links(item) %} + {% import _self as toc_api_tree %} + + {% if item.below_type %} +
    + {% else %} +
      + {% endif %} + + {% for child_item in item.below %} + + {{ link(child_item.html, child_item.url) }} + {% if child_item.below %} + {{ toc_api_tree.tree_links(child_item) }} + {% endif %} + + {% endfor %} + + {% if item.below_type %} +
+ {% else %} + + {% endif %} +{% endmacro %}