読者です 読者をやめる 読者になる 読者になる

【css】photonでチャットui風の画面を作る方法メモ

css

はじめに

jsの勉強でreact + reduxとelectronで簡単なチャットアプリを作ってみた。
その際、いつも困るuiの作成を最後にやったのだがなかなか良いcssフレームワークを発見

Photon
こちらのもので非常にシンプルだけど、macのデスクトップアプリみたいのが簡単につくれてしまう
cssのコード自体も小さいのでカスタマイズもなんとなくしやすい

作ったチャット画面

f:id:yoppy0066:20160729004706p:plain
こんな感じのシンプルなものだけど

<!DOCTYPE html>
<html>
  <head>
    <title>chat</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/photon.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <style>
    .message-box {
      background-color: #FFF;
      position: fixed;
      bottom: 0;
      width: 100%;
      min-height: 50px;
    }
    .message-box form input {
      width:50%;
      height:45px;
    }
    .user-box * {
      white-space: normal;
    }
    .block {
      margin-left:5px;
      padding: 20px;
      color: #fff;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      background: #FF9900;
    }
    </style>
  </head>
  <body>
    <div class="window">
      <header class="toolbar toolbar-header">
        <div class="toolbar-actions">
          <button class="btn btn-default pull-right">
          Logout
          </button>
        </div>
      </header>
      <div class="window-content">

        <div class="pane-group pane-chat">
          <div class="pane pane-sm sidebar">
            <ul class="list-group">
              <li class="list-group-header">
                <strong>入室者</strong>
              </li>
              <li class="list-group-item user-box">
                <div class="media-body">
                  <button class="btn btn-mini btn-default">山田</button>
                  <button class="btn btn-mini btn-default">田中</button>
                  <button class="btn btn-mini btn-default">山崎</button>
                </div>
              </li>
              <li class="list-group-header">
                <strong>履歴</strong>
              </li>
              <li class="list-group-item">
                <div class="media-body">
                 山田<span class="icon icon-record" style="color:#34c84a;"></span>
                </div>
              </li>
              <li class="list-group-item">
                <div class="media-body">
                  田中
                </div>
              </li>
              <li class="list-group-item">
                <div class="media-body">
                  山崎
                </div>
              </li>
              <li class="list-group-item">
                <strong>チャットルーム</strong>
              </li>
              <li class="list-group-item">
                <nav class="nav-group">
                  <h5 class="nav-group-title">雑談</h5>
                  <span class="nav-group-item">ルーム1</span>
                  <span class="nav-group-item">ルーム2</span>
                  <span class="nav-group-item">ルーム3</span>
                </nav>
                <nav class="nav-group">
                  <h5 class="nav-group-title">趣味</h5>
                  <span class="nav-group-item">ルーム1</span>
                  <span class="nav-group-item">ルーム2</span>
                  <span class="nav-group-item">ルーム3</span>
                </nav>
              </li>
            </ul>
          </div>
          <div class="pane">
            <table class="table">
              <tbody>
                <tr><td>おはようございます。こんにちは。こんばんわ。さようなら</td></tr>
                <tr><td style="white-space:pre-wrap;">おはようございます。こんにちは。こんばんわ。さようならおはようございます。こんにちは。こんばんわ。さようならお                <tr><td>おはようございます。こんにちは。こんばんわ。さようなら</td></tr>
                <tr><td>おはようございます。こんにちは。こんばんわ。さようなら</td></tr>

                 ・・・

              </tbody>
            </table>
            <div class="message-box">
              <form>
                <input class="form-control" type="message" />
                <button class="btn btn-large btn-primary">送信</button>
              </form>
            </div>
          </div>
        </div>

      </div>
    </div>
  </body>
</html>

ほとんどマニュアルにのってたものを組み合わせただけでした

以上です