darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-20 18:34:34 -05:00
Code Issues Packages Projects Releases Wiki Activity

Make sure all sticky footer variants are aligned

Browse Source 
The bottom margin should always be consistent. Height of footers doesn’t
have to be consistent. Items on the left and right should baseline
align.
This commit is contained in:
Chris Hill-Scott
2019-10-31 10:49:02 +00:00
parent 8a5e7a00dc
commit 4e026bc306
4 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/stylesheets/components/page-footer.scss
View File

@@ -38,9 +38,17 @@
}
&-right-aligned-link {
position: absolute;
right: 0;
top: 10px; // align baseline with buttons
top: 9px; // align baseline with buttons
&-without-button {
position: absolute;
right: 0;
top: 0;
}
}
.button,

9
app/assets/stylesheets/components/stick-at-top-when-scrolling.scss
View File

@@ -43,7 +43,6 @@ $sticky-padding: $gutter * 2 / 3;
transition: bottom 0.1s ease-out, box-shadow 1s ease-in-out;
padding: $sticky-padding 0 $sticky-padding $gutter-half;
margin-top: -$sticky-padding;
min-height: 40px;
& + .js-stick-at-bottom-when-scrolling {
margin-top: ($sticky-padding * 2) * -1;
@@ -54,11 +53,7 @@ $sticky-padding: $gutter * 2 / 3;
}
.page-footer {
margin-bottom: 0;
}
.page-footer-delete-link-without-button {
margin-top: 10px;
margin-bottom: 1px;
}
.notification-status {
@@ -66,7 +61,7 @@ $sticky-padding: $gutter * 2 / 3;
}
.button-secondary {
margin-right: $gutter-half;
margin: 0 $gutter-half 3px 0;
}
}

2
app/templates/views/notifications/check.html
View File

@@ -78,7 +78,7 @@
<button type="submit" class="button">Send 1 {{ message_count_label(1, template.template_type, suffix='') }}</button>
{% endif %}
{% if template.template_type == 'letter' %}
<a href="{{ url_for('main.check_notification_preview', service_id=current_service.id, template_id=template.id, filetype='pdf') }}" download class="page-footer-right-aligned-link">Download as a PDF</a>
<a href="{{ url_for('main.check_notification_preview', service_id=current_service.id, template_id=template.id, filetype='pdf') }}" download class="page-footer-right-aligned-link{% if error %}-without-button{% endif %}">Download as a PDF</a>
{% endif %}
</form>
</div>

2
app/templates/views/notifications/notification.html
View File

@@ -88,7 +88,7 @@
{% else %}
<div>&nbsp;</div>
{% endif %}
<a class="page-footer-right-aligned-link" href="{{ url_for('main.view_letter_notification_as_preview', service_id=current_service.id, notification_id=notification_id, filetype='pdf') }}" download>Download as a PDF</a>
<a class="page-footer-right-aligned-link-without-button" href="{{ url_for('main.view_letter_notification_as_preview', service_id=current_service.id, notification_id=notification_id, filetype='pdf') }}" download>Download as a PDF</a>
</div>
</div>
{% elif template.template_type == 'email' %}