本記事はpiyopiyo.exポータルチュートリアルの３章となります。

本章の目的

本章ではコマンドで生成したMessages一覧ページを修正し、tailwindcssを使ってデザインを変更します。

Messages一覧を修正する

message_live/index.html.heexファイルを修正し、
不要なヘッダーとデフォルトで生成されたメッセージ表以下のコンテンツを一旦削除します。

lib/phoenix_app_web/live/message_live/index.html.heex

<h1>Listing Messages</h1> <-- delete here

lib/phoenix_app_web/live/message_live/index.html.heex

～中略～
↓ delete from here
<table>
  <thead>
    <tr>
      <th>Display name</th>
      <th>Message</th>
      <th>Deleted at</th>

      <th></th>
    </tr>
  </thead>
  <tbody id="messages">
    <%= for message <- @messages do %>
      ～中略～
    <% end %>
  </tbody>
</table>

<span><%= live_patch "New Message", to: Routes.message_index_path(@socket, :new) %></span>

内容が削除された状態

以下の修正済のコードを貼り付けます。
扱う情報(messages表とその項目message.display_name,message.message)は同じですが、スタイルの指定(class="w-full mt-4 mb-6 border-collapse border border-slate-400"など)がtilewindcssの記法になっていることが確認できます。

lib/phoenix_app_web/live/message_live/index.html.heex

～前略～
<!-- add new contents from here -->
<div class="bg-white rounded-md pr-8 pl-8 pt-4 pb-8 mb-6">
  <table class="w-full mt-4 mb-6 border-collapse border border-slate-400">
    <thead>
      <tr>
        <th class="border border-slate-300 bg-slate-100 p-1 py-2">お名前</th>
        <th class="border border-slate-300 bg-slate-100 p-1 py-2">感想</th>
      </tr>
    </thead>
    <tbody id="messages">
      <%= for message <- @messages do %>
        <tr id={"message-#{message.id}"}>
          <td class="border border-slate-300 px-1 py-2"><%= message.display_name %></td>
          <td class="border border-slate-300 px-1 py-2"><%= message.message %></td>
        </tr>
      <% end %>
    </tbody>
  </table>

  <span><%= live_patch "感想を投稿する", to: Routes.message_index_path(@socket, :new), class: ["btn", "btn-success"] %></span>
  <span><a href="/all" class="btn btn-link">全部の感想を見る</a></span>
</div>

<div class="bg-white rounded-md bg-yellow-100 pr-8 pl-8 pt-4 pb-8 mb-6">
  <h2 class="text-2xl font-bold text-slate-600 mb-4">About "LiveView JP"</h2>
  <div class="mb-4">
    LiveView JPは、プログラミング言語Elixirで記述されたWeb開発フレームワークPhoenixのサーバーサイドレンダリング機能LiveViewを用いた開発、技術の情報交換コミュニティです。<br />
  </div>
  <div>
    LiveView JPは毎月1回の頻度で勉強会を開催しています<br />
    <a class="text-blue-600 visited:text-purple-600 underline" href="https://liveviewjp.connpass.com/">connpass</a>からぜひご参加ください。
  </div>
</div>

Phoenix標準のCSS(assets/css/app.css)には一切変更を加えていませんが、コンテンツ部分のデザインが変更されたことが確認できます。

トップページのルーティングを変更する

Phoenixのルーティングを修正し、トップページ(/直下でアクセスした場合)にMessagesの一覧が表示されるようにします。

lib/phoenix_app_web/router.ex

～中略～
  scope "/", PhoenixAppWeb do
    pipe_through :browser

    # modify root endpoint
    # get "/", PageController, :index
    live "/", MessageLive.Index, :index
～中略～

ルートデザインの修正

サイト全体の外枠に相当するroot.htmlを修正して全体のデザインを変更します。
root.html.heexを以下のコードに置き換えます。

lib/phoenix_app_web/templates/layout/root.html.heex

<!DOCTYPE html>
<html lang="en" class="bg-yellow-200">
  <head prefix="og: http://ogp.me/ns#">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <%= csrf_meta_tag() %>
    <%= live_title_tag assigns[:page_title] || "LiveView JPポータル" %>
    <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
    <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
    <meta name="og:description" content="LiveView JPポータルサイトです。LiveView JPはElixir/Phoniex/LiveViewの情報交換コミュニティです。">
    <meta name="og:type" content="website">
    <meta name="og:title" content="LiveView JPポータル">
    <meta name="twitter:card" content="summary">
    <meta name="keywords" lang="ja" content="LiveView JP">
    <meta name="description" lang="ja" content="LiveView JPポータルサイトです。LiveView JPはElixir/Phoniex/LiveViewの情報交換コミュニティです。" >
  </head>
  <body>
    <header>
      <section>
        <nav class="container">
          <ul>
            <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
              <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
              <li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
            <% end %>
          </ul>
        </nav>
        <div class="container mx-auto bg-white rounded-md mt-6 mb-6 pr-6 pl-6 w-4/5">
          <a href="/">
            <img src="/images/LiveViewJP_logo.png" alt="LiveViewJP_logo.ex logo" width="450px" class="mx-auto" />
          </a>
       </div>
      </section>
    </header>
    <div class="mx-auto container w-4/5">
      <%= @inner_content %>
    </div>
  </body>
