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 {
border-right: 4px solid #bdc3c7;
position: absolute;
overflow-y: auto;
height: 100%;
width: 220px;
}
@ -74,8 +75,61 @@ button::-moz-focus-inner {
padding: 6px 12px;
text-transform: uppercase;
}
#sidebar button {
border-radius: 2px;
#logo {
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;
display: block;
font-size: 15px;
@ -88,22 +142,14 @@ button::-moz-focus-inner {
white-space: nowrap;
width: 100%;
}
#sidebar button:hover {
#networks button:hover {
background-color: #f1f2f3;
}
#sidebar button.active {
#networks button.active {
background-color: #ebedef;
color: #526476;
}
#logo {
margin: 30px 0 30px;
text-align: center;
}
#menu,
#networks {
margin: 20px;
}
#networks .network + .network {
#networks .network {
border-top: 2px solid #ebedef;
margin-top: 14px;
padding-top: 14px;
@ -124,17 +170,6 @@ button::-moz-focus-inner {
#networks .badge:empty {
display: none;
}
#footer {
bottom: 0;
position: absolute;
width: 100%;
}
#footer .btn {
background: #fff;
display: block;
text-align: center;
margin: 20px;
}
#main {
position: absolute;
height: 100%;
@ -258,7 +293,7 @@ button::-moz-focus-inner {
}
#chat .time {
color: #dee0e2;
/*padding: 2px 10px;*/
padding: 2px 10px;
}
#chat .users {
background: #fff;
@ -289,3 +324,10 @@ button::-moz-focus-inner {
#chat .count + li .user {
padding-top: 8px
}
@media (max-height: 480px) {
#logo {
display: block !important;
margin-top: -135px;
}
}

View file

@ -17,24 +17,29 @@
<aside id="sidebar">
<div id="logo">
<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>
</div>
<div id="menu">
<h2>Shout Client</h2>
<button data-target="#settings">Settings</button>
<button class="btn">
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 id="networks"></div>
<footer id="footer">
<a href="<%= homepage %>" target="_blank" class="btn">
<strong><%= name %></strong>
<%= version %>
</a>
</footer>
</aside>
<div id="main">
<div id="windows">
<div id="settings" class="window"></div>
<div id="sign-out" class="window"></div>
</div>
<div id="chat"></div>
</div>

View file

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