Skip to content

Commit

Permalink
UX: More consistent table header styles, removing duplicate styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@awesomerobot
awesomerobot committed Feb 27, 2019
1 parent 1d4e9b0 commit ef9b249
Show file tree
Hide file tree
Showing 18 changed files with 36 additions and 140 deletions.
2 changes: 2 additions & 0 deletions app/assets/javascripts/discourse/templates/modal/reorder-categories.hbs
View file
Expand Up @@ -5,6 +5,7 @@
<th class="th-pos">{{i18n "categories.reorder.position"}}</th>
<th class="th-cat">{{i18n "categories.category"}}</th>
</thead>
<tbody>
{{#each categoriesOrdered as |cat|}}
<tr data-category-id="{{cat.id}}">
<td>
Expand All @@ -21,6 +22,7 @@
<td>{{category-badge cat allowUncategorized="true"}}</td>
</tr>
{{/each}}
</tbody>
</table>
<div id="rc-scroll-bottom"></div>
{{/d-modal-body}}
Expand Down
15 changes: 0 additions & 15 deletions app/assets/stylesheets/common/admin/admin_base.scss
View file
Expand Up @@ -99,21 +99,6 @@ $mobile-breakpoint: 700px;
th {
padding: 8px;
}
th {
text-align: left;
&.sortable {
cursor: pointer;

&:hover {
background-color: #e9e9e9;
background-color: lighten($primary, 80%);
}
.d-icon-chevron-down,
.d-icon-chevron-up {
margin-left: 0.5em;
}
}
}
tr:hover {
background-color: darken($secondary, 2.5%);
}
Expand Down
2 changes: 0 additions & 2 deletions app/assets/stylesheets/common/admin/dashboard_previous.scss
View file
Expand Up @@ -42,7 +42,6 @@
}
th {
background: transparent;
text-align: left;
padding: 0;
}
}
Expand Down Expand Up @@ -139,7 +138,6 @@
}
}
th {
font-weight: normal;
text-align: center;
background: $primary-low;
}
Expand Down
3 changes: 0 additions & 3 deletions app/assets/stylesheets/common/admin/moderation_history.scss
View file
@@ -1,8 +1,5 @@
.moderation-history {
width: 100%;
th {
text-align: left;
}
td.date {
padding-right: 1em;
}
Expand Down
7 changes: 2 additions & 5 deletions app/assets/stylesheets/common/base/_topic-list.scss
View file
Expand Up @@ -118,15 +118,12 @@
vertical-align: middle;
}
th {
color: dark-light-choose($primary-medium, $secondary-medium);
font-weight: normal;
font-size: $font-0;
button .d-icon {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-medium;
}
}
td {
color: dark-light-choose($primary-medium, $secondary-medium);
color: $primary-medium;
font-size: $font-0;
}

