Skip to content

Commit 34a6abe

Browse files
JimiRadabaughJimiRadabaugh
committed
updated inee-question-answer-pair
1 parent 45dac20 commit 34a6abe

File tree

3 files changed

+293
-4
lines changed

3 files changed

+293
-4
lines changed

‎70/drupal/inee-question-answer-pair/sass/_paragraphs-q-and-a.scss

+59-4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,58 @@
1+
/*----------------------------------------------------
2+
# Variables
3+
----------------------------------------------------*/
4+
$color-warmWhite: #faf7f4;
5+
$color-purple: #913592;
6+
$sidePaddingMax: 4rem;
7+
$wideInnerWidth: 1366px;
8+
9+
/*----------------------------------------------------
10+
# Mixins
11+
----------------------------------------------------*/
12+
@mixin layoutInnerPadding() {
13+
padding-left: $sidePaddingMax;
14+
padding-right: $sidePaddingMax;
15+
16+
@media (max-width: $width-s) {
17+
padding-left: $sidePaddingMax/4;
18+
padding-right: $sidePaddingMax/4;
19+
}
20+
}
21+
22+
@mixin layoutMaxWidth() {
23+
width: 100vw;
24+
margin-left: calc(-50vw + 50%);
25+
margin-right: calc(-50vw + 50%);
26+
27+
.scrollbar-5 & { width: calc(100vw - 5px); }
28+
.scrollbar-12 & { width: calc(100vw - 12px); }
29+
.scrollbar-15 & { width: calc(100vw - 15px); }
30+
.scrollbar-17 & { width: calc(100vw - 17px); }
31+
}
32+
33+
@mixin layoutContent() {
34+
@include layoutInnerPadding();
35+
width: 100%;
36+
margin-left: auto;
37+
margin-right: auto;
38+
max-width: calc(#{$wideInnerWidth} + (#{$sidePaddingMax * 2}));
39+
40+
.browser-ie & {
41+
max-width: $wideInnerWidth + 100px;
42+
}
43+
44+
@media #{$mobile} {
45+
max-width: 100%;
46+
47+
.browser-ie & {
48+
overflow-x: hidden; // prevents overflow on IE/Edge
49+
}
50+
}
51+
}
52+
53+
/*----------------------------------------------------
54+
# Component
55+
----------------------------------------------------*/
156
.field-item.paragraphItem-q-a {
257
@include layoutMaxWidth();
358

@@ -20,7 +75,7 @@
2075

2176
ol.paragraphQA-questions {
2277
color: $color-purple;
23-
font-weight: $fontweight-muli-bold;
78+
font-weight: bold;
2479

2580
.paragraphItem-question-answer-pair {
2681
margin-bottom: 1rem;
@@ -47,12 +102,12 @@
47102

48103
.link-backToTop a {
49104
font-size: 0.85rem;
50-
font-weight: $fontweight-muli-semibold;
105+
font-weight: bold;
51106
}
52107

53108
.fieldName-field-answer {
54109
margin-top: 1.5rem;
55-
font-weight: $fontweight-muli-regular;
110+
font-weight: normal;
56111
}
57112
}
58113
}
@@ -63,4 +118,4 @@
63118
margin-bottom: 1em;
64119
}
65120
}
66-
}
121+
}

