Verified Commit 33efdeae authored by godotislate's avatar godotislate
Browse files

fix: #3623407 Broken tabledrag UI when uploading multiple files in Admin theme 

By: mherchel
By: gábor hojtsy
By: oily
By: catch
parent ed5bcd2a

core/profiles/demo_umami/tests/src/FunctionalJavascript/MultipleRequestsPerformanceTestAssertions/umamiNodeAddEditor.yml

+1 −1
Changes for core/profiles/demo_umami/tests/src/FunctionalJavascript/MultipleRequestsPerformanceTestAssertions/umamiNodeAddEditor.yml: 1 added line, 1 removed line.
Original line number Diff line number Diff line 
ScriptCount: 25

ScriptBytes: 3621032

StylesheetCount: 7

StylesheetBytes: 862620
 
StylesheetBytes: 861912

core/themes/default_admin/css/components/table--file-multiple-widget.css

+1 −85
Changes for core/themes/default_admin/css/components/table--file-multiple-widget.css: 1 added line, 85 removed lines.
Original line number Diff line number Diff line
@@ -11,91 +11,7 @@ 
 */



.table-file-multiple-widget {

  & tbody {

    vertical-align: top;

  }

  & .tabledrag-cell-content {

    position: relative;

    display: block;

    height: auto;



    & > * {

      display: block;

    }

  }

  & .tabledrag-cell-content__item {

    padding: 0;

  }

  & .tabledrag-handle,

  & .tabledrag-changed {

    float: left;

  }

  & .tabledrag-changed {

    line-height: calc(var(--tabledrag-handle-icon-size) + calc(var(--admin-space-xs) * 2));

  }

  & td {

    height: calc(var(--admin-space-m) * 3);

    padding-block: var(--admin-space-m);

    & > :first-child,

    & > :last-child {

      margin-block: 0;

    }

  }

  & .button.button:only-child {

    margin: 0;

  }

  & th {

    height: calc(var(--admin-space-m) * 2);

    color: var(--admin-color-text-soft);

    background: var(--admin-color-bg-surface-nested);

    font-size: var(--admin-font-size-s);

  }

  & .tabledrag-cell {

  .tabledrag-cell {

    padding-block: var(--admin-space-xs);

  }

  & .checkbox .form-type--boolean {

    line-height: calc(var(--admin-space-m) * 3);

  }

}



[dir="rtl"] .table-file-multiple-widget {

  & .tabledrag-handle,

  & .tabledrag-changed {

    float: right;

  }

}



.no-touchevents .table-file-multiple-widget .checkbox .form-type--boolean {

  line-height: var(--admin-line-height);

}



/**

 * The cell that contains file operations (usually, this is the remove button).

 */



.file-operations-cell {

  width: 1px;

  white-space: nowrap; /* Don't let ajax-progress be broken into a new line. */

}



/**

 * Remove the border for the last table row if upload is not possible.

 * (A full file widget with limited cardinality.)

 */



.table-file-multiple-widget--no-upload > tbody:last-child > tr:last-child {

  border-block-end: 0;

}



/**

 * Take as much space as possible.

 */



@media screen and (max-width: 37.5em) {

  .details__wrapper .file-widget-multiple__table-wrapper {

    margin-inline: calc(var(--admin-space-m) * -1);

    & > :not(table) {

      margin-inline: var(--admin-space-m);

    }

  }

}

core/themes/default_admin/css/components/table--file-multiple-widget.pcss.css

+1 −82
Changes for core/themes/default_admin/css/components/table--file-multiple-widget.pcss.css: 1 added line, 82 removed lines.
Original line number Diff line number Diff line
@@ -4,88 +4,7 @@ 
 */



.table-file-multiple-widget {

  & tbody {

    vertical-align: top;

  }

  & .tabledrag-cell-content {

    position: relative;

    display: block;

    height: auto;



    & > * {

      display: block;

    }

  }

  & .tabledrag-cell-content__item {

    padding: 0;

  }

  & .tabledrag-handle,

  & .tabledrag-changed {

    float: left;

  }

  & .tabledrag-changed {

    line-height: calc(var(--tabledrag-handle-icon-size) + calc(var(--admin-space-xs) * 2));

  }

  & td {

    height: calc(var(--admin-space-m) * 3);

    padding-block: var(--admin-space-m);

    & > :first-child,

    & > :last-child {

      margin-block: 0;

    }

  }

  & .button.button:only-child {

    margin: 0;

  }

  & th {

    height: calc(var(--admin-space-m) * 2);

    color: var(--admin-color-text-soft);

    background: var(--admin-color-bg-surface-nested);

    font-size: var(--admin-font-size-s);

  }

  & .tabledrag-cell {

  .tabledrag-cell {

    padding-block: var(--admin-space-xs);

  }

  & .checkbox .form-type--boolean {

    line-height: calc(var(--admin-space-m) * 3);

  }

}



[dir="rtl"] .table-file-multiple-widget {

  & .tabledrag-handle,

  & .tabledrag-changed {

    float: right;

  }

}



.no-touchevents .table-file-multiple-widget .checkbox .form-type--boolean {

  line-height: var(--admin-line-height);

}



/**

 * The cell that contains file operations (usually, this is the remove button).

 */

.file-operations-cell {

  width: 1px;

  white-space: nowrap; /* Don't let ajax-progress be broken into a new line. */

}



/**

 * Remove the border for the last table row if upload is not possible.

 * (A full file widget with limited cardinality.)

 */

.table-file-multiple-widget--no-upload > tbody:last-child > tr:last-child {

  border-block-end: 0;

}



/**

 * Take as much space as possible.

 */

@media screen and (max-width: 37.5em) {

  .details__wrapper .file-widget-multiple__table-wrapper {

    margin-inline: calc(var(--admin-space-m) * -1);

    & > :not(table) {

      margin-inline: var(--admin-space-m);

    }

  }

}