pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set max width on error page and include Last login on error page

Browse Source 
- Updated error_base template so that it contained the Root Vue component, which was the reason that the last login was not previously displaying
- Deleted unused css
- Created css variable max-page-width for use on the error page, topbar, and other full width elements
This commit is contained in:
leigh-mil 2020-02-04 14:21:08 -05:00
parent a6e7dfda13
commit 68c7a70082
5 changed files with 29 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
styles/components/_error_page.scss
View File

@ -1,8 +1,13 @@
.error-page { .error-page {
max-width: 475px; max-width: $max-page-width;
margin: auto;
.panel { .panel {
box-shadow: none;
background-color: unset;
border: none;
max-width: 475px;
margin: auto;
&__heading { &__heading {
text-align: center; text-align: center;
padding: $gap 0; padding: $gap 0;
@ -15,17 +20,6 @@
margin-bottom: $gap; margin-bottom: $gap;
} }
} }
&__body {
padding: $gap * 2;
margin: 0;
hr {
width: 80%;
margin: auto;
margin-bottom: $gap * 3;
}
}
} }
.icon { .icon {

2
styles/components/_topbar.scss
View File

@ -12,7 +12,7 @@
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
justify-content: space-between; justify-content: space-between;
max-width: 1190px; max-width: $max-page-width;
a { a {
color: $color-white; color: $color-white;

1
styles/core/_variables.scss
View File

@ -19,6 +19,7 @@ $sidenav-collapsed-width: 10rem;
$max-panel-width: 90rem; $max-panel-width: 90rem;
$home-pg-icon-width: 6rem; $home-pg-icon-width: 6rem;
$large-spacing: 4rem; $large-spacing: 4rem;
$max-page-width: $max-panel-width + $sidenav-expanded-width + $large-spacing;
/* /*
* USWDS Variables * USWDS Variables

2
templates/error.html
View File

@ -5,6 +5,7 @@
{% block content %} {% block content %}
<main class="usa-section usa-content error-page"> <main class="usa-section usa-content error-page">
<div class="panel">
<div class="panel__heading"> <div class="panel__heading">
{{ Icon('cloud', classes="icon--red icon--large")}} {{ Icon('cloud', classes="icon--red icon--large")}}
<hr> <hr>
@ -17,6 +18,7 @@
{%- endif %} {%- endif %}
</p> </p>
</div> </div>
</div>
</main> </main>
{% endblock %} {% endblock %}

35
templates/error_base.html
View File

@ -10,29 +10,30 @@
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon.ico') }} " /> <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/favicon.ico') }} " />
</head> </head>
<body class="{% if g.modalOpen %} modalOpen{% endif %}"> <body class="{% if g.modalOpen %} modalOpen{% endif %}">
<div id='app-root'>
{% block template_vars %}{% endblock %}
{% block template_vars %}{% endblock %} {% include 'components/usa_header.html' %}
{% include 'components/usa_header.html' %} {% include 'navigation/topbar.html' %}
{% include 'navigation/topbar.html' %} <div class='global-layout'>
<div class='global-layout'> <div class='global-panel-container'>
{% block sidenav %}{% endblock %}
<div class='global-panel-container'> {% block content %}
{% block sidenav %}{% endblock %} these are not the droids you are looking for
{% endblock %}
{% block content %} </div>
these are not the droids you are looking for
{% endblock %}
</div> </div>
{% include 'footer.html' %}
{% block modal %}{% endblock %}
{% assets "js_all" %}
<script src="{{ ASSET_URL }}"></script>
{% endassets %}
</div> </div>
{% include 'footer.html' %}
{% block modal %}{% endblock %}
{% assets "js_all" %}
<script src="{{ ASSET_URL }}"></script>
{% endassets %}
</body> </body>
</html> </html>