/* =====================================================================
Bo sung cho v2 — nap SAU style.css / custom.css / responsive.css.
Ban cu sinh nhieu co anh thu nho cho tung vi tri. Gio chi con MOT anh
goc, nen anh khong con dung ti le cua o chua no -> phai them
object-fit: cover de trinh duyet tu cat thay vi keo bep.
---------------------------------------------------------------------
NGUYEN TAC — hai lan tao lam sai o day:
1) CHO NAO style.css DA DAT CO THI KHONG DUOC DAT LAI.
Khoi Hot Novel da co san trong style.css dong 102-107:
.index-intro .item { width:129px; height:192px }
.index-intro .item.top-1 { width:265px; height:396px }
.index-intro .item .item-img { width:129px; height:192px }
.index-intro .item.top-1 .item-img { width:265px; height:396px }
Tao viet de len bang 100x149 / 266x395 — do la co TEP THUMB ban cu
SINH RA, khong phai co no HIEN THI. Bo chon lai trung y het style.css
ma nap sau, nen de bep luat dung. O day gio CHI them object-fit.
2) KHONG CHON THEO CAU TRUC THE.
Truoc do tao viet .list-truyen .row > div:first-child > div — bo chon
do tom luon khoi Hot Novel o cot ben (cung la .list-truyen co .row),
bien so thu tu thanh khoi rong het co va de mat ten truyen.
Duoi day chi chon theo class hoac theo chinh the ![]()
.
Chi hai cho THUC SU thieu co: .list-thumbnail (Novel Completed) va
.books .book img (bia trang truyen) — style.css khong dat gi cho hai cho
nay, truoc day chung an theo kich thuoc san co cua tep thumb.
===================================================================== */
/* ---------------------------------------------------------------------
1. Khoi Hot Novel — style.css da lo co, o day CHI chong keo bep
--------------------------------------------------------------------- */
.index-intro .item .item-img {
object-fit: cover;
object-position: center;
}
/* Dien thoai / bang (<=991px): responsive.css doi moi o thanh width:21%,
height:auto va cho anh height:100%. "100%" cua mot the cha cao "auto" thi
quy ve "auto" — tuc anh giu DUNG TI LE CUA TEP GOC.
Ban cu khong sao vi no sinh thumb co dinh 129x192, moi anh mot ti le nhu
nhau nen moi o cao bang nhau. v2 chi con MOT anh goc, ti le moi truyen moi
khac -> cac o cao thap khong deu, ma .item lai la float:left: mot o cao
hon se chan o ke tiep, o do bi day sang phai va de lai khoang trong to
giua luoi (dung cai anh chup cua trang chu tren dien thoai).
Ghim lai dung ti le 129:192 cua ban cu; object-fit:cover o tren tu cat
phan thua. Moi o lai cao bang nhau -> float xuong dong dung cho. */
@media (max-width: 991px) {
.index-intro .item .item-img,
.index-intro .item.top-1 .item-img {
width: 100%;
height: auto;
aspect-ratio: 129 / 192;
}
}
/* ---------------------------------------------------------------------
2. Anh bia trong the truyen o trang danh sach / tim kiem / the loai
style.css dung BANG de dung o anh:
#list-page .list>.row>div { height:90px; display:table }
#list-page .list>.row>div>div { display:table-cell; vertical-align:middle }
#list-page .list>.row>div>div>.cover { max-height:100%; max-width:100% }
Anh an "max-height:100%" theo o cao 90px do. Cach do CHI chay khi ban cu
sinh san tep thumb 180x80 — anh goc dung ti le doc thi 100% cua 90px ra
90px cao, ngang tu do suy ra, van hop ly.
HAI LAN TAO LAM HONG CHO NAY:
1) dat width:100% height:82px theo cau truc the -> tom nham ca khoi
Hot Novel o cot ben, de mat ten truyen;
2) them the boc .cover-holder co overflow:hidden + position:relative ->
o do khong con la table-cell dung nghia, "max-height:100%" khong con
quy chieu duoc vao dau, anh bung ve kich thuoc goc (anh trong man hinh
mày gui: bia cao gan 300px, dong bang gian ra gap ba).
Gio neo co THANG vao the ![]()
, bo chon dai hon ban trong style.css nen
chac chan thang, va KHONG dong gi vao cau truc bang.
--------------------------------------------------------------------- */
#list-page .list > .row > div > div > img.cover {
width: 180px;
height: 80px;
max-width: 100%;
object-fit: cover;
object-position: center;
}
/* Dien thoai: ban cu doi HAN co anh o day — 180x80 (nam ngang) tren may ban,
60x85 (dung) tren dien thoai; PHP chon tep theo thiet bi.
v2 chi con MOT tep nen phai doi bang CSS, khong thi tren dien thoai o
col-xs-3 chi rong ~84px ma chieu cao van ghim 80px -> bia bi cat thanh
mot dai ngang be, khong con giong bia sach nhu ban cu.
O bang cao 90px nen 85px van vua. */
@media (max-width: 767px) {
#list-page .list > .row > div > div > img.cover {
width: 60px;
height: 85px;
}
}
/* Cho cac cho khac cung dung class .cover (neu co) — khong ep co, chi chong
keo bep. */
img.cover {
object-fit: cover;
object-position: center;
}
/* ---------------------------------------------------------------------
2b. Ten chuong o cot phai — KEP TOI DA 4 DONG
style.css dong 40 cat moi o danh sach con 1 dong kem dau ba cham:
.list>.row>div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
NHUNG rieng trang danh sach thi dong 1457 de len:
#list-page .list>.row>div { height:90px; line-height:20px; white-space:normal }
"normal" tuc la cho xuong dong thoai mai — o MOI be ngang, khong rieng gi
dien thoai. Hoi do ten chuong con ngan nen khong ai de y; gio co nhung ten
dai toi muoi may chu, mot dong phinh cao gap ba dong khac, danh sach nhin
nhu rang cua.
VI SAO LA 4 CHU KHONG PHAI 5: hoi tinh, o con cao 90px, moi dong chu 20px.
4 dong = 80px -> nam gon trong o
5 dong = 100px -> vuot, o phai gian ra, danh sach lai lech cao thap
Sau do muc 2c noi o len 106px cho thoang, nhung van GIU 4: 5 dong cong voi
dem tren duoi lai vua dung sat mep, khong con khoang tho nao.
-webkit-box + line-clamp tu them dau ba cham o cho cat, khong can
text-overflow. style.css da dung cach nay san (.thirdPartyBodyClass).
CHI ap trong #list-page. Trang chu va cot ben van dung luat 1 dong cua
style.css — dat display len .chapter-text ngoai pham vi nay se lam hong
dau ba cham cua the cha o do.
--------------------------------------------------------------------- */
#list-page .chapter-text,
#list-page .truyen-title {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Ten chuong: 4 dong. Cot do chi co moi no.
4 x 20px = 80px <= o cao 90px */
#list-page .chapter-text {
-webkit-line-clamp: 4;
line-clamp: 4;
}
/* Ten truyen: 3 DONG, khong phai 4 — duoi no con mot dong ten tac gia nua
(.author la display:block nen luon chiem tron mot dong):
3 x 20px (ten) + 20px (tac gia) = 80px <= o cao (90px hoi do, 106px hien nay)
De 4 dong thi thanh 100px — hoi do la tran ngay, con bay gio thi vua khit
mep, mat het khoang tho vua noi ra. Van la 3. */
#list-page .truyen-title {
-webkit-line-clamp: 3;
line-clamp: 3;
}
/* Bieu tuong quyen sach + nhan New/Full/Hot nam BEN TRONG the tieu de
(xem ghi chu trong views/site/_novel_card.php). Ca hai deu la noi dung
trong dong, nen:
dong dau = bieu tuong + nhan + phan dau cua ten
dong sau = sat le trai cua o, khong bi thut
Dieu duy nhat can ep: ca hai phai CAO VUA DUNG MOT DONG CHU (20px), khong
thi rieng dong dau bi day cao hon, ba dong khong con deu va tong lai vuot
qua muc da tinh cho o 106px. */
#list-page .truyen-title > .glyphicon-book,
#list-page .truyen-title > .label-title {
line-height: 18px;
vertical-align: middle;
}
/* PHAI la "inline", khong duoc de "inline-block".
The tieu de la -webkit-box (bat buoc, de kep 3 dong). Trong mot hop nhu vay,
MOI con o muc khoi — ke ca inline-block — bi coi la mot muc rieng va chiem
tron mot dong. Bootstrap dat .glyphicon la inline-block, nen bieu tuong quyen
sach an het dong dau, day nhan va ten truyen xuong dong duoi.
Do o khung 414px: inline-block -> bieu tuong o dong 52, nhan o dong 71.
Cac the nhan la span tran (inline) nen khong dinh loi nay. */
#list-page .truyen-title > .glyphicon-book {
display: inline;
top: 0;
}
/* Khoang cach bieu tuong -> nhan -> ten truyen.
style.css da co san ".label-title { margin-left:5px }". Tao tung dat them
"margin-right:5px" cho bieu tuong, thanh 10px, cong voi khoang trang thua
template nhan de lai nua (xem _novel_card.php) -> ho gan 14px.
Gio de style.css lo phan giua bieu tuong va nhan. O day chi can tach the
SPAN CUOI CUNG ra khoi ten truyen — the do la nhan cuoi neu truyen co nhan,
la chinh bieu tuong neu khong co nhan nao. Mot luat lo ca hai truong hop. */
#list-page .truyen-title > span:last-of-type {
margin-right: 5px;
}
/* ---------------------------------------------------------------------
2c. Chia lai be ngang ba cot o trang danh sach
DAY LA CHO CO Y KHAC BAN CU — mày yeu cau: keo anh lai gan ten truyen,
phan cho thua sang cot ten chuong de doc duoc nhieu chu hon.
Ban cu (va v2 truoc thay doi nay) dung nguyen bootstrap:
col-xs-3 (25%) | col-xs-7 (58,3%) | col-xs-2 (16,7%)
Anh bia chi rong 180px (may ban) / 60px (dien thoai), ma o dau lai an theo
phan tram, nen man hinh cang rong thi khoang trong sau tam anh cang to,
trong khi cot ten chuong 16,7% thi chat cung.
Gio o anh lay DUNG be ngang no can (180 + 20 dem = 200px), phan thua don
het sang hai cot con lai:
200px | con lai | 26% (may ban)
80px | con lai | 30% (dien thoai, anh 60px)
Ban cu cung dieu chinh be ngang cot bang CSS chu khong sua the (.col-chap
trong style.css co ba gia tri khac nhau theo be ngang man hinh), nen day
khong phai cach lam la o trang nay.
Bo chon di qua .col-truyen-main de KHONG cham vao khoi Hot Novel o cot ben
— cho do cung la .list > .row > div. Tao tung tom nham dung cho nay mot lan
va lam mat het ten truyen o cot ben.
Cung o day noi CHIEU CAO o tu 90px len 106px cho duong gach ngang giua hai
truyen thoang ra: noi dung cao nhat la 3 dong ten + 1 dong tac gia = 80px,
voi 90px thi chi con 10px chia deu tren duoi 5px, duong gach gan nhu dinh
vao chu. 106px thi con 26px, tren duoi 13px. O la display:table +
vertical-align:middle nen phan them tu chia deu hai phia. */
#list-page .col-truyen-main .list-truyen > .row > div {
height: 106px;
}
@media (min-width: 768px) {
#list-page .col-truyen-main .list-truyen > .row > div:nth-child(1) { width: 200px }
#list-page .col-truyen-main .list-truyen > .row > div:nth-child(2) { width: calc(100% - 200px - 26%) }
#list-page .col-truyen-main .list-truyen > .row > div:nth-child(3) { width: 26% }
}
@media (max-width: 767px) {
#list-page .col-truyen-main .list-truyen > .row > div:nth-child(1) { width: 80px }
#list-page .col-truyen-main .list-truyen > .row > div:nth-child(2) { width: calc(100% - 80px - 30%) }
#list-page .col-truyen-main .list-truyen > .row > div:nth-child(3) { width: 30% }
}
/* ---------------------------------------------------------------------
3. Novel Completed — style.css KHONG dat co, phai neo
Ban cu dung tep thumb 164x245.
--------------------------------------------------------------------- */
.list-thumbnail img {
width: 164px;
max-width: 100%;
aspect-ratio: 164 / 245;
height: auto;
object-fit: cover;
object-position: center;
display: block;
margin: 0 auto;
}
/* ---------------------------------------------------------------------
4. Bia lon o trang truyen — style.css KHONG dat co, phai neo
Ban cu dung tep thumb 221x324.
KHONG DUOC DAT display:block CHO ANH NAY.
Tren dien thoai, style.css can chinh giua bang cach cu:
@media (max-width:600px) { .info-holder .books { text-align:center } }
.book la mot khoi chiem het be ngang, con anh ben trong la ANH TRONG DONG
(inline) — nen chinh "text-align:center" thua ke xuong la thu day anh vao
giua. Tao tung them display:block o day; anh thanh khoi, text-align khong
con tac dung len no nua, va no nam sat le trai (dung cai anh chup trang
truyen tren dien thoai ma mày gui).
Da do lai bang trinh duyet, khung 414px:
co display:block -> anh o 0..221 (le trai)
bo display:block -> anh o 97..318 (chinh giua, hai ben 96/96)
Man hinh rong khong doi: 32..253 ca hai truong hop.
Muon chinh giua thi dung dung cach cua ban cu (text-align o the cha),
dung dat "margin:0 auto" — anh o day la inline, margin auto khong an.
--------------------------------------------------------------------- */
.books .book img {
width: 221px;
max-width: 100%;
aspect-ratio: 221 / 324;
height: auto;
object-fit: cover;
object-position: center;
}
/* Noi rong khoang chinh giua tu 600px len 767px.
style.css chi chinh giua o "max-width:600px", nhung .info-holder la
col-xs-12 col-sm-4 — no chiem HET be ngang cho toi 767px. Tuc trong khoang
601-767px (iPad dung, may bang nho) tam bia nam sat le trai con ben phai la
mot mang trong cao gan 340px, vi phan gioi thieu phai xuong duoi.
768px moi la cho .info-holder thuc su co 33% va nam canh phan gioi thieu —
luc do sat le trai moi dung. Nen moc phai la 767px, khong phai 600px. */
@media (max-width: 767px) {
.info-holder .books {
text-align: center;
}
}
/* ---------------------------------------------------------------------
5. Phong to khi re chuot — DA BO
Truoc day o day co:
.cover-holder { overflow:hidden; position:relative }
.cover-holder:hover img.cover { transform: scale(1.12) }
overflow:hidden va position:relative dat len o anh — ma o do la
display:table-cell trong mot bang cao 90px — lam no khong con la
table-cell dung nghia. "max-height:100%" cua style.css mat cho quy chieu,
anh bung ve kich thuoc goc va ca dong bang gian ra.
Muon co hieu ung phong to thi phai them MOT the boc rieng ben trong o
table-cell, khong duoc dat len chinh o do. Chua can den nen bo han —
ban cu cung khong co hieu ung nay.
Khoi Hot Novel van co hieu ung rieng san trong style.css dong 107
(.index-intro .item:hover { transform: scale(1.05) }) — khong dung toi.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
7. CHONG KEO NGANG KHI LUOT MAN HINH CAM UNG
Trieu chung o ban cu: gap mot chuoi chu qua dai (ten chuong khong dau cach,
mot dia chi web, mot tu tieng nuoc ngoai dai) thi chuoi do khong xuong dong
duoc, no day rong khoi chua ra qua be ngang man hinh. Ca trang thanh ra
rong hon man hinh -> vuot ngang mot cai la CA KHUNG WEB truot sang, thanh
dai trang o mep phai, phai vuot nguoc lai moi doc tiep duoc.
Chua hai tang:
a) CHUA NGUYEN NHAN — cho chu dai duoc ngat giua tu khi no sap tran ra
ngoai. "break-word" chi ra tay khi khong con cach nao khac, chu tu binh
thuong van xuong dong theo dau cach nhu cu, khong doi cach ngat chu.
b) CHUA TRIEU CHUNG — html/body khong cho cuon ngang. Day la chan cuoi:
sau nay them mot khoi nao lo rong hon man hinh thi trang van khong keo
ngang duoc. Da soat: khong cho nao trong site dung position:sticky, nen
dat overflow-x o day khong pha thu gi (sticky la thu duy nhat hong khi
to tien no bi dat overflow).
--------------------------------------------------------------------- */
html,
body {
overflow-x: hidden;
}
.chapter-c,
.desc-text,
.truyen-title,
.chapter-text,
.s-title,
.info,
.breadcrumb-container,
#truyen-slide .caption h3,
.col-truyen-main,
.col-truyen-side {
overflow-wrap: break-word;
word-wrap: break-word;
}
/* ---------------------------------------------------------------------
6. Ghi chu ve co anh tren man hinh hep — KHONG ep "height" co dinh
Muc 3 va 4 (Novel Completed, bia trang truyen) khong dat height, chi dat
aspect-ratio + height:auto. CO Y.
Truoc do tao ep height co dinh cho hai cho do, kem mot nguong rieng:
@media (max-width: 767px) { .books .book img { width:180px; height:264px } }
SAI tren man hinh hep: o .list-thumbnail la col-xs-4 (33% be ngang), may
375px thi o chi con ~125px. Anh co be ngang lai theo max-width:100% nhung
chieu cao van ghim 245px -> khung thanh cot cao ngheu, anh bi cat doc.
aspect-ratio thi be ngang bao nhieu chieu cao theo ti le bay nhieu, tu chay
o moi kho man hinh, khong can nguong nao.
Luu y: nhung nguong @media o cac muc tren (991px, 767px) la viec khac —
do la nhung cho ban cu DOI HAN co anh hoac doi cach can le theo thiet bi,
khong phai ep chieu cao.
--------------------------------------------------------------------- */