# ttsb 201311修改

主要調整以下內容
1. 通用樣式調整
2. 列表頁 查詢表單 RWD調整
3. 列表頁 表格新增 分項執行計畫
4. 內容頁 新增 分項執行計畫

---
## 1.通用樣式調整
**(套用main-style-202311.css)**

主要調整了nav 及 將container寬度再放大一點
goToTop的html及css調整

內容容器的寬度調整
由原本的 `col-lg-8` 改為 `col-lg-9`
改為

GoToTop的新Html結構為以下
a href的連結及，img的src路徑需再確認下

<div id="GoTop" class="">
    <div class="img">
      <a href="https://www.ttsb.gov.tw/1133/1154/1155/1160/33168/post#" title="回頁首" role="button">
        <div class="go-to-top-btn">
          <img src="/Content/tsb/images/icons/GoTop-3.png" alt="回頁首">
        </div>
      </a>
    </div>
  </div>

---
## 2.列表頁 查詢表單 RWD調整
**(套用style-202311.css)**

移除固定長度的style內容，將原有查詢表格做RWD

## 3. 列表頁 表格新增 分項執行計畫
**(套用style-202311.css, sub-plan.js)**


### 管考狀態label
如果為列管中，則需要再計畫名稱處再多一個展期的label
於連結後直接加上`<span class="extend">展期</span>` 即可

### 表格底色
表格新增分項執行計畫欄位
因為原有表格底色是用偶數css上色的方式
但是因為多了收合功能，表格上色改為使用class去新增
tr上加上class `bg-color` 會將此行上底色

### 子計畫內容收合
資料會以`data-planid="1"` 作為判斷
在上一行收合箭頭部分，及下方子計畫列表都需要加上

### 子計畫超連結直接開啟特定分頁
子計畫列表中
會有一個超連結可以至項目內頁的 特定子計畫分頁，需再加上query，`subplantab=project-x`，後面帶的參數內容為該項目tab的id

下圖為項目內頁的子計畫分頁tab，可以看到tab此處的id為project-1

### 手機版子項目
該頁的手機版及電腦版表格是分開兩套html寫
在手機版時，無提供收合功能
直接將項目呈現出來即可

---
## 4. 內容頁 新增 分項執行計畫
**(套用style-202311.css, sub-plan-info.js)**

新增區塊 `div#excution-plan-section`

### 判斷連結 tab自動跳頁
子計畫分頁中
其中tab的id為最重要`project-1`,`project-2`，會與列表頁的超連結有關。
於sub-plan-info.js中，會抓取url中的subplantab query參數
然後自動跳至該分頁。

以連結`xxxxx.html?subplantab=project-2` 為例
則會跳至 tab id為project-2的分頁

### bootstrap tabs
此處分頁的寫法是使用bootstrap的分頁寫法
需注意button的`data-target`處，需要以selector的方式指定到tab的id

然後預設第一個分頁項目需要啟用
於第一個項目的nav-link加上以下class`active`
於第一個項目的分頁加上以下class`active`,`show`