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
parent 3887e184b8
commit 99f4f14c47
1 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
css/style.css
View File

@ -402,19 +402,21 @@ a[href="javascript:;"] {
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 {
@ -443,15 +445,23 @@ a[href="javascript:;"] {
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;
}
/* Announcement Hiding */