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

XOOPS快速模組開發

6-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
因此，要修改單一投稿主題的畫面，就是去修改 op_submission_show.tpl 樣板檔， Submission::show()會負責傳地方相關的變數以及 JS 或 CSS 給該樣板使用。
VSCode中，Ctrl+P，貼上檔名，可以快速開啟，不用找半天。

單一投稿主題畫面原本的基本架構：

<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>

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

<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>

標題套用兩個樣式，一個是 my（在 css/module.css 中設定），一個是 text-center（BootStrap用法）

需要修改 .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);
}

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

<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>

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

<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>

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

<{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}>

justify-content-center 使用 flex 將 .col-* 的內容水平置中排列，可參考這裡
fs-5 將文字設為5級大小（數字越大字越小，1~6，可參考這裡）
<{'、'|implode:$info.grade}> 的用法是在Smarty中使用PHP函數的用法，implode() 是將陣列，用指定的字元串接起來，原本在PHP應該是這樣：
```
implode('、', $info['grade']);
```
到了Smarty，需要將第一個參數，放到最左邊，接著用 | 來接著函數名稱，若還有第二個、第三個參數，依序用 : 隔開即可
```
<{'、'|implode:$info.grade}>
```

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

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

我們順便修改一下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;
}

將下方的 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>