弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 12:16 AM
Tue, Sep 21, 2021 4:45 PM
8
2
[UL][Unlight] 簡易角色篩選工具
包含等級、BAN角過濾，限制Cost區間跟色格(點星星可以換顏色)，還有簡單的排序功能。目前資料內還沒有放復活卡跟EP卡的部分。
-
第一次嘗試弄這種東西很多地方都很將就ry...基本上參考eliya-bot的版面設計
還有到處抄code來用
弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 12:19 AM
感覺花最多時間的是在css上，因為中途設計又臨時改來改去地所以非常之雜亂...
弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 12:21 AM
到最後已經放棄在考慮RWD排版了，所以這個千萬不要想在手機上用...
弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 12:22 AM
然後因為是直接用字串丟進innerHTML裡交給瀏覽去解析渲染，所以延遲應該非常重
Francis
@kadice
說
Fri, Sep 10, 2021 1:02 AM
字串直接渲染...感覺可以用Vue來做耶
波卡.H.AWS.Poka
@j100002ben
說
Fri, Sep 10, 2021 1:04 AM
Fri, Sep 10, 2021 1:05 AM
卡冊編輯目前是用 Vue 做的，有興趣可以看 HTML 產出的source
弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 1:08 AM
波卡.H.AWS.Poka : 居然 等下來看
波卡.H.AWS.Poka
@j100002ben
說
Fri, Sep 10, 2021 1:16 AM
你應該可以在裡面看到大量 css 的神奇技巧wwwww
波卡.H.AWS.Poka
@j100002ben
說
Fri, Sep 10, 2021 1:20 AM
像是 display: grid、:before/:after 偽元素、transform:scale 解決瀏覽器文字最小大小限制、box-sizing 輔助排版、text-shadow 做出文字外框⋯⋯
小波比比鳥
@SauceKonami
Fri, Sep 10, 2021 1:21 AM
小平自己寫的？讚喔！
波卡.H.AWS.Poka
@j100002ben
說
Fri, Sep 10, 2021 1:23 AM
弓金 ㄧ火十 : 有鎖右鍵，所以要自己把網頁開發工具打開來XD
弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 1:27 AM
Francis : 做的途中一直在想是不是要找框架的資料來學，但怎麼樣都很想在比賽活動前用好個樣子...
弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 1:28 AM
小波比比鳥 : 還是初學
弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 1:30 AM
波卡.H.AWS.Poka : 我在別的網站看人家用flex做到貼合邊緣配合改變大小的，但是怎麼都用不起來...
波卡.H.AWS.Poka
@j100002ben
Fri, Sep 10, 2021 1:33 AM
flex + justify 就可以搞定了，不過我們用 grid
弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 1:46 AM
wow原來是另一個網頁
波卡.H.AWS.Poka
@j100002ben
Fri, Sep 10, 2021 1:50 AM
弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 1:59 AM
shadow-root是什麼東西啊 還有字體是不能直接用的嗎？
弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 2:02 AM
好多沒看過的東西...
弓金 ㄧ火十
@scarletsnow
Fri, Sep 10, 2021 2:11 AM
要是早點知道有grid屬性 ...flex上做還要放空的格子來讓他計算邊長的時候不會扭曲掉...
波卡.H.AWS.Poka
@j100002ben
Fri, Sep 10, 2021 2:14 AM
弓金 ㄧ火十 : 字體可以用啊，只是我們不確定該字體授權是否允許重新拆出子字級，所以還是用圖片的方式處理
波卡.H.AWS.Poka
@j100002ben
Fri, Sep 10, 2021 2:16 AM
shadow-root 是因為引用 svg 定義好的 symbol，裡面被復用的組件對瀏覽器來說就會是增加一組 shadow-root ，詳細內容可以去找 Shadow DOM 的相關文件
載入新的回覆