mirror of
https://github.com/discourse/discourse.git
synced 2024-11-23 15:54:23 +08:00
SYNTAX: Use classes instead of html element targeting (#14890)
* SYNTAX: Use classes instead of html element targeting
This commit is contained in:
Jordan Vidrine
GitHub
parent
389a3ce389
commit
0e371d4c6d
|
|
@ -1,5 +1,5 @@
|
|||
{{#unless skipHeader}}
|
||||
<thead>
|
||||
<thead class="topic-list-header">
|
||||
{{raw "topic-list-header"
|
||||
canBulkSelect=canBulkSelect
|
||||
toggleInTitle=toggleInTitle
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
tagName=""
|
||||
connectorTagName=""}}
|
||||
|
||||
<tbody>
|
||||
<tbody class="topic-list-body">
|
||||
{{#each filteredTopics as |topic|}}
|
||||
{{topic-list-item topic=topic
|
||||
bulkSelectEnabled=bulkSelectEnabled
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<td class='category'>{{category-link category}}</td>
|
||||
<td class='category topic-list-data'>{{category-link category}}</td>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<td class='posters'>
|
||||
<td class='posters topic-list-data'>
|
||||
{{#each posters as |poster|}}
|
||||
{{#if poster.moreCount}}
|
||||
<a class="posters-more-count">{{poster.moreCount}}</a>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<{{view.tagName}} class='num posts-map posts {{view.likesHeat}}' title='{{view.title}}'>
|
||||
<{{view.tagName}} class='num posts-map posts {{view.likesHeat}} topic-list-data' title='{{view.title}}'>
|
||||
<button class="btn-link posts-map badge-posts {{view.likesHeat}}">
|
||||
{{raw-plugin-outlet name="topic-list-before-reply-count"}}
|
||||
{{number topic.replyCount noTitle="true" ariaLabel=view.title}}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{~raw-plugin-outlet name="topic-list-before-columns"}}
|
||||
|
||||
{{#if bulkSelectEnabled}}
|
||||
<td class="bulk-select">
|
||||
<td class="bulk-select topic-list-data">
|
||||
<label for="bulk-select-{{topic.id}}">
|
||||
<input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
|
||||
</label>
|
||||
|
|
@ -15,21 +15,21 @@
|
|||
This causes the topic-post-badge to be considered the same word as "text"
|
||||
at the end of the link, preventing it from line wrapping onto its own line.
|
||||
--}}
|
||||
<td class='main-link clearfix' colspan="1">
|
||||
<td class='main-link clearfix topic-list-data' colspan="1">
|
||||
{{~raw-plugin-outlet name="topic-list-before-link"}}
|
||||
<span class='link-top-line'>
|
||||
{{~raw-plugin-outlet name="topic-list-before-status"}}
|
||||
{{~raw "topic-status" topic=topic}}
|
||||
{{~topic-link topic class="raw-link raw-topic-link"}}
|
||||
{{~#if topic.featured_link}}
|
||||
{{~topic-featured-link topic}}
|
||||
{{~topic-featured-link topic}}
|
||||
{{~/if}}
|
||||
{{~raw-plugin-outlet name="topic-list-after-title"}}
|
||||
{{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator
|
||||
topicId=topic.id
|
||||
unreadClass=unreadClass~}}
|
||||
{{~#if showTopicPostBadges}}
|
||||
{{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
|
||||
{{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
|
||||
{{~/if}}
|
||||
</span>
|
||||
<div class="link-bottom-line">
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
{{raw "list/posts-count-column" topic=topic}}
|
||||
|
||||
{{#if showLikes}}
|
||||
<td class="num likes">
|
||||
<td class="num likes topic-list-data">
|
||||
{{#if hasLikes}}
|
||||
<a href='{{topic.summaryUrl}}'>
|
||||
{{number topic.like_count}} {{d-icon "heart"}}
|
||||
|
|
@ -73,6 +73,6 @@
|
|||
</td>
|
||||
{{/if}}
|
||||
|
||||
<td class="num views {{topic.viewsHeat}}">{{number topic.views numberKey="views_long"}}</td>
|
||||
<td class="num views {{topic.viewsHeat}} topic-list-data">{{number topic.views numberKey="views_long"}}</td>
|
||||
|
||||
{{raw "list/activity-column" topic=topic class="num" tagName="td"}}
|
||||
{{raw "list/activity-column" topic=topic class="num topic-list-data" tagName="td"}}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<th data-sort-order='{{order}}' class='{{view.className}}' scope="col" {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}} {{#if sortable}}tabindex="0" role="button" aria-pressed='{{view.ariaPressed}}' {{#if view.ariaSort}}aria-sort='{{view.ariaSort}}'{{/if}} {{/if}}>
|
||||
<th data-sort-order='{{order}}' class='{{view.className}} topic-list-data' scope="col" {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}} {{#if sortable}}tabindex="0" role="button" aria-pressed='{{view.ariaPressed}}' {{#if view.ariaSort}}aria-sort='{{view.ariaSort}}'{{/if}} {{/if}}>
|
||||
{{~#if canBulkSelect}}
|
||||
{{~#if showBulkToggle}}
|
||||
{{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{{~raw-plugin-outlet name="topic-list-header-before"~}}
|
||||
{{#if bulkSelectEnabled}}
|
||||
<th class="bulk-select">
|
||||
<th class="bulk-select topic-list-data">
|
||||
{{#if canBulkSelect}}
|
||||
{{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
|
||||
// Topic list body
|
||||
|
||||
.topic-list-item.visited,
|
||||
.topic-list-item.visited .topic-list-data,
|
||||
.latest-topic-list-item.visited,
|
||||
.category-topic-link.visited {
|
||||
a.title:not(.badge-notification) {
|
||||
|
|
@ -169,7 +169,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sticky-header thead {
|
||||
.sticky-header .topic-list-header {
|
||||
@include sticky;
|
||||
top: var(--header-offset, 60px);
|
||||
background: var(--secondary);
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
> tbody > tr {
|
||||
> .topic-list-body > .topic-list-item {
|
||||
&.has-excerpt .star {
|
||||
vertical-align: top;
|
||||
margin-top: 2px;
|
||||
|
|
@ -198,14 +198,14 @@
|
|||
.topic-list-item-separator {
|
||||
border: none;
|
||||
|
||||
td {
|
||||
.topic-list-data {
|
||||
border-bottom: 1px solid var(--danger-medium);
|
||||
line-height: 0.1em;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td span {
|
||||
.topic-list-data span {
|
||||
position: relative; // Chrome needs this, otherwise the line is above the text
|
||||
background-color: var(--secondary);
|
||||
color: var(--danger-medium);
|
||||
|
|
@ -214,21 +214,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
.topic-list-data {
|
||||
line-height: $line-height-large;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
th .btn-flat .d-icon {
|
||||
.btn-flat .d-icon {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
td {
|
||||
color: var(--primary-medium);
|
||||
font-size: $font-0;
|
||||
}
|
||||
|
||||
.main-link {
|
||||
.topic-list-data.main-link {
|
||||
@extend .topic-list-main-link;
|
||||
|
||||
.raw-topic-link > * {
|
||||
|
|
@ -334,7 +334,7 @@
|
|||
.loading .topic-list {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
tr {
|
||||
.topic-list-item {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,6 +133,7 @@ tbody {
|
|||
border-top: 3px solid var(--primary-low);
|
||||
}
|
||||
|
||||
.topic-list-item,
|
||||
tr {
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
&.highlighted {
|
||||
|
|
|
|||
|
|
@ -24,8 +24,7 @@
|
|||
@extend .topic-list-icons;
|
||||
|
||||
margin: 0 0 10px;
|
||||
th,
|
||||
td {
|
||||
.topic-list-data {
|
||||
padding: 12px 5px;
|
||||
&:first-of-type {
|
||||
padding-left: 10px;
|
||||
|
|
@ -40,7 +39,7 @@
|
|||
line-height: $line-height-large;
|
||||
}
|
||||
|
||||
td.bulk-select {
|
||||
.topic-list-data.bulk-select {
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
label {
|
||||
|
|
@ -84,7 +83,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
td.posters {
|
||||
.topic-list-data.posters {
|
||||
height: $td-posters-height;
|
||||
}
|
||||
.posters a:first-child .avatar.latest:not(.single) {
|
||||
|
|
@ -212,20 +211,16 @@ button.dismiss-read {
|
|||
|
||||
.topic-list {
|
||||
// tighter table header spacing
|
||||
th:first-of-type {
|
||||
.topic-list-data:first-of-type {
|
||||
padding: 12px 5px;
|
||||
}
|
||||
// smaller table cell spacing
|
||||
th,
|
||||
td {
|
||||
.topic-list-data {
|
||||
padding: 10px;
|
||||
font-size: $font-0;
|
||||
}
|
||||
// suppress views column
|
||||
th.views {
|
||||
display: none;
|
||||
}
|
||||
td.views {
|
||||
.views {
|
||||
display: none;
|
||||
}
|
||||
// reduce width for more title space
|
||||
|
|
@ -237,7 +232,7 @@ button.dismiss-read {
|
|||
text-align: center;
|
||||
}
|
||||
// show only the first poster
|
||||
td.posters {
|
||||
.topic-list-data.posters {
|
||||
a:not(.latest) {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -113,8 +113,7 @@ ol.category-breadcrumb {
|
|||
margin-left: 55px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
.topic-list-data {
|
||||
padding: 7px 0;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user