6-1 調整顯示單一投稿主題的界面

1. 顯示單一資料的動作是 show，會產生以下規則：
   1. 觀看單一投稿主題，存入的資料表是 submission，流程的 $op 值是 submission_show，呼叫的物件方法就是 Submission::show()，對應樣板則是 op_submission_show.tpl
   2. 觀看學生的投稿內容，存入的資料表是 submission_data，流程的 $op 值是 submission_data_show，呼叫的物件方法就是 Submission_data::show()，對應樣板則是 op_submission_data_show.tpl
2. 因此，要修改單一投稿主題的畫面，就是去修改 op_submission_show.tpl 樣板檔， Submission::show()會負責傳地方相關的變數以及 JS 或 CSS 給該樣板使用。
3. VSCode中，Ctrl+P，貼上檔名，可以快速開啟，不用找半天。
4. 單一投稿主題畫面原本的基本架構：

   <h1 class="my text-center">標題</h1>
   
   <div class="text-center">
       根據身份顯示各種功能按鈕
   </div>
   
   <div class="text-center">
       顯示建立者、建立時間等相關資訊
   </div>
   
   <{if $content|default:false}>
       <div class="my-border">
           投稿說明
       </div>
   <{/if}>
   
   <div class="vtb mt-3">
   顯示內容
   </div>
   

5. 一般來說，這個樣板通常會大改。我們一一的來修改之，先修改標題部份。

   <h1 class="my text-center">
       <a href="setup.php" class="text-black-50" data-bs-toggle="tooltip" title="回投稿管理列表">
       <i class="fa-solid fa-turn-up fa-rotate-270"></i>
       </a>
       <{$title}>
   </h1>

   1. 標題套用兩個樣式，一個是 my（在 css/module.css 中設定），一個是 text-center（BootStrap用法）
   2. 需要修改 .my 樣式的話，可以修改 css/module.css 此部份（改成不指定字型及位置）：

      h1.my,
      h2.my,
      h1>span.my,
      h2>span.my {
        padding: 6px;
        font-weight: bold;
        color: rgb(33, 51, 51);
      }
      
      h3.my,
      h4.my,
      h5.my,
      h3>span.my,
      h4>span.my,
      h5>span.my {
        padding: 6px;
        font-weight: normal;
        color: rgb(92, 41, 56);
      }

6. 接著修改顯示各種功能按鈕的工具列部份，目前是只允許有管理權限者才能看到，我們可以調整按鈕文字部份

   <div class="text-center">
       <{if $smarty.session.submission_adm|default:false}>
           <a href="javascript:submission_destroy_func(<{$id}>);" class="btn btn-sm btn-danger" data-bs-toggle="tooltip" title="刪除投稿主題"><i class="fa fa-times" aria-hidden="true"></i></a>
           <a href="<{$xoops_url}>/modules/submission/setup.php?op=submission_edit&id=<{$id}>" class="btn btn-sm btn-warning" data-bs-toggle="tooltip" title="修改投稿主題"><i class="fa fa-pencil" aria-hidden="true"></i> 修改投稿主題</a>
           <a href="<{$xoops_url}>/modules/submission/setup.php?op=submission_create" class="btn btn-sm btn-primary" data-bs-toggle="tooltip" title="建立投稿主題"><i class="fa fa-plus" aria-hidden="true"></i> 建立投稿主題</a>
       <{/if}>
   </div>

7. 如果有發布者和發布日期等欄位，就會多一個頁面的發布資訊，這部份也可以刪除或修改（順便移到工具列上方）

   <div class="text-center">
       <div class="alert alert-warning d-inline-block text-center py-1 px-4 my-3 mx-auto">
           <i class="fa fa-user"></i> <{$uid_name}> 發布於 <{$create_time}>
       </div>
   </div>

8. 在頁面的發布資訊的下方，加入只有管理者可以看到的額外設定，圖示可到此搜尋

   <{if $smarty.session.submission_adm|default:false}>
       <div class="row justify-content-center fs-5">
           <div class="col-lg-auto"><i class="fa-solid fa-trophy"></i> 獎項：<{if $info.award|default:''}><{$info.award}><{else}>無<{/if}></div>
           <div class="col-lg-auto"><i class="fa-solid fa-lock"></i> 密碼：<{if $info.pass_code|default:''}><{$info.pass_code}><{else}>無<{/if}></div>
           <div class="col-lg-auto"><i class="fa-solid fa-children"></i> 年級：<{if $info.grade|default:''}><{'、'|implode:$info.grade}><{else}>無<{/if}></div>
       </div>
   <{/if}>

   1. justify-content-center 使用 flex 將 .col-* 的內容水平置中排列，可參考這裡
   2. fs-5 將文字設為5級大小（數字越大字越小，1~6，可參考這裡）
   3. <{'、'|implode:$info.grade}> 的用法是在Smarty中使用PHP函數的用法，implode() 是將陣列，用指定的字元串接起來，原本在PHP應該是這樣：

      implode('、', $info['grade']);

   4. 到了Smarty，需要將第一個參數，放到最左邊，接著用 | 來接著函數名稱，若還有第二個、第三個參數，依序用 : 隔開即可

      <{'、'|implode:$info.grade}>

9. 最後修改說明欄，也可以移到工具列上方：

   <div class="my-border">
       <{$content|default:''}>
       <{$files}>
   </div>
   

10. 我們順便修改一下css/module.css 中 .my-border 的設定，我們將寬度設在60%，加個陰影，底色改為白色：

    .my-border {
      padding: 12px 20px;
      border: 1px solid rgb(225, 225, 225);
      border-radius: 8px;
      background: rgb(255, 255, 255);
      box-shadow: 0px 0px 6px 1px rgba(37, 37, 37, 0.2);
      margin: 10px auto;
    }

11. 將下方的 vtb 表格刪除（投稿起訖日），改為條列式，並放到標題下方：

    <div class="text-center fs-5">
        <i class="fa-solid fa-calendar-check"></i>
        <{$smarty.const._MD_SUBMISSION_START}>：<{$start}>
    </div>
    
    <div class="text-center fs-5">
        <i class="fa-solid fa-calendar-xmark"></i>
        <{$smarty.const._MD_SUBMISSION_END}>：<{$end}>
    </div>

     

12. 看起來就像這樣：