開站系統-表格

Create issue
Issue #92 open
Tungwen Wang created an issue

生涯發展中心使用表格的方式:http://web-ch.scu.edu.tw/career/web_page/2598

他們習慣用表格來做圖文對齊,因此反應目前預設的表格底色及框線會造成識讀上的困擾。

於是希望能自行調整底色及是否顯示格線(有長是過自行修改html,但是無效果)。

除了生涯發展中心,之前也有其他單位反應覺得表格底色很奇怪想修改、或是弄成沒有底色。但各單位需求不一,若是統一改成無色無框,或許又會有單位打來詢問是否可以改回有底色的樣子。所以我是建議增加修改底色框線的功能,讓少數有需求的單位自己修改。

Comments (28)

  1. Tungwen Wang reporter

    這邊我有試著修改了,在編輯器裡有看到效果,但存檔後前台卻沒有改變。也確認code中style有被更新了。

    ps. 注意到你上面的圖,編輯器是中文介面,管理後台的可以設定中文介面嗎?(之前有管理者詢問)

  2. johnny chuang repo owner

    可以給我你測試頁嗎? 我一時不知要找哪裡做測試

    沒有注意到權限設定, 我先把你帳號指定一下 , 你在右上就可以看到新的選項, 裡面就可以設定語系了, 你看看要不要給全部User這樣子選項.

    Screenshot_20161031_074442.png

  3. Tungwen Wang reporter
    • changed status to open

    之前沒有看其他網站,現在發現是變成預設都無框無底色。這樣真正需要表格的單位會變成完全看不到格線......

    理想的狀態:預設有框有底,和之前一樣即可。

    現在新增的功能是各單位可自行修改框線底色,但不能影響到原有的呈現方式,像生涯發展中心有特殊需求就可以自己去把框線跟底色移除。但我們現在直接把預設改成無框無底,變成其他單位在配合生涯發展中心,原本正常的表格都只剩文字,沒有特殊需求的人要一一改回來,會造成使用者困擾。

    這邊再麻煩您們設定預設值了,謝謝。

  4. johnny chuang repo owner

    本來的預設值是含有這些設定, 所以要像無框時, 需要設定如下, 這部份只限在圖文編輯時才有用, 請參考http://web-ch.scu.edu.tw/test/web_page/5740

    <table class="notable_border">
    
  5. Tungwen Wang reporter

    這部份不太穩定耶。正好今天網路組也回報一個情形。

    網路組問答集:http://web-ch.scu.edu.tw/network/faq/5900?page=1

    有表格的可見「本校使用者信箱撐爆處理方式」或「如何防堵廣告郵件」。

    圖文內容中有自己設定底色及框線,請問前台是否因為另有CSS,所以都顯示為預設值?(淺色框線+黃底)

  6. johnny chuang repo owner

    大部份非圖文類的元件顯示方式都是由版型決定, 這些都是公用設定. 可能要由UI來決定怎麼改顏色, 而且會是有用這個版型都會相同顯示方式

  7. Tungwen Wang reporter

    瞭解。

    這邊正好也討論一個問題,目前因為前台UI設計帶出CSS的關係,在編輯器的部份很容易有「前後台視覺感不同的問題」,我想這應該是目前使用者常反應編輯器不好用的主要原因,如果在編輯器可以直接看到編好的樣子,就算很多設計不開放自訂,使用者也不會很強烈的感覺到「編輯器不好用」或是「明明我弄好了,但是前台卻沒有顯示,是不是有bug」。

    雖然之前討論過預覽的功能,我還是想再問看看,有沒有可能這種自訂功能較多的編輯器也能有和前台呈現方式一樣的預覽畫面?編輯的同時可以呈現編輯結果在前台的樣子,落差感才不會那麼大。(不然一直修改UI也不是辦法)

    目前我想到可以的做法是:

    • 編輯器(不只圖文類)中直接顯示結果,比如下面範例圖中,使用者無法做出藍色的表格,因為UI就是黃底。如果該元件前台CSS有開放修改底色,編輯器中才會出現藍色。
    • 仿造成員職掌,有分割的預覽畫面,預覽跟前台要一致。

    下面附上網路組給我的範例,使用者的感覺是編輯起來很錯愕,改半天結果前台完全不顯示。如果事先知道UI有限制,就不會在後台改那麼久~

    <後台編輯畫面>

    161125網路組範例-1.jpg

    <前台成果>

    161125網路組範例-2.jpg

  8. johnny chuang repo owner

    哦. 我了解你的意思了, 你希望在所有的 元件內的HTML編輯部份能和一般圖文編輯是能帶出相同的效果. 像下面的部份有HTML編輯區塊. 就要能把User所做的設定也帶出來.

    Screenshot_20161125_081239.png

    這部份是可以的, 我以為之前你是指 Title 黃色部份, 這裡是由版型來處理. 所以我會把全部元件內有用HTML, 把他做成可以讓User 設定值, 預設值會是browser本來的預設值. 這樣子User 在做編輯時就不會被版型預設值所干擾了

  9. Tungwen Wang reporter

    現在呈現變成這樣:

    藍色底有出來,但是紅色沒有,好像呈現一半?

    161129表格CSS.PNG

    另外,有使用者提出疑問:在後台編輯器加入超連結後,有超連結的文字會變成藍色並有底線,但前台顯示會是藍色卻無底線。雖然不太影響操作,但也同樣反應前後台編輯樣貌不同的問題。

  10. johnny chuang repo owner

    上面圖是我在測試二種方式 加上顏色的設定. 這部份還在和UI溝通是否要移除關於Table的通用設定.

  11. johnny chuang repo owner

    關於表格顏色的設定, 請 儘量使用 "表格 > 儲存格 > 儲存格屬性 > 進階 > 背景顏色" , 不要用快速鍵裡的顏色設定, 那個是主要給文字的用, 若用在表格上會無法顯示. 這部份和CSS有所衝突. 如 http://163.14.19.105/backend/morelink/scuweb/webfaq/update/506 , 設定方式

  12. Tungwen Wang reporter

    之前在測試時是用「表格 > 表格屬性 > 進階」去設定,現在依據你上面說的改成儲存格設定,兩種仍然都沒有效果。且從儲存格改會變成要一格一格改、而且是改那一格不是整個表格,滿怪的。

    測試頁我開了一個新的從無到有測試:http://web-ch.scu.edu.tw/test/web_page/5859

  13. Jimmy Zhan

    因為引入了reset.css 把邊框隱藏掉 拿掉就好了 然後邊框屬性 因為預設的樣式是寫在儲存格 所以改表格屬性覆寫不掉 可以把要改的儲存格全選一次改

  14. Tungwen Wang reporter

    目前user測試邊框及儲存格底色都OK!謝謝!

    是否可再做一些讓user更容易使用的調整:

    1. 將無效的選項隱藏,例如「表格 > 表格屬性 > 進階」這些設定會沒有效果,那就隱藏,避免user觀感上覺得系統有問題。

    2. 是否可以在儲存格選項自訂框線及底色加入選色視窗,user不用另外查色碼。跟選字顏色一樣游標過去跳出簡單視窗即可。

    20161223表格選色範例-1.PNG

  15. johnny chuang repo owner
    1. 將無效的選項隱藏(表格 > 表格屬性 > 進階) , 己經移除, 是否可以告知哪些是無用的

    2. 是否可以在儲存格選項自訂框線及底色加入選色視窗

    2 部份要做有困難性, 一是這是用plugin(https://www.tinymce.com)的設定, 設定裡並沒有能夠做到這麼細的選項. 二是若是改原始碼會花很多時間去解構(Javascript), 而且日後若做upgrade , 這部份就會被蓋掉. 等於日後會再重做一次,

  16. Tungwen Wang reporter

    瞭解,那選色視窗我再另外做說明~

    請問IE的顯示成果和chrome不同是為什麼呢?

  17. Log in to comment