From d70c791323fc9c11f659953c1d67d71b5b410f60 Mon Sep 17 00:00:00 2001 From: Sam Rawks Date: Fri, 3 Nov 2023 12:20:37 +0000 Subject: [PATCH 1/5] fix(css): Fix the styling of the data tables --- Resources/Public/Css/FeUsersDataTable.css | 86 ++++++++++++++++++++++- 1 file changed, 84 insertions(+), 2 deletions(-) diff --git a/Resources/Public/Css/FeUsersDataTable.css b/Resources/Public/Css/FeUsersDataTable.css index 9c1bfcc..5926f65 100644 --- a/Resources/Public/Css/FeUsersDataTable.css +++ b/Resources/Public/Css/FeUsersDataTable.css @@ -1,7 +1,6 @@ .t3js-toggle-recordlist.collapsed img { transform: rotate(-180deg); } - .form-control { margin: 0 0.5rem; } @@ -89,13 +88,18 @@ .paginate_button.last::before { content: ''; display: inline-block; - background-image: url('/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-view-paging-first.svg'); background-repeat: no-repeat; background-size: contain; width: 1.8rem; height: 1.8rem; } +.paginate_button.first::before { + background-size: 1em 1em; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg width='20px' height='20px' fill='%23fff'%3e%3cpath d='M5.414 8 8.95 4.464l-.707-.707L4 8l4.243 4.243.707-.707z'/%3e%3cpath d='m8.414 8 3.536-3.536-.707-.707L7 8l4.243 4.243.707-.707z'/%3e%3c/g%3e%3c/svg%3e"); +} + + .paginate_button.previous::before { background-image: url('/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-view-paging-previous.svg'); } @@ -105,3 +109,81 @@ .paginate_button.last::before { background-image: url('/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-view-paging-last.svg'); } + + + +/* NEW STUFF */ + +.form-inline { + display: grid; + grid-template-columns: max-content max-content; + grid-gap: 1em; +} + +div[id$="table_length"], +div[id$="table_filter"] { + margin: 0; +} + +div[id$="table_length"] > label { + display: grid; + grid-template-columns: minmax(20px, 40px) auto; + margin: 0; +} +div[id$="table_length"] > label > select { + order: 10; + grid-column: span 2; + margin: 0; +} + +div[id$="table_filter"] > label > input { + margin: 0; +} + +.paginate_button { + min-height: 42px; +} +.paginate_button.first::before, +.paginate_button.previous::before, +.paginate_button.next::before, +.paginate_button.last::before { + background-size: 1em 1em; + width: 20px; + height: 20px; + content: ''; + display: block; + font-size: 22px; + color: #000; +} +.paginate_button.first::before { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJtOC40MTQgOCAzLjUzNi0zLjUzNi0uNzA3LS43MDdMNyA4bDQuMjQzIDQuMjQzLjcwNy0uNzA3ek01IDRoMXY4SDV6Ii8+PC9nPjwvc3ZnPg=="); +} +.paginate_button.previous::before { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNNi40MTQgOCA5Ljk1IDQuNDY0bC0uNzA3LS43MDdMNSA4bDQuMjQzIDQuMjQzLjcwNy0uNzA3eiIvPjwvZz48L3N2Zz4="); +} +.paginate_button.next::before { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNOS41ODYgOCA2LjA1IDExLjUzNmwuNzA3LjcwN0wxMSA4IDYuNzU3IDMuNzU3bC0uNzA3LjcwN3oiLz48L2c+PC9zdmc+"); +} +.paginate_button.last::before { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNNy41ODYgOCA0LjA1IDExLjUzNmwuNzA3LjcwN0w5IDggNC43NTcgMy43NTdsLS43MDcuNzA3ek0xMCA0aDF2OGgtMXoiLz48L2c+PC9zdmc+"); +} + +/* div[id$="table_paginate"] { + display: grid; + grid-template-columns: repeat(5, auto); +} */ +div[id$="table_paginate"] > span > span, +.dataTables_paginate > span > span { + display: none; +} +div[id$="table_paginate"] > span > .paginate_button, +.dataTables_paginate > span > .paginate_button { + padding: 11px 13px; +} +div[id$="table_paginate"] > .paginate_button, +.dataTables_paginate > .paginate_button { + padding: 9px 13px; +} +/* * { + background-color: skyblue; +} */ From 7017bec53c7b459e27b4b8c9c21973ead0e97d73 Mon Sep 17 00:00:00 2001 From: Sam Rawks Date: Fri, 3 Nov 2023 12:22:03 +0000 Subject: [PATCH 2/5] fix(css): Fix the styling of the data tables --- Resources/Public/Css/FeUsersDataTable.css | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/Resources/Public/Css/FeUsersDataTable.css b/Resources/Public/Css/FeUsersDataTable.css index 5926f65..c68bae1 100644 --- a/Resources/Public/Css/FeUsersDataTable.css +++ b/Resources/Public/Css/FeUsersDataTable.css @@ -110,10 +110,6 @@ background-image: url('/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-view-paging-last.svg'); } - - -/* NEW STUFF */ - .form-inline { display: grid; grid-template-columns: max-content max-content; @@ -168,10 +164,6 @@ div[id$="table_filter"] > label > input { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNNy41ODYgOCA0LjA1IDExLjUzNmwuNzA3LjcwN0w5IDggNC43NTcgMy43NTdsLS43MDcuNzA3ek0xMCA0aDF2OGgtMXoiLz48L2c+PC9zdmc+"); } -/* div[id$="table_paginate"] { - display: grid; - grid-template-columns: repeat(5, auto); -} */ div[id$="table_paginate"] > span > span, .dataTables_paginate > span > span { display: none; @@ -184,6 +176,3 @@ div[id$="table_paginate"] > .paginate_button, .dataTables_paginate > .paginate_button { padding: 9px 13px; } -/* * { - background-color: skyblue; -} */ From f67f641634ead81fca0546ed23ae514d73ad979a Mon Sep 17 00:00:00 2001 From: Sam Rawks Date: Fri, 3 Nov 2023 13:17:23 +0000 Subject: [PATCH 3/5] style(css): Tidy up the CSS and add comments --- Resources/Public/Css/FeUsersDataTable.css | 52 ++++++----------------- 1 file changed, 12 insertions(+), 40 deletions(-) diff --git a/Resources/Public/Css/FeUsersDataTable.css b/Resources/Public/Css/FeUsersDataTable.css index c68bae1..3b4a069 100644 --- a/Resources/Public/Css/FeUsersDataTable.css +++ b/Resources/Public/Css/FeUsersDataTable.css @@ -15,9 +15,8 @@ margin-bottom: 18px; } .form-group.usergroups > div label { - margin-left: 18px;; + margin-left: 18px; } - .dataTables_wrapper { position: relative; } @@ -52,7 +51,6 @@ .paginate_button { position: relative; float: left; - padding: 6px 6px; margin-left: -1px; line-height: 1.5; color: #212424; @@ -75,52 +73,17 @@ .paginate_button.disabled::before { opacity: 0.5; } - -.paginate_button.first, -.paginate_button.previous, -.paginate_button.next, -.paginate_button.last { - font-size: 0; -} -.paginate_button.first::before, -.paginate_button.previous::before, -.paginate_button.next::before, -.paginate_button.last::before { - content: ''; - display: inline-block; - background-repeat: no-repeat; - background-size: contain; - width: 1.8rem; - height: 1.8rem; -} - -.paginate_button.first::before { - background-size: 1em 1em; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 16 16'%3e%3cg width='20px' height='20px' fill='%23fff'%3e%3cpath d='M5.414 8 8.95 4.464l-.707-.707L4 8l4.243 4.243.707-.707z'/%3e%3cpath d='m8.414 8 3.536-3.536-.707-.707L7 8l4.243 4.243.707-.707z'/%3e%3c/g%3e%3c/svg%3e"); -} - - -.paginate_button.previous::before { - background-image: url('/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-view-paging-previous.svg'); -} -.paginate_button.next::before { - background-image: url('/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-view-paging-next.svg'); -} -.paginate_button.last::before { - background-image: url('/typo3/sysext/core/Resources/Public/Icons/T3Icons/actions/actions-view-paging-last.svg'); -} - .form-inline { display: grid; grid-template-columns: max-content max-content; grid-gap: 1em; } +/* Filter styling */ div[id$="table_length"], div[id$="table_filter"] { margin: 0; } - div[id$="table_length"] > label { display: grid; grid-template-columns: minmax(20px, 40px) auto; @@ -131,14 +94,20 @@ div[id$="table_length"] > label > select { grid-column: span 2; margin: 0; } - div[id$="table_filter"] > label > input { margin: 0; } +/* Pagination styles */ .paginate_button { min-height: 42px; } +.paginate_button.first, +.paginate_button.previous, +.paginate_button.next, +.paginate_button.last { + font-size: 0; +} .paginate_button.first::before, .paginate_button.previous::before, .paginate_button.next::before, @@ -164,10 +133,13 @@ div[id$="table_filter"] > label > input { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGcgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBkPSJNNy41ODYgOCA0LjA1IDExLjUzNmwuNzA3LjcwN0w5IDggNC43NTcgMy43NTdsLS43MDcuNzA3ek0xMCA0aDF2OGgtMXoiLz48L2c+PC9zdmc+"); } +/* Hide the ellipses */ div[id$="table_paginate"] > span > span, .dataTables_paginate > span > span { display: none; } + +/* Padding normalization for pagination buttons */ div[id$="table_paginate"] > span > .paginate_button, .dataTables_paginate > span > .paginate_button { padding: 11px 13px; From 5b5c8980ca415b526ce7382f538198187e9bc348 Mon Sep 17 00:00:00 2001 From: Sam Rawks Date: Fri, 3 Nov 2023 13:25:23 +0000 Subject: [PATCH 4/5] docs(upcoming): List the fixes for issue 5 --- UPCOMING.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/UPCOMING.md b/UPCOMING.md index e69de29..e207308 100644 --- a/UPCOMING.md +++ b/UPCOMING.md @@ -0,0 +1,6 @@ +# Bug + +#### Bug +* Fixed the styles the search filters #5 +* Added the icons back to the pagination using Typo3 icon set #5 + From b4865fe0cac914fdc50ba7b4dff6574aa855be87 Mon Sep 17 00:00:00 2001 From: Sam Rawks Date: Fri, 17 Nov 2023 17:44:01 +0000 Subject: [PATCH 5/5] fix(css): Add select menu icon, add height to table rows, fix button spacing --- Resources/Public/Css/FeUsersDataTable.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/Resources/Public/Css/FeUsersDataTable.css b/Resources/Public/Css/FeUsersDataTable.css index 3b4a069..c7d9a9b 100644 --- a/Resources/Public/Css/FeUsersDataTable.css +++ b/Resources/Public/Css/FeUsersDataTable.css @@ -93,6 +93,9 @@ div[id$="table_length"] > label > select { order: 10; grid-column: span 2; margin: 0; + -moz-appearance: auto; /* Firefox */ + -webkit-appearance: auto; /* Safari and Chrome */ + appearance: auto; } div[id$="table_filter"] > label > input { margin: 0; @@ -148,3 +151,14 @@ div[id$="table_paginate"] > .paginate_button, .dataTables_paginate > .paginate_button { padding: 9px 13px; } + +table[id$='table'] > tbody > tr { + height: 4rem; +} +table[id$='table'] > tbody > tr button { + margin-right: 0.75rem; + font-size: 0.7rem; +} +table[id$='table'] > tbody > tr a.btn { + font-size: 0.7rem; +}