Skip to content

Commit

Permalink
Merge branch 'ad+riese/center_group_expand+em/web-apps-tab-navigabili…
Browse files Browse the repository at this point in the history 
…ty' into autostaging
  • Loading branch information
@AddisonDunn
AddisonDunn committed Feb 15, 2024
2 parents b7d84b9 + c87729c commit b3a610b
Show file tree
Hide file tree
Showing 9 changed files with 126 additions and 74 deletions.
1 change: 1 addition & 0 deletions corehq/apps/cloudcare/static/cloudcare/js/form_entry/entries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1044,6 +1044,7 @@ hqDefine("cloudcare/js/form_entry/entries", function () {
EntryArrayAnswer.call(self, question, options);
self.templateType = 'geo';
self.map = null;
self.hasMap = () => !!self.map;
self.control_width = constants.CONTROL_WIDTH;

self.DEFAULT = {
Expand Down
13 changes: 0 additions & 13 deletions corehq/apps/cloudcare/static/cloudcare/js/markdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,23 +105,10 @@ hqDefine('cloudcare/js/markdown', [
defaultLinkOpen = md.renderer.rules.link_open || function (tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options);
},
defaultHeadingOpen = md.renderer.rules.heading_open || function (tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options);
},
defaultTextOpen = md.renderer.rules.text || function (tokens, idx, options, env, self) {
return self.renderToken(tokens, idx, options);
};

md.renderer.rules.heading_open = function (tokens, idx, options, env, self) {
let aIndex = tokens[idx].attrIndex('tabindex');

if (aIndex < 0) {
tokens[idx].attrPush(['tabindex', '0']);
}

return defaultHeadingOpen(tokens, idx, options, env, self);
};

let renderers = getChainedRenderers();
md.renderer.rules.link_open = function (tokens, idx, options, env, self) {
updateTarget(tokens, idx, '_blank');
Expand Down
7 changes: 0 additions & 7 deletions corehq/apps/cloudcare/static/cloudcare/js/spec/markdown_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,6 @@ hqDefine("cloudcare/js/spec/markdown_spec", function () {
);
});

it('should render headings with tabindex set', function () {
assert.equal(
render("# heading"),
"<h1 tabindex=\"0\">heading</h1>\n"
);
});

it('should render newlines as breaks', function () {
assert.equal(
render("line 1\nline 2"),
Expand Down
97 changes: 61 additions & 36 deletions corehq/apps/cloudcare/templates/form_entry/templates.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,9 @@
'tabindex': isVisibleGroup() ? '0' : '-1'
} : {
'aria-labelledby': captionId(),
'tabindex': isVisibleGroup() ? '0' : '-1'
},
click: toggleChildren,
event: {keypress: keyPressAction},
event: collapsible ? { keypress: keyPressAction } : {},
style: {'display': showHeader ? 'block': 'none',
'background-color': headerBackgroundColor(),
'color': headerBackgroundColor() ? 'white' : ''
Expand All @@ -41,24 +40,27 @@
data-bind="
html: ko.utils.unwrapObservable($data.caption_markdown) || caption(),
"></span>
<button class="btn btn-danger del pull-right" href="#" data-bind="
<button class="btn btn-danger del pull-right" href="#" aria-label="{% trans 'Delete Repeat' %}"
data-bind="
visible: isRepetition,
click: deleteRepeat
"><i class="fa fa-remove"></i></button>
</legend>
</div>
<div data-bind="if: collapsible">
<div class="collapsible-icon-container">
<i style="" class="fa" data-bind="
css: {'fa-angle-double-right': !showChildren(), 'fa-angle-double-down': showChildren()},
"></i>
</div>
<span class="webapp-markdown-output caption" data-bind="html: caption_markdown() || caption(), attr: {id: captionId()}"></span>
<i class="fa fa-warning text-danger pull-right" data-bind="visible: hasError() && !showChildren()"></i>
<button class="btn btn-danger del pull-right" href="#" data-bind="
visible: isRepetition,
click: deleteRepeat
"><i class="fa fa-remove"></i></button>
<div class="d-flex align-items-center">
<div class="collapsible-icon-container">
<i class="fa" data-bind="
css: {'fa-angle-double-right': !showChildren(), 'fa-angle-double-down': showChildren()},
"></i>
</div>
<span class="webapp-markdown-output caption" data-bind="html: caption_markdown() || caption(), attr: {id: captionId()}"></span>
<i class="fa fa-warning text-danger pull-right" data-bind="visible: hasError() && !showChildren()"></i>
<button class="btn btn-danger del pull-right" href="#" aria-label="{% trans 'Delete Repeat' %}"
data-bind="
visible: isRepetition,
click: deleteRepeat
"><i class="fa fa-remove"></i></button>
</div>
<span class="ix"></span>
</fieldset>
Expand All @@ -74,6 +76,7 @@
},
css: {
'panel-body': collapsible,
'group-body': !collapsible,
'stripe-repeats': stripeRepeats,
}"></div>
</fieldset>
Expand Down Expand Up @@ -230,29 +233,34 @@ <h1 class="title" data-bind="text: title, visible: !showInFormNavigation()"></h1
on: $root.forceRequiredVisible,
}
">
<label class="caption control-label" data-bind="css: labelWidth, attr: {'for': entry.entryId}, visible: hasLabelContent">
<label class="caption control-label" data-bind="
css: labelWidth,
attr: {
id: entry.entryId + '-label',
'for': entry.entryId,
},
visible: hasLabelContent">
{# appearance attributes TEXT_ALIGN_CENTER TEXT_ALIGN_RIGHT #}
<div data-bind="css: {
'row': help(),
'text-center': stylesContains('text-align-center'),
'text-right': stylesContains('text-align-right'),
}">
<span class="webapp-markdown-output" tabindex="0"
data-bind="
html: ko.utils.unwrapObservable($data.caption_markdown) || caption(),
css: {'col-md-11' : help()}"></span>
<span class="webapp-markdown-output" data-bind="
html: ko.utils.unwrapObservable($data.caption_markdown) || caption(),
css: {'col-md-11' : help()}"></span>
<!-- ko if: help() -->
<a
class="help-text-trigger col-md-1"
role="button"
href="javascript:void(0)"
title="{% trans "Show help dialog" %}"
title="{% trans 'Show help dialog' %}"
><i class="fa fa-question-circle"></i></a>
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p class="webapp-markdown-output" tabindex="0" align="left" data-bind="html: help"></p>
<p class="webapp-markdown-output" align="left" data-bind="html: help"></p>
<div class="widget-multimedia" data-bind="
template: {
name: 'widget-help-multimedia-ko-template',
Expand All @@ -267,10 +275,10 @@ <h1 class="title" data-bind="text: title, visible: !showInFormNavigation()"></h1
</div>
<!-- /ko -->
</div>
<i class="hint-text" data-bind="
<span class="hint-text" data-bind="
text: ko.utils.unwrapObservable($data.hint),
visible: !entry.useHintAsPlaceHolder()
"></i>
"></span>
<!-- ko if: required() -->
<span class="sr-only">{% trans "A response is required for this question." %}</span>
<!-- /ko -->
Expand Down Expand Up @@ -311,12 +319,9 @@ <h1 class="title" data-bind="text: title, visible: !showInFormNavigation()"></h1
'text-right': stylesContains('text-align-right'),
}">
<span class="ix" data-bind="text: ixInfo($data)">></span>
<span class="caption webapp-markdown-output"
data-bind="
html: ko.utils.unwrapObservable($data.caption_markdown) || caption(),
attr: {'for': entry.entryId}"
tabindex="0">
</span>
<span class="caption webapp-markdown-output" data-bind="
html: ko.utils.unwrapObservable($data.caption_markdown) || caption()
"></span>
<div class="widget-multimedia" data-bind="
template: { name: 'widget-multimedia-ko-template', data: $data }"
>
Expand Down Expand Up @@ -356,7 +361,7 @@ <h1 class="title" data-bind="text: title, visible: !showInFormNavigation()"></h1
'background-color': headerBackgroundColor(),
'color': headerBackgroundColor() ? 'white' : '',
}">
<h3 class="caption" data-bind="html: header" tabindex="0"></h3>
<h3 class="caption" data-bind="html: header"></h3>
<span class="ix" data-bind="text: ixInfo($data)"></span>
</div>
<div class="panel-body">
Expand All @@ -381,10 +386,20 @@ <h3 class="caption" data-bind="html: header" tabindex="0"></h3>
attr: { src: mediaSrc($data.caption_image()) },
visible: mediaSrc($data.caption_image())
" />
<audio controls="controls" data-bind="visible: caption_audio, attr: { src: mediaSrc($data.caption_audio()) }">
<audio controls="controls" data-bind="
visible: caption_audio,
attr: {
src: mediaSrc($data.caption_audio()),
tabindex: caption_audio() ? '0' : '-1',
}">
{% trans "Your browser does not support audio" %}
</audio>
<video controls="controls" data-bind="visible: caption_video, attr: { src: mediaSrc($data.caption_video()) }">
<video controls="controls" data-bind="
visible: caption_video,
attr: {
src: mediaSrc($data.caption_video()),
tabindex: caption_video() ? '0' : '-1',
}">
{% trans "Your browser does not support video" %}
</video>
</script>
Expand All @@ -395,12 +410,18 @@ <h3 class="caption" data-bind="html: header" tabindex="0"></h3>
visible: mediaSrc($data.help_image())" />
<audio controls="controls" data-bind="
visible: help_audio,
attr: { src: mediaSrc($data.help_audio()) }">
attr: {
src: mediaSrc($data.help_audio()),
tabindex: help_audio() ? '0' : '-1',
}">
{% trans "Your browser does not support audio" %}
</audio>
<video controls="controls" data-bind="
visible: help_video,
attr: { src: mediaSrc($data.help_video()) }">
attr: {
src: mediaSrc($data.help_video()),
tabindex: help_video() ? '0' : '-1',
}">
{% trans "Your browser does not support video" %}
</video>
</script>
Expand Down Expand Up @@ -530,8 +551,12 @@ <h3 class="caption" data-bind="html: header" tabindex="0"></h3>
</tr>
</tbody>
</table>
<div class="map" data-bind="attr: { id: entryId }">
<div class="wait" data-bind="visible: !map">{% trans "Please wait while the map loads" %}</div>
<div class="map" data-bind="
attr: {
'id': entryId,
'aria-labelledby': entryId + '-label',
}">
<div class="wait" data-bind="visible: !hasMap" >{% trans "Please wait while the map loads" %}</div>
</div>
<div>
<form data-bind="submit: search">
Expand Down
1 change: 1 addition & 0 deletions corehq/apps/hqwebapp/static/cloudcare/less/formplayer-common/form.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.hint-text {
font-size: 80%;
font-style: italic;
}

.help-popover, .help-popover:hover, .help-popover:focus {
Expand Down
69 changes: 52 additions & 17 deletions corehq/apps/hqwebapp/static/cloudcare/less/formplayer-webapp/form.less
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@form-text-indent: 20px;
@form-text-indent: 23px;
@form-text-size: 16px;
@group-indent: 15px;

.form-container {
background-color: white;
Expand All @@ -11,7 +12,7 @@
padding-bottom: 30px;

h1 {
padding-left: @form-text-indent - 5px;
padding-left: @form-text-indent - 8px;
}
}

Expand All @@ -26,6 +27,11 @@

.form-actions {
margin: 30px 0 0 0;
&.form-group {
margin-left: -@form-text-indent;
margin-right: -@form-text-indent;
}

background-color: lighten(@cc-brand-hi, 10);
.border-bottom-radius(0);

Expand All @@ -47,14 +53,30 @@
z-index: @zindex-formplayer-anchored-submit;
}

// Bootstrap introduces -10px left/right margin for row classes. This causes element to overflow parent.
.row {
margin-left: 0px;
margin-right: 0px;
}
.question-container {
padding-left: @form-text-indent;
padding-right: @form-text-indent;
}

.form-group {
padding-left: 25px;
padding-right: 20px;
margin-left: 0px;
margin-right: 0px;
.caption.control-label {
display: block;
}
}

.group-body {
margin-bottom: 17px;
margin-left: @group-indent;
margin-right: @group-indent;
}

.gr.panel {
border-radius: 0px;
}
Expand All @@ -63,14 +85,27 @@
border-radius: 0px;
}

.panel-body {
padding-left: 5px;
padding-right: 5px;
// Bootstrap introduces -10px left/right margin for row classes. This causes element to overflow parent.
.row {
margin-left: 0px;
margin-right: 0px;
.col-sm-12,
.col-sm-11,
.col-sm-10,
.col-sm-9,
.col-sm-8,
.col-sm-7,
.col-sm-6,
.col-sm-5,
.col-sm-4,
.col-sm-3,
.col-sm-2,
.col-sm-1 {
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}

.panel-body {
@media (max-width: @screen-xs-max) {
padding-left: 0px;
padding-right: 0px;
Expand Down Expand Up @@ -108,10 +143,6 @@
float: left;
margin-right: 10px;
}

legend {
padding-left: @form-text-indent + 3px;
}
}

.panel-heading {
Expand Down Expand Up @@ -258,8 +289,6 @@
.question-tile-row {
display: flex;
align-items: start;
margin-left: 10px;
margin-right: 10px;
* .form-group, * p, * .control-label {
padding-top: 0px !important;
padding-bottom: 0px !important;
Expand All @@ -274,3 +303,9 @@
padding-left: 0px !important;
}
}

.question-tile-row .gr-no-children.gr-has-no-questions.gr-has-no-nested-questions {
// Prevents a priority issue that's happened three times where
// a group with hidden values creates whitespace.
height: 0px !important;
}
8 changes: 8 additions & 0 deletions corehq/apps/hqwebapp/static/hqwebapp/less/_hq/bootstrap5-temp.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// This file is for creating porting Bootstrap classes that exist in version 5 but not 3
.d-flex {
display: flex
}

.align-items-center {
align-items: center
}
1 change: 1 addition & 0 deletions corehq/apps/hqwebapp/static/hqwebapp/less/style-imports.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,4 @@
@import "_hq/typography.less";
@import "_hq/svg.less";
@import "_hq/utils.less";
@import "_hq/bootstrap5-temp.less";
Loading

0 comments on commit b3a610b

Please sign in to comment.