UX: Cleaning up category badge alignment (#5561)

This commit is contained in:
Kris 2018-02-02 19:03:25 -05:00 committed by GitHub
parent 80ea2e5107
commit 9e690bf238
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 122 additions and 118 deletions

View File

@ -75,22 +75,45 @@
li.category-link {
float: left;
background-color: transparent;
width: 45%;
margin: 5px 5px 0 8px;
.box {margin-top: 0;}
display: inline-flex;
margin: 0.25em 0.5em;
width: 44%;
.badge-notification {
color: dark-light-choose($primary-medium, $secondary-medium);
background-color: transparent;
display: inline;
padding: 0;
font-size: $font-down-1;
line-height: $line-height-large;
}
.badge-wrapper {
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 80%;
&.bar, &.bullet {
color: $primary;
}
&.box {
color: $secondary;
+ a.badge.badge-notification {
padding-top: 2px;
}
span {
z-index: z("base") * -1;
}
}
}
}
// note these topic counts only appear for anons in the category hamburger drop down
b.topics-count {
color: dark-light-choose($primary-medium, $secondary-medium);
font-weight: normal;
font-size: $font-down-2;
font-size: $font-down-1;
}
.box + b.topics-count {
padding-top: 2px;
}
span.badge-category {

View File

@ -44,7 +44,8 @@
}
.topic-category {
margin-top: 5px;
display: flex;
flex-wrap: wrap;
.topic-header-extra {
display: inline-block;
@ -55,17 +56,14 @@
margin-top: 0;
&.bullet .badge-category {
vertical-align: middle;
}
&.box, &.bullet {
vertical-align: middle;
}
&.box + .topic-header-extra,
&.bullet + .topic-header-extra,
&.bar + .topic-header-extra {
vertical-align: middle;
}
}
}
@ -133,7 +131,6 @@ $tag-color: $primary-medium;
.d-header .topic-header-extra {
.discourse-tags {
display: inline-block;
font-size: $font-down-1;
}
.topic-featured-link { margin-left: 8px; }
@ -176,9 +173,12 @@ $tag-color: $primary-medium;
}
.mobile-view .topic-list-item .discourse-tags {
display: inline-block;
display: inline-flex;
font-size: $font-down-1;
margin-top: 0;
.discourse-tag {
margin-right: .2em;
}
.discourse-tag.box {
position:relative;
top: 0;

View File

@ -45,20 +45,42 @@
}
}
.title-wrapper {
display: flex;
flex-wrap: wrap;
width: 90%;
.btn-small {
margin: 0 6px 0 0;
}
a.topic-featured-link {
display: inline-block;
}
}
h1 {
margin: 0 0 4px 0;
width: 90%;
}
a.badge-category {
margin-top: 5px;
}
#topic-title {
.title-wrapper {
float: left;
display: flex;
flex-wrap: wrap;
width: 90%;
.btn-small {
margin: 0 6px 0 0;
}
.badge-wrapper {
margin-right: 12px;
}
a.topic-featured-link {
display: inline-block;
}
@ -66,6 +88,7 @@
h1 {
margin: 0 0 4px 0;
width: 90%;
}
a.badge-category {

View File

@ -20,104 +20,49 @@
font-weight: bold;
white-space: nowrap;
position: relative;
display: inline-flex;
align-items: center;
.badge-category {
.d-icon {
margin-right: 3px;
}
}
&.bar { //bar category style
line-height: $line-height-medium;
margin-right: 5px;
// ----- Bullet
span.badge-category {
color: $primary;
padding: 3px;
overflow: hidden;
text-overflow: ellipsis;
display: inline-flex;
align-items: center;
justify-content: space-between;
.extra-info-wrapper & {
color: $header-primary;
}
}
.badge-category-parent-bg, .badge-category-bg {
display: inline-block;
padding: 1px;
&:before {
content: "\a0";
}
}
}
&.none { // no category style
color: $primary;
margin-right: 5px;
}
&.bullet { //bullet category style
display: inline-flex;
align-items: center;
&.bullet {
margin-right: 12px;
.extra-info-wrapper & {
margin-top: .25em;
}
span.badge-category {
color: $primary;
overflow: hidden;
text-overflow: ellipsis;
line-height: $line-height-medium;
#search-dropdown & {
margin-top: -2px;
}
.extra-info-wrapper & {
color: $header-primary;
}
}
.badge-category-parent-bg, .badge-category-bg {
width: 10px;
height: 10px;
width: 9px;
height: 9px;
margin-right: 5px;
display: inline-block;
line-height: $line-height-small;
&:before {
content: "\a0";
}
}
span {
&.badge-category-parent-bg { //subcategory style
.badge-category-parent-bg { // Subcategories
width: 5px;
margin-right: 0;
+.badge-category-bg {
width: 5px;
margin-right: 0;
& + .badge-category-bg {
width: 5px;
}
}
}
}
// ----- Box
&.box { //box category style (apply custom widths to the wrapper, not the children)
line-height: $line-height-large;
&.box {
margin-right: 5px;
padding: 2px 4px 1px 4px;
display: inline-flex;
span {
overflow: hidden;
text-overflow: ellipsis;
&.badge-category-bg, &.badge-category-parent-bg {
position: absolute;
top: 0;
@ -126,7 +71,7 @@
left: 0;
}
&.badge-category-parent-bg { //subcategory style
&.badge-category-parent-bg { // Subcategories
width: calc(100% - 5px);
& + .badge-category-bg {
left: 5px;
@ -139,23 +84,52 @@
&.badge-category {
position: relative;
padding: 0 5px;
margin: 2px 0;
}
}
+ .topic-header-extra {
padding: 2px 4px 1px 4px;
}
}
// ----- Bar
&.bar {
margin-right: 5px;
span.badge-category {
color: $primary;
padding: 3px;
overflow: hidden;
text-overflow: ellipsis;
.extra-info-wrapper & {
color: $header-primary;
}
}
.badge-category-parent-bg, .badge-category-bg { // Subcategories
display: inline-block;
padding: 0 1px;
&:before {
content: "\a0";
}
}
}
// ----- No category style
&.none {
color: $primary;
margin-right: 5px;
}
}
.autocomplete, td.category {
.badge-wrapper {
max-width: 230px;
}
}
// Category badge dropdown
// --------------------------------------------------
.list-controls {
.category-breadcrumb {
a.badge-category {

View File

@ -17,23 +17,24 @@
}
}
.category-drop-header {
padding: 6px 10px;
}
&.bar.has-selection .category-drop-header {
padding: 1.5px 10px;
padding: 4.5px 10px;
}
&.bullet.has-selection .category-drop-header {
padding: 3.5px 10px;
padding: 6px 10px;
span.badge-category {
line-height: $line-height-large;
line-height: $line-height-medium;
}
.selected-name {
.bullet {
line-height: $line-height-medium;
}
}
}
&.box.has-selection .category-drop-header {
padding: 4.5px 10px;
padding: 3px 10px;
}
&.none.has-selection .category-drop-header {
@ -49,10 +50,6 @@
line-height: $line-height-medium;
transition: none;
.badge-category {
display: flex;
align-items: center;
}
.badge-wrapper {
margin-right: 0;
@ -132,19 +129,9 @@
.badge-wrapper {
margin: 0;
display: flex;
flex: 1 1 auto;
}
}
.select-kit-row .badge-wrapper.box {
padding: 2.5px 0;
}
.select-kit-row .badge-wrapper.bullet, .select-kit-row .badge-wrapper.none {
margin: 2.5px;
}
&.is-expanded .select-kit-wrapper, .select-kit-wrapper {
display: none;
}

View File

@ -82,9 +82,6 @@
padding-left: 5px;
}
}
td.category {
line-height: $line-height-small;
}
.posters {
// we know there are up to 5 avatars of fixed size