Added temp menu
This commit is contained in:
Mattias Erming
parent
e255473c6f
commit
ececa3d55c
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
Loading…
Reference in New Issue