Browse Source

Topic listings: make better use of space on mobile

This reduces the size and spacing of some of the elements of a topic in
topic listings on small screens, and should make information display
better overall.
merge-requests/68/head
Chad Birch 6 years ago
parent
commit
fb5323e51f
  1. 23
      tildes/scss/modules/_topic.scss

23
tildes/scss/modules/_topic.scss

@ -16,7 +16,7 @@
"title voting"
"metadata voting"
"content voting"
"info voting";
"info info";
grid-template-columns: 1fr auto;
// set some minimum row heights on mobile to space them out a bit
@ -30,7 +30,10 @@
}
position: relative;
padding: 0.4rem;
@media (min-width: $size-sm) {
padding: 0.4rem;
}
font-size: 0.6rem;
@ -126,9 +129,13 @@
margin-bottom: auto;
padding: 0.2rem;
height: auto;
min-width: 3rem;
font-weight: normal;
// make the voting button wider on large screens
@media (min-width: $size-sm) {
min-width: 3rem;
}
&.btn-used {
border-color: transparent;
@ -139,8 +146,8 @@
}
.topic-voting-votes {
font-size: 0.9rem;
line-height: 1.1rem;
font-size: 0.8rem;
line-height: 1rem;
}
.topic-voting-label {
@ -195,7 +202,11 @@
.topic-info {
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
grid-template-columns: 1fr 1.5fr 0.7fr;
@media (min-width: $size-sm) {
grid-template-columns: 1fr 1.2fr 1fr;
}
grid-column-gap: 0.4rem;
max-width: 32rem;

Loading…
Cancel
Save