Click topic list header changes column width


(Erick Guan) #1

Ksnapshot choose the same screen region.

first click:

second click:


(Sam Saffron) #2

@awesomerobot this is a long standing UI bug we have

Similarly the dynamic nature of category name width means that as you browse down the list of topics we “shift” the width of the category column.

I wonder if we should simply reserve a certain width for category name and fix the design so this jitter stops.


(Mittineague) #3

Aha. It doesn’t do that on my localhost.

BUT, I have no “Uncategorized” (other than the “Welcome”) and it isn’t “suppressed”

Category Name says “One or two words maximum”, but is there a character length (width) limit that could be accommodated for? If so, that seems the easiest solution IMHO

Else something “sane” should do it for most except for edge case
"Exceedingly Verbose" category names


(Simon Cossar) #4

The alignment of the table headers is also inconsistent. ‘Topic’, ‘Category’ and ‘Users’ are aligned left while ‘Replies’, ‘Views’ and ‘Activity’ are center aligned. It is especially noticeable when you hover over them.


(Jeff Atwood) #5

That has nothing really to do with this – number (and date, which is kinda/sorta a number) columns are typically handled differently than text columns.


(Simon Cossar) #6

I hadn’t thought of it that way. I was thinking of the row as being divided between sortable and static columns.
If sortable column headers always had an icon beside them, it might make it easier to give them a consistent set of styles. Something like on this site: DataTables example - Default ordering (sorting)


(Simon Cossar) #7

Here’s an attempt to fix it with custom css.

It sets a width on the ‘Category’ header. The ‘category’ header will still expand if the columns below it need the room.

The problem with the ‘Activity’ header is solved by using a smaller sorting icon that fits within the given 60px.

I got rid of the :hover background color change and added a ‘sorting’ icon that appears on hover.

For the next little while, you can see it in action here: http://46.101.26.85/

The positioning of the icons is based on the width required for the table header text. If a div was added to the table header markup to contain the controls the positioning of the icons would be more straightforward.

Here’s the css:

/* We want to position the controls relative to the th */
.topic-list thead .sortable {
  position: relative;
}

/* Get rid of the hover effect */
.topic-list thead .sortable:hover {
  background: #fff;
}

/* Give the category header a width to keep it from collapsing. It will expand as needed. */
.topic-list thead .sortable.category {
  width: 80px;
}

/*
 Hide the .fa icon spans by matching their color to the background and giving them a width of 0.
 We are using this class as a switch to select the appropriate control arrow.
 Position them to the left to create a predictable starting position for our controls.;
*/
.topic-list thead .sortable .fa {
  color: #fff;
  width: 0;
  position: absolute;
  left: 0;
}

/*
 Set the heights for the active controls. They are based off of the position of the
 hidden .fa icon.
*/
.topic-list thead .sortable.sorting .fa-chevron-up {
  top: -3px;
}

.topic-list thead .sortable.sorting .fa-chevron-down {
  bottom: 20px;
}

/* Upward triangle */
.topic-list thead .sortable::before {
  border: solid transparent;
  content: " ";
  border-width: 5px;
  border-bottom-color: #919191;
  position: absolute;
  top: 10px;
}

/* Downward triangle*/
.topic-list thead .sortable::after {
  border: solid transparent;
  content: " ";
  border-width: 5px;
  border-top-color: #919191;
  position: absolute;
  bottom: 10px;
}

/* Hide the controls. Reveal them on hover. */
.topic-list thead .sortable::before,
.topic-list thead .sortable::after {
  transition: all 0.3s;
  opacity: 0;
}

.topic-list thead .sortable:hover::before,
.topic-list thead .sortable:hover::after {
  opacity: 1;
}

// Hide the controls when we are sorting
.topic-list thead .sortable.sorting::before,
.topic-list thead .sortable.sorting::after {
  display: none;
}

// Use the selected fa icon class to select the appropriate arrow
.topic-list thead .sortable.sorting .fa-chevron-up::after {
  border: solid transparent;
  content: " ";
  border-width: 5px;
  border-bottom-color: #919191;
  position: absolute;
}

.topic-list thead .sortable.sorting .fa-chevron-down::after {
  border: solid transparent;
  content: " ";
  border-width: 5px;
  border-top-color: #919191;
  position: absolute;
}

/* Position controls from the left because we always know where it is. */
/* Category controls position */
.topic-list thead .sortable.category::before,
.topic-list thead .sortable.category::after,
.topic-list thead .sortable.category.sorting .fa-chevron-up,
.topic-list thead .sortable.category.sorting .fa-chevron-down {
  left: 63px;
}

/* Category controls position */
.topic-list thead .sortable.posts::before,
.topic-list thead .sortable.posts::after,
.topic-list thead .sortable.posts.sorting .fa-chevron-up,
.topic-list thead .sortable.posts.sorting .fa-chevron-down {
  left: 62px;
}

/* Category controls position */
.topic-list thead .sortable.views::before,
.topic-list thead .sortable.views::after,
.topic-list thead .sortable.views.sorting .fa-chevron-up,
.topic-list thead .sortable.views.sorting .fa-chevron-down {
  left: 57px;
}

/* Category controls position */
.topic-list thead .sortable.activity::before,
.topic-list thead .sortable.activity::after,
.topic-list thead .sortable.activity.sorting .fa-chevron-up,
.topic-list thead .sortable.activity.sorting .fa-chevron-down {
  left: 58px;
}