Styling node and links-node

<?php

/**

 * @file

 * Contains preprocess functions for node.

 */

/**

 * Implements hook_preprocess_node().

 */

function semanticui_preprocess_node(&$vars) {

  $vars['title_attributes_array']['class'][] = 'ui';

  $vars['title_attributes_array']['class'][] = 'header';

  $vars['content_attributes_array']['class'][] = 'ui';

  $vars['content_attributes_array']['class'][] = 'form';

  if (!empty($vars['user_picture'])) {

    $vars['content_attributes_array']['class'][] = 'left';

    $vars['content_attributes_array']['class'][] = 'floated';

    $vars['content_attributes_array']['class'][] = 'basic';

    $vars['content_attributes_array']['class'][] = 'horizontal';

    $vars['content_attributes_array']['class'][] = 'segment';

  }

  if ($vars['view_mode'] == 'teaser') {

    $vars['classes_array'][] = 'ui';

    $vars['classes_array'][] = 'segment';

  }

  // If authenticated user does not have permission to post a comments then

  // Comment module will add empty item (i.e. without title) to the links.

  // It will not be displayed but will be counted.

  if (isset($vars['content']['links']['comment']['#links']['comment_forbidden']) &&

      empty($vars['content']['links']['comment']['#links']['comment_forbidden']['title'])) {

    unset($vars['content']['links']['comment']['#links']['comment_forbidden']);

  }

  if ($vars['type'] === 'forum') {

    // Custom date format on forum.

    $vars['date'] = format_date($vars['created'], 'short');

    // Create links on forum topic.

    $vars['content']['links']['#theme'] = 'links__node_forum';

    $nid = $vars['nid'];

    // Add delete link to the links list.

    if (node_access('update', $vars['node'])) {

      $vars['content']['links']['comment']['#links'] = array('edit' => array(

          'title' => t('edit'),

          'href' => 'node/' . $nid . '/edit',

          'html' => TRUE,

        )) + $vars['content']['links']['comment']['#links'];

    }

    // Add edit link to the links list.

    if (node_access('delete', $vars['node'])) {

      $vars['content']['links']['comment']['#links'] = array('delete' => array(

          'title' => t('delete'),

          'href' => 'node/' . $nid . '/delete',

          'html' => TRUE,

        )) + $vars['content']['links']['comment']['#links'];

    }

    // Reply link.

    if (isset($vars['content']['links']['comment']['#links']['comment-add'])) {

      $vars['content']['links']['comment']['#links']['comment-add']['title'] = t('reply');

      $vars['content']['links']['comment']['#links']['comment-add']['html'] = TRUE;

    }

    // Add permalink to the links list.

    $vars['content']['links']['comment']['#links']['permalink'] = array(

      'title' => t('permalink'),

      'href' => drupal_get_path_alias('node/' . $nid),

      'html' => TRUE,

    );

  }

}

