Added temp menu

This commit is contained in:
Mattias Erming 2014-05-09 00:12:16 +02:00
parent e255473c6f
commit ececa3d55c
3 changed files with 90 additions and 35 deletions

View File

@ -65,6 +65,7 @@ button::-moz-focus-inner {
#sidebar { #sidebar {
border-right: 4px solid #bdc3c7; border-right: 4px solid #bdc3c7;
position: absolute; position: absolute;
overflow-y: auto;
height: 100%; height: 100%;
width: 220px; width: 220px;
} }
@ -74,8 +75,61 @@ button::-moz-focus-inner {
padding: 6px 12px; padding: 6px 12px;
text-transform: uppercase; text-transform: uppercase;
} }
#sidebar button { #logo {
border-radius: 2px; margin: 30px 0 30px;
text-align: center;
transition: all .5s;
}
#menu,
#networks {
margin: 20px;
}
#menu hr {
background: #e5e5e5;
border: 0;
height: 1px;
margin: 3px 0;
}
#menu.visible .btn {
border-color: #7f8c8d;
color: #7f8c8d;
}
#menu.visible .options {
display: block;
}
#menu .btn {
width: 100%;
}
#menu .options {
background: #f3f5f5;
border-radius: 3px;
display: none;
margin-top: 15px;
}
#menu .opt {
color: rgba(52, 73, 94, 0.75);
display: block;
font-size: 14px;
font-weight: bold;
padding: 6px 15px 8px;
text-align: left;
transition: all .25s;
width: 100%;
}
#menu .opt:hover {
background: #e1e4e7;
color: #34495e;
}
#menu .opt:first-child {
border-radius: 3px 3px 0 0;
padding-top: 10px;
}
#menu .opt:last-child {
border-radius: 0 0 3px 3px;
padding-bottom: 10px;
}
#networks button {
border-radius: 3px;
color: #1abc9c; color: #1abc9c;
display: block; display: block;
font-size: 15px; font-size: 15px;
@ -88,22 +142,14 @@ button::-moz-focus-inner {
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
} }
#sidebar button:hover { #networks button:hover {
background-color: #f1f2f3; background-color: #f1f2f3;
} }
#sidebar button.active { #networks button.active {
background-color: #ebedef; background-color: #ebedef;
color: #526476; color: #526476;
} }
#logo { #networks .network {
margin: 30px 0 30px;
text-align: center;
}
#menu,
#networks {
margin: 20px;
}
#networks .network + .network {
border-top: 2px solid #ebedef; border-top: 2px solid #ebedef;
margin-top: 14px; margin-top: 14px;
padding-top: 14px; padding-top: 14px;
@ -124,17 +170,6 @@ button::-moz-focus-inner {
#networks .badge:empty { #networks .badge:empty {
display: none; display: none;
} }
#footer {
bottom: 0;
position: absolute;
width: 100%;
}
#footer .btn {
background: #fff;
display: block;
text-align: center;
margin: 20px;
}
#main { #main {
position: absolute; position: absolute;
height: 100%; height: 100%;
@ -258,7 +293,7 @@ button::-moz-focus-inner {
} }
#chat .time { #chat .time {
color: #dee0e2; color: #dee0e2;
/*padding: 2px 10px;*/ padding: 2px 10px;
} }
#chat .users { #chat .users {
background: #fff; background: #fff;
@ -289,3 +324,10 @@ button::-moz-focus-inner {
#chat .count + li .user { #chat .count + li .user {
padding-top: 8px padding-top: 8px
} }
@media (max-height: 480px) {
#logo {
display: block !important;
margin-top: -135px;
}
}

View File

@ -17,24 +17,29 @@
<aside id="sidebar"> <aside id="sidebar">
<div id="logo"> <div id="logo">
<a href="<%= homepage %>" target="_blank"> <a href="<%= homepage %>" target="_blank">
<img src="/img/play.svg" width="122" height="122"> <img src="/img/play.svg" title="Work in progress" width="122" height="122">
</a> </a>
</div> </div>
<div id="menu"> <div id="menu">
<h2>Shout Client</h2> <button class="btn">
<button data-target="#settings">Settings</button> Menu
</button>
<div class="options">
<button class="opt" data-target="#settings">
Settings
</button>
<hr/>
<button class="opt" data-target="#sign-out">
Sign out
</button>
</div>
</div> </div>
<div id="networks"></div> <div id="networks"></div>
<footer id="footer">
<a href="<%= homepage %>" target="_blank" class="btn">
<strong><%= name %></strong>
<%= version %>
</a>
</footer>
</aside> </aside>
<div id="main"> <div id="main">
<div id="windows"> <div id="windows">
<div id="settings" class="window"></div> <div id="settings" class="window"></div>
<div id="sign-out" class="window"></div>
</div> </div>
<div id="chat"></div> <div id="chat"></div>
</div> </div>

View File

@ -93,8 +93,9 @@ $(function() {
.find("button[data-target='" + id + "']"); .find("button[data-target='" + id + "']");
} else { } else {
target = sidebar target = sidebar
.find("#networks")
.find("button") .find("button")
.first() .last()
} }
target.trigger("click"); target.trigger("click");
@ -118,6 +119,9 @@ $(function() {
sidebar.on("click", "button", function() { sidebar.on("click", "button", function() {
var button = $(this); var button = $(this);
var target = button.data("target"); var target = button.data("target");
if (!target) {
return;
}
location.hash = target; location.hash = target;
@ -133,6 +137,10 @@ $(function() {
.focus(); .focus();
}); });
sidebar.on("click", "#menu .btn", function() {
$("#menu").toggleClass("visible");
});
chat.on("append", ".messages", function() { chat.on("append", ".messages", function() {
var messages = $(this); var messages = $(this);
var id = messages.closest(".window").find(".input").parent().data("target"); var id = messages.closest(".window").find(".input").parent().data("target");