]> git.openstreetmap.org Git - rails.git/commitdiff
projects / rails.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: fa58f34)
Use flex layout on error pages
authorAnton Khorev <tony29@yandex.ru>
Fri, 30 Aug 2024 02:10:11 +0000 (05:10 +0300)
committerAnton Khorev <tony29@yandex.ru>
Sat, 15 Feb 2025 15:55:16 +0000 (18:55 +0300)
app/assets/stylesheets/errors.scss patch | blob | history
app/views/layouts/error.html.erb patch | blob | history

diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss
index 58650785c0a6520dcaca78d44524ccf4426b586f..77b440a889261beb4be326d47782c102669312e1 100644 (file)
--- a/app/assets/stylesheets/errors.scss
+++ b/app/assets/stylesheets/errors.scss
@@ -1,18 +1,43 @@
 body {
+  margin: 1rem;
+  margin-top: 2rem;
   font-family: system-ui;
 }
 
-.logo {
-  float: left;
-  margin: 10px;
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem 2rem;
+  max-width: 960px;
 
-  img {
-    display: block;
-    max-width: 100%;
-    height: auto;
+  .logo {
+    flex-shrink: 0;
+
+    img {
+      display: block;
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  .details {
+    h1 {
+      margin-top: 0;
+    }
   }
 }
 
-.details {
-  float: left;
+@media (min-width: 640px) {
+  body {
+    margin: 2rem;
+  }
+
+  main {
+    flex-direction: row;
+
+    .logo {
+      align-self: start;
+    }
+  }
 }
diff --git a/app/views/layouts/error.html.erb b/app/views/layouts/error.html.erb
index 5b8e117522e77585dd91f6464be715e07d0c855e..40b116aa8b12f60e5d85704ec4728253bb3ffcc2 100644 (file)
--- a/app/views/layouts/error.html.erb
+++ b/app/views/layouts/error.html.erb
@@ -7,11 +7,13 @@
     <%= render :partial => "layouts/meta" %>
   </head>
   <body>
-    <a href="<%= root_path %>" class="logo">
-      <%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text") %>
-    </a>
-    <div class="details">
-      <%= yield %>
-    </div>
+    <main>
+      <a href="<%= root_path %>" class="logo">
+        <%= image_tag "osm_logo.svg", :alt => t("layouts.logo.alt_text") %>
+      </a>
+      <div class="details">
+        <%= yield %>
+      </div>
+    </main>
   </body>
 </html>
The OpenStreetMap web site