cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use flex layout on error pages

Browse source
This commit is contained in:
Anton Khorev 2024-08-30 05:10:11 +03:00
parent fa58f34b2c
commit 3ba243a66a
2 changed files with 42 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

31
app/assets/stylesheets/errors.scss
View file

@ -1,10 +1,18 @@
body { body {
margin: 1rem;
margin-top: 2rem;
font-family: system-ui; font-family: system-ui;
} }
main {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem 2rem;
max-width: 960px;
.logo { .logo {
float: left; flex-shrink: 0;
margin: 10px;
img { img {
display: block; display: block;
@ -14,5 +22,22 @@ body {
} }
.details { .details {
float: left; h1 {
margin-top: 0;
}
}
}
@media (min-width: 640px) {
body {
margin: 2rem;
}
main {
flex-direction: row;
.logo {
align-self: start;
}
}
} }

2
app/views/layouts/error.html.erb
View file

@ -7,11 +7,13 @@
<%= render :partial => "layouts/meta" %> <%= render :partial => "layouts/meta" %>
</head> </head>
<body> <body>
<main>
<a href="<%= root_path %>" class="logo"> <a href="<%= root_path %>" class="logo">
<%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text") %> <%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text") %>
</a> </a>
<div class="details"> <div class="details">
<%= yield %> <%= yield %>
</div> </div>
</main>
</body> </body>
</html> </html>