Skip to content

Commit ef4dbed

Browse files
arikfrarikfr
authored
Merge pull request #1 from getredash/redesign
Updated design
2 parents 6795c48 + ef8269d commit ef4dbed

File tree

1 file changed

+321
-44
lines changed

1 file changed

+321
-44
lines changed

‎views/login.html‎

Lines changed: 321 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -8,56 +8,333 @@
88

99
<title>Redash Preview Signin</title>
1010

11-
<!-- Bootstrap core CSS -->
12-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
13-
crossorigin="anonymous">
11+
<style>
12+
body {
13+
display: flex;
14+
min-height: 100vh;
15+
margin: 0;
16+
font-family: arial;
17+
font-size: 17px;
18+
}
19+
20+
h1 {
21+
font-size: 23px;
22+
margin-bottom: 6px;
23+
}
24+
25+
p {
26+
margin: 0;
27+
}
28+
29+
body[data-submitting] {
30+
pointer-events: none;
31+
}
32+
33+
aside {
34+
flex-basis: 410px;
35+
background-color: #f0f0f0;
36+
padding: 27px;
37+
box-sizing: border-box;
38+
text-align: center;
39+
display: flex;
40+
flex-direction: column;
41+
}
42+
43+
main {
44+
padding: 50px 70px;
45+
box-sizing: border-box;
46+
}
47+
48+
#visual {
49+
flex-grow: 1;
50+
margin-top: 50px;
51+
}
52+
53+
#bottom {
54+
text-align: left;
55+
}
56+
57+
small {
58+
display: block;
59+
color: #7d8c9c;
60+
margin-top: 13px;
61+
}
62+
63+
#presets {
64+
margin-bottom: 40px;
65+
}
66+
67+
.title {
68+
margin-bottom: 10px;
69+
position: relative;
70+
}
71+
72+
.profile {
73+
display: flex;
74+
width: 280px;
75+
padding: 10px 15px;
76+
border-radius: 3px;
77+
transition: background-color 200ms linear;
78+
}
79+
80+
.profile:hover {
81+
cursor: pointer;
82+
}
83+
84+
.profile:hover,
85+
.profile[data-clicked] {
86+
background-color: #f0f0f0;
87+
}
88+
89+
.profile img {
90+
width: 99px;
91+
height: 99px;
92+
border-radius: 50%;
93+
margin-right: 15px;
94+
border: 5px solid white;
95+
background-color: #f0f0f0;
96+
transition: border-color 200ms linear;
97+
}
98+
99+
.profile[data-clicked] img {
100+
border-color: #007bff;
101+
}
102+
103+
.info {
104+
display: flex;
105+
flex-direction: column;
106+
justify-content: center;
107+
}
108+
109+
.name {
110+
font-size: 19px;
111+
}
112+
113+
address {
114+
font-size: 14px;
115+
margin-bottom: 7px;
116+
}
117+
118+
.tag {
119+
background-color: #e3e3e3;
120+
border-radius: 3px;
121+
line-height: 23px;
122+
padding: 0 6px;
123+
color: #157ffb;
124+
font-size: 14px;
125+
width: fit-content;
126+
}
127+
128+
form {
129+
padding-top: 20px;
130+
padding-left: 15px;
131+
}
132+
133+
input {
134+
display: block;
135+
width: 100%;
136+
height: 29px;
137+
padding: 19px 10px;
138+
font-size: 16px;
139+
color: #0e0e0e;
140+
background-color: #fff;
141+
border: 1px solid #ced4da;
142+
border-radius: 3px;
143+
margin-bottom: 8px;
144+
box-sizing: border-box;
145+
}
146+
147+
input::placeholder {
148+
color: #ced4da;
149+
}
150+
151+
form button {
152+
color: #fff;
153+
background-color: #007bff;
154+
border-color: #007bff;
155+
cursor: pointer;
156+
height: 37px;
157+
border-radius: 3px;
158+
font-size: 16px;
159+
padding: 0 17px;
160+
float: right;
161+
display: flex;
162+
}
163+
164+
form button svg {
165+
animation: rotate 1s ease-out;
166+
animation-iteration-count: infinite;
167+
margin-right: 4px;
168+
}
169+
170+
body[data-submitting] button {
171+
cursor: default;
172+
opacity: 0.7;
173+
}
174+
175+
body:not([data-submitting]) button svg {
176+
display: none;
177+
}
178+
179+
button#info {
180+
border-radius: 50%;
181+
height: 18px;
182+
width: 18px;
183+
padding: 0;
184+
font-size: 13px;
185+
font-weight: bold;
186+
outline: none;
187+
display: block;
188+
background-color: transparent;
189+
color: #007bff;
190+
border-color: #007bff;
191+
float: right;
192+
cursor: pointer;
193+
}
194+
195+
button#info:hover, button#info.active {
196+
background-color: #007bff;
197+
color: white;
198+
}
199+
200+
#tooltip {
201+
position: absolute;
202+
font-size: 13px;
203+
background-color: #f0f0f0;
204+
width: 250px;
205+
padding: 10px;
206+
border-radius: 2px;
207+
box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1);
208+
right: -4px;
209+
top: -73px;
210+
}
211+
212+
#tooltip span {
213+
position: absolute;
214+
right: 7px;
215+
top: 3px;
216+
cursor: pointer;
217+
}
218+
219+
body[data-submitting] #tooltip {
220+
display: none;
221+
}
222+
223+
.hide {
224+
display: none;
225+
}
226+
227+
@keyframes rotate {
228+
from {
229+
transform: rotate(0deg);
230+
}
231+
to {
232+
transform: rotate(360deg);
233+
}
234+
}
235+
236+
@media (max-width: 800px) {
237+
#visual {
238+
display: none;
239+
}
240+
241+
body {
242+
display: initial;
243+
}
244+
245+
aside {
246+
text-align: left;
247+
}
248+
}
249+
250+
</style>
251+
252+
<script>
253+
function preset(el, user, pass) {
254+
el.dataset.clicked = true;
255+
document.getElementById('inputEmail').value = user;
256+
document.getElementById('inputPassword').value = pass;
257+
onSubmit();
258+
document.getElementById('loginForm').submit();
259+
}
260+
261+
function onSubmit() {
262+
document.body.dataset.submitting = true;
263+
}
264+
265+
function toggleTooltip() {
266+
document.getElementById('tooltip').classList.toggle('hide');
267+
document.getElementById('info').classList.toggle('active');
268+
}
269+
270+
window.onload = function() {
271+
var form = document.getElementById('loginForm');
272+
form.addEventListener('submit', onSubmit);
273+
form.setAttribute('action', '/login?host=' + window.location.host);
274+
}
275+
</script>
14276
</head>
15277

