mirror of
https://github.com/LibreSign/libresign.git
synced 2025-12-18 05:20:45 +01:00
Merge pull request #6204 from LibreSign/feat/improve-error-page-layout
feat: improve error page layout
This commit is contained in:
Vitor Mattos
GitHub
commit
cc870409de
2 changed files with 68 additions and 49 deletions
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="106.059" height="106.059" viewBox="0 0 106.059 106.059" xml:space="preserve"><path d="M90.546 15.518c-20.688-20.69-54.347-20.69-75.031-.005-20.688 20.685-20.686 54.345.002 75.034 20.682 20.684 54.341 20.684 75.027-.004 20.686-20.685 20.685-54.343.002-75.025m-5.789 69.24c-17.494 17.494-45.96 17.496-63.455.002-17.498-17.497-17.496-45.966 0-63.46 17.494-17.493 45.959-17.495 63.457.002 17.494 17.494 17.492 45.963-.002 63.456m-7.74-10.757a3 3 0 0 1-1.562 3.943 3 3 0 0 1-3.944-1.562c-2.893-6.689-9.73-11.012-17.421-11.012-7.868 0-14.747 4.319-17.522 11.004a3 3 0 0 1-3.921 1.621 3 3 0 0 1-1.62-3.921c3.71-8.932 12.764-14.703 23.063-14.703 10.084 0 19.084 5.742 22.927 14.63M33.24 38.671a6.201 6.201 0 1 1 12.4 0 6.201 6.201 0 0 1-12.4 0m28.117 0a6.201 6.201 0 0 1 12.403 0c0 3.426-2.776 6.202-6.2 6.202s-6.203-2.776-6.203-6.202"/></svg>
|
||||
|
Before Width: | Height: | Size: 882 B |
|
|
@ -4,20 +4,29 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<div id="img" />
|
||||
<div class="content">
|
||||
<h1>404</h1>
|
||||
<h2>
|
||||
{{ t('libresign', 'Page not found') }}
|
||||
</h2>
|
||||
<p>{{ paragrath }}</p>
|
||||
<NcNoteCard v-for="(error, index) in errors"
|
||||
:key="index"
|
||||
type="error"
|
||||
heading="Error">
|
||||
{{ error.message }}
|
||||
</NcNoteCard>
|
||||
<div class="error-page">
|
||||
<div class="logo-header">
|
||||
<img :src="logoLibreSign"
|
||||
:alt="t('libresign', 'LibreSign')"
|
||||
class="logo-icon">
|
||||
</div>
|
||||
|
||||
<div class="error-container">
|
||||
<NcEmptyContent :name="t('libresign', 'Page not found')"
|
||||
:description="paragrath">
|
||||
<template #icon>
|
||||
<AlertCircleOutline :size="80" class="alert-icon" />
|
||||
</template>
|
||||
<template #action>
|
||||
<div v-if="errors.length" class="error-messages">
|
||||
<NcNoteCard v-for="(error, index) in errors"
|
||||
:key="index"
|
||||
type="error">
|
||||
{{ error.message }}
|
||||
</NcNoteCard>
|
||||
</div>
|
||||
</template>
|
||||
</NcEmptyContent>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -26,16 +35,23 @@
|
|||
import { loadState } from '@nextcloud/initial-state'
|
||||
import { translate as t } from '@nextcloud/l10n'
|
||||
|
||||
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
|
||||
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
|
||||
import AlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline.vue'
|
||||
|
||||
import logoLibreSign from '../../img/logo-gray.svg'
|
||||
|
||||
export default {
|
||||
name: 'DefaultPageError',
|
||||
components: {
|
||||
NcEmptyContent,
|
||||
NcNoteCard,
|
||||
AlertCircleOutline,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
logoLibreSign,
|
||||
paragrath: t('libresign', 'Sorry but the page you are looking for does not exist, has been removed, moved or is temporarily unavailable.'),
|
||||
}
|
||||
},
|
||||
|
|
@ -47,7 +63,7 @@ export default {
|
|||
}
|
||||
const errorMessage = loadState('libresign', 'error', {})?.message
|
||||
if (errorMessage) {
|
||||
return [errorMessage]
|
||||
return [{ message: errorMessage }]
|
||||
}
|
||||
return []
|
||||
},
|
||||
|
|
@ -57,49 +73,53 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container{
|
||||
.error-page {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 40px 20px;
|
||||
gap: 24px;
|
||||
background: var(--color-background-dark);
|
||||
|
||||
#img{
|
||||
background-image: url('../../img/sad-face-in-rounded-square.svg');
|
||||
height: 140px;
|
||||
width: 140px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
line-height: 17.6px;
|
||||
.logo-header {
|
||||
.logo-icon {
|
||||
height: 80px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.error-container {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
padding: 48px 32px;
|
||||
background: var(--color-main-background);
|
||||
border-radius: var(--border-radius-large);
|
||||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.content{
|
||||
box-sizing: border-box;
|
||||
font-family: 'Nunito', sans-serif;
|
||||
max-width: 560px;
|
||||
padding-inline-start: 50px;
|
||||
.error-messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
min-width: 500px;
|
||||
|
||||
h1{
|
||||
font-size: 65px;
|
||||
font-weight: 700;
|
||||
line-height: 71.5px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0px;
|
||||
@media (max-width: 768px) {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
h2{
|
||||
font-size: 21px;
|
||||
font-weight: 400;
|
||||
line-height: 23.1px;
|
||||
margin: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p{
|
||||
color: var(--color-main-text);
|
||||
font-weight: 400;
|
||||
line-height: 17.6px;
|
||||
.alert-icon {
|
||||
color: #e53c3c;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue