templates

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') }}
+
+
+
+
 <article{{ attributes.addClass(classes) }}>
   <div class="node__container">
     {% block node_side %}
@@ -123,13 +127,26 @@
           {% endif %}
         {% endblock %}
 
-      {{content.field_article_contributors}}
+      {#{{content.field_article_contributors}}#}
       </header>
 
-      {{content.group_article.group_article_text.field_journal_article_abstract}}
+
+{#dummy content#}
+<!-- import -->
+{% include '@lmmi_journal/dummy_content/article-title-mockup.html.twig' %}
+<!-- /import -->
+<!-- import -->
+{% include '@lmmi_journal/dummy_content/article-mockup.html.twig' %}
+<!-- /import -->
+
+
+
+
+
+      {#{{content.group_article.group_article_text.field_journal_article_abstract}}#}
       <hr>
-      {{content.group_article.group_article_text.body}}
 
+      {#{{content.group_article.group_article_text.body}}#}
 
       {% block content %}
         {{ content }}

templates/dummy_content/article-mockup.html.twig

@@ -0,0 +1,28 @@
+
+<div class="paragraph-responsive-typography-enabled node__main-content article-layout">
+
+<section class="abstract">
+  <h3>Abstract</h3>
+  <p>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.
+  </p>
+  <p>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.
+  </p>
+</section>
+<section class="introduction">
+<h2>Introduction</h2>
+  <p>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.
+  </p>
+  <p>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.
+  </p>
+  <p>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.
+  </p>
+  <p>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.
+  </p>
+</section>
+</div>

templates/dummy_content/article-title-mockup.html.twig

@@ -0,0 +1,19 @@
+<header class="paragraph-responsive-typography-enabled article-header">
+  <h1 class="article--title">Example of an Fairly Long Article Title, One that is Likely Multi-line </h1>
+  <section class="article-header--metadata">
+    <div class="left">
+      <div class="article--contributor">
+        Robert N. Drew
+      </div>
+      <div class="article--contributor__affiliation">University of Prince Edward Island</div>
+    </div>
+    <div class="right">
+      <div class="article--type">Article</div>
+      <div class="article--date-published">
+     Published September 20, 2018 
+      </div>
+    </div>
+  </section>
+
+</header>
+

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 %}
+      <ul{{ attributes.addClass('menu menu__author-tasks') }}>
+    {% else %}
+      <ul class="menu">
+    {% 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',
+        ]
+      %}
+      <li{{ item.attributes.addClass(classes) }}>
+        {{ link(item.title, item.url) }}
+        {% if item.below %}
+          {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}

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'
+  ]
+%}
+<div{{ attributes.addClass(classes) }}>
+  {{ title_prefix }}
+  {% if label %}
+    <h2{{ title_attributes.addClass(title_classes) }}>Sections</h2>
+  {% endif %}
+  {{ title_suffix }}
+  {% block content %}
+    <div{{ content_attributes.addClass('content') }}>
+      {{ content }}
+    </div>
+  {% endblock %}
+</div>
+  {#<a class="toc--title toc--dropdown-trigger" data-toggle="collapse" href="#toc-sections" role="button" aria-expanded="false" aria-controls="toc-sections">#}
+    {#<h2{{ title_attributes.addClass(title_classes) }}>Sections</h2>#}
+  {#</a>#}
+{#<div class="toc--list collapse" id="toc-sections">#}
+  {#<div class="card card-body">#}
+  {#{% block content %}#}
+    {#<div{{ content_attributes.addClass('content') }}>#}
+      {#{{ content }}#}
+    {#</div>#}
+  {#{% endblock %}#}
+  {#</div>#}
+{#</div>#}

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'
+  ]
+%}
+<div class="toc-sticky-wrapper">
+  <div{{ attributes.addClass(classes) }}>
+    <a class="toc--title toc--dropdown-trigger" data-toggle="collapse" href="#toc-sections" role="button" aria-expanded="false" aria-controls="toc-sections">
+      <h2{{ title_attributes.addClass(title_classes) }}>Sections</h2>
+    </a>
+    <div class="toc--list collapse" id="toc-sections">
+      <div class="card card-body">
+        {% block content %}
+          <div{{ content_attributes.addClass('content') }}>
+            {{ content }}
+          </div>
+        {% endblock %}
+      </div>
+    </div>
+
+  </div>
+</div>

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'] %}
+
+<a{{ attributes.addClass(classes) }}>{{ label }}</a>

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 %}<span>{{ header_options.number_prefix }}{% if options.number_path and path %}{{ path }}{% else %}{{ value }}{%  endif %}{{ header_options.number_suffix }}</span>{%  endif %}{{ html }}</{{ tag }}>

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'] %}
+<form {{ attributes.addClass(classes) }}>
+  <select>
+    <option value="">{{ title }}</option>
+    {% for item in index %}
+      <option value="{{ item.url }}">{{ item.prefix }}{{ item.title }}</option>
+    {% endfor %}
+  </select>
+</form>
+

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'] %}
+<div {{ attributes.addClass(classes) }}>
+  {{ desktop }}
+  {{ mobile }}
+</div>
+

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'] %}
+
+<div{{ attributes.addClass(classes) }}>
+
+  {% if tree.title and not options.block %}
+    <h3>{{ tree.title }}</h3>
+  {% endif %}
+
+  {{ toc_api_tree.tree_links(tree) }}
+
+</div>
+
+{% macro tree_links(item) %}
+  {% import _self as toc_api_tree %}
+
+  {% if item.below_type %}
+    <ol class="{{ item.below_type }}">
+  {% else %}
+    <ul>
+  {% endif  %}
+
+  {% for child_item in item.below %}
+    <li{{ child_item.attributes.setAttribute('value', child_item.value) }}>
+      {{ link(child_item.html, child_item.url) }}
+      {% if child_item.below %}
+        {{ toc_api_tree.tree_links(child_item) }}
+      {% endif %}
+    </li>
+  {% endfor %}
+
+  {% if item.below_type %}
+    </ol>
+  {% else %}
+    </ul>
+  {% endif  %}
+{% endmacro %}