Skip to content

Commit 93c3b81

Browse files
samyakgaursamyakgaur
committed
UI: Reconnect network page imporved.
Fixes zulip#862. Center aligned the text and added a table to make points look better.
1 parent b6e11f6 commit 93c3b81

File tree

2 files changed

+116
-31
lines changed

2 files changed

+116
-31
lines changed

‎app/renderer/css/network.css

Lines changed: 85 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,46 @@
1+
12
html,
23
body {
34
margin: 0;
45
cursor: default;
56
font-size: 14px;
6-
color: rgba(51, 51, 51, 1.000);
7-
background: rgba(255, 255, 255, 1.000);
87
user-select: none;
8+
position: relative;
9+
min-height: 100%;
10+
width: 100%;
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
}
15+
16+
ul {
17+
text-align: center;
18+
list-style: none;
19+
margin: 0;
20+
padding: 0;
21+
}
22+
23+
li {
24+
list-style-type: none;
25+
text-align: center;
26+
background: rgb(255, 255, 255);
27+
height: 40px;
28+
line-height: 40px;
29+
color: rgb(102, 102, 102);
30+
}
31+
32+
li:nth-child(2n) {
33+
background: rgb(247, 247, 247);
34+
}
35+
36+
li:hover span {
37+
width: 40px;
38+
opacity: 1.0;
39+
}
40+
41+
#buttons {
42+
margin: auto;
43+
margin-top: 20px;
944
}
1045

1146
#content {
@@ -17,22 +52,24 @@ body {
1752
}
1853

1954
#title {
20-
text-align: left;
55+
text-align: center;
2156
font-size: 24px;
2257
font-weight: bold;
23-
margin: 20px 0;
2458
}
2559

2660
#subtitle {
2761
font-size: 20px;
28-
text-align: left;
62+
text-align: center;
2963
margin: 12px 0;
64+
font-weight: bold;
65+
color: rgb(102, 102, 102);
3066
}
3167

3268
#description {
3369
text-align: left;
3470
font-size: 16px;
3571
list-style-position: inside;
72+
/* text-align: justify; */
3673
}
3774

3875
#reconnect {
@@ -44,16 +81,56 @@ body {
4481
}
4582

4683
.button {
84+
margin-top: 20px;
4785
font-size: 16px;
4886
background: rgba(0, 150, 136, 1.000);
4987
color: rgba(255, 255, 255, 1.000);
5088
width: 96px;
5189
height: 32px;
52-
border-radius: 5px;
53-
line-height: 32px;
90+
border-radius: 7px;
91+
line-height: 35px;
5492
cursor: pointer;
5593
}
5694

5795
.button:hover {
5896
opacity: 0.8;
59-
}
97+
}
98+
99+
.container {
100+
text-align: center;
101+
position: relative;
102+
}
103+
104+
.maingraphic {
105+
position: relative;
106+
}
107+
108+
.cog {
109+
margin-top: 50px;
110+
width: 10rem;
111+
height: 10rem;
112+
animation: coganimation 10s infinite;
113+
fill: rgba(0, 150, 136, 1.000);
114+
margin-left: 60px;
115+
}
116+
117+
.spanner {
118+
margin-top: 60px;
119+
position: absolute;
120+
transform: rotate(20deg);
121+
top: 10%;
122+
margin-left: 30px;
123+
left: 25%;
124+
width: 10rem;
125+
height: 10rem;
126+
fill: rgba(0, 150, 136, 1.000);
127+
}
128+
129+
@keyframes coganimation {
130+
0% {
131+
transform: rotate(0deg);
132+
}
133+
100% {
134+
transform: rotate(360deg);
135+
}
136+
}

‎app/renderer/network.html

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,34 @@
11
<!DOCTYPE html>
22
<html lang="en" class="responsive desktop">
3-
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5-
<meta name="viewport" content="width=device-width">
6-
<title>Zulip - Network Troubleshooting</title>
7-
<link rel="stylesheet" href="css/network.css" type="text/css" media="screen">
8-
</head>
9-
<body>
10-
<div id="content">
11-
<div id="picture"><img src="img/zulip_network.png"></div>
12-
<div id="title">We can't connect to this organization</div>
13-
<div id="subtitle">This could be because</div>
14-
<ul id="description">
15-
<li>You're not online or your proxy is misconfigured.</li>
16-
<li>There is no Zulip organization hosted at this URL.</li>
17-
<li>This Zulip organization is temporarily unavailable.</li>
18-
<li>This Zulip organization has been moved or deleted.</li>
19-
</ul>
20-
<div id="buttons">
21-
<div id="reconnect" class="button">Reconnect</div>
22-
<div id="settings" class="button">Settings</div>
23-
</div>
24-
</div>
25-
</body>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title>Zulip - Network Troubleshooting</title>
7+
<link rel="stylesheet" href="css/network.css" type="text/css" media="screen">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="maingraphic">
12+
<img src="img/zulip_network.png">
13+
</div>
14+
<div id="content">
15+
<div id="title">We can't connect to this organization</div>
16+
<div id="subtitle">
17+
<ul>
18+
<li>This could be because</li>
19+
</ul>
20+
</div>
21+
<ul id="description">
22+
<li>You're not online or your proxy is misconfigured.</li>
23+
<li>There is no Zulip organization hosted at this URL.</li>
24+
<li>This Zulip organization is temporarily unavailable.</li>
25+
<li>This Zulip organization has been moved or deleted.</li>
26+
</ul>
27+
<div id="buttons">
28+
<div id="reconnect" class="button">Reconnect</div>
29+
<div id="settings" class="button">Settings</div>
30+
</div>
31+
</div>
32+
</div>
33+
</body>
2634
</html>

0 commit comments

Comments
 (0)