[epiphany] Add responsive layout for error pages
- From: Michael Catanzaro <mcatanzaro src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [epiphany] Add responsive layout for error pages
- Date: Mon, 18 Nov 2019 19:31:19 +0000 (UTC)
commit 20a95426bc1ee7e9acf33074278365ca5aa059b7
Author: Jan-Michael Brummer <jan brummer tabos org>
Date: Wed Nov 13 12:36:00 2019 +0100
Add responsive layout for error pages
embed/ephy-web-view.c | 12 ++--
src/resources/channel-insecure-symbolic.png | Bin 3283 -> 0 bytes
src/resources/channel-insecure-symbolic.svg | 6 ++
src/resources/computer-fail-symbolic.png | Bin 756 -> 0 bytes
src/resources/computer-fail-symbolic.svg | 5 ++
src/resources/epiphany.gresource.xml | 8 +--
src/resources/error.css | 105 ++++++++++++++++------------
src/resources/error.html | 51 +++++++-------
src/resources/network-error-symbolic.png | Bin 1030 -> 0 bytes
src/resources/network-error-symbolic.svg | 4 ++
src/resources/security-high-symbolic.png | Bin 703 -> 0 bytes
src/resources/security-high-symbolic.svg | 6 ++
12 files changed, 115 insertions(+), 82 deletions(-)
---
diff --git a/embed/ephy-web-view.c b/embed/ephy-web-view.c
index 716c7a687..1c5676183 100644
--- a/embed/ephy-web-view.c
+++ b/embed/ephy-web-view.c
@@ -2266,7 +2266,7 @@ format_network_error_page (const char *uri,
/* Mnemonic for the Reload button on browser error pages. */
*button_accesskey = C_("reload-access-key", "R");
- *icon_name = "network-error-symbolic.png";
+ *icon_name = "network-error-symbolic.svg";
*style = "default";
g_free (formatted_origin);
@@ -2319,7 +2319,7 @@ format_crash_error_page (const char *uri,
/* Mnemonic for the Reload button on browser error pages. */
*button_accesskey = C_("reload-access-key", "R");
- *icon_name = "computer-fail-symbolic.png";
+ *icon_name = "computer-fail-symbolic.svg";
*style = "default";
g_free (formatted_uri);
@@ -2362,7 +2362,7 @@ format_process_crash_error_page (const char *uri,
/* Mnemonic for the Reload button on browser error pages. */
*button_accesskey = C_("reload-access-key", "R");
- *icon_name = "computer-fail-symbolic.png";
+ *icon_name = "computer-fail-symbolic.svg";
*style = "default";
}
@@ -2415,7 +2415,7 @@ format_tls_error_page (EphyWebView *view,
/* Mnemonic for the Accept Risk and Proceed button on the invalid TLS certificate error page. */
*hidden_button_accesskey = C_("proceed-anyway-access-key", "P");
- *icon_name = "channel-insecure-symbolic.png";
+ *icon_name = "channel-insecure-symbolic.svg";
*style = "danger";
g_free (formatted_origin);
@@ -2504,7 +2504,7 @@ format_unsafe_browsing_error_page (EphyWebView *view,
/* Mnemonic for the Accept Risk and Proceed button on the unsafe browsing error page. */
*hidden_button_accesskey = C_("proceed-anyway-access-key", "P");
- *icon_name = "security-high-symbolic.png";
+ *icon_name = "security-high-symbolic.svg";
*style = "danger";
g_free (formatted_origin);
@@ -2548,7 +2548,7 @@ format_no_such_file_error_page (EphyWebView *view,
/* Mnemonic for the Go Back button on the no such file error page. */
*button_accesskey = C_("back-access-key", "B");
- *icon_name = "computer-fail-symbolic.png";
+ *icon_name = "computer-fail-symbolic.svg";
*style = "default";
}
diff --git a/src/resources/channel-insecure-symbolic.svg b/src/resources/channel-insecure-symbolic.svg
new file mode 100644
index 000000000..13f827bd5
--- /dev/null
+++ b/src/resources/channel-insecure-symbolic.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+ <g color="#bebebe">
+ <path d="M5 0C3.355 0 2 1.355 2 3v3h2V3c0-.571.429-1 1-1h2c.571 0 1 .429 1
1v.25c.267-.15.557-.25.875-.25H10c0-1.645-1.355-3-3-3zM2 9s-1 0-1 1v5h10v-2H8.875C7.865 13 7 12.135 7
11.125V9z" style="marker:none" overflow="visible" fill="#cc0000"/>
+ <path class="warning" d="M8.875 4A.863.863 0 0 0 8 4.875v6.25c0 .492.383.875.875.875h6.25a.863.863 0
0 0 .875-.875v-6.25A.863.863 0 0 0 15.125 4zM11 5h2v2.5s0 .5-.5.5h-1c-.5 0-.5-.5-.5-.5zm.5 4h1c.277 0
.5.223.5.5v1c0 .277-.223.5-.5.5h-1a.499.499 0 0 1-.5-.5v-1c0-.277.223-.5.5-.5z" style="marker:none"
overflow="visible" fill="#cc0000"/>
+ </g>
+</svg>
diff --git a/src/resources/computer-fail-symbolic.svg b/src/resources/computer-fail-symbolic.svg
new file mode 100644
index 000000000..67f242727
--- /dev/null
+++ b/src/resources/computer-fail-symbolic.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+ <g fill="#474747">
+ <path d="M4 1C2.338 1 1 2.338 1 4v6c0 1.662 1.338 3 3 3h8c1.662 0 3-1.338
3-3V4c0-1.662-1.338-3-3-3zm2 3c.558 0 1.031.473 1.031 1.031V6c0 .558-.473 1-1.031 1-.558 0-1-.442-1-1v-.969C5
4.473 5.442 4 6 4zm4 0c.558 0 1 .473 1 1.031V6c0 .558-.442 1-1 1s-1-.442-1-1v-.969C9 4.473 9.442 4 10 4zM8
8.031c3.256 0 5 .874 5 1.406v.5c-.997-.636-4.016-.906-5-.906s-3.805-.062-5 .906v-.5c0-.68 1.744-1.406
5-1.406zM8 14c-5 0-5 1-5 1 0 1 1 1 1 1h8c1 0 1-1 1-1s0-1-5-1z"/>
+ </g>
+</svg>
diff --git a/src/resources/epiphany.gresource.xml b/src/resources/epiphany.gresource.xml
index 3a90c661a..5aa50460b 100644
--- a/src/resources/epiphany.gresource.xml
+++ b/src/resources/epiphany.gresource.xml
@@ -1,13 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<gresources>
<gresource prefix="/org/gnome/epiphany">
- <file>channel-insecure-symbolic.png</file>
- <file>computer-fail-symbolic.png</file>
+ <file preprocess="xml-stripblanks" compressed="true">channel-insecure-symbolic.svg</file>
+ <file preprocess="xml-stripblanks" compressed="true">computer-fail-symbolic.svg</file>
<file preprocess="xml-stripblanks" compressed="true">private-mode.svg</file>
<file preprocess="xml-stripblanks" compressed="true">web-watermark.svg</file>
<file preprocess="xml-stripblanks" compressed="true">overview-remove-item.svg</file>
- <file>network-error-symbolic.png</file>
- <file>security-high-symbolic.png</file>
+ <file preprocess="xml-stripblanks" compressed="true">network-error-symbolic.svg</file>
+ <file preprocess="xml-stripblanks" compressed="true">security-high-symbolic.svg</file>
<file compressed="true">about.ini</file>
<file alias="page-templates/about.css" compressed="true">about.css</file>
<file alias="page-templates/error.css" compressed="true">error.css</file>
diff --git a/src/resources/error.css b/src/resources/error.css
index ee0647b7a..e64cd859b 100644
--- a/src/resources/error.css
+++ b/src/resources/error.css
@@ -1,55 +1,75 @@
/* Global CSS for error pages */
html {
- font-family: -webkit-system-font, Cantarell, sans-serif;
- font-size: 12pt;
- padding: 40px 20px 0 20px;
-}
-
-#container {
- padding: 2em;
- margin: 2em auto;
- background-color: #fff;
- max-width: 500px;
+ /* Adwaita colors */
+ --bg-color: #f6f5f4;
+ --fg-color: #2e3436;
+ --base-color: #fff;
+ --text-color: #000;
+ --borders: #d3d7cf;
+
+ /* Misc colors */
+ --header-color: #999;
+ --header-text-color: white;
+ --row-hover-color: rgba(0, 0, 0, .1);
+}
+
+@media (prefers-color-scheme: dark) {
+ html {
+ /* Adwaita colors */
+ --bg-color: #353535;
+ --fg-color: #eeeeec;
+ --base-color: #2d2d2d;
+ --text-color: #fff;
+ --borders: #1b1b1b;
+
+ /* Misc colors */
+ --header-color: #666;
+ --row-hover-color: rgba(255, 255, 255, .1);
+ }
}
-#leftpanel {
- vertical-align: top;
- display: inline-block;
- margin-right: 5px;
- width: 10%;
+html {
+ font-family: -webkit-system-font, Cantarell, sans-serif;
+ color: var(--fg-color);
+ background-color: var(--bg-color);
+ height: 100%;
}
-#rightpanel {
- vertical-align: top;
- display: inline-block;
- margin-left: 5px;
- width: 80%;
+.error-body {
+ box-sizing:border-box;
+ display:flex;
+ flex-direction: column;
+ justify-content: center;
+ max-width:40em;
+ margin: auto;
+ padding-left: 12px;
+ padding-right: 12px;
+ line-height: 1.5;
+ height: 100%;
}
-#rightpanel .hidden {
+.error-body .hidden {
display: none;
}
-#rightpanel .visible {
+.error-body .visible {
display: block;
}
-#rightpanel .clickable {
+.error-body .clickable {
cursor: pointer;
color: #888a85;
}
-#rightpanel .clickable:hover,
-#rightpanel .clickable:focus {
+.error-body .clickable:hover,
+.error-body .clickable:focus {
color: #a6ad9c;
}
#msg-title {
- font-size: 16pt;
- font-weight: bold;
- margin-top: 0;
- margin-bottom: 10px;
+ opacity: 0.55; /* Adwaita's dim-label */
+ text-align:center;
}
#msg-title.default {
@@ -60,11 +80,6 @@ html {
color: #cc0000;
}
-#msg-body {
- margin-top: 10px;
- margin-bottom: 10px;
-}
-
#msg-details {
margin-top: 10px;
margin-bottom: 10px;
@@ -84,7 +99,7 @@ html {
.btn {
min-width: 200px;
height: 32px;
- margin-top: 10px;
+ margin-top: 15px;
margin-bottom: 0;
line-height: 1.42857143;
text-align: center;
@@ -110,31 +125,31 @@ html {
}
.suggested-action {
- color: #fff;
- border-color: #1c5187;
- background-image: linear-gradient(to bottom, #86add6, #538ac5 60%, #2a76c6);
+ color: white;
+ border-color: #1b6acb;
+ background-image: linear-gradient(to top, #2379e2 2px, #3584e4);
}
.suggested-action:hover,
.suggested-action:focus,
.suggested-action:active,
.suggested-action.active {
- color: #fff;
- background-image: linear-gradient(to bottom, #63a0de, #4a90d9 60%, #3986d5);
+ color: white;
+ background-image: linear-gradient(to top, #3584e4, #3987e5 1px);
}
.destructive-action {
- color: #fff;
- border-color: #8e0b0b;
- background-image: linear-gradient(to bottom, #ef2929, #ee1616 60%, #d51010);
+ color: white;
+ border-color: #b2161d;
+ background-image: linear-gradient(to top, #ce1921 2px, #e01b24);
}
.destructive-action:hover,
.destructive-action:focus,
.destructive-action:active,
.destructive-action.active {
- color: #fff;
- background-image: linear-gradient(to bottom, #f14545, #ef2929 60%, #ee1616);
+ color: white;
+ background-image: linear-gradient(to top, #e01b24, #e41c26 1px);
}
details > summary::-webkit-details-marker {
diff --git a/src/resources/error.html b/src/resources/error.html
index e98a626a9..58e6c06aa 100644
--- a/src/resources/error.html
+++ b/src/resources/error.html
@@ -37,33 +37,30 @@
}
</script>
</head>
-<body>
- <div id="container">
- <div id="leftpanel">
- <img src="ephy-resource:///org/gnome/epiphany/%s"/>
- </div>
- <div id="rightpanel">
- <div id="msg-title" class="%s">
- %s
- </div>
- <div id="msg-body">
- %s
- </div>
- <div id="msg-details" class="%s">
- <details>
- <summary class="clickable">%s</summary>
- %s
- <button class="btn destructive-action %s" accesskey="%s" onclick="javascript:hiddenButtonAction()">
- <strong>%s</strong>
- </button>
- </details>
- </div>
- <div id="footer">
- <button class="btn suggested-action visible" accesskey="%s" onclick="javascript:buttonAction()">
- <strong>%s</strong>
- </button>
- </div>
- </div>
+<body class="error-body">
+ <span style="margin-left: auto;
+ margin-right: auto;
+ display: block;
+ width: 128px;
+ height: 128px;
+ background: url(ephy-resource:///org/gnome/epiphany/%s) center no-repeat;
+ background-size: cover;"></span>
+ <br>
+ <h1 id="msg-title" class="%s">%s</h1>
+ %s
+ <div id="msg-details" class="%s">
+ <details>
+ <summary class="clickable">%s</summary>
+ %s
+ <button class="btn destructive-action %s" accesskey="%s" onclick="javascript:hiddenButtonAction()">
+ <strong>%s</strong>
+ </button>
+ </details>
+ </div>
+ <div>
+ <button class="btn suggested-action visible" accesskey="%s" onclick="javascript:buttonAction()">
+ <strong>%s</strong>
+ </button>
</div>
</body>
</html>
diff --git a/src/resources/network-error-symbolic.svg b/src/resources/network-error-symbolic.svg
new file mode 100644
index 000000000..9becfb4d3
--- /dev/null
+++ b/src/resources/network-error-symbolic.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+ <path d="M10 1v1c0 .257.13.529.313.719L11.593 4H7c-.528-.007-1 .472-1 1s.472 1.007 1 1h4.625l-1.219
1.281c-.182.19-.406.462-.406.719v.426c.62-.377 1.909-.507 2.48-.395L15.406 5 11.75 1.281C11.552 1.091 11.31 1
11 1zM5 7c-.31 0-.615.09-.812.281L.594 11l3.656
3.719c.198.19.44.281.75.281h1v-1c0-.257-.13-.529-.312-.719L4.406 12h3.625c.022-.277.113-1
.723-2H4.375l1.219-1.281C5.776 8.529 6 8.257 6 8V7z"
style="line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none"
color="#000" font-weight="400" font-family="Sans" overflow="visible" opacity=".35" fill="#474747"/>
+ <path class="error" d="M12.5 9a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zM10 11.969h5V13h-5z"
style="marker:none" color="#bebebe" overflow="visible" fill="#ef2929"/>
+</svg>
diff --git a/src/resources/security-high-symbolic.svg b/src/resources/security-high-symbolic.svg
new file mode 100644
index 000000000..889d48d96
--- /dev/null
+++ b/src/resources/security-high-symbolic.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+ <g color="#bebebe" fill="#cc0000">
+ <path d="M2 1v7c0 2.072 1.498 3.695 2.832 4.889a18.66 18.66 0 0 0 2.66
1.972l.516.305.512-.31s1.32-.8 2.65-2.002C12.5 11.65 14 10.044 14 8V1zm2 2h8v5c0 .92-1 2.313-2.17
3.37-.913.825-1.477 1.154-1.836 1.386-.358-.226-.918-.543-1.828-1.358C5 10.355 4 8.98 4 8z"
style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none"
font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible"/>
+ <path d="M5 4v4c0 .357.755 1.641 1.844 2.625.575.52.736.58 1.156.875.42-.294.581-.355
1.156-.875C10.246 9.641 11 8.357 11 8V4z" style="marker:none" overflow="visible"/>
+ </g>
+</svg>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]