Skip to content

Commit 010ee8d

Browse files
AndreasEngelmarkAndreasEngelmark
committed
Add styling to posts
1 parent 6fd0d5f commit 010ee8d

File tree

5 files changed

+84
-44
lines changed

5 files changed

+84
-44
lines changed

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
@import "pages/document.scss";
4949
@import "pages/document-collection.scss";
5050
@import "pages/question.scss";
51+
@import "pages/post.scss";
5152

5253
@import "pages/user-questions.scss";
5354
@import "pages/user-subscriptions.scss";

‎web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/pages/post.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.os2loop-post {
2+
section {
3+
article + article,
4+
article + div.indented,
5+
div.indented + article,
6+
div.intendet + div.indented {
7+
@extend .mt-30;
8+
}
9+
}
10+
}

‎web/profiles/custom/os2loop/themes/os2loop_theme/templates/content-entities/comment--os2loop-post-comments.html.twig‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -68,32 +68,61 @@
6868
#}
6969

7070
{# Remove comment id from element id on top comment #}
71+
{% set is_top_comment = attributes.hasClass('top-comment') %}
7172
{% if attributes.hasClass('top-comment') %}
7273
{% set attributes = attributes.setAttribute('id', 'top-comment') %}
7374
{% endif %}
7475

75-
<article{{ attributes.addClass('js-comment os2loop-comment') }}>
76+
{% set classes = [
77+
'js-comment',
78+
'os2loop-comment',
79+
'entity',
80+
is_top_comment ? 'top-comment'
81+
] %}
82+
83+
<article{{ attributes.addClass(classes) }}>
7684
{#
7785
Hide the "new" indicator by default, let a piece of JavaScript ask the
7886
server which comments are new for the user. Rendering the final "new"
7987
indicator here would break the render cache.
8088
#}
81-
<div class="d-flex align-items-center row no-gutters">
82-
<div class="reply-header row no-gutters">
83-
{% include '@os2loop_theme/field/user-info.html.twig' with {user: drupal_entity('user', comment.uid.target_id), date: created, entity: comment} %}
84-
{% include '@os2loop_theme/navigation/comment-tasks.html.twig' with {node: drupal_entity('node', comment.entity_id.target_id)} %}
85-
</div>
89+
<div class="container entity-header d-inline-flex align-items-top">
90+
{% include '@os2loop_theme/field/user-info.html.twig' with {user: drupal_entity('user', comment.uid.target_id), date: created, entity: comment, attributes: attributes} %}
91+
{% include '@os2loop_theme/navigation/comment-tasks.html.twig' with {node: drupal_entity('node', comment.entity_id.target_id)} %}
8692
</div>
8793
{#
8894
Indicate the semantic relationship between parent and child comments for
8995
accessibility. The list is difficult to navigate in a screen reader
9096
without this information.
9197
#}
92-
<div{{ content_attributes.addClass('reply-body') }}>
93-
{% if parent %}
94-
<p class="visually-hidden">{{ parent }}</p>
95-
{% endif %}
96-
{{ content.os2loop_post_comment }}
97-
<div>{{ content.flag_os2loop_upvote_correct_answer }}</div>
98+
<div{{ content_attributes.addClass('entity-body') }}>
99+
<div class="row">
100+
<div class="col">
101+
{% if parent %}
102+
{# TODO: the value for length (215) is arbitrary - this should be handled using JS function instead #}
103+
{% set toggle_parent_comment = parent_comment.os2loop_post_comment.value|length > 215 %}
104+
<p class="visually-hidden">{{ parent }}</p>
105+
<div class="parent-entity" aria-hidden="true">
106+
<div class="parent-entity-header row no-gutters mb-10">
107+
{% include '@os2loop_theme/field/user-info.html.twig' with {user: drupal_entity('user', parent_comment.uid.target_id), date: parent_created, entity: parent_comment, attributes: null} %}
108+
</div>
109+
<div class="parent-entity-body{{ toggle_parent_comment ? ' collapse' }}" id="parent-entity-body-{{ parent_comment.id() }}">
110+
{{ parent_comment.os2loop_post_comment.value }}
111+
</div>
112+
{% if toggle_parent_comment %}
113+
<i class="bi bi-chevron-up toggle collapsed" data-toggle="collapse" href="#parent-entity-body-{{ parent_comment.id() }}" role="button"></i>
114+
{% endif %}
115+
</div>
116+
<div class="child-entity-heading mt-30 mb-15">{{ 'Answer'|t }}</div>
117+
{% endif %}
118+
{{ content.os2loop_post_comment }}
119+
</div>
120+
</div>
121+
<div class="row align-items-end">
122+
{% if content.os2loop_post_comment_media['#items'] is not empty %}
123+
<div class="col">{{ content.os2loop_post_comment_media }}</div>
124+
{% endif %}
125+
<div class="col-auto ml-auto">{{ content.flag_os2loop_upvote_correct_answer }}</div>
126+
</div>
98127
</div>
99-
</article>
128+
</article>

‎web/profiles/custom/os2loop/themes/os2loop_theme/templates/content/node--os2loop-post.html.twig‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -70,27 +70,37 @@
7070
* in different view modes.
7171
*/
7272
#}
73+
7374
{% import '@os2loop_theme/macros.html.twig' as macros %}
75+
{% set comment_form = content.os2loop_post_comments[0].comment_form %}
7476

75-
{# This tag is closed by </article> in 'field--node--os2loop-post-comments.html.twig' #}
7677
<article{{ attributes.addClass("os2loop-content os2loop-post mb-90") }}>
77-
{# This tag is closed by </div> in 'field--node--os2loop-post-comments.html.twig' #}
7878
<div class="block-primary-white">
7979
{{ macros.title(label, "post", node, content, false) }}
80-
<div class="reply-header d-flex align-items-top">
81-
{% include '@os2loop_theme/field/user-info.html.twig' with {user: drupal_entity('user', node.uid.target_id), entity: node} %}
82-
</div>
83-
<div{{ content_attributes.addClass('reply-body mb-30') }}>
84-
{{ content.os2loop_post_content }}
85-
<div class="row mt-30">
86-
<div class="col">
87-
{{ content.os2loop_post_file }}
88-
</div>
80+
<div class="entity first-entity">
81+
<div class="container entity-header d-inline-flex align-items-top">
82+
{% include '@os2loop_theme/field/user-info.html.twig' with {user: drupal_entity('user', node.uid.target_id), entity: node} %}
8983
</div>
90-
<div class="row mt-30">
91-
<div class="col-12 col-md-auto">
92-
{{ content.os2loop_shared_tags }}
84+
<div{{ content_attributes.addClass('entity-body') }}>
85+
{{ content.os2loop_post_content }}
86+
<div class="row">
87+
<div class="col">
88+
{{ content.os2loop_post_file }}
89+
</div>
90+
</div>
91+
<div class="row">
92+
<div class="col">
93+
{{ content.os2loop_shared_tags }}
94+
</div>
9395
</div>
9496
</div>
9597
</div>
9698
{{ content.os2loop_post_comments }}
99+
</div>
100+
{% if comment_form %}
101+
<div class="block-primary-gray mt-30">
102+
<h4{{ content_attributes }}>{{ 'Add new comment'|t }}</h4>
103+
{{ comment_form }}
104+
</div>
105+
{% endif %}
106+
</article>

‎web/profiles/custom/os2loop/themes/os2loop_theme/templates/field/field--os2loop-post-comments.html.twig‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -27,21 +27,11 @@
2727
*/
2828
#}
2929

30-
<section{{ attributes }}>
31-
{% if comments and not label_hidden %}
32-
{{ title_prefix }}
33-
<h3{{ title_attributes }}>{{ label }}</h3>
34-
{{ title_suffix }}
35-
{% endif %}
36-
{{ comments }}
37-
</section>
38-
{# This tag closes the <div> opened in 'node--os2loop-post.html.twig' #}
39-
</div>
40-
{% if comment_form %}
41-
<div class="block-primary-gray mt-30">
42-
<h4{{ content_attributes }}>{{ 'Add new comment'|t }}</h4>
43-
{{ comment_form }}
44-
</div>
30+
<section{{ attributes }}>
31+
{% if comments and not label_hidden %}
32+
{{ title_prefix }}
33+
<h3{{ title_attributes.addClass('mt-60 mb-30') }}>{{ label }}</h3>
34+
{{ title_suffix }}
4535
{% endif %}
46-
{# This tag closes the <article> opened in 'node--os2loop-post.html.twig' #}
47-
</article>
36+
{{ comments }}
37+
</section>

0 commit comments

Comments
 (0)