zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-31 15:06:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

Tweak design for certain screen sizes for analysts only

Browse source
This commit is contained in:
Rachid Mrad 2024-04-01 19:57:47 -04:00
parent 25a46983db
commit d1e8c2c4e8
No known key found for this signature in database
4 changed files with 35 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/registrar/assets/js/get-gov-admin.js
View file

@ -422,7 +422,7 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk,
// Add event listener to toggle the class and update content on click // Add event listener to toggle the class and update content on click
toggleButton.addEventListener('click', function() { toggleButton.addEventListener('click', function() {
// Toggle the 'collapsed' class on the bar // Toggle the 'collapsed' class on the bar
submitRowWrapper.classList.toggle('collapsed'); submitRowWrapper.classList.toggle('submit-row-wrapper--collapsed');
// Get a reference to the span element inside the button // Get a reference to the span element inside the button
const spanElement = this.querySelector('span'); const spanElement = this.querySelector('span');
@ -458,7 +458,7 @@ function enableRelatedWidgetButtons(changeLink, deleteLink, viewLink, elementPk,
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
// Refresh reference to submit row wrapper and check if it's collapsed // Refresh reference to submit row wrapper and check if it's collapsed
if (document.querySelector('.submit-row-wrapper').classList.contains('collapsed')) { if (document.querySelector('.submit-row-wrapper').classList.contains('submit-row-wrapper--collapsed')) {
toggleButton.click(); toggleButton.click();
} }
} }

39
src/registrar/assets/sass/_theme/_admin.scss
View file

@ -422,6 +422,15 @@ address.dja-address-contact-list {
border: 1px solid var(--error-fg) !important; border: 1px solid var(--error-fg) !important;
} }
@mixin submit-row-wrapper--collapsed-one-line(){
&.submit-row-wrapper--collapsed {
transform: translate3d(0, 42px, 0);
}
.submit-row {
clear: none;
}
}
// Sticky submit bar for domain requests on desktop // Sticky submit bar for domain requests on desktop
@media screen and (min-width:768px) { @media screen and (min-width:768px) {
.submit-row-wrapper { .submit-row-wrapper {
@ -436,11 +445,16 @@ address.dja-address-contact-list {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.submit-row-wrapper--collapsed {
.submit-row-wrapper.collapsed {
// translate3d is more performant than translateY // translate3d is more performant than translateY
// https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance // https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance
transform: translate3d(0, 42px, 0); transform: translate3d(0, 88px, 0);
}
.submit-row-wrapper--collapsed-one-line {
@include submit-row-wrapper--collapsed-one-line();
}
.submit-row {
clear: both;
} }
.submit-row-toggle{ .submit-row-toggle{
display: inline-block; display: inline-block;
@ -449,11 +463,9 @@ address.dja-address-contact-list {
right: 0; right: 0;
background: var(--darkened-bg); background: var(--darkened-bg);
} }
#submitRowToggle { #submitRowToggle {
color: var(--body-fg); color: var(--body-fg);
} }
.requested-domain-sticky { .requested-domain-sticky {
max-width: 325px; max-width: 325px;
overflow: hidden; overflow: hidden;
@ -462,13 +474,14 @@ address.dja-address-contact-list {
} }
} }
@media screen and (max-width:1256px) { @media screen and (min-width:935px) {
.submit-row { .submit-row-wrapper--analyst-view {
clear: both; @include submit-row-wrapper--collapsed-one-line();
} }
.submit-row-wrapper.collapsed { }
// translate3d is more performant than translateY
// https://stackoverflow.com/questions/22111256/translate3d-vs-translate-performance @media screen and (min-width:1256px) {
transform: translate3d(0, 88px, 0); .submit-row-wrapper {
@include submit-row-wrapper--collapsed-one-line();
} }
} }

3
src/registrar/templates/django/admin/domain_request_change_form.html
View file

@ -1,4 +1,5 @@
{% extends 'admin/change_form.html' %} {% extends 'admin/change_form.html' %}
{% load custom_filters %}
{% load i18n static %} {% load i18n static %}
{% block field_sets %} {% block field_sets %}
@ -103,7 +104,7 @@
</div> </div>
</div> </div>
<div class="submit-row-wrapper"> <div class="submit-row-wrapper{% if not request.user|has_permission:'registrar.full_access_permission' %} submit-row-wrapper--analyst-view{% endif %}">
<span class="submit-row-toggle padding-1 padding-right-2 visible-desktop"> <span class="submit-row-toggle padding-1 padding-right-2 visible-desktop">
<button type="button" class="usa-button usa-button--unstyled" id="submitRowToggle"> <button type="button" class="usa-button usa-button--unstyled" id="submitRowToggle">

5
src/registrar/templatetags/custom_filters.py
View file

@ -62,3 +62,8 @@ def get_organization_long_name(generic_org_type):
return "Error" return "Error"
return long_form_type return long_form_type
@register.filter(name="has_permission")
def has_permission(user, permission):
return user.has_perm(permission)