time view 2

gamba!タイムライン ドラフト版完成

by Masahiro Morita

HTML

<link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.css">
<script src="http://semantic-ui.com/dist/semantic.js"></script>
<div class="ui left vertical thin red inverted visible sidebar menu overlay">
    <div class="header item">
        <div class="ui floating dropdown">
            <i class="user icon"></i> 森田昌宏 <i class="dropdown icon"></i>
            <div class="menu">
                <a href="#" class="item"><i class="user icon"></i>プロフィール</a>
                <a href="#" class="item"><i class="indent out icon"></i>日報テンプレート</a>
                <a href="#" class="item"><i class="alarm outline icon"></i>通知設定</a>
                <a href="#" class="item"><i class="share alternate icon"></i>外部サービス連携</a>
                <a href="#" class="item"><i class="sign out icon"></i>ログアウト</a>
            </div>
        </div>
    </div>
    <a href="#" class="active item"><span><i class="users icon"></i>グループ１</span></a>
    <a href="#" class="item"><span><i class="users icon"></i>グループ２</span></a>
    <a nref="#" class="item"><span><i class="users icon"></i>グループ３</span></a>
</div><!-- ui left vertical thin sidebar menu -->

<div class="ui right vertical very wide inverted sidebar overlay">
    <h3>検索結果</h3>
    <div class="ui segment">
        <div class="ui comments">
            <div class="comment"><a class="avatar">
                <img src="/images/avatar/small/joe.jpg"/></a>
                <div class="content">
                    <a class="author">森田昌宏</a>
                    <div class="metadata">
                        <div class="date">3日前</div>
                        <div class="meta"><i class="checkmark icon"></i>4人が開封</div>
                        <div class="meta"><i class="like icon"></i>3いいね！</div>
                        <div class="ui floating dropdown">
                            <i class="setting icon"></i>
                            <div class="menu">
                                <a href="#" class="item"><i class="edit...

CSS

.container { padding-left: 150px; max-width: 100%; }
.ui.comments {
    max-width: 100%;
}
.main.container {
    padding: 40px 10px 10px 155px;
}
.right.sidebar {
    padding: 50px 10px 20px 10px;
}
}

JavaScript

$('.dropdown').dropdown();
$('.sidebar').sidebar();
$('.tabular.menu .item').tab();
//$('.container').animate({ 'max-width': 800 }, 200, function(){$('.right.sidebar').sidebar('show');})