supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added 'Sign in' window

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
client/css/style.css
View File

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

32
client/index.html
View File

@ -10,13 +10,13 @@
<link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.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="apple-touch-icon" sizes="144x144" href="/img/apple-icon-144x144.png" />
<link rel="shortcut icon" href="/img/favicon.png"> <link rel="shortcut icon" href="/img/favicon.png">
</head> </head>
<body> <body class="<%= public ? "public" : "signed-out" %>">
<div id="wrap"> <div id="wrap">
<div id="viewport"> <div id="viewport">
@ -27,8 +27,10 @@
</div> </div>
</div> </div>
<footer id="footer"> <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="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="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> </footer>
</aside> </aside>
<div id="main"> <div id="main">
@ -39,6 +41,32 @@
</header> </header>
<div id="windows"> <div id="windows">
<div id="chat"></div> <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"> <div id="connect" class="window">
<form class="container" action=""> <form class="container" action="">
<div class="row"> <div class="row">

4
client/js/chat.js
View File

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