[分享] flash 提示訊息 — 顯示位置問題解決辦法(圖解)

我們在 Rails 101 以及 Job Listing 兩個專案開始就把「flash 提示訊息」給裝上了,然而這個訊息,在有了美美的 Landing Page 之後,看起來竟是如此不堪入目 —每當登入、登出等提示訊息出現,便搞出一個大空隙。這篇分享文提供一個簡單的解決辦法供有需要的同學參考,如果覺得這篇教程有用、想給予鼓勵支持,歡迎至:我的作品頁面 點下「支持TA」。

  • 修改前的提示訊息,硬是插在導航欄跟首頁圖中間:

為什麼只要提示訊息出現就會有這個縫隙?讓我們回想一下,我們當初是把 flash 安插在哪。

  • app/views/layouts/application.html.erb
<!-- 前面代碼省略... -->

<body>
    <div class="container-fluid">
        <!-- 導航欄 -->
        <div class="row">
            <%= render "common/navbar" %>
        </div>

        <!-- flash 提示訊息 -->
        <%= render "common/flashes" %>

        <!-- 載入網頁內容 -->
        <%= yield %>
    </div>
  
        <!-- footer -->
    <%= render "common/footer" %>
</body>

<!-- 後面代碼省略... -->

是的,在設定網站的通用版面時,我們把「flash 提示訊息」放在「導航欄」跟「網頁內容」之間,也因此,只要一有提示訊息,自然從兩者中間冒出來。

如果你也看這個空隙不順眼,可以照著下方步驟作作看。(以下示範使用全棧營「Rails 實戰:招聘網站」的章節:「13 - 招聘网站 PK 魔改大赛」。)

Step 1. 解決礙眼的空隙

刪除 application.html.erb 中的 <%= render "common/flashes" %>

  • app/views/layouts/application.html.erb
<body>
    <div class="container-fluid">
        <!-- 導航欄 -->
        <div class="row">
            <%= render "common/navbar" %>
        </div>
                
        <!-- 載入網頁內容 -->
        <%= yield %>
    </div>
            
        <!-- footer -->
    <%= render "common/footer" %>
</body>

接著,我們改把 <%= render "common/flashes" %> 改放在首頁(welcome/index.html.erb)試試看。

  • app/views/welcome/index.html.erb
<div class="jumbotron">
    <!-- 提示訊息放這 -->
    <%= render "common/flashes" %>
      
    <!-- Landing Page 首頁圖的標題、宣傳語、按鈕 -->
    <h1 class="title">18K Offer</h1>
    <p class="slogan">18K Offer 是一个提供18K薪水工作机会的求职网站。
    <br>
    我们希望藉由这个网站,能让大家找到且应征上高薪且优质的工作。
    <br>
    凭借自己的努力和天份也会变 Winner
    </p>
    <p class="lead"><a class="btn btn-lg btn-danger" href="/jobs">马上应征</a></p>
</div>

存檔後刷新。

位置雖然不太理想,但至少我們把空隙給解決了!現在 flash 提示訊息會蓋在首頁圖上,而不是把圖擠開。

Step 2. 移動 flash 提示訊息的位置

我們可以幫提示訊息新添一個屬性(class)來移動提示訊息的位置。具體作法是,先在剛剛的 index.html.erb 中,用 class 把 <%= render "common/flashes" %> 包起來。

  • app/views/welcome/index.html.erb
<div class="customed-flash" >
    <%= render "common/flashes" %>
</div>

最後,只要在 application.scss 檔中設定 margin。把 margin-top 設為負值(例如範例代碼設 -50px),便能將訊息向上移。

  • app/assets/stylesheets/application.scss
.customed-flash {
  margin: -50px 0px 21px 0px; // 會將 flash 訊息往上移。
}

刷新頁面,看看結果如何。

不但沒有白白一大塊空隙,訊息也貼著 navbar 顯示。完成!完成。

當然,目前這樣還有非常大的優化空間,同學可以再透過調整 class、修改 Bootstrap 樣式(例如到 吉米瑞杏 介紹的 Bootwatch 下載簡單的 Bootstrap 模板),讓你的提示訊息變得更好看!

  • 運用在作品中便可以達到以下效果:

本次大賽我的網站主題是:Quick Hunt。作品持續優化中,歡迎投票或留言給予反饋。

目前進行中 & 過往 Logdown 分享:

Comments

comments powered by Disqus