Fix features in thread lists
Due to an update in the HTML structure of thread lists, many features
stopped working properly. This CL fixes these issues.
In the case of the "reduce whitespace" option, the thread list styles
applied in small screens have been temporarily removed since they have
to be fixed still.
Bug: twpowertools:138
Change-Id: Icf6d74f8a579fedb6af65f44864bd6f744098f2a
diff --git a/src/static/css/ccdarktheme.css b/src/static/css/ccdarktheme.css
index e912a8c..be6b4d9 100644
--- a/src/static/css/ccdarktheme.css
+++ b/src/static/css/ccdarktheme.css
@@ -55,6 +55,7 @@
.material-content > header :is(material-button,
material-button material-icon,
.mdc-button.mdc-icon-button,
+ .mdc-button.mdc-icon-button material-icon,
notification-bell material-icon) {
color: rgba(255, 255, 255, .87)!important;
}
@@ -311,7 +312,8 @@
**/
ec-thread-summary material-expansionpanel .action material-button,
ec-thread-list material-checkbox material-icon,
- ec-thread-summary material-expansionpanel .star-button:not(.starred) {
+ ec-thread-summary material-expansionpanel .star-button:not(.starred),
+ ec-thread-summary material-expansionpanel .mdc-button.mdc-icon-button material-icon {
color: #696867!important; /* Custom value to match previous behavior */
opacity: 1!important;
}
diff --git a/src/static/css/reposition_expand_thread.css b/src/static/css/reposition_expand_thread.css
index ea26942..0e35af3 100644
--- a/src/static/css/reposition_expand_thread.css
+++ b/src/static/css/reposition_expand_thread.css
@@ -1,23 +1,21 @@
-ec-thread-summary .panel > .main-header {
- flex-direction: row-reverse;
+ec-thread-summary .panel > .main-header > .action > .header > .expand-button {
+ order: -99963; /* This will position the button in the beginning. */
}
-ec-thread-summary .panel > .main-header .expand-container {
- padding-inline: 8px 0;
-}
-
-ec-thread-summary .panel > .main-header > .header {
+ec-thread-summary .panel > .main-header > .action > .header {
padding-inline: 0px 19px!important;
}
+/* Adjusting padding for the bulk action checkbox */
ec-thread-list ec-bulk-actions .selection {
- padding-inline-start: 29px;
+ padding-inline-start: 41px;
}
+/* Adjusting padding for the info in the expanded thread */
ec-thread-summary .panel .main .content-wrapper > .content > .content {
- padding-inline: 121px 8px;
+ padding-inline: 136px 8px;
}
ec-thread-summary .main .toolbelt .TWPT-extrainfo-container {
- margin-inline-start: 145px!important;
+ margin-inline-start: 156px!important;
}
diff --git a/src/static/css/thread_list_avatars.css b/src/static/css/thread_list_avatars.css
index ff739d8..7427433 100644
--- a/src/static/css/thread_list_avatars.css
+++ b/src/static/css/thread_list_avatars.css
@@ -50,7 +50,10 @@
/*
* Changing styles of existing elements so the avatars fit.
+ *
+ * NOTE: The first px value is the pixels already removed by the default CSS
+ * styles. The second px value is the value substracted due to the avatars.
*/
-body.TWPT-threadlistavatars-enabled ec-thread-summary .main-header .panel-description a.header .header-content {
- width: calc(100% - 194px);
+body.TWPT-threadlistavatars-enabled ec-thread-summary .main-header .action .header .header-content {
+ width: calc(100% - 160px - 98px);
}
diff --git a/src/static/css/ui_spacing/console.css b/src/static/css/ui_spacing/console.css
index 33d0fec..686530a 100644
--- a/src/static/css/ui_spacing/console.css
+++ b/src/static/css/ui_spacing/console.css
@@ -19,7 +19,13 @@
display: none!important;
}
- ec-thread-summary .title,
+ /*
+ * IMPORTANT: Disabled temporarily since this breaks the interface in mobile
+ * and the fix will take a lot of time.
+ *
+ * This was broken by the recent update to the thtead list HTML.
+ **/
+ /*ec-thread-summary .title,
ec-thread-summary ec-second-summary-line .properties,
ec-thread-summary ec-second-summary-line ec-relative-time {
margin-inline-start: 0!important;
@@ -44,11 +50,11 @@
padding-inline: 0!important;
}
- body:not(.TWPT-threadlistavatars-enabled) ec-thread-summary div.header div.header-content {
+ body:not(.TWPT-threadlistavatars-enabled) ec-thread-summary div.header a.header-content {
width: calc(100% - 68px)!important;
}
- body.TWPT-threadlistavatars-enabled ec-thread-summary div.header div.header-content {
+ body.TWPT-threadlistavatars-enabled ec-thread-summary div.header a.header-content {
width: calc(100% - 134px)!important;
}
@@ -104,6 +110,7 @@
padding-inline: 56px 30px!important;
padding-block: 0!important;
}
+ */
}
@media (min-width: 37.5rem) {