Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make the catalog flexbox-based.

Browse Source 
The new, identical layout allows us to add overflowing elements in threads.
Previously, all overflowing content would be cut off.
Now, only the comment can be cut off.
This commit is contained in:
Mayhem 2014-02-02 22:38:53 +01:00 committed by ccd0
parent 84568431d8
commit 8a0becd7bf
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/General/css/style.css
View File

@ -498,19 +498,21 @@ hr ~ div.center:not(.ad-cnt) {
text-decoration: none;
}
.catalog-mode {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.catalog-thread {
display: inline-block;
vertical-align: top;
padding-top: 5px;
display: flex;
flex-direction: column;
align-items: center;
width: 165px;
margin-bottom: 5px;
max-height: 320px;
overflow: hidden;
word-break: break-word;
}
.catalog-thread > a {
display: inline-block;
flex-shrink: 0;
position: relative;
}
.thumb {
@ -539,15 +541,23 @@ hr ~ div.center:not(.ad-cnt) {
right: 1px;
}
.thread-stats {
flex-shrink: 0;
cursor: help;
font-size: 10px;
font-weight: 700;
line-height: .8;
margin-top: 1px;
float: none;
}
.catalog-thread .subject {
flex-shrink: 0;
font-weight: 700;
line-height: 1;
text-align: center;
}
.catalog-thread > .comment {
flex-shrink: 1;
overflow: hidden;
text-align: center;
}
.catalog-thread .comment br + br {
display: none;