mirror of
https://github.com/discourse/discourse.git
synced 2025-03-16 18:15:35 +08:00
UX: Update crawler view styles to be more readable (#16361)
* UX: Update crawler view styles to be more readable * minor small screen fixes * prettier
This commit is contained in:
parent
3c44bed545
commit
4021feec63
@ -1,20 +1,30 @@
|
|||||||
body.crawler {
|
body.crawler {
|
||||||
font-family: "Times New Roman", Times, serif;
|
font-family: serif;
|
||||||
|
a {
|
||||||
|
// we want all links to look like links
|
||||||
|
color: blue !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
&:visited {
|
||||||
|
color: purple !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
> header {
|
> header {
|
||||||
|
// site header
|
||||||
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: z("max");
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-bottom: 1px solid var(--primary-low-mid);
|
border-bottom: 1px solid #eee;
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-buttons {
|
.header-buttons {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// topic list
|
||||||
|
|
||||||
div#main-outlet {
|
div#main-outlet {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
div.post {
|
div.post {
|
||||||
@ -29,7 +39,32 @@ body.crawler {
|
|||||||
.topic-list {
|
.topic-list {
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 1em;
|
margin: 2em 0;
|
||||||
|
|
||||||
|
thead {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
th {
|
||||||
|
padding: 0 0 0.5em;
|
||||||
|
}
|
||||||
|
th:first-of-type {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 500px) {
|
||||||
|
th {
|
||||||
|
&.replies,
|
||||||
|
&.views {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
th:first-of-type {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
th:last-of-type {
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
td {
|
td {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
&.posters {
|
&.posters {
|
||||||
@ -39,6 +74,7 @@ body.crawler {
|
|||||||
th:first-of-type {
|
th:first-of-type {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 850px) {
|
@media (max-width: 850px) {
|
||||||
table-layout: auto;
|
table-layout: auto;
|
||||||
td {
|
td {
|
||||||
@ -70,40 +106,49 @@ body.crawler {
|
|||||||
margin-top: 0.25em;
|
margin-top: 0.25em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
.topic-list-item {
|
||||||
margin-top: 4em;
|
border-bottom: 1px solid #eee;
|
||||||
|
> * {
|
||||||
|
padding: 0.75em 0;
|
||||||
|
}
|
||||||
|
td.main-link {
|
||||||
|
padding-right: 1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic-category {
|
.topic-category {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discourse-tags {
|
.topic-list-main-link a.title,
|
||||||
color: var(--primary-medium);
|
.topic-list .main-link a.title,
|
||||||
}
|
.latest-topic-list-item .main-link a.title {
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.noscript-footer-nav {
|
.topic-list .link-bottom-line {
|
||||||
clear: both;
|
margin-top: 0.25em;
|
||||||
margin-top: 4em;
|
|
||||||
a {
|
|
||||||
margin-right: 0.25em;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#noscript-footer {
|
// topics
|
||||||
padding: 0 10px;
|
|
||||||
text-align: center;
|
div#main-outlet {
|
||||||
|
div.post {
|
||||||
|
word-break: break-word;
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.crawler-post {
|
.crawler-post {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-bottom: 2em;
|
margin-bottom: 2em;
|
||||||
padding-top: 1.5em;
|
padding-top: 1.5em;
|
||||||
border-top: 1px solid var(--primary-low);
|
border-top: 1px solid #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.crawler-post-meta {
|
.crawler-post-meta {
|
||||||
@ -121,7 +166,7 @@ body.crawler {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.crawler-post-infos {
|
.crawler-post-infos {
|
||||||
color: var(--primary-high);
|
color: #666;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@include breakpoint(tablet, min-width) {
|
@include breakpoint(tablet, min-width) {
|
||||||
float: right;
|
float: right;
|
||||||
@ -137,10 +182,65 @@ body.crawler {
|
|||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0.5em 0;
|
padding: 0.5em 0;
|
||||||
border-top: 1px solid var(--primary-low);
|
border-top: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#topic-title {
|
||||||
|
> * {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin-bottom: 0.25em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.poll-info {
|
||||||
|
// crawler vote count always shows 0
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre,
|
||||||
|
code,
|
||||||
|
blockquote,
|
||||||
|
aside.quote .title {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-table {
|
||||||
|
tr {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: 0.25em;
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// footer
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noscript-footer-nav {
|
||||||
|
margin-top: 4em;
|
||||||
|
a {
|
||||||
|
margin-right: 0.25em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#noscript-footer {
|
||||||
|
padding: 0 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.crawler-nav {
|
.crawler-nav {
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
ul {
|
ul {
|
||||||
@ -155,8 +255,4 @@ body.crawler {
|
|||||||
padding: 0.5em 1em 0.5em 0;
|
padding: 0.5em 1em 0.5em 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.poll-info {
|
|
||||||
// crawler vote count always shows 0
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user