Skip to content

Commit

Permalink
EZP-32075: redesign error page (#1635)
Browse files Browse the repository at this point in the history 
Co-authored-by: Dariusz Szut <dew326@gmail.com>
  • Loading branch information
@lucasOsti @dew326 @adamwojs
2 people authored and adamwojs committed Oct 22, 2020
1 parent 8f61cc3 commit 31491fb
Show file tree
Hide file tree
Showing 7 changed files with 90 additions and 57 deletions.
Binary file added src/bundle/Resources/public/img/errors/background.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 37 additions & 29 deletions src/bundle/Resources/public/scss/_error-page.scss
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,57 @@
.error-page-wrapper {
width: 100vw;
.ez-error-page-wrapper {
width: 100%;
height: 100vh;
background: $ibexa-white;

.error-page {
height: 100vh;
flex-direction: column;
align-items: center;
justify-content: center;

.ez-error-page {
width: 100%;

&__logo-link {
display: inline-block;
max-width: calculateRem(88px);
max-height: calculateRem(24px);
margin-top: calculateRem(15px);
}

&__title {
text-align: center;
font-size: calculateRem(58px);
&__logo-image {
display: inline-block;
max-width: 100%;
width: auto;
height: auto;
}

&__messages {
&__messages-container {
display: flex;
flex-direction: column;
align-items: center;
}

&__icon {
margin-top: calculateRem(100px);
margin-bottom: calculateRem(20px);
}

&__title {
text-align: center;
font-size: calculateRem(32px);
margin-bottom: calculateRem(32px);
}

&__message {
text-align: center;
font-size: calculateRem(16px);

&--title {
margin: calculateRem(70px) auto;
font-size: calculateRem(45px);
}

&--content {
max-width: calculateRem(630px);
font-weight: bold;
margin-bottom: 0;
}

&--actions {
max-width: calculateRem(700px);
margin-top: calculateRem(40px);
font-size: calculateRem(21px);
line-height: calculateRem(38px);
margin-top: calculateRem(80px);
}
}
}

&__link {
color: #0058ba;
text-decoration: none;
&--top-section {
height: calculateRem(500px);
background-color: $ibexa-white;
background-image: url('/bundles/ezplatformadminui/img/errors/background.png');
}
}
}
5 changes: 5 additions & 0 deletions src/bundle/Resources/translations/forms.en.xliff
View file
Original file line number Diff line number Diff line change
Expand Up @@ -446,6 +446,11 @@
<target>Segment / Update</target>
<note>key: role.policy.segment.update</note>
</trans-unit>
<trans-unit id="c105a8689a3c11e6c3cc7840662eab1832989141" resname="role.policy.segment.view_user_segment_list">
<source>Segment / View user segment list</source>
<target>Segment / View user segment list</target>
<note>key: role.policy.segment.view_user_segment_list</note>
</trans-unit>
<trans-unit id="80900cd56c795ae32bc19af548c92ec378d7df63" resname="role.policy.segment_group">
<source>Segment group</source>
<target>Segment group</target>
Expand Down
4 changes: 2 additions & 2 deletions src/bundle/Resources/translations/messages.en.xliff
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,8 +212,8 @@
<note>key: error.page.404.title</note>
</trans-unit>
<trans-unit id="a599d59a63814826906caa9842f0b3c33db24d09" resname="error.page.default.actions">
<source><![CDATA[Contact your Administrator and inform them about the time the error occurred, the URL in your browser window, and anything related that you think may have caused the error.<br/>You can also go back or try to reload the application.]]></source>
<target state="new"><![CDATA[Contact your Administrator and inform them about the time the error occurred, the URL in your browser window, and anything related that you think may have caused the error.<br/>You can also go back or try to reload the application.]]></target>
<source><![CDATA[<b>Contact your Administrator and inform them about</b><br/> the time the error occurred, the URL in your browser window, and anything related<br/>that you think may have caused the error.<br/>You can also go back or try to reload the application.]]></source>
<target state="new"><![CDATA[<b>Contact your Administrator and inform them about</b><br/> the time the error occurred, the URL in your browser window, and anything related<br/>that you think may have caused the error.<br/>You can also go back or try to reload the application.]]></target>
<note>key: error.page.default.actions</note>
</trans-unit>
<trans-unit id="8338c190462d420926edf71e8d4cddcae710d361" resname="error.page.default.message">
Expand Down
24 changes: 16 additions & 8 deletions src/bundle/Resources/views/themes/admin/ui/error_page/403.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,23 @@
{% block body_class %}ez-has-no-sidebars{% endblock %}

{% block content %}
<div class="row error-page-wrapper">
<div class="container">
<div class="row error-page">
<h2 class="error-page__title">{{ 'error.page.403.title'|trans|desc('You don\'t have permission') }}</h2>
<div class="error-page__messages">
<p class="error-page__message error-page__message--title">{{ 'error.page.403.sub_title'|trans|raw|desc('Not possible to retrieve or access this page.') }}</p>
<p class="error-page__message error-page__message--actions">{{ 'error.page.403.actions'|trans({ '%dashboard%': path('ezplatform.dashboard'), '%search%': path('ezplatform.search') })|raw|desc('Please contact your Administrator to request access to this content or modify your profile.<br/>Otherwise, go back to <a class="error-page__link" href="%dashboard%">dashboard</a> or <a class="error-page__link" href="%search%">search</a> for another Content item.') }}</p>
<div class="ez-error-page-wrapper">
<div class="ez-error-page ez-error-page--top-section">
<a href="{{ url('ezplatform.dashboard') }}" class="ez-error-page__logo-link">
<img class="ez-error-page__logo-image" src="/bundles/ezplatformadminui/img/ibexa-logo.svg" alt="Ibexa" />
</a>
<div class="ez-error-page__messages-container">
<svg class="ez-error-page__icon">
<use xlink:href="{{ ez_icon_path('error-icon') }}"></use>
</svg>
<h2 class="ez-error-page__title">{{ 'error.page.403.title'|trans|desc('You don\'t have permission') }}</h2>
<p class="ez-error-page__message ez-error-page__message--title">{{ 'error.page.403.sub_title'|trans|raw|desc('Not possible to retrieve or access this page.') }}</p>
</div>
</div>
<div class="ez-error-page ez-error-page--bottom-section">
<p class="ez-error-page__message ez-error-page__message--actions">{{ 'error.page.403.actions'|trans({ '%dashboard%': path('ezplatform.dashboard'), '%search%': path('ezplatform.search') })|raw|desc('Please contact your Administrator to request access to this content or modify your profile.<br/>Otherwise, go back to <a class="error-page__link" href="%dashboard%">dashboard</a> or <a class="error-page__link" href="%search%">search</a> for another Content item.') }}</p>
</div>
</div>
</div>
{% endblock %}


24 changes: 15 additions & 9 deletions src/bundle/Resources/views/themes/admin/ui/error_page/404.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,22 @@
{% block body_class %}ez-has-no-sidebars{% endblock %}

{% block content %}
<div class="row error-page-wrapper">
<div class="container">
<div class="row error-page">
<h2 class="error-page__title">{{ 'error.page.404.title'|trans|desc('Page not found') }}</h2>
<div class="error-page__messages">
<p class="error-page__message error-page__message--title">{{ 'error.page.404.sub_title'|trans|raw|desc('You probably weren\'t expecting to land here.') }}</p>
<p class="error-page__message error-page__message--content">{{ 'error.page.404.message'|trans|raw|desc('The page you requested was not found.<br/> It might have been deleted or it is temporarily unavailable.') }}</p>
<p class="error-page__message error-page__message--actions">{{ 'error.page.404.actions'|trans({ '%dashboard%': path('ezplatform.dashboard'), '%search%': path('ezplatform.search') })|raw|desc('Check the URL for a typo and try again.<br/>Otherwise, go back to the <a class="error-page__link" href="%dashboard%">dashboard</a> or <a class="error-page__link" href="%search%">search</a> for another Content item.') }}</p>
<div class="ez-error-page-wrapper">
<div class="ez-error-page ez-error-page--top-section">
<a href="{{ url('ezplatform.dashboard') }}" class="ez-error-page__logo-link">
<img class="ez-error-page__logo-image" src="/bundles/ezplatformadminui/img/ibexa-logo.svg" alt="Ibexa" />
</a>
<div class="ez-error-page__messages-container">
<svg class="ez-error-page__icon">
<use xlink:href="{{ ez_icon_path('error-icon') }}"></use>
</svg>
<h2 class="ez-error-page__title">{{ 'error.page.404.title'|trans|desc('Page not found') }}</h2>
<p class="ez-error-page__message ez-error-page__message--title">{{ 'error.page.404.sub_title'|trans|raw|desc('You probably weren\'t expecting to land here.') }}</p>
<p class="ez-error-page__message ez-error-page__message--content">{{ 'error.page.404.message'|trans|raw|desc('The page you requested was not found.<br/> It might have been deleted or it is temporarily unavailable.') }}</p>
</div>
</div>
<div class="ez-error-page ez-error-page--bottom-section">
<p class="ez-error-page__message ez-error-page__message--actions">{{ 'error.page.404.actions'|trans({ '%dashboard%': path('ezplatform.dashboard'), '%search%': path('ezplatform.search') })|raw|desc('Check the URL for a typo and try again.<br/>Otherwise, go back to the <a class="error-page__link" href="%dashboard%">dashboard</a> or <a class="error-page__link" href="%search%">search</a> for another Content item.') }}</p>
</div>
</div>
</div>
{% endblock %}
24 changes: 15 additions & 9 deletions src/bundle/Resources/views/themes/admin/ui/error_page/unknown.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,22 @@
{% block body_class %}ez-has-no-sidebars{% endblock %}

{% block content %}
<div class="row error-page-wrapper">
<div class="container">
<div class="row error-page">
<h2 class="error-page__title">{{ 'error.page.default.title'|trans|desc('Something went wrong') }}</h2>
<div class="error-page__messages">
<p class="error-page__message error-page__message--title">{{ 'error.page.default.sub_title'|trans|raw|desc('We apologize for the internal server error.') }}</p>
<p class="error-page__message error-page__message--content">{{ 'error.page.default.message'|trans|raw|desc('The server was unable to complete your request because of an internal problem.') }}</p>
<p class="error-page__message error-page__message--actions">{{ 'error.page.default.actions'|trans|raw|desc('Contact your Administrator and inform them about the time the error occurred, the URL in your browser window, and anything related that you think may have caused the error.<br/>You can also go back or try to reload the application.') }}</p>
<div class="ez-error-page-wrapper">
<div class="ez-error-page ez-error-page--top-section">
<a href="{{ url('ezplatform.dashboard') }}" class="ez-error-page__logo-link">
<img class="ez-error-page__logo-image" src="/bundles/ezplatformadminui/img/ibexa-logo.svg" alt="Ibexa" />
</a>
<div class="ez-error-page__messages-container">
<svg class="ez-error-page__icon">
<use xlink:href="{{ ez_icon_path('error-icon') }}"></use>
</svg>
<h2 class="ez-error-page__title">{{ 'error.page.default.title'|trans|desc('Something went wrong') }}</h2>
<p class="ez-error-page__message ez-error-page__message--title">{{ 'error.page.default.sub_title'|trans|raw|desc('We apologize for the internal server error.') }}</p>
<p class="ez-error-page__message ez-error-page__message--content">{{ 'error.page.default.message'|trans|raw|desc('The server was unable to complete your request because of an internal problem.') }}</p>
</div>
</div>
<div class="ez-error-page ez-error-page--bottom-section">
<p class="ez-error-page__message ez-error-page__message--actions">{{ 'error.page.default.actions'|trans|raw|desc('<b>Contact your Administrator and inform them about</b><br/> the time the error occurred, the URL in your browser window, and anything related<br/>that you think may have caused the error.<br/>You can also go back or try to reload the application.') }}</p>
</div>
</div>
<div>
{% endblock %}

0 comments on commit 31491fb

Please sign in to comment.