Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

SYNTAX: Use classes instead of html element targeting (#14890) 

* SYNTAX: Use classes instead of html element targeting
This commit is contained in:
Jordan Vidrine 2021-11-15 14:49:45 -06:00 committed by GitHub
parent 389a3ce389
commit 0e371d4c6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 33 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/templates/components/topic-list.hbs
View File

@ -1,5 +1,5 @@
{{#unless skipHeader}} {{#unless skipHeader}}
<thead> <thead class="topic-list-header">
{{raw "topic-list-header" {{raw "topic-list-header"
canBulkSelect=canBulkSelect canBulkSelect=canBulkSelect
toggleInTitle=toggleInTitle toggleInTitle=toggleInTitle
@ -29,7 +29,7 @@
tagName="" tagName=""
connectorTagName=""}} connectorTagName=""}}
<tbody> <tbody class="topic-list-body">
{{#each filteredTopics as |topic|}} {{#each filteredTopics as |topic|}}
{{topic-list-item topic=topic {{topic-list-item topic=topic
bulkSelectEnabled=bulkSelectEnabled bulkSelectEnabled=bulkSelectEnabled

2
app/assets/javascripts/discourse/app/templates/list/category-column.hbr
View File

@ -1 +1 @@
<td class='category'>{{category-link category}}</td> <td class='category topic-list-data'>{{category-link category}}</td>

2
app/assets/javascripts/discourse/app/templates/list/posters-column.hbr
View File

@ -1,4 +1,4 @@
<td class='posters'> <td class='posters topic-list-data'>
{{#each posters as |poster|}} {{#each posters as |poster|}}
{{#if poster.moreCount}} {{#if poster.moreCount}}
<a class="posters-more-count">{{poster.moreCount}}</a> <a class="posters-more-count">{{poster.moreCount}}</a>

2
app/assets/javascripts/discourse/app/templates/list/posts-count-column.hbr
View File

@ -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}}"> <button class="btn-link posts-map badge-posts {{view.likesHeat}}">
{{raw-plugin-outlet name="topic-list-before-reply-count"}} {{raw-plugin-outlet name="topic-list-before-reply-count"}}
{{number topic.replyCount noTitle="true" ariaLabel=view.title}} {{number topic.replyCount noTitle="true" ariaLabel=view.title}}

14
app/assets/javascripts/discourse/app/templates/list/topic-list-item.hbr
View File

@ -1,7 +1,7 @@
{{~raw-plugin-outlet name="topic-list-before-columns"}} {{~raw-plugin-outlet name="topic-list-before-columns"}}
{{#if bulkSelectEnabled}} {{#if bulkSelectEnabled}}
<td class="bulk-select"> <td class="bulk-select topic-list-data">
<label for="bulk-select-{{topic.id}}"> <label for="bulk-select-{{topic.id}}">
<input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}"> <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
</label> </label>
@ -15,21 +15,21 @@
This causes the topic-post-badge to be considered the same word as "text" 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. 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"}} {{~raw-plugin-outlet name="topic-list-before-link"}}
<span class='link-top-line'> <span class='link-top-line'>
{{~raw-plugin-outlet name="topic-list-before-status"}} {{~raw-plugin-outlet name="topic-list-before-status"}}
{{~raw "topic-status" topic=topic}} {{~raw "topic-status" topic=topic}}
{{~topic-link topic class="raw-link raw-topic-link"}} {{~topic-link topic class="raw-link raw-topic-link"}}
{{~#if topic.featured_link}} {{~#if topic.featured_link}}
{{~topic-featured-link topic}} {{~topic-featured-link topic}}
{{~/if}} {{~/if}}
{{~raw-plugin-outlet name="topic-list-after-title"}} {{~raw-plugin-outlet name="topic-list-after-title"}}
{{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator {{~raw "list/unread-indicator" includeUnreadIndicator=includeUnreadIndicator
topicId=topic.id topicId=topic.id
unreadClass=unreadClass~}} unreadClass=unreadClass~}}
{{~#if showTopicPostBadges}} {{~#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}} {{~/if}}
</span> </span>
<div class="link-bottom-line"> <div class="link-bottom-line">
@ -54,7 +54,7 @@
{{raw "list/posts-count-column" topic=topic}} {{raw "list/posts-count-column" topic=topic}}
{{#if showLikes}} {{#if showLikes}}
<td class="num likes"> <td class="num likes topic-list-data">
{{#if hasLikes}} {{#if hasLikes}}
<a href='{{topic.summaryUrl}}'> <a href='{{topic.summaryUrl}}'>
{{number topic.like_count}} {{d-icon "heart"}} {{number topic.like_count}} {{d-icon "heart"}}
@ -73,6 +73,6 @@
</td> </td>
{{/if}} {{/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"}}

2
app/assets/javascripts/discourse/app/templates/topic-list-header-column.hbr
View File

@ -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 canBulkSelect}}
{{~#if showBulkToggle}} {{~#if showBulkToggle}}
{{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}} {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}

2
app/assets/javascripts/discourse/app/templates/topic-list-header.hbr
View File

@ -1,6 +1,6 @@
{{~raw-plugin-outlet name="topic-list-header-before"~}} {{~raw-plugin-outlet name="topic-list-header-before"~}}
{{#if bulkSelectEnabled}} {{#if bulkSelectEnabled}}
<th class="bulk-select"> <th class="bulk-select topic-list-data">
{{#if canBulkSelect}} {{#if canBulkSelect}}
{{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}} {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
{{/if}} {{/if}}

20
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -127,7 +127,7 @@
// Topic list body // Topic list body
.topic-list-item.visited, .topic-list-item.visited .topic-list-data,
.latest-topic-list-item.visited, .latest-topic-list-item.visited,
.category-topic-link.visited { .category-topic-link.visited {
a.title:not(.badge-notification) { a.title:not(.badge-notification) {
@ -169,7 +169,7 @@
} }
} }
.sticky-header thead { .sticky-header .topic-list-header {
@include sticky; @include sticky;
top: var(--header-offset, 60px); top: var(--header-offset, 60px);
background: var(--secondary); background: var(--secondary);
@ -180,7 +180,7 @@
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
> tbody > tr { > .topic-list-body > .topic-list-item {
&.has-excerpt .star { &.has-excerpt .star {
vertical-align: top; vertical-align: top;
margin-top: 2px; margin-top: 2px;
@ -198,14 +198,14 @@
.topic-list-item-separator { .topic-list-item-separator {
border: none; border: none;
td { .topic-list-data {
border-bottom: 1px solid var(--danger-medium); border-bottom: 1px solid var(--danger-medium);
line-height: 0.1em; line-height: 0.1em;
padding: 0; padding: 0;
text-align: center; text-align: center;
} }
td span { .topic-list-data span {
position: relative; // Chrome needs this, otherwise the line is above the text position: relative; // Chrome needs this, otherwise the line is above the text
background-color: var(--secondary); background-color: var(--secondary);
color: var(--danger-medium); color: var(--danger-medium);
@ -214,21 +214,21 @@
} }
} }
th, .topic-list-data {
td {
line-height: $line-height-large; line-height: $line-height-large;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
} }
th .btn-flat .d-icon { .btn-flat .d-icon {
color: currentColor; color: currentColor;
} }
td { td {
color: var(--primary-medium); color: var(--primary-medium);
font-size: $font-0; font-size: $font-0;
} }
.main-link { .topic-list-data.main-link {
@extend .topic-list-main-link; @extend .topic-list-main-link;
.raw-topic-link > * { .raw-topic-link > * {
@ -334,7 +334,7 @@
.loading .topic-list { .loading .topic-list {
border: 0; border: 0;
box-shadow: none; box-shadow: none;
tr { .topic-list-item {
background-color: transparent; background-color: transparent;
} }
} }

1
app/assets/stylesheets/common/foundation/base.scss
View File

@ -133,6 +133,7 @@ tbody {
border-top: 3px solid var(--primary-low); border-top: 3px solid var(--primary-low);
} }
.topic-list-item,
tr { tr {
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);
&.highlighted { &.highlighted {

19
app/assets/stylesheets/desktop/topic-list.scss
View File

@ -24,8 +24,7 @@
@extend .topic-list-icons; @extend .topic-list-icons;
margin: 0 0 10px; margin: 0 0 10px;
th, .topic-list-data {
td {
padding: 12px 5px; padding: 12px 5px;
&:first-of-type { &:first-of-type {
padding-left: 10px; padding-left: 10px;
@ -40,7 +39,7 @@
line-height: $line-height-large; line-height: $line-height-large;
} }
td.bulk-select { .topic-list-data.bulk-select {
padding: 0; padding: 0;
width: 30px; width: 30px;
label { label {
@ -84,7 +83,7 @@
} }
} }
} }
td.posters { .topic-list-data.posters {
height: $td-posters-height; height: $td-posters-height;
} }
.posters a:first-child .avatar.latest:not(.single) { .posters a:first-child .avatar.latest:not(.single) {
@ -212,20 +211,16 @@ button.dismiss-read {
.topic-list { .topic-list {
// tighter table header spacing // tighter table header spacing
th:first-of-type { .topic-list-data:first-of-type {
padding: 12px 5px; padding: 12px 5px;
} }
// smaller table cell spacing // smaller table cell spacing
th, .topic-list-data {
td {
padding: 10px; padding: 10px;
font-size: $font-0; font-size: $font-0;
} }
// suppress views column // suppress views column
th.views { .views {
display: none;
}
td.views {
display: none; display: none;
} }
// reduce width for more title space // reduce width for more title space
@ -237,7 +232,7 @@ button.dismiss-read {
text-align: center; text-align: center;
} }
// show only the first poster // show only the first poster
td.posters { .topic-list-data.posters {
a:not(.latest) { a:not(.latest) {
display: none; display: none;
} }

3
app/assets/stylesheets/mobile/topic-list.scss
View File

@ -113,8 +113,7 @@ ol.category-breadcrumb {
margin-left: 55px; margin-left: 55px;
} }
th, .topic-list-data {
td {
padding: 7px 0; padding: 7px 0;
max-width: 300px; max-width: 300px;
} }