{#

/**

 * @file

 * Theme override to display node links.

 *

 * Available variables:

 * - attributes: Attributes for the UL containing the list of links.

 * - links: Links to be output.

 *   Each link will have the following elements:

 *   - title: The link text.

 *   - href: The link URL. If omitted, the 'title' is shown as a plain text

 *     item in the links list. If 'href' is supplied, the entire link is passed

 *     to l() as its $options parameter.

 *   - attributes: (optional) HTML attributes for the anchor, or for the <span>

 *     tag if no 'href' is supplied.

 * - heading: (optional) A heading to precede the links.

 *   - text: The heading text.

 *   - level: The heading level (e.g. 'h2', 'h3').

 *   - attributes: (optional) A keyed list of attributes for the heading.

 *   If the heading is a string, it will be used as the text of the heading and

 *   the level will default to 'h2'.

 *

 *   Headings should be used on navigation menus and any list of links that

 *   consistently appears on multiple pages. To make the heading invisible use

 *   the 'visually-hidden' CSS class. Do not use 'display:none', which

 *   removes it from screen readers and assistive technology. Headings allow

 *   screen reader and keyboard only users to navigate to or skip the links.

 *   See http://juicystudio.com/article/screen-readers-display-none.php and

 *   http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.

 *

 * @see template_preprocess_links()

 *

 * @ingroup themeable

 */

#}

{% if links %}

  <div class="node__links ui menu link horizontal secondary">

    <div class="item">

      {% include "links.html.twig" %}

    </div>

  </div>

{% endif %}

{#

/**

 * @file

 * Theme override to display a node.

 *

 * Available variables:

 * - node: The node entity with limited access to object properties and methods.

 *   Only method names starting with "get", "has", or "is" and a few common

 *   methods such as "id", "label", and "bundle" are available. For example:

 *   - node.getCreatedTime() will return the node creation timestamp.

 *   - node.hasField('field_example') returns TRUE if the node bundle includes

 *     field_example. (This does not indicate the presence of a value in this

 *     field.)

 *   - node.isPublished() will return whether the node is published or not.

 *   Calling other methods, such as node.delete(), will result in an exception.

 *   See \Drupal\node\Entity\Node for a full list of public properties and

 *   methods for the node object.

 * - label: (optional) The title of the node.

 * - content: All node items. Use {{ content }} to print them all,

 *   or print a subset such as {{ content.field_example }}. Use

 *   {{ content|without('field_example') }} to temporarily suppress the printing

 *   of a given child element.

 * - author_picture: The node author user entity, rendered using the "compact"

 *   view mode.

 * - metadata: Metadata for this node.

 * - date: (optional) Themed creation date field.

 * - author_name: (optional) Themed author name field.

 * - url: Direct URL of the current node.

 * - display_submitted: Whether submission information should be displayed.

 * - attributes: HTML attributes for the containing element.

 *   The attributes.class element may contain one or more of the following

 *   classes:

 *   - node: The current template type (also known as a "theming hook").

 *   - node--type-[type]: The current node type. For example, if the node is an

 *     "Article" it would result in "node--type-article". Note that the machine

 *     name will often be in a short form of the human readable label.

 *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a

 *     teaser would result in: "node--view-mode-teaser", and

 *     full: "node--view-mode-full".

 *   The following are controlled through the node publishing options.

 *   - node--promoted: Appears on nodes promoted to the front page.

 *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in

 *     teaser listings.

 *   - node--unpublished: Appears on unpublished nodes visible only to site

 *     admins.

 * - 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.

 * - author_attributes: Same as attributes, except applied to the author of

 *   the node 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.

 * - view_mode: View mode; for example, "teaser" or "full".

 * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.

 * - page: Flag for the full page state. Will be true if view_mode is 'full'.

 * - readmore: Flag for more state. Will be true if the teaser content of the

 *   node cannot hold the main body content.

 * - logged_in: Flag for authenticated user status. Will be true when the

 *   current user is a logged-in member.

 * - is_admin: Flag for admin user status. Will be true when the current user

 *   is an administrator.

 *

 * @see template_preprocess_node()

 *

 * @todo Remove the id attribute (or make it a class), because if that gets

 *   rendered twice on a page this is invalid CSS for example: two lists

 *   in different view modes.

 */

#}

{%

  set classes = [

  'node',

  'node--type-' ~ node.bundle|clean_class,

  node.isPromoted() ? 'node--promoted',

  node.isSticky() ? 'node--sticky',

  not node.isPublished() ? 'node--unpublished',

  view_mode ? 'node--view-mode-' ~ view_mode|clean_class,

  view_mode == 'teaser' ? 'ui segment' : 'ui',

]

%}

{{ attach_library('classy/node') }}

<article {{ attributes.addClass(classes) }}>

  {{ title_prefix }}

  {% if label and not page %}

    <h2{{ title_attributes.addClass('ui', 'header') }}>

      <a href="{{ url }}" rel="bookmark">{{ label }}</a>

    </h2>

  {% endif %}

  {{ title_suffix }}

  {% if display_submitted %}

    <footer class="node__meta">

      <p class="submitted">

        <span class="ui label" {{ author_attributes.addClass(['node__submitted', 'ui', 'label']) }}>

        {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %}

        {{ metadata }}

        </span>

      </p>

      <div class="ui left floated basic horizontal segment">

        {{ author_picture }}

      </div>

    </footer>

  {% endif %}

  <div{{ content_attributes.addClass('node__content') }}>

    {{ content }}

  </div>

</article>