Fin Byrrh
authorFelip Manyer i Ballester <git@res-telae.cat>
Thu, 29 Dec 2016 21:45:51 +0000 (22:45 +0100)
committerFelip Manyer i Ballester <git@res-telae.cat>
Thu, 29 Dec 2016 21:45:51 +0000 (22:45 +0100)
docroot/profiles/fonamental/modules/custom/fonamental_actu/config/install/core.entity_view_display.node.actu.default.yml
docroot/profiles/fonamental/themes/custom/byrrh/scss/byrrh.scss
docroot/profiles/fonamental/themes/custom/byrrh/scss/components/_comments.scss [new file with mode: 0644]
docroot/profiles/fonamental/themes/custom/byrrh/scss/components/_node.scss [new file with mode: 0644]
docroot/profiles/fonamental/themes/custom/byrrh/templates/base/comment.html.twig [new file with mode: 0644]

index 5277c90..14a4d6f 100644 (file)
@@ -12,7 +12,7 @@ dependencies:
   module:
     - comment
     - file
-    - image
+    - fonamental_global
     - text
     - user
 id: node.actu.default
@@ -23,7 +23,7 @@ content:
   body:
     label: hidden
     type: text_default
-    weight: 1
+    weight: 2
     settings: {  }
     third_party_settings: {  }
   field_commentaire:
@@ -35,19 +35,19 @@ content:
     third_party_settings: {  }
     type: comment_default
   field_fichiers_joints:
-    weight: 2
+    weight: 3
     label: above
     settings: {  }
     third_party_settings: {  }
     type: file_default
   field_image_multiple:
-    weight: 3
+    weight: 1
     label: hidden
     settings:
       image_style: medium
       image_link: file
     third_party_settings: {  }
-    type: image
+    type: first_image
   links:
     weight: 0
     settings: {  }
index 90a4b57..96efe1c 100644 (file)
 
 // Import your components here.
 @import "components/field";
+@import "components/node";
 @import "components/block";
 @import "components/account-menu";
 @import "components/site-branding";
 @import "components/primary-menu";
 @import "components/breadcrumb";
+@import "components/comments";
 @import "components/search-form";
 @import "components/search-results";
 @import "components/hero";
