Skip to content

Commit 28144f4

Browse files
smulvihillsylus
smulvihill
authored and
sylus
committed
Issue #3200416 by smulvih2: Implement the Did you find what you were looking for webform
1 parent f8c5355 commit 28144f4

File tree

6 files changed

+309
-0
lines changed

6 files changed

+309
-0
lines changed

‎css/style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,16 @@ html.js .ajax-new-content:empty {
280280
color: #000;
281281
font-size: 100%; }
282282

283+
#edit-initial-page {
284+
margin-bottom: 0px; }
285+
#edit-initial-page .h5 {
286+
font-size: 1em; }
287+
288+
.webform-confirmation__message {
289+
margin-bottom: 0px; }
290+
.webform-confirmation__message .h3 {
291+
font-weight: normal; }
292+
283293
/**
284294
* Icon styles.
285295
*/

‎sass/component/_form.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,3 +96,20 @@
9696
font-size: 100%;
9797
}
9898
}
99+
100+
// Webform
101+
#edit-initial-page {
102+
margin-bottom: 0px;
103+
104+
.h5 {
105+
font-size: 1em;
106+
}
107+
}
108+
109+
.webform-confirmation__message {
110+
margin-bottom: 0px;
111+
112+
.h3 {
113+
font-weight: normal;
114+
}
115+
}