‎70/drupal/inee-question-answer-pair/templates/field/field--field-question.html.twig

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{#
2+
/**
3+
* @file
4+
* Theme override for a field.
5+
*
6+
* To override output, copy the "field.html.twig" from the templates directory
7+
* to your theme's directory and customize it, just like customizing other
8+
* Drupal templates such as page.html.twig or node.html.twig.
9+
*
10+
* Instead of overriding the theming for all fields, you can also just override
11+
* theming for a subset of fields using
12+
* @link themeable Theme hook suggestions. @endlink For example,
13+
* here are some theme hook suggestions that can be used for a field_foo field
14+
* on an article node type:
15+
* - field--node--field-foo--article.html.twig
16+
* - field--node--field-foo.html.twig
17+
* - field--node--article.html.twig
18+
* - field--field-foo.html.twig
19+
* - field--text-with-summary.html.twig
20+
* - field.html.twig
21+
*
22+
* Available variables:
23+
* - attributes: HTML attributes for the containing element.
24+
* - label_hidden: Whether to show the field label or not.
25+
* - title_attributes: HTML attributes for the title.
26+
* - label: The label for the field.
27+
* - multiple: TRUE if a field can contain multiple items.
28+
* - items: List of all the field items. Each item contains:
29+
* - attributes: List of HTML attributes for each item.
30+
* - content: The field item's content.
31+
* - entity_type: The entity type to which the field belongs.
32+
* - field_name: The name of the field.
33+
* - field_type: The type of the field.
34+
* - label_display: The display settings for the label.
35+
*
36+
*
37+
* @see template_preprocess_field()
38+
*/
39+
#}
40+
41+
{%
42+
set classes = [
43+
'field',
44+
'fieldName-' ~ field_name|clean_class,
45+
'fieldType-' ~ field_type|clean_class,
46+
'layout-fieldLabel-' ~ label_display|clean_class,
47+
]
48+
%}
49+
{%
50+
set title_classes = [
51+
'field-label',
52+
label_display == 'visually_hidden' ? 'visuallyHidden',
53+
]
54+
%}
55+
56+
{% if label_hidden %}
57+
{% if multiple %}
58+
<div{{ attributes.addClass(classes, 'field-items') }}>
59+
{% for item in items %}
60+
{# Test for paragraph, and if present, add paragraph name to class list. #}
61+
{% if item.content['#paragraph'].bundle|trim is not empty %}
62+
<div{{ item.attributes.addClass('field-item', 'paragraphItem-'~ item.content['#paragraph'].bundle|replace({'_': '-'})) }}>{{ item.content }}</div>
63+
{% else %}
64+
<div{{ item.attributes.addClass('field-item') }}>{{ item.content }}</div>
65+
{% endif %}
66+
{% endfor %}
67+
</div>
68+
{% else %}
69+
{% for item in items %}
70+
{# Test for paragraph, and if present, add paragraph name to class list. #}
71+
{% if item.content['#paragraph'].bundle|trim is not empty %}
72+
<div{{ attributes.addClass(classes, 'field-item', 'paragraphItem-'~ item.content['#paragraph'].bundle|replace({'_': '-'})) }}>{{ item.content }}</div>
73+
{% else %}
74+
<div{{ attributes.addClass(classes, 'field-item') }}>{{ item.content }}</div>
75+
{% endif %}
76+
{% endfor %}
77+
{% endif %}
78+
{% else %}
79+
<div{{ attributes.addClass(classes) }}>
80+
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
81+
{% if multiple %}
82+
<div class="field-items">
83+
{% endif %}
84+
{% for item in items %}
85+
{# Test for paragraph, and if present, add paragraph name to class list. #}
86+
{% if item.content['#paragraph'].bundle|trim is not empty %}
87+
<div{{ item.attributes.addClass('field-item', 'paragraphItem-'~ item.content['#paragraph'].bundle|replace({'_': '-'})) }}>{{ item.content }}</div>
88+
{% else %}
89+
<div{{ item.attributes.addClass('field-item') }}>{{ item.content }}</div>
90+
{% endif %}
91+
{% endfor %}
92+
{% if multiple %}
93+
</div>
94+
{% endif %}
95+
</div>
96+
{% endif %}

‎70/drupal/inee-question-answer-pair/templates/field/field--paragraph--field-question-answer-pair.html.twig

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
{#
2+
/**
3+
* @file
4+
* Theme override for a field.
5+
*
6+
* To override output, copy the "field.html.twig" from the templates directory
7+
* to your theme's directory and customize it, just like customizing other
8+
* Drupal templates such as page.html.twig or node.html.twig.
9+
*
10+
* Instead of overriding the theming for all fields, you can also just override
11+
* theming for a subset of fields using
12+
* @link themeable Theme hook suggestions. @endlink For example,
13+
* here are some theme hook suggestions that can be used for a field_foo field
14+
* on an article node type:
15+
* - field--node--field-foo--article.html.twig
16+
* - field--node--field-foo.html.twig
17+
* - field--node--article.html.twig
18+
* - field--field-foo.html.twig
19+
* - field--text-with-summary.html.twig
20+
* - field.html.twig
21+
*
22+
* Available variables:
23+
* - attributes: HTML attributes for the containing element.
24+
* - label_hidden: Whether to show the field label or not.
25+
* - title_attributes: HTML attributes for the title.
26+
* - label: The label for the field.
27+
* - multiple: TRUE if a field can contain multiple items.
28+
* - items: List of all the field items. Each item contains:
29+
* - attributes: List of HTML attributes for each item.
30+
* - content: The field item's content.
31+
* - entity_type: The entity type to which the field belongs.
32+
* - field_name: The name of the field.
33+
* - field_type: The type of the field.
34+
* - label_display: The display settings for the label.
35+
*
36+
*
37+
* @see template_preprocess_field()
38+
*/
39+
#}
40+
41+
{%
42+
set classes = [
43+
'field',
44+
'fieldName-' ~ field_name|clean_class,
45+
'fieldType-' ~ field_type|clean_class,
46+
'layout-fieldLabel-' ~ label_display|clean_class,
47+
]
48+
%}
49+
{%
50+
set title_classes = [
51+
'field-label',
52+
label_display == 'visually_hidden' ? 'visuallyHidden',
53+
]
54+
%}
55+
56+
57+
<span id="qaTop"></span>
58+
<div class="paragraphQA-questions-wrapper">
59+
<div class="paragraphQA-content">
60+
<ol class="paragraphQA-questions">
61+
{% if multiple %}
62+
<li{{ attributes.addClass(classes, 'field-items') }}>
63+
{% for item in items %}
64+
{# Test for paragraph, and if present, add paragraph name to class list. #}
65+
{% if item.content['#paragraph'].bundle|trim is not empty %}
66+
<li{{ item.attributes.addClass('field-item', 'paragraphItem-'~ item.content['#paragraph'].bundle|replace({'_': '-'})) }}><a href="#question-{{loop.index}}"> {{ item.content['#paragraph'].field_question.value }}</a></li>
67+
{% else %}
68+
<li{{ item.attributes.addClass('field-item') }}><a href="#question-{{loop.index}}"> {{ item.content['#paragraph'].field_question.value }}</a></li>
69+
{% endif %}
70+
{% endfor %}
71+
</li>
72+
{% else %}
73+
{% for item in items %}
74+
{# Test for paragraph, and if present, add paragraph name to class list. #}
75+
{% if item.content['#paragraph'].bundle|trim is not empty %}
76+
<li{{ attributes.addClass(classes, 'field-item', 'paragraphItem-'~ item.content['#paragraph'].bundle|replace({'_': '-'})) }}><a href="#question-{{loop.index}}"> {{ item.content }}</a></ili>
77+
{% else %}
78+
<li{{ attributes.addClass(classes, 'field-item') }}>{{ item.content }}</li>
79+
{% endif %}
80+
{% endfor %}
81+
{% endif %}
82+
</ol>
83+
</div>
84+
</div>
85+
86+
{% if label_hidden %}
87+
{% if multiple %}
88+
<div class="paragraphQA-answers-wrapper">
89+
<div class="paragraphQA-content">
90+
<div{{ attributes.addClass(classes, 'field-items') }}>
91+
<ol class="paragraphQA-answers">
92+
{% for item in items %}
93+
{# Test for paragraph, and if present, add paragraph name to class list. #}
94+
<li>
95+
{% if item.content['#paragraph'].bundle|trim is not empty %}
96+
<div id="question-{{loop.index}}" {{ item.attributes.addClass('field-item', 'paragraphItem-'~ item.content['#paragraph'].bundle|replace({'_': '-'})) }}>{{ item.content }}</div>
97+
{% else %}
98+
<div id="question-{{loop.index}}" {{ item.attributes.addClass('field-item') }}>{{ item.content }}</div>
99+
{% endif %}
100+
</li>
101+
{% endfor %}
102+
</div>
103+
{% else %}
104+
{% for item in items %}
105+
<li>
106+
{# Test for paragraph, and if present, add paragraph name to class list. #}
107+
{% if item.content['#paragraph'].bundle|trim is not empty %}
108+
<div id="question-{{loop.index}}" {{ attributes.addClass(classes, 'field-item', 'paragraphItem-'~ item.content['#paragraph'].bundle|replace({'_': '-'})) }}>{{ item.content }}</div>
109+
{% else %}
110+
<div id="question-{{loop.index}}" {{ attributes.addClass(classes, 'field-item') }}>{{ item.content }}</div>
111+
{% endif %}
112+
</li>
113+
{% endfor %}
114+
{% endif %}
115+
{% else %}
116+
<div{{ attributes.addClass(classes) }}>
117+
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
118+
{% if multiple %}
119+
<div class="field-items">
120+
{% endif %}
121+
{% for item in items %}
122+
<li>
123+
{# Test for paragraph, and if present, add paragraph name to class list. #}
124+
{% if item.content['#paragraph'].bundle|trim is not empty %}
125+
<div id="question-{{loop.index}}" {{ item.attributes.addClass('field-item', 'paragraphItem-'~ item.content['#paragraph'].bundle|replace({'_': '-'})) }}>{{ item.content }}</div>
126+
{% else %}
127+
<div id="question-{{loop.index}}" {{ item.attributes.addClass('field-item') }}>{{ item.content }}</div>
128+
{% endif %}
129+
</li>
130+
{% endfor %}
131+
{% if multiple %}
132+
</div>
133+
{% endif %}
134+
</div>
135+
</ol>
136+
</div>
137+
</div>
138+
{% endif %}

0 commit comments

Comments
 (0)