Added 'Sign in' window
This commit is contained in:
Mattias Erming
parent
fa2ec6de3d
commit
760efd5ef0
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user