diff --git a/docroot/profiles/fonamental/themes/custom/byrrh/scss/components/_comments.scss b/docroot/profiles/fonamental/themes/custom/byrrh/scss/components/_comments.scss
new file mode 100644 (file)
index 0000000..fb0089a
--- /dev/null
@@ -0,0 +1,174 @@
+.comment-wrapper {
+  clear: both;
+  margin: 1em 0;
+
+  h2 {
+    margin: 1.5em 0 1em 0;
+  }
+}
+
+.field-node--comment {
+  font-size: 0.934em;
+}
+
+.comment {
+  margin-bottom: 19px;
+  vertical-align: top;
+  display: table;
+
+  [dir="rtl"] & {
+    direction: rtl;
+  }
+}
+
+.comment__meta {
+  padding: 0 30px 0 0; /* LTR */
+  font-size: 1.071em;
+  [dir="rtl"] & {
+    padding: 0 0 0 30px;
+  }
+}
+
+.comment__attribution img {
+  border: 1px solid $base-border-color;
+}
+
+/* This is required to win over specificity of .field--type-image img */
+.comment .field--name-user-picture img {
+  margin: 0;
+}
+
+.comment__author .username {
+  white-space: nowrap;
+}
+
+.comment__author {
+  margin: 4px 0;
+  line-height: 1.2;
+}
+
+.comment__time {
+  margin-bottom: 4px;
+  color: $medium-gray;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.733em;
+  line-height: 1.2;
+
+}
+
+.comment__permalink {
+  font-size: 0.733em;
+  line-height: 1.2;
+}
+
+.comment__content {
+  position: relative;
+  display: table-cell;
+  padding: 10px 25px 10px 25px;
+  vertical-align: top;
+  width: 100%;
+  border: 1px solid $base-border-color;
+  font-size: 0.929em;
+  line-height: 1.6;
+  word-break: break-all;
+
+  &:before {
+    content: '';
+    position: absolute;
+    right: 100%; /* LTR */
+    top: 20px;
+    border-top: 20px solid transparent;
+    border-right: 20px solid $base-border-color; /* LTR */
+    border-bottom: 20px solid transparent;
+
+    [dir="rtl"] & {
+      right: auto;
+      left: 100%;
+      border-right: none;
+      border-left: 20px solid $base-border-color;
+    }
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    right: 100%; /* LTR */
+    top: 20px;
+    border-top: 20px solid transparent;
+    border-right: 20px solid white; /* LTR */
+    border-bottom: 20px solid transparent;
+    margin-right: -1px; /* LTR */
+
+    [dir="rtl"] & {
+      right: auto;
+      left: 100%;
+      border-right: none;
+      border-left: 20px solid white;
+      margin-right: 0;
+      margin-left: -1px;
+    }
+  }
+
+  h3 {
+    margin-top: 0.94em;
+    margin-bottom: 0.45em;
+    font-size: 1.171em;
+  }
+}
+
+.indented {
+  margin-left: 40px; /* LTR */
+
+  [dir="rtl"] & {
+    margin-right: 40px;
+    margin-left: 0;
+  }
+}
+
+.comment .links {
+  padding: 0 0 0.25em 0;
+
+  li {
+    padding: 0 0.5em 0 0; /* LTR */
+    font-size: 1.08em;
+
+    [dir="rtl"] & {
+      padding: 0 0 0 0.5em;
+    }
+  }
+}
+
+.comment--unpublished {
+  margin-right: 5px; /* LTR */
+  padding: 5px 2px 5px 5px; /* LTR */
+  background: $light-gray;
+
+  [dir="rtl"] & {
+    margin-left: 5px;
+    margin-right: 0;
+    padding: 5px 5px 5px 2px;
+  }
+}
+
+/**
+ * @todo: unpublished nodes have class .node--unpublished.
+ * change this to .comment--unpublished.
+ */
+.unpublished .comment-text .comment-arrow {
+  border-left: 1px solid $base-border-color;
+  border-right: 1px solid $base-border-color;
+}
+.unpublished {
+  padding: 20px 15px 0;
+}
+.comment-footer {
+  display: table-row;
+}
+.comment--unpublished .comment__text:after,
+.node--unpublished .comment__text:after {
+  border-right-color: $base-border-color; /* LTR */
+}
+[dir="rtl"] .comment--unpublished .comment__content:after,
+[dir="rtl"] .node--unpublished .comment__content:after {
+  border-left-color: $base-border-color;
+}
diff --git a/docroot/profiles/fonamental/themes/custom/byrrh/scss/components/_node.scss b/docroot/profiles/fonamental/themes/custom/byrrh/scss/components/_node.scss
new file mode 100644 (file)
index 0000000..7891da7
--- /dev/null
@@ -0,0 +1,41 @@
+/* View mode teaser styles. */
+.node--view-mode-teaser {
+  border-bottom: 1px solid $base-border-color;
+  margin-bottom: 1em;
+  padding-bottom: 1.5em;
+}
+.node--view-mode-teaser h2 {
+  margin: 0.4em 0 0 0;
+  padding-top: 0.3em;
+}
+
+/* Node metadata styles. */
+.node__meta {
+  font-size: 0.857em;
+  color: $dark-gray;
+  //margin-bottom: -5px;
+}
+.node__meta .field--name-user-picture img {
+  float: left; /* LTR */
+  margin: 1px 20px 0 0; /* LTR */
+}
+[dir="rtl"] .node__meta .field--name-user-picture img {
+  float: right;
+  margin-left: 20px;
+  margin-right: 0;
+}
+
+/* Node links styles. */
+.node__links {
+  text-align: right; /* LTR */
+  font-size: 0.93em;
+  margin-bottom: 0.5em;
+}
+[dir="rtl"] .node__links {
+  text-align: left;
+}
+
+/* Unpublished node styles. */
+.node--unpublished {
+  padding: 20px 15px 0;
+}
diff --git a/docroot/profiles/fonamental/themes/custom/byrrh/templates/base/comment.html.twig b/docroot/profiles/fonamental/themes/custom/byrrh/templates/base/comment.html.twig
new file mode 100644 (file)
index 0000000..d8f54cb
--- /dev/null
@@ -0,0 +1,108 @@
+{#
+/**
+ * @file
+ * Bartik's theme implementation for comments.
+ *
+ * Available variables:
+ * - author: Comment author. Can be a link or plain text.
+ * - content: The content-related items for the comment display. Use
+ *   {{ content }} to print them all, or print a subset such as
+ *   {{ content.field_example }}. Use the following code to temporarily suppress
+ *   the printing of a given child element:
+ *   @code
+ *   {{ content|without('field_example') }}
+ *   @endcode
+ * - created: Formatted date and time for when the comment was created.
+ *   Preprocess functions can reformat it by calling format_date() with the
+ *   desired parameters on the 'comment.created' variable.
+ * - changed: Formatted date and time for when the comment was last changed.
+ *   Preprocess functions can reformat it by calling format_date() with the
+ *   desired parameters on the 'comment.changed' variable.
+ * - permalink: Comment permalink.
+ * - submitted: Submission information created from author and created
+ *   during template_preprocess_comment().
+ * - user_picture: The comment author's profile picture.
+ * - status: Comment status. Possible values are:
+ *   unpublished, published, or preview.
+ * - title: Comment title, linked to the comment.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class may contain one or more of the following classes:
+ *   - comment: The current template type; e.g., 'theming hook'.
+ *   - by-anonymous: Comment by an unregistered user.
+ *   - by-{entity-type}-author: Comment by the author of the parent entity,
+ *     eg. by-node-author.
+ *   - preview: When previewing a new or edited comment.
+ *   The following applies only to viewers who are registered users:
+ *   - unpublished: An unpublished comment visible only to administrators.
+ * - 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.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: List of classes for the styling of the comment content.
+ * - threaded: A flag indicating whether the comments are threaded or not.
+ *
+ * These variables are provided to give context about the parent comment (if
+ * any):
+ * - comment_parent: Full parent comment entity (if any).
+ * - parent_author: Equivalent to author for the parent comment.
+ * - parent_created: Equivalent to created for the parent comment.
+ * - parent_changed: Equivalent to changed for the parent comment.
+ * - parent_title: Equivalent to title for the parent comment.
+ * - parent_permalink: Equivalent to permalink for the parent comment.
+ * - parent: A text string of parent comment submission information created from
+ *   'parent_author' and 'parent_created' during template_preprocess_comment().
+ *   This information is presented to help screen readers follow lengthy
+ *   discussion threads. You can hide this from sighted users using the class
+ *   visually-hidden.
+ *
+ * These two variables are provided for context:
+ * - comment: Full comment object.
+ * - entity: Entity the comments are attached to.
+ *
+ * @see template_preprocess_comment()
+ */
+#}
+{%
+  set classes = [
+    'comment',
+    'js-comment',
+    status != 'published' ? 'comment--' ~ status,
+    comment.owner.anonymous ? 'by-anonymous',
+    author_id and author_id == commented_entity.getOwnerId() ? 'by-' ~ commented_entity.getEntityTypeId() ~ '-author',
+    'clearfix',
+  ]
+%}
+<article role="article"{{ attributes.addClass(classes)|without('role') }}>
+  {#
+    Hide the "new" indicator by default, let a piece of JavaScript ask the
+    server which comments are new for the user. Rendering the final "new"
+    indicator here would break the render cache.
+  #}
+  <span class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}"></span>
+
+  <footer class="comment__meta">
+    {{ user_picture }}
+    <p class="comment__author">{{ author }}</p>
+    <p class="comment__time">{{ created }}</p>
+    <p class="comment__permalink">{{ permalink }}</p>
+    {#
+      Indicate the semantic relationship between parent and child comments
+      for accessibility. The list is difficult to navigate in a screen
+      reader without this information.
+    #}
+    {% if parent %}
+      <p class="visually-hidden">{{ parent }}</p>
+    {% endif %}
+  </footer>
+
+  <div{{ content_attributes.addClass('comment__content') }}>
+    {% if title %}
+      {{ title_prefix }}
+      <h3{{ title_attributes }}>{{ title }}</h3>
+      {{ title_suffix }}
+    {% endif %}
+    {{ content }}
+  </div>
+</article>