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