diff --git a/assets/css/common/_layout.scss b/assets/css/common/_layout.scss index aba57ac7..1da114d8 100644 --- a/assets/css/common/_layout.scss +++ b/assets/css/common/_layout.scss @@ -400,8 +400,21 @@ figure { padding: 4px 16px; } -.twofactor { +.minimal { display: flex; align-items: center; justify-content: center; } + +.minimal__message { + padding: 30px; + max-width: 560px; + width: 100%; + margin: auto; + text-align: left; + background-color: $header_secondary_color; +} + +.minimal__message__header { + margin: 0 0 10px 0; +} diff --git a/lib/philomena_web/templates/error/show.html.slime b/lib/philomena_web/templates/error/show.html.slime new file mode 100644 index 00000000..9e6eb57d --- /dev/null +++ b/lib/philomena_web/templates/error/show.html.slime @@ -0,0 +1,23 @@ +doctype html +html lang="en" + head + meta charset="utf-8" + meta http-equiv="X-UA-Compatible" content="IE=edge" + = viewport_meta_tag(@conn) + + title + => @status + | - Philomena + link rel="stylesheet" href=stylesheet_path(@conn, nil) + link rel="stylesheet" href=dark_stylesheet_path(@conn) media="(prefers-color-scheme: dark)" + link rel="icon" href="/favicon.ico" type="image/x-icon" + link rel="icon" href="/favicon.svg" type="image/svg+xml" + + body.minimal + .minimal__message + h1.minimal__message__header + i.fa.fw.favicon-home> + ' Philomena + + h3 = @short_msg + p = @long_msg \ No newline at end of file diff --git a/lib/philomena_web/templates/layout/two_factor.html.slime b/lib/philomena_web/templates/layout/two_factor.html.slime index fc294fcd..2d2fc4bb 100644 --- a/lib/philomena_web/templates/layout/two_factor.html.slime +++ b/lib/philomena_web/templates/layout/two_factor.html.slime @@ -11,6 +11,6 @@ html lang="en" link rel="icon" href="/favicon.ico" type="image/x-icon" link rel="icon" href="/favicon.svg" type="image/svg+xml" - body.twofactor - .twofactor__container + body.minimal + .minimal__container = @inner_content diff --git a/lib/philomena_web/views/error_view.ex b/lib/philomena_web/views/error_view.ex index 9dcd5604..0e7cc087 100644 --- a/lib/philomena_web/views/error_view.ex +++ b/lib/philomena_web/views/error_view.ex @@ -1,11 +1,18 @@ defmodule PhilomenaWeb.ErrorView do use PhilomenaWeb, :view - # If you want to customize a particular status code - # for a certain format, you may uncomment below. - # def render("500.html", _assigns) do - # "Internal Server Error" - # end + import PhilomenaWeb.LayoutView, only: [ + stylesheet_path: 2, + dark_stylesheet_path: 1, + viewport_meta_tag: 1 + ] + + @codes %{ + 400 => {"Bad Request", "Couldn't process your request!"}, + 403 => {"Forbidden", "Not allowed to access this page (are your cookies enabled?)"}, + 404 => {"Not Found", "Couldn't find what you were looking for!"}, + 500 => {"Internal Error", "Couldn't process your request!"}, + } # By default, Phoenix returns the status message from # the template name. For example, "404.html" becomes @@ -13,4 +20,17 @@ defmodule PhilomenaWeb.ErrorView do def template_not_found(template, _assigns) do Phoenix.Controller.status_message_from_template(template) end + + def render(template, assigns) when template != "show.html" do + {short_msg, long_msg} = @codes[assigns.status] || @codes[500] + + render( + PhilomenaWeb.ErrorView, + "show.html", + conn: assigns.conn, + status: assigns.status, + short_msg: short_msg, + long_msg: long_msg + ) + end end