16-
<body class>
17-
<div class="container">
18-
<div class="row mb-3 mt-3" style="margin: 10px">
19-
<div class="col text-center">
20-
<img src="https://redash.io/assets/images/elements/redash-logo.svg" alt="logo"/>
21-
</div>
278+
<body>
279+
<aside>
280+
<h1>Redash Preview Instance</h1>
281+
<p>Preview frontend changes in pull requests</p>
282+
<div id="visual">
283+
<svg width="230px" height="230px" viewBox="0 0 38 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
284+
<g id="redash-logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
285+
<g id="Group-5" transform="translate(6.000000, 1.000000)" fill-rule="nonzero">
286+
<path d="M12,25.3846154 C20.7263387,20.2114164 24.8265686,18.2206014 24.3006897,19.4121704 C23.7748108,20.6037394 19.6745809,25.133016 12,33 L12,25.3846154 Z" id="Shape" fill="#FF7964"></path>
287+
<path d="M26,13 C26,20.1864237 20.1850584,26 13,26 C5.81494155,26 0,20.172447 0,13 C0.000240455756,5.82755297 5.81518201,0 13,0 C20.184818,0 26,5.82755297 26,13 Z" id="Shape" fill="#FF7964"></path>
288+
<path d="M4.8408991,14.7263528 L6.76088775,14.7263528 C7.22469914,14.7276812 7.60033102,15.0704218 7.60178685,15.4936208 L7.60178685,17.2327321 C7.60033102,17.655931 7.22469914,17.9986716 6.76088775,18 L4.8408991,18 C4.37708771,17.9986716 4.00145583,17.655931 4,17.2327321 L4,15.4936208 C4.0013242,15.0703719 4.37703296,14.7275611 4.8408991,14.7263528 Z M9.28358505,10.8900132 L11.1895909,10.8900132 C11.6534023,10.8913416 12.0290341,11.2340822 12.03049,11.6572811 L12.03049,17.2327321 C12.0290341,17.655931 11.6534023,17.9986716 11.1895909,18 L9.28358505,18 C8.81977367,17.9986716 8.44414179,17.655931 8.44268595,17.2327321 L8.44268595,11.6572811 C8.44401016,11.2340322 8.81971891,10.8912215 9.28358505,10.8900132 Z M13.7122882,13 L15.6322768,13 C16.0960882,13.0013284 16.4717201,13.344069 16.4731759,13.7672679 L16.4731759,17.2327321 C16.4717201,17.655931 16.0960882,17.9986716 15.6322768,18 L13.7122882,18 C13.2484768,17.9986716 12.8728449,17.655931 12.8713891,17.2327321 L12.8713891,13.7672679 C12.8727133,13.344019 13.248422,13.0012083 13.7122882,13 Z M18.2530951,8 L20.1591009,8 C20.6229123,8.00132836 20.9985442,8.344069 21,8.76726793 L21,17.2327321 C20.9985442,17.655931 20.6229123,17.9986716 20.1591009,18 L18.2530951,18 C17.7892837,17.9986716 17.4136518,17.655931 17.412196,17.2327321 L17.412196,8.76726793 C17.4135202,8.34401904 17.7892289,8.00120825 18.2530951,8 Z" id="Shape" fill="#FFFFFF"></path>
289+
</g>
290+
</g>
291+
</svg>
292+
</div>
293+
<div id="bottom">
294+
All preview instances use a single backend, so only frontend changes can be previewed.
295+
<!-- <small>Backend current version: 7.01 build abc123.</small> -->
22296
</div>
23-
<div class="row">
24-
<div class="col">
25-
<p>
26-
This is the Redash preview service. It allows you to preview frontend changes in pull requests.
27-
Note that it uses a single backend, so only frontend changes can be previewed.
28-
</p>
29-
30-
<p>
31-
To login, you can use the following users:
32-
</p>
33-
34-
<p>
35-
<strong>Admin User</strong>: [email protected] (password: melissa)<br/>
36-
<strong>Regular User</strong>: [email protected] (password: john1234)<br/>
37-
</p>
38-
39-
<p>
40-
If you plan on using this often we recommend creating your own user (just login as admin).
41-
</p>
297+
</aside>
298+
<main>
299+
<div class="title">Sign in as:</div>
300+
<div id="presets">
301+
<div class="profile" onclick="preset(this, '[email protected]', 'melissa')">
302+
<img src="https://randomuser.me/api/portraits/women/50.jpg" alt="Melissa Payne profile pic" />
303+
<div class="info">
304+
<span class="name">Melissa Payne</span>
305+
<address>[email protected]</address>
306+
<span class="tag">admin user</span>
307+
</div>
308+
</div>
309+
<div class="profile" onclick="preset(this, '[email protected]', 'john1234')">
310+
<img src="https://randomuser.me/api/portraits/men/94.jpg" alt="John Smith profile pic" />
311+
<div class="info">
312+
<span class="name">John Smith</span>
313+
<address>[email protected]</address>
314+
</div>
42315
</div>
43-
<div class="col">
44-
<form class="form-signin" method="post" action="/login" name="login" id="loginForm">
45-
<h3 class="mb-3 font-weight-bold">Please sign in</h3>
46-
<label for="inputEmail" class="sr-only">Email address</label>
47-
<input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required
48-
autofocus>
49-
<label for="inputPassword" class="sr-only">Password</label>
50-
<input name="password" type="password" id="inputPassword" class="form-control mt-1" placeholder="Password"
51-
required>
52-
<button class="btn btn-primary btn-block mt-1" type="submit">Sign in</button>
53-
</form>
316+
</div>
317+
318+
<div class="title">
319+
or other account:
320+
<button id="info" onclick="toggleTooltip()">i</button>
321+
<div id="tooltip" class="hide">
322+
<span onclick="toggleTooltip()">x</span>
323+
To add an account, sign in as the admin user above and create a new user for yourself via "Settings > Users".
54324
</div>
55325
</div>
56-
</div>
326+
327+
<form method="post" action="/login" name="login" id="loginForm" onsubmit="onSubmit">
328+
<input name="email" type="email" id="inputEmail" placeholder="Email address" required autofocus>
329+
<input name="password" type="password" id="inputPassword" placeholder="Password" required>
330+
<button type="submit" id="submitButton">
331+
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
332+
<circle cx="50" cy="50" fill="none" stroke="#ffffff" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"></circle>
333+
</svg>
334+
Sign in
335+
</button>
336+
</form>
337+
</main>
57338
</body>
58-
<script>
59-
var loginForm = document.getElementById('loginForm');
60-
loginForm.action = '/login?host=' + location.host;
61-
</script>
62339

63340
</html>

0 commit comments

Comments
 (0)