IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 02:11:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: fullscreen modal > add missing modifier + sticky header (#24920)

Browse Source 
* UX: table builder add missing modal modifier

* UX: fullscreen-table sticky header fix

* UX: fullscreen table > autosize width
This commit is contained in:
chapoi 2023-12-18 12:18:54 +02:00 committed by GitHub
parent 31c2a4717b
commit 7fe5a6986b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/discourse/app/components/modal/fullscreen-table.hbs
View File

@ -1,7 +1,7 @@
<DModal
@title={{i18n "fullscreen_table.view_table"}}
@closeModal={{@closeModal}}
class="fullscreen-table-modal"
class="fullscreen-table-modal -max"
>
<:body>
{{@model.tableHtml}}

57
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -1690,3 +1690,60 @@ iframe {
right: 0.5rem;
}
}
.fullscreen-table-modal .modal-inner-container,
.fullscreen-code-modal .modal-inner-container {
width: max-content;
max-width: 90%;
margin: 0 auto;
padding: 10px;
.modal-body {
padding-top: 0;
}
thead {
position: sticky;
top: 0;
z-index: 1;
background-color: var(--secondary);
}
tbody {
overflow-x: hidden;
}
td {
padding: 0.5rem;
}
}
.fullscreen-code-modal {
pre code {
max-width: none;
}
}
.fullscreen-table-modal {
.d-modal__container {
width: auto;
}
.d-modal__body {
padding-top: 0;
thead {
position: sticky;
top: 0;
z-index: 1;
background-color: var(--secondary);
}
}
}
html.discourse-no-touch .fullscreen-table-wrapper:hover {
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.1),
0 2px 10px 0 rgba(var(--always-black-rgb), 0.1);
.open-popup-link {
opacity: 100%;
}
}