Added 'Sign in' window

This commit is contained in:
Mattias Erming 2014-07-17 08:12:05 -07:00
parent fa2ec6de3d
commit 760efd5ef0
3 changed files with 74 additions and 14 deletions

View File

@ -84,14 +84,14 @@ button {
padding: 0 30px;
}
::-moz-placeholder {
color: rgba(0, 0, 0, .5);
color: rgba(0, 0, 0, .25);
opacity: 1;
}
::-webkit-input-placeholder {
color: rgba(0, 0, 0, .5);
color: rgba(0, 0, 0, .25);
}
:-ms-input-placeholder {
color: rgba(0, 0, 0, .5) !important;
color: rgba(0, 0, 0, .25) !important;
}
#wrap {
height: 100%;
@ -220,16 +220,36 @@ button {
width: 220px;
}
#footer button {
font: 18px Octicons;
font: 16px Octicons;
line-height: 34px;
padding: 0px 12px;
}
.signed-out #footer .sign-in {
display: inline-block;
}
.signed-out #footer .connect,
.signed-out #footer .sign-out {
display: none;
}
.public #footer .sign-in,
.public #footer .sign-out {
display: none;
}
#footer .sign-in {
display: none;
}
#footer .sign-in:before {
content: "\f036";
}
#footer .connect:before {
content: "\f085";
}
#footer .settings:before {
content: "\f02f";
}
#footer .sign-out:before {
content: "\f032";
}
#main {
bottom: 0;
left: 220px;
@ -485,8 +505,15 @@ button {
display: block;
line-height: 1.6em;
}
#connect input {
width: 100%;
#sign-in label {
display: block;
margin-top: 10px;
}
#sign-in .title {
margin-bottom: 10px;
}
#sign-in .btn {
margin-top: 25px;
}
#connect label {
display: block;
@ -501,15 +528,18 @@ button {
position: absolute;
}
#connect .btn {
margin-top: 30px;
margin-top: 25px;
}
#settings h2 {
border-bottom: 1px solid #eee;
color: #7f8c8d;
font-size: 26px;
font-size: 22px;
margin: 30px 0 10px;
padding-bottom: 7px;
}
#settings .title {
margin-bottom: -10px;
}
#settings .opt {
display: block;
padding: 10px 0 10px 1px;
@ -579,6 +609,9 @@ button {
}
@media (max-width: 480px) {
.container {
margin-bottom: 5%;
}
#viewport.lt {
-webkit-transform: translate3d(220px, 0, 0);
transform: translate3d(220px, 0, 0);
@ -616,7 +649,4 @@ button {
#chat .time {
display: none;
}
#windows .title {
display: none;
}
}

View File

@ -10,13 +10,13 @@
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link id="theme" rel="stylesheet" href="<%= typeof theme !== "undefined" ? theme : "" %>">
<link id="theme" rel="stylesheet" href="<%=theme%>">
<link rel="apple-touch-icon" sizes="144x144" href="/img/apple-icon-144x144.png" />
<link rel="shortcut icon" href="/img/favicon.png">
</head>
<body>
<body class="<%= public ? "public" : "signed-out" %>">
<div id="wrap">
<div id="viewport">
@ -27,8 +27,10 @@
</div>
</div>
<footer id="footer">
<button class="sign-in" data-target="#sign-in" data-title="Sign in" data-placement="top" title="Sign in to Shout"></button>
<button class="connect" data-target="#connect" data-title="Connect" data-placement="top" title="Connect to network"></button>
<button class="settings" data-target="#settings" data-title="Settings" data-placement="top" title="Client settings"></button>
<button class="sign-out" data-placement="top" title="Sign out user"></button>
</footer>
</aside>
<div id="main">
@ -39,6 +41,32 @@
</header>
<div id="windows">
<div id="chat"></div>
<div id="sign-in" class="window">
<form class="container" action="">
<div class="row">
<div class="col-xs-12">
<h1 class="title">Sign in</h1>
</div>
<div class="col-xs-12">
<label>
Username
<input class="input" name="user">
</label>
</div>
<div class="col-xs-12">
<label class="port">
Password
<input class="input" name="password">
</label>
</div>
<div class="col-xs-12">
<button type="submit" class="btn">
Sign in
</button>
</div>
</div>
</form>
</div>
<div id="connect" class="window">
<form class="container" action="">
<div class="row">

View File

@ -54,12 +54,14 @@ $(function() {
);
socket.on("auth", function(data) {
console.log(data);
$("#footer").find(".sign-in").trigger("click");
$("#sign-in input:first").focus();
});
socket.on("init", function(data) {
if (data.networks.length === 0) {
$("#footer").find(".connect").trigger("click");
$("#connect input:first").focus();
return;
}