‎templates/block/block--find-what-you-looking-for.html.twig‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
{#
2+
/**
3+
* @file
4+
* Default theme implementation to display a block.
5+
*
6+
* Available variables:
7+
* - $block->subject: Block title.
8+
* - $content: Block content.
9+
* - $block->module: Module that generated the block.
10+
* - $block->delta: An ID for the block, unique within each module.
11+
* - $block->region: The block region embedding the current block.
12+
* - $classes: String of classes that can be used to style contextually through
13+
* CSS. It can be manipulated through the variable $classes_array from
14+
* preprocess functions. The default values can be one or more of the
15+
* following:
16+
* - block: The current template type, i.e., "theming hook".
17+
* - block-[module]: The module generating the block. For example, the user
18+
* module is responsible for handling the default user navigation block. In
19+
* that case the class would be 'block-user'.
20+
* - $title_prefix (array): An array containing additional output populated by
21+
* modules, intended to be displayed in front of the main title tag that
22+
* appears in the template.
23+
* - $title_suffix (array): An array containing additional output populated by
24+
* modules, intended to be displayed after the main title tag that appears in
25+
* the template.
26+
*
27+
* Helper variables:
28+
* - $classes_array: Array of html class attribute values. It is flattened
29+
* into a string within the variable $classes.
30+
* - $block_zebra: Outputs 'odd' and 'even' dependent on each block region.
31+
* - $zebra: Same output as $block_zebra but independent of any block region.
32+
* - $block_id: Counter dependent on each block region.
33+
* - $id: Same output as $block_id but independent of any block region.
34+
* - $is_front: Flags true when presented in the front page.
35+
* - $logged_in: Flags true when the current user is a logged-in member.
36+
* - $is_admin: Flags true when the current user is an administrator.
37+
* - $block_html_id: A valid HTML ID and guaranteed unique.
38+
*
39+
* @ingroup templates
40+
*
41+
* @see bootstrap_preprocess_block()
42+
* @see template_preprocess()
43+
* @see template_preprocess_block()
44+
* @see bootstrap_process_block()
45+
* @see template_process()
46+
*/
47+
#}
48+
{%
49+
set classes = [
50+
'block',
51+
'block-' ~ configuration.provider|clean_class,
52+
'block-' ~ plugin_id|clean_class,
53+
'col-sm-7 col-lg-6',
54+
'clearfix',
55+
]
56+
%}
57+
<section{{ attributes.addClass(classes) }}>
58+
{{ title_prefix }}
59+
{% if label %}
60+
<h2{{ title_attributes.addClass('block-title') }}>{{ label }}</h2>
61+
{% endif %}
62+
{{ title_suffix }}
63+
64+
{% block content %}
65+
{{ content }}
66+
{% endblock %}
67+
</section>

‎templates/webform/form-element--gcweb-did-you-find--initial-page-text.html.twig‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
{#
2+
/**
3+
* @file
4+
* Default theme implementation for a form element.
5+
*
6+
* Available variables:
7+
* - attributes: HTML attributes for the containing element.
8+
* - errors: (optional) Any inline error messages to display for this form
9+
* element; may not be set.
10+
* - has_error: (optional) Flag indicating whether to add the "has_error"
11+
* Bootstrap class for this form element.
12+
* - required: The required marker, or empty if the associated form element is
13+
* not required.
14+
* - type: The type of the element.
15+
* - name: The name of the element.
16+
* - label: A rendered label element.
17+
* - label_display: Label display setting. It can have these values:
18+
* - before: The label is output before the element. This is the default.
19+
* The label includes the #title and the required marker, if #required.
20+
* - after: The label is output after the element. For example, this is used
21+
* for radio and checkbox #type elements. If the #title is empty but the
22+
* field is #required, the label will contain only the required marker.
23+
* - invisible: Labels are critical for screen readers to enable them to
24+
* properly navigate through forms but can be visually distracting. This
25+
* property hides the label for everyone except screen readers.
26+
* - attribute: Set the title attribute on the element to create a tooltip but
27+
* output no label element. This is supported only for checkboxes and radios
28+
* in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
29+
* It is used where a visual label is not needed, such as a table of
30+
* checkboxes where the row and column provide the context. The tooltip will
31+
* include the title and required marker.
32+
* - description: (optional) A list of description properties containing:
33+
* - content: A description of the form element, may not be set.
34+
* - attributes: (optional) A list of HTML attributes to apply to the
35+
* description content wrapper. Will only be set when description is set.
36+
* - description_display: Description display setting. It can have these values:
37+
* - before: The description is output before the element.
38+
* - after: The description is output after the element. This is the default
39+
* value.
40+
* - invisible: The description is output after the element, hidden visually
41+
* but available to screen readers.
42+
* - disabled: True if the element is disabled.
43+
* - title_display: Title display setting.
44+
*
45+
* @ingroup templates
46+
*
47+
* @see template_preprocess_form_element()
48+
*/
49+
#}
50+
{%
51+
set classes = [
52+
'form-item',
53+
'js-form-item',
54+
'form-type-' ~ type|clean_class,
55+
'js-form-type-' ~ type|clean_class,
56+
'form-item-' ~ name|clean_class,
57+
'js-form-item-' ~ name|clean_class,
58+
title_display not in ['after', 'before'] ? 'form-no-label',
59+
disabled == 'disabled' ? 'form-disabled',
60+
is_form_group ? 'form-group',
61+
is_radio ? 'radio',
62+
is_checkbox ? 'checkbox',
63+
is_autocomplete ? 'form-autocomplete',
64+
has_error ? 'error has-error',
65+
'col-xs-12 col-sm-7 mrgn-tp-sm margin-bottom-none'
66+
]
67+
%}{%
68+
set description_classes = [
69+
'description',
70+
'help-block',
71+
description_display == 'invisible' ? 'visually-hidden',
72+
]
73+
%}
74+
<div{{ attributes.addClass(classes) }}>
75+
{% if label_display in ['before', 'invisible'] %}
76+
{{ label }}
77+
{% endif %}
78+
79+
{% if description_display == 'before' and description.content %}
80+
<div{{ description.attributes.addClass(description_classes) }}>
81+
{{ description.content }}
82+
</div>
83+
{% endif %}
84+
85+
{{ children }}
86+
87+
{% if label_display == 'after' %}
88+
{{ label }}
89+
{% endif %}
90+
91+
{% if errors %}
92+
<div class="form-item--error-message alert alert-danger alert-sm">
93+
{{ errors }}
94+
</div>
95+
{% endif %}
96+
97+
{% if description_display in ['after', 'invisible'] and description.content %}
98+
<div{{ description.attributes.addClass(description_classes) }}>
99+
{{ description.content }}
100+
</div>
101+
{% endif %}
102+
</div>

‎templates/webform/form-element--gcweb-did-you-find--problem6.html.twig‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
{#
2+
/**
3+
* @file
4+
* Default theme implementation for a form element.
5+
*
6+
* Available variables:
7+
* - attributes: HTML attributes for the containing element.
8+
* - errors: (optional) Any inline error messages to display for this form
9+
* element; may not be set.
10+
* - has_error: (optional) Flag indicating whether to add the "has_error"
11+
* Bootstrap class for this form element.
12+
* - required: The required marker, or empty if the associated form element is
13+
* not required.
14+
* - type: The type of the element.
15+
* - name: The name of the element.
16+
* - label: A rendered label element.
17+
* - label_display: Label display setting. It can have these values:
18+
* - before: The label is output before the element. This is the default.
19+
* The label includes the #title and the required marker, if #required.
20+
* - after: The label is output after the element. For example, this is used
21+
* for radio and checkbox #type elements. If the #title is empty but the
22+
* field is #required, the label will contain only the required marker.
23+
* - invisible: Labels are critical for screen readers to enable them to
24+
* properly navigate through forms but can be visually distracting. This
25+
* property hides the label for everyone except screen readers.
26+
* - attribute: Set the title attribute on the element to create a tooltip but
27+
* output no label element. This is supported only for checkboxes and radios
28+
* in \Drupal\Core\Render\Element\CompositeFormElementTrait::preRenderCompositeFormElement().
29+
* It is used where a visual label is not needed, such as a table of
30+
* checkboxes where the row and column provide the context. The tooltip will
31+
* include the title and required marker.
32+
* - description: (optional) A list of description properties containing:
33+
* - content: A description of the form element, may not be set.
34+
* - attributes: (optional) A list of HTML attributes to apply to the
35+
* description content wrapper. Will only be set when description is set.
36+
* - description_display: Description display setting. It can have these values:
37+
* - before: The description is output before the element.
38+
* - after: The description is output after the element. This is the default
39+
* value.
40+
* - invisible: The description is output after the element, hidden visually
41+
* but available to screen readers.
42+
* - disabled: True if the element is disabled.
43+
* - title_display: Title display setting.
44+
*
45+
* @ingroup templates
46+
*
47+
* @see template_preprocess_form_element()
48+
*/
49+
#}
50+
{%
51+
set classes = [
52+
'form-item',
53+
'js-form-item',
54+
'form-type-' ~ type|clean_class,
55+
'js-form-type-' ~ type|clean_class,
56+
'form-item-' ~ name|clean_class,
57+
'js-form-item-' ~ name|clean_class,
58+
title_display not in ['after', 'before'] ? 'form-no-label',
59+
disabled == 'disabled' ? 'form-disabled',
60+
is_form_group ? 'form-group',
61+
is_radio ? 'radio',
62+
is_checkbox ? 'checkbox',
63+
is_autocomplete ? 'form-autocomplete',
64+
has_error ? 'error has-error'
65+
]
66+
%}{%
67+
set description_classes = [
68+
'small',
69+
]
70+
%}
71+
<div{{ attributes.addClass(classes) }}>
72+
{% if label_display in ['before', 'invisible'] %}
73+
{{ label }}
74+
{% endif %}
75+
76+
{% if description_display == 'before' and description.content %}
77+
<div{{ description.attributes.addClass(description_classes) }}>
78+
{{ description.content }}
79+
</div>
80+
{% endif %}
81+
82+
{{ children }}
83+
84+
{% if label_display == 'after' %}
85+
{{ label }}
86+
{% endif %}
87+
88+
{% if errors %}
89+
<div class="form-item--error-message alert alert-danger alert-sm">
90+
{{ errors }}
91+
</div>
92+
{% endif %}
93+
94+
{% if description_display in ['after', 'invisible'] and description.content %}
95+
<div{{ description.attributes.addClass(description_classes) }}>
96+
{{ description.content }}
97+
</div>
98+
{% endif %}
99+
</div>

‎templates/webform/gcweb-find-what-you-looking-for.html.twig‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{#
2+
/**
3+
* @file
4+
* Theme implementation for an 'inline webform' element.
5+
*
6+
* Available variables
7+
* - content: Rendered block to display
8+
*
9+
* @ingroup themeable
10+
*/
11+
#}
12+
<div class="well mrgn-bttm-0">
13+
{{ content }}
14+
</div>

0 commit comments

Comments
 (0)