Skip to content

Commit b164691

Browse files
author
Simon Grim
committed
convert login.html to #/login modal
1 parent 1ae8e6b commit b164691

19 files changed

+746
-834
lines changed

‎css/style.css

+67-109
Original file line numberDiff line numberDiff line change
@@ -1408,8 +1408,7 @@ ol.toptrends-list {
14081408
border: solid 1px rgba( 69, 71, 77, .05 );
14091409
padding: 10px;
14101410
}
1411-
.singleBlock h2, .header-bold
1412-
{
1411+
.singleBlock h2 {
14131412
font-weight: bold;
14141413
line-height: 40px;
14151414
color: rgba( 255, 255, 255, 1 );
@@ -1480,76 +1479,6 @@ ol.toptrends-list {
14801479
margin-right: 20px;
14811480
}
14821481

1483-
/*************************************
1484-
************* LOGIN PAGE *************
1485-
**************************************/
1486-
1487-
.login .header-bold {
1488-
display: block;
1489-
width: 720px;
1490-
margin: 0px auto 12px auto;
1491-
}
1492-
1493-
.login .module {
1494-
display: block;
1495-
width: 720px;
1496-
padding: 32px 40px;
1497-
margin: 8px auto;
1498-
background: #fff;
1499-
}
1500-
1501-
.login .module p {
1502-
margin-bottom: 5px;
1503-
}
1504-
1505-
.login .module input {
1506-
padding: 5px 10px;
1507-
background: #f3f3f3;
1508-
border: solid 1px #dcdcdc;
1509-
transition: box-shadow 0.3s, border 0.3s;
1510-
font-size: 14px;
1511-
}
1512-
1513-
.login .module input:focus, .login .module select:focus {
1514-
background: #fff;
1515-
transition: background-color 100ms linear;
1516-
border: solid 1px rgba( 227, 79, 66, .5 );
1517-
box-shadow: 0 0 10px rgba(0, 0, 0, .3 );
1518-
}
1519-
1520-
.login .module select {
1521-
height: 30px;
1522-
padding: 3px 30px 3px 10px;
1523-
margin: 0;
1524-
border: 1px solid #ccc;
1525-
font-size: 14px;
1526-
}
1527-
1528-
.login .module span.availability {
1529-
margin-left: 10px;
1530-
color: #45474d;
1531-
}
1532-
1533-
.with-nickname, .import-secret-key, .create-user {
1534-
margin-top: 10px;
1535-
}
1536-
1537-
.login .module:nth-child(2) div ,
1538-
.login .module:nth-child(3) div:nth-child(2),
1539-
.login .secret-key-import,
1540-
.login .username-import {
1541-
margin-top: 20px;
1542-
margin-bottom: 20px;
1543-
margin-left: 16px;
1544-
}
1545-
1546-
.login .create-user,
1547-
.login .import-secret-key {
1548-
display: block;
1549-
margin-left: auto;
1550-
margin-right: 16px;
1551-
}
1552-
15531482
/*************************************
15541483
************* POPUP MODAL ************
15551484
**************************************/
@@ -1580,12 +1509,12 @@ ol.toptrends-list {
15801509
font-weight: bold;
15811510
}
15821511

1583-
.modal-wrapper .modal-content {
1512+
.modal-content {
15841513
background: #fff;
15851514
overflow-y: auto;
15861515
}
15871516

1588-
.modal-wrapper .modal-blackout {
1517+
.modal-blackout {
15891518
background: rgba(0,0,0, .6);
15901519
z-index: -1;
15911520
position: fixed;
@@ -1673,6 +1602,60 @@ ol.toptrends-list {
16731602
margin-top: 4px;
16741603
}
16751604

1605+
/*************************************
1606+
******* LOGIN TO ACCOUNT MODAL *******
1607+
**************************************/
1608+
1609+
.login-modal.modal-wrapper {
1610+
height: auto; /*about 580px*/
1611+
margin-top: -290px;
1612+
}
1613+
1614+
.login-modal .module {
1615+
margin: 4px;
1616+
}
1617+
1618+
.login-modal .module > div {
1619+
width: 100%;
1620+
margin: 4px 0;
1621+
padding: 4px 12px;
1622+
}
1623+
1624+
.login-modal .module > div:last-child {
1625+
text-align: right;
1626+
margin: 8px 0;
1627+
}
1628+
1629+
.login-modal .module input {
1630+
border: solid 1px rgba(0, 0, 0, .3);
1631+
border-radius: 3px;
1632+
width: 320px;
1633+
margin: 12px 16px;
1634+
padding: 2px 4px;
1635+
}
1636+
1637+
.login-modal .module select {
1638+
border: solid 1px rgba(0, 0, 0, .3);
1639+
border-radius: 3px;
1640+
width: 310px;
1641+
margin: 12px 16px;
1642+
padding: 2px 4px;
1643+
}
1644+
1645+
.login-modal .module input:focus, .login-modal .module select:focus {
1646+
border: solid 1px rgba(227, 79, 66, .5);
1647+
}
1648+
1649+
.login-modal .module .secret-key {
1650+
width: 500px;
1651+
}
1652+
1653+
.login-modal .module .availability {
1654+
color: #45474D;
1655+
display: inline-block;
1656+
margin-left: 16px;
1657+
}
1658+
16761659
/*************************************
16771660
******** DIRECT MESSAGES MODAL *******
16781661
**************************************/
@@ -1867,38 +1850,6 @@ ol.toptrends-list {
18671850
margin: 8px 8px 0;
18681851
}
18691852

1870-
/*************************************
1871-
*********** NEW USER MODAL ***********
1872-
**************************************/
1873-
1874-
.new-user.modal-wrapper {
1875-
width: 720px;
1876-
height: 580px;
1877-
margin: -290px 0 0 -360px;
1878-
}
1879-
1880-
.new-user .modal-content {
1881-
padding: 25px;
1882-
}
1883-
1884-
.new-user .modal-close {
1885-
display: none;
1886-
}
1887-
1888-
.new-user .text {
1889-
margin: 0 0 15px 0;
1890-
}
1891-
1892-
.new-user .emphasis {
1893-
font-size: 18px;
1894-
text-align: center;
1895-
}
1896-
1897-
.new-user .secret-key {
1898-
color: rgba(.5,0,0, 1.0);
1899-
font-weight: bold;
1900-
}
1901-
19021853
/*************************************
19031854
************ HASHTAG MODAL ***********
19041855
**************************************/
@@ -2033,7 +1984,7 @@ ol.toptrends-list {
20331984
}
20341985

20351986
.prompt-wrapper .modal-buttons {
2036-
margin: 4px 16px;
1987+
padding: 4px 16px 16px;
20371988
text-align: right;
20381989
}
20391990

@@ -2053,12 +2004,19 @@ ol.toptrends-list {
20532004

20542005
.confirm-popup .message {
20552006
text-align: center;
2056-
margin: 12px;
2007+
padding: 12px;
20572008
}
20582009

20592010
.confirm-popup .modal-buttons {
20602011
text-align: center;
2061-
padding: 4px;
2012+
}
2013+
2014+
/*************************************
2015+
********* NEW ACCOUNT POPUP **********
2016+
**************************************/
2017+
2018+
.new-account-briefing.prompt-wrapper {
2019+
margin-top: -164px;
20622020
}
20632021

20642022
/*************************************

‎home.html

+43-6
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,9 @@
5353
<a class="dropdown-menu-item" href="options.html">Options</a>
5454
<a class="dropdown-menu-item" href="network.html">Network config</a>
5555
<a class="dropdown-menu-item" href="profile-edit.html">Setup account</a>
56+
<a class="dropdown-menu-item" href="#/login">Change user</a>
5657
<a class="dropdown-menu-item updates-check-client">Check for client's updates</a>
5758
<a class="dropdown-menu-item dropdown-menu-following" href="#following">Following users</a>
58-
<a class="dropdown-menu-item" href="login.html">Change user</a>
5959
<a class="dropdown-menu-item promoted-posts-only selectable_theme theme_original theme_calm" href="#">Switch to Promoted posts</a>
6060
<a class="dropdown-menu-item direct-messages selectable_theme theme_original theme_calm" href="#">Direct Messages</a>
6161
<a class="dropdown-menu-item groupmessages selectable_theme theme_original theme_calm" href="#">Group Messages</a>
@@ -458,11 +458,12 @@ <h3></h3>
458458
</div>
459459

460460
<div class="prompt-wrapper">
461-
<div class="modal-header">
462-
<h3></h3>
463-
<span class="modal-close prompt-close">&times;</span>
464-
</div>
465-
<div class="modal-content"></div>
461+
<div class="modal-header">
462+
<h3></h3>
463+
<span class="modal-close prompt-close">&times;</span>
464+
</div>
465+
<div class="modal-content"></div>
466+
<div class="modal-blackout"></div>
466467
</div>
467468

468469
<div id="confirm-popup-template">
@@ -473,6 +474,42 @@ <h3></h3>
473474
</div>
474475
</div>
475476

477+
<div id="template-login-modal">
478+
<div class="module">
479+
<div>
480+
<p class="label">Existing local users</p>
481+
<select class="local-usernames"></select>
482+
</div>
483+
<div>
484+
<button class="login">Login</button>
485+
</div>
486+
</div>
487+
<div class="module create-account">
488+
<div>
489+
<p class="label">Create a new user</p>
490+
<input class="alias" type="textbox" placeholder="Type nickname here"></input>
491+
<div class="availability"></div>
492+
</div>
493+
<div>
494+
<button class="check" disabled="disabled">Check availability</button>
495+
<button class="create" disabled="disabled">Create this nickname</button>
496+
</div>
497+
</div>
498+
<div class="module import-account">
499+
<div>
500+
<p class="label">Import secret key</p>
501+
<input class="secret-key" type="textbox" placeholder="52-characters secret" size="52"></input>
502+
</div>
503+
<div>
504+
<p class="label">With nickname</p>
505+
<input class="alias" type="textbox" placeholder="Type nickname here"></input>
506+
</div>
507+
<div>
508+
<button class="import" disabled="disabled">Import key</button>
509+
</div>
510+
</div>
511+
</div>
512+
476513
<div id="reTwist-modal-template">
477514
<div class="post-area">
478515
<form class="post-area-new open">

0 commit comments

Comments
 (0)