mirror of
https://codeberg.org/forgejo/forgejo
synced 2025-09-17 05:12:54 +02:00
11218ac43c
The context menu of the comment box was not always available on a mobile-sized device, because it would escape its container, overlap other elements, and be unable to be clicked. To address this, I've made the comment box constrained to the width of the diff box. This allows Playwright to interact with the element without ambiguity of the click targets, avoiding any "intercepts pointer events". Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9052 Reviewed-by: 0ko <0ko@noreply.codeberg.org> Reviewed-by: Beowulf <beowulf@beocode.eu> Co-authored-by: Mathieu Fenniak <mathieu@fenniak.net> Co-committed-by: Mathieu Fenniak <mathieu@fenniak.net>
278 lines
5.9 KiB
CSS
278 lines
5.9 KiB
CSS
.show-outdated,
|
|
.hide-outdated {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.ui.button.add-code-comment {
|
|
padding: 2px;
|
|
position: absolute;
|
|
margin-left: -22px;
|
|
z-index: 5;
|
|
opacity: 0;
|
|
transition: transform 0.1s ease-in-out;
|
|
transform: scale(1);
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.ui.button.add-code-comment:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.lines-escape .toggle-escape-button::before {
|
|
visibility: visible;
|
|
content: "⚠️";
|
|
font-family: var(--fonts-emoji);
|
|
color: var(--color-red);
|
|
}
|
|
|
|
.repository .diff-file-box .code-diff td.lines-escape {
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.diff-file-box .lines-code:hover .ui.button.add-code-comment {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ui.button.add-code-comment:focus {
|
|
opacity: 1;
|
|
}
|
|
|
|
.repository .diff-file-box .code-diff .add-comment-left,
|
|
.repository .diff-file-box .code-diff .add-comment-right,
|
|
.repository .diff-file-box .code-diff .add-code-comment .add-comment-left,
|
|
.repository .diff-file-box .code-diff .add-code-comment .add-comment-right,
|
|
.repository .diff-file-box .code-diff .add-code-comment .lines-type-marker {
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.add-comment-left.add-comment-right .ui.attached.header {
|
|
border: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
.add-comment-left.add-comment-right .ui.attached.header:not(.top) {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
/* `.ui.label` implies `min-width: 0` breaking the layout.
|
|
(https://codeberg.org/forgejo/forgejo/pulls/8138#issuecomment-5960251)
|
|
When it becomes possible, feel free to replace with something better. */
|
|
.collapsible-comment-box .ui.label {
|
|
min-width: unset;
|
|
}
|
|
|
|
.show-outdated:hover,
|
|
.hide-outdated:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.comment-code-cloud {
|
|
padding: 0.5rem !important;
|
|
position: relative;
|
|
}
|
|
|
|
.code-diff .conversation-holder .comment-code-cloud {
|
|
max-width: 820px;
|
|
}
|
|
|
|
.add-comment .comment-code-cloud form {
|
|
margin-left: 42px;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.comment-code-cloud {
|
|
max-width: none;
|
|
}
|
|
}
|
|
|
|
.comment-code-cloud .comments .comment {
|
|
padding: 0;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.comment-code-cloud .comments .comment .comment-header-right.actions .ui.basic.label {
|
|
display: none;
|
|
}
|
|
.comment-code-cloud .comments .comment .avatar {
|
|
width: auto;
|
|
margin: 0 0.5rem 0 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.comment-code-cloud .comments .comment .avatar ~ .content {
|
|
margin-left: 1em;
|
|
}
|
|
.comment-code-cloud .comments .comment img.avatar {
|
|
margin: 0 !important;
|
|
}
|
|
.comment-code-cloud .comments .comment .comment-content {
|
|
margin-left: 0 !important;
|
|
}
|
|
.comment-code-cloud .comments .comment.code-comment {
|
|
padding: 0 0 0.5rem !important;
|
|
}
|
|
}
|
|
|
|
.comment-code-cloud .attached.tab {
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.comment-code-cloud .attached.header {
|
|
padding: 1px 8px 1px 12px;
|
|
}
|
|
|
|
.comment-code-cloud .attached.header .text {
|
|
margin: 0;
|
|
}
|
|
|
|
.comment-code-cloud .right.menu.options .item {
|
|
padding: 0.85714286em 0.442857em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.comment-code-cloud .ui.active.tab.markup {
|
|
padding: 1em;
|
|
min-height: 168px;
|
|
}
|
|
|
|
.comment-code-cloud .ui.tab.markup {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.comment-code-cloud .ui.tabular.menu {
|
|
margin: 0.5em;
|
|
}
|
|
|
|
.comment-code-cloud .editor-statusbar {
|
|
display: none;
|
|
}
|
|
|
|
.comment-code-cloud .footer {
|
|
padding: 10px 0 0;
|
|
}
|
|
|
|
.comment-code-cloud .footer .markup-info {
|
|
display: inline-block;
|
|
margin: 5px 0;
|
|
font-size: 12px;
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
.comment-code-cloud .footer .ui.right.floated {
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.comment-code-cloud .footer::after {
|
|
clear: both;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
.diff-file-body .comment-form {
|
|
margin-left: 3em;
|
|
}
|
|
|
|
.diff-file-body.binary {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.file-comment {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.code-expander-button {
|
|
border: none;
|
|
color: var(--color-text-light);
|
|
height: 28px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
background: var(--color-expand-button);
|
|
flex: 1;
|
|
}
|
|
|
|
.code-expander-button:hover {
|
|
background: var(--color-primary);
|
|
color: var(--color-primary-contrast);
|
|
}
|
|
|
|
.review-box-panel .ui.segment {
|
|
border: none;
|
|
}
|
|
|
|
/* See the comment of createCommentEasyMDE() for the review editor */
|
|
/* EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code */
|
|
.review-box-panel .CodeMirror-scroll {
|
|
min-height: 80px;
|
|
max-height: calc(100vh - 360px);
|
|
}
|
|
|
|
.review-box-panel .combo-markdown-editor {
|
|
width: 730px; /* this width matches current EasyMDE's toolbar's width */
|
|
max-width: calc(100vw - 70px); /* leave enough space on left, and align the page content */
|
|
}
|
|
|
|
#review-box {
|
|
position: relative;
|
|
}
|
|
|
|
#review-box .review-comments-counter {
|
|
background-color: var(--color-primary-light-4);
|
|
color: var(--color-primary-contrast);
|
|
}
|
|
|
|
#review-box:hover .review-comments-counter {
|
|
background-color: var(--color-primary-light-5);
|
|
}
|
|
|
|
#review-box .review-comments-counter[data-pending-comment-number="0"] {
|
|
display: none;
|
|
}
|
|
|
|
.pull.files.diff .comment {
|
|
scroll-margin-top: 99px;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.pull.files.diff .comment {
|
|
scroll-margin-top: 130px;
|
|
}
|
|
}
|
|
|
|
.changed-since-last-review {
|
|
border: 1px var(--color-accent) solid;
|
|
background-color: var(--color-small-accent);
|
|
border-radius: var(--border-radius);
|
|
padding: 4px 8px;
|
|
margin: -8px 0; /* just like other buttons in the diff box header */
|
|
font-size: 0.857rem; /* just like .ui.tiny.button */
|
|
}
|
|
|
|
.viewed-file-form {
|
|
display: flex;
|
|
align-items: center;
|
|
border: 1px solid transparent;
|
|
padding: 4px 8px;
|
|
margin: -8px 0; /* just like other buttons in the diff box header */
|
|
border-radius: var(--border-radius);
|
|
font-size: 0.857rem; /* just like .ui.tiny.button */
|
|
}
|
|
|
|
.viewed-file-form input {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.viewed-file-checked-form {
|
|
background-color: var(--color-small-accent);
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
#viewed-files-summary {
|
|
width: 100%;
|
|
height: 8px;
|
|
}
|