Browse Source

Rework CSS grid for topics in listings

This was mostly motivated by a hope that this will help with the
mysterious iOS 12 bug that's causing topic listings to behave strangely
when the user tries to tap on the comments link (space gets added and
the link moves down).

The main change here is to add a new .topic-with-excerpt class, and only
add the "content" area to the CSS grid when that class is present,
instead of always adding it and just leaving it empty if the topic has
no excerpt.

In addition, this switches to using grid-gap to space out the rows
instead of margins, and center-aligns the row contents vertically on
mobile, where we want them spaced out a little to help avoid misclicks.
merge-requests/68/head
Deimos 6 years ago
parent
commit
8572276fc7
  1. 30
      tildes/scss/modules/_topic.scss
  2. 4
      tildes/tildes/templates/macros/topics.jinja2

30
tildes/scss/modules/_topic.scss

@ -15,20 +15,21 @@
grid-template-areas:
"title voting"
"metadata voting"
"content voting"
"info info";
grid-template-columns: 1fr auto;
grid-gap: 0.2rem;
// set some minimum row heights on mobile to space them out a bit
grid-template-rows:
auto
minmax($min-touch-size, auto)
auto
minmax($min-touch-size, auto);
$row-height: $min-touch-size - 4px; // subtract grid-gap
grid-template-rows: repeat(3, minmax($row-height, auto));
// on larger screens, rows can size automatically
@media (min-width: $size-md) {
grid-template-rows: auto auto minmax(0, auto) auto;
grid-template-rows: auto;
}
align-items: center;
position: relative;
padding-left: 0.2rem;
@ -40,7 +41,6 @@
header {
grid-area: title;
margin-bottom: 0.2rem;
display: flex;
min-height: 1rem;
}
@ -111,7 +111,6 @@
.topic-metadata {
display: flex;
align-items: baseline;
margin-bottom: 0.2rem;
max-height: 4rem;
overflow: hidden;
}
@ -166,7 +165,7 @@
}
max-width: none;
margin: 0 0.2rem 0.2rem 0;
margin: 0;
font-style: italic;
h1 {
@ -272,6 +271,17 @@
}
}
.topic-with-excerpt {
// on larger screens only, add the "content" grid area
@media (min-width: $size-md) {
grid-template-areas:
"title voting"
"metadata voting"
"content voting"
"info info";
}
}
.is-topic-mine {
border-left: 3px solid;
margin-left: -3px;

4
tildes/tildes/templates/macros/topics.jinja2

@ -178,6 +178,10 @@
{% do classes.append('is-topic-official') %}
{% endif %}
{% if topic.content_excerpt %}
{% do classes.append("topic-with-excerpt") %}
{% endif %}
{{ classes|join(' ') }}
{% endmacro %}

Loading…
Cancel
Save