1
0
mirror of https://github.com/wbbaddons/Tims-Chat.git synced 2024-12-22 21:40:08 +00:00

Made sidebar collapseable

This commit is contained in:
max-m 2011-12-15 21:45:37 +01:00
parent bb1fd6e82c
commit 9949a0de89

View File

@ -24,13 +24,6 @@
width: 190px; width: 190px;
} }
#chatRoomContent:after {
clear: both;
height: 0;
content: "";
display: block;
}
aside h2 { aside h2 {
margin: auto; margin: auto;
text-align: center; text-align: center;
@ -67,7 +60,15 @@
margin-top: 15px; margin-top: 15px;
white-space: nowrap; white-space: nowrap;
margin-top: 10px; margin-top: 10px;
/* Fix to align chatInput in center */
text-align: center;
} }
#chatInput {
background-position: right center;
background-repeat: no-repeat;
}
#chatOptions { #chatOptions {
display: inline-block; display: inline-block;
} }
@ -138,88 +139,45 @@
</head> </head>
<body id="tpl{$templateName|ucfirst}"> <body id="tpl{$templateName|ucfirst}">
<a id="top"></a> {capture assign='sidebar'}{/capture}
<!-- HEADER --> {capture assign='header'}{include file='header' sandbox=false}{/capture}
<header id="pageHeader" class="pageHeader"> {assign var='header' value='class="main"'|str_replace:'class="main right"':$header}
<div> {assign var='header' value='<!-- CONTENT -->'|str_replace:$sidebar:$header}
{hascontent} {assign var='header' value='<section id="content" class="content">'|str_replace:$sidebar:$header}
<!-- top menu --> {@$header}
<nav id="topMenu" class="topMenu"> <aside class="sidebar">
<div> <div id="sidebar">
<ul> <button title="{lang}wcf.chat.title{/lang}" value="{link controller="Chat"}{/link}">{lang}wcf.chat.title{/lang}</button>
{content}{event name='topMenu'}{/content} <button title="{lang}wcf.chat.protocol{/lang}" value="{link controller="Chat" action="Log"}{/link}">{lang}wcf.chat.protocol{/lang}</button>
<h2>{lang}wcf.chat.users{/lang}</h2>
<ul id="chatUserList">
{section name=user start=1 loop=11}
<li id="user-{$user}" class="chatUser">
<span class="bgFix"><a class="chatUserLink" href="javascript:;">User {$user}</a></span>
<ul class="chatUserMenu">
<li>
<a href="javascript:;">Query</a>
<a href="javascript:;">Kick</a>
<a href="javascript:;">Ban</a>
<a href="{link controller="User" id=$user}{/link}">Profile</a>
</li>
</ul> </ul>
</div> </li>
</nav> {/section}
<!-- /top menu --> </ul>
{/hascontent} <h2>{lang}wcf.chat.rooms{/lang}</h2>
<nav class="sidebarMenu">
<!-- logo -->
<div id="logo" class="logo">
<!-- clickable area -->
<a href="{link controller='Index'}{/link}">
<!-- *** insert header logo here -->
</a>
<!-- /clickable area -->
<!-- search area -->
{event name='searchArea'}
<!-- /search area -->
</div>
<!-- /logo -->
<!-- main menu -->
{include file='mainMenu'}
<!-- /main menu -->
<!-- header navigation -->
<nav class="headerNavigation">
<div> <div>
<ul> <ul>
<li id="toBottomLink" class="toBottomLink"><a href="#bottom" title="{lang}wcf.global.scrollDown{/lang}" class="balloonTooltip"><img src="{icon size='S'}toBottom{/icon}" alt="" /> <span class="invisible">{lang}wcf.global.scrollDown{/lang}</span></a></li> {foreach from=$rooms item='roomListRoom'}
{event name='headerNavigation'} <li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
<a href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom}</a>
</li>
{/foreach}
</ul> </ul>
</div> </div>
</nav> </nav>
<!-- /header navigation -->
</div> </div>
</header>
<!-- /HEADER -->
<!-- MAIN -->
<div id="main" class="main right">
<div>
<aside class="sidebar">
<button title="{lang}wcf.chat.title{/lang}" value="{link controller="Chat"}{/link}">{lang}wcf.chat.title{/lang}</button>
<button title="{lang}wcf.chat.protocol{/lang}" value="{link controller="Chat" action="Log"}{/link}">{lang}wcf.chat.protocol{/lang}</button>
<h2>{lang}wcf.chat.users{/lang}</h2>
<ul id="chatUserList">
{section name=user start=1 loop=11}
<li id="user-{$user}" class="chatUser">
<span class="bgFix"><a class="chatUserLink" href="javascript:;">User {$user}</a></span>
<ul class="chatUserMenu">
<li>
<a href="javascript:;">Query</a>
<a href="javascript:;">Kick</a>
<a href="javascript:;">Ban</a>
<a href="{link controller="User" id=$user}{/link}">Profile</a>
</li>
</ul>
</li>
{/section}
</ul>
<h2>{lang}wcf.chat.rooms{/lang}</h2>
<nav class="sidebarMenu">
<div>
<ul>
{foreach from=$rooms item='roomListRoom'}
<li{if $roomListRoom->roomID == $room->roomID} class="activeMenuItem"{/if}>
<a href="{link controller='Chat' object=$roomListRoom}{/link}" class="chatRoom">{$roomListRoom}</a>
</li>
{/foreach}
</ul>
</div>
</nav>
</aside> </aside>
<!-- CONTENT --> <!-- CONTENT -->
<section id="content" class="content"> <section id="content" class="content">