</html>

全体の見た目が大分近づいてきたのが確認できます。

画面上部の大事なロゴが欠けているのでassetsに追加します。
Replitの場合、Filesのツリーへ画像ファイルをドラッグ＆ドロップすることで直接ファイルをアップロードできます。

ロゴが反映されたことが確認できます。

はい、元になったpiyopiyo.exポータルのポップなデザインと、LiveView JPのシックなロゴデザインが絶望的にマッチしていないことが確認いただけます。

tailwindcssを使ったスタイルの変更

tailwindcssのクラス指定を変更し、簡単なスタイルの変更を実施します。

まず雑コラみたいになっているロゴ背景をロゴに合わせて黒に変更します。

divタグに指定されたclass記述のうち、bg-whiteをbg-blackに変更します。

lib/phoenix_app_web/templates/layout/root.html.heex

～中略～
        <!-- modify here bg-white => bg-black-->
        <div class="container mx-auto bg-black rounded-md mt-6 mb-6 pr-6 pl-6 w-4/5">
          <a href="/">
            <img src="/images/LiveViewJP_logo.png" alt="LiveViewJP_logo.ex logo" width="450px" class="mx-auto" />
          </a>
       </div>
～中略～

背景が同じ色になったことで雑コラ感が下がりました。

ただし背景色とのギャップが大きいので次は全体の背景色を変更します。

lib/phoenix_app_web/templates/layout/root.html.heex

<!DOCTYPE html>
<!-- modify here bg-yellow-200 => bg-black-200 -->
<html lang="en" class="bg-black-200">
～中略～

全体がシックな色合いに変更されました。

続けて、メッセージ表の背景をグレー、文字を白抜きに変更

#lib/phoenix_app_web/live/message_live/index.html.heex

～中略～
<!-- add new contents from here -->
<!-- modify here bg-white => bg-gray-700 -->
<div class="bg-gray-700 rounded-md pr-8 pl-8 pt-4 pb-8 mb-6">
<!-- modify here border-white  text-white -->
  <table class="w-full mt-4 mb-6 border-collapse border border-white text-white">
    <thead>
      <tr>
        <th class="border bg-slate-100 p-1 py-2">お名前</th>
        <th class="border bg-slate-100 p-1 py-2">感想</th>
      </tr>
    </thead>
    <tbody id="messages">
      <%= for message <- @messages do %>
        <tr id={"message-#{message.id}"}>
          <td class="border px-2 py-2 "><%= message.display_name %></td>
          <td class="border px-2 py-2 "><%= message.message %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
～中略～

「全部の感想を見る」リンクの色をやや薄い青に変更

#lib/phoenix_app_web/live/message_live/index.html.heex

～中略～
<span><a href="/all" class="btn btn-link text-blue-300">全部の感想を見る</a></span>
～中略～

「About "LiveView JP"」のセクションを薄いグレーに変更

#lib/phoenix_app_web/live/message_live/index.html.heex

～中略～
<!-- modify here bg-yellow-100 => bg-gray-100-->
<div class="bg-white rounded-md bg-gray-100 pr-8 pl-8 pt-4 pb-8 mb-6">
  <h2 class="text-2xl font-bold text-slate-600 mb-4">About "LiveView JP"</h2>
  <div class="mb-4">
    LiveView JPは、プログラミング言語Elixirで記述されたWeb開発フレームワークPhoenixのサーバーサイドレンダリング機能LiveViewを用いた開発、技術の情報交換コミュニティです。<br />
  </div>
  <div>
    LiveView JPは毎月1回の頻度で勉強会を開催しています<br />
    <a class="text-blue-600 visited:text-purple-600 underline" href="https://liveviewjp.connpass.com/">connpass</a>からぜひご参加ください。
  </div>
</div>
～中略～

最終的にダークUIみたいな配色になりました。

piyopiyo.exポータルチュートリアル３章～トップページをイイカンジにする～

本章の目的

Messages一覧を修正する

トップページのルーティングを変更する

ルートデザインの修正

tailwindcssを使ったスタイルの変更

次の章

関連情報

piyopiyo.exポータルチュートリアル ３章～トップページをイイカンジにする～

本章の目的

Messages一覧を修正する

トップページのルーティングを変更する

ルートデザインの修正

tailwindcssを使ったスタイルの変更

次の章

関連情報

piyopiyo.exポータルチュートリアル３章～トップページをイイカンジにする～