Expand Down
7 changes: 1 addition & 6 deletions app/assets/stylesheets/common/base/about.scss
View file
Expand Up @@ -8,12 +8,7 @@ section.about {
table {
width: auto;

th {
text-align: left;
}

td,
th {
td {
padding: 10px;
}

Expand Down
2 changes: 0 additions & 2 deletions app/assets/stylesheets/common/base/cat_reorder.scss
View file
@@ -1,9 +1,7 @@
.reorder-categories {
thead {
border-bottom: 1px solid $primary-low;
th {
padding-bottom: 0.5em;
text-align: left;
}
}
input {
Expand Down
12 changes: 1 addition & 11 deletions app/assets/stylesheets/common/base/directory.scss
View file
Expand Up @@ -46,20 +46,10 @@
}

th.sortable {
cursor: pointer;
white-space: nowrap;
width: 13%;
.d-icon-heart {
color: $love;
margin-right: 0.5em;
}
.d-icon-chevron-down,
.d-icon-chevron-up {
margin-left: 0.5em;
}

&:hover {
background-color: $primary-low;
margin: 0 0.25em 0 0;
}
}
}
Expand Down
39 changes: 24 additions & 15 deletions app/assets/stylesheets/common/base/discourse.scss
View file
Expand Up @@ -276,7 +276,31 @@ select {
border: 1px solid $primary-low;
}

table {
th {
font-weight: normal;
color: $primary-medium;
text-align: left;
padding: 0.5em;
}
}

// Common Classes

.sortable {
white-space: nowrap;
cursor: pointer;
.discourse-no-touch & {
&:hover {
background-color: $primary-low;
}
}
.d-icon {
margin-left: 0.25em;
}
@include unselectable;
}

.radio,
.checkbox {
min-height: 18px;
Expand Down Expand Up @@ -532,21 +556,6 @@ select {

.control-group {
@include clearfix;

.table {
width: 100%;

th,
td {
padding: 10px;
text-align: center;
}
}

&.highlighted {
animation: background-fade-highlight 2.5s ease-out;
background-color: dark-light-choose($highlight-low, $highlight);
}
}

.control-label {
Expand Down
23 changes: 2 additions & 21 deletions app/assets/stylesheets/common/base/group.scss
View file
Expand Up @@ -82,20 +82,15 @@
table.group-manage-logs {
width: 100%;

th {
text-align: left;
padding: 5px 0;
}

td {
padding: 10px 0;
padding: 0.5em;
}

.group-manage-logs-expand-details {
cursor: pointer;

.d-icon {
color: blend-primary-secondary(50%);
color: $primary-medium;
}
}
}
Expand All @@ -119,20 +114,6 @@ table.group-members {

th {
text-align: center;
padding: 5px 0 5px 5px;
color: dark-light-choose($primary-medium, $secondary-medium);
font-weight: normal;
}

th.sortable {
.d-icon {
margin-left: 5px;
}

&:hover {
cursor: pointer;
background-color: $primary-low;
}
}

tr {
Expand Down
13 changes: 0 additions & 13 deletions app/assets/stylesheets/common/base/groups.scss
View file
Expand Up @@ -26,19 +26,6 @@
.groups-table {
width: 100%;

th {
border-bottom: 1px solid $primary-low;
padding: 0.5em;
text-align: left;
}

.sortable {
&:hover {
background-color: $primary-low;
cursor: pointer;
}
}

tr {
td {
padding: 0.8em;
Expand Down
8 changes: 4 additions & 4 deletions app/assets/stylesheets/common/base/topic-post.scss
View file
Expand Up @@ -607,16 +607,16 @@ blockquote > *:last-child {
.cooked table,
.d-editor-preview table {
thead {
border-bottom: 2px solid lighten($primary, 80%);
th {
text-align: left;
padding-bottom: 2px;
font-weight: bold;
color: $primary;
}
}

td,
th {
padding: 3px 3px 3px 10px;
td {
padding: 3px 3px 3px 0.5em;
}
}

Expand Down
2 changes: 0 additions & 2 deletions app/assets/stylesheets/desktop/category-list.scss
View file
Expand Up @@ -12,9 +12,7 @@
}

th {
text-align: left;
vertical-align: middle;
font-weight: normal;
}

td:first-of-type {
Expand Down
8 changes: 0 additions & 8 deletions app/assets/stylesheets/desktop/group.scss
View file
Expand Up @@ -50,11 +50,3 @@
top: 20px;
right: 20px;
}

.groups-table {
thead {
.d-icon {
padding-left: 2px;
}
}
}
7 changes: 0 additions & 7 deletions app/assets/stylesheets/desktop/topic-list.scss
View file
Expand Up @@ -111,13 +111,6 @@
left: -2px;
}

.sortable {
cursor: pointer;
&:hover {
background-color: $primary-low;
}
@include unselectable;
}
.likes {
width: 65px;
}
Expand Down
12 changes: 0 additions & 12 deletions app/assets/stylesheets/desktop/user.scss
View file
Expand Up @@ -115,18 +115,6 @@
.user-invite-list {
width: 100%;
margin-top: 15px;

th {
text-align: left;
padding: 0 0 10px 0;
color: dark-light-choose($primary-medium, $secondary-medium);
font-weight: normal;
}

td {
padding: 10px 0 10px 0;
border-bottom: 1px solid $primary-low;
}
}

.user-invite-search {
Expand Down
1 change: 0 additions & 1 deletion app/assets/stylesheets/mobile/topic-list.scss
View file
Expand Up @@ -140,7 +140,6 @@
th,
td {
padding: 7px 0;
color: dark-light-choose($primary-medium, $secondary-medium);
max-width: 300px;
}

Expand Down
13 changes: 0 additions & 13 deletions app/assets/stylesheets/mobile/user.scss
View file
Expand Up @@ -19,9 +19,7 @@
text-overflow: ellipsis;
}
th {
padding: 0.5em;
text-align: right;
border-bottom: 1px solid $primary-low;
}
td {
padding: 0.5em;
Expand Down Expand Up @@ -51,17 +49,6 @@
table {
width: 100%;
margin-top: 10px;

th {
text-align: left;
border-bottom: 1px solid $primary-low;
padding: 5px;
}

td {
padding: 5px;
border-bottom: 1px solid $primary-low;
}
}
}

Expand Down

1 comment on commit ef9b249

@awesomerobot
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We were redefining th styles and things like .sortable over and over again. This meant themes also had to redefine these styles over and over again, and the core styles were inconsistent for no reason (things like .sortable .d-icon had a bunch of different margins defined).

Now most of these styles are centralized in discourse.scss, and one-off styles are legitimate cases that aren't just duplicates.

Please sign in to comment.