From 787e3163f83c8fe9e776771037e96302bc97b1a9 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Thu, 21 Nov 2024 22:46:06 +0500
Subject: [PATCH] fix(ui): put buttons in a single row on mobile
---
templates/repo/issue/view_content.tmpl | 2 +-
.../repo/issue/view_content/conversation.tmpl | 4 ++--
web_src/css/base.css | 14 +++++++++++++
web_src/css/repo.css | 10 ---------
web_src/css/review.css | 21 -------------------
5 files changed, 17 insertions(+), 34 deletions(-)
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index bd52198264..f074a854b5 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -90,7 +90,7 @@
{{template "repo/issue/comment_tab" .}}
{{.CsrfTokenHtml}}
<div class="field footer">
- <div class="text right">
+ <div class="right button-sequence">
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
{{if .Issue.IsClosed}}
<button id="status-button" class="ui primary basic button" data-status="{{ctx.Locale.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.reopen_comment_issue"}}" name="status" value="reopen">
diff --git a/templates/repo/issue/view_content/conversation.tmpl b/templates/repo/issue/view_content/conversation.tmpl
index 1e7a5c1401..4f70e799a2 100644
--- a/templates/repo/issue/view_content/conversation.tmpl
+++ b/templates/repo/issue/view_content/conversation.tmpl
@@ -106,7 +106,7 @@
</div>
{{end}}
</div>
- <div class="code-comment-buttons tw-flex tw-items-center tw-flex-wrap tw-mt-2 tw-mb-1 tw-mx-2">
+ <div class="tw-flex tw-items-center tw-flex-wrap tw-mt-2 tw-mb-1 tw-mx-2">
<div class="tw-flex-1">
{{if $resolved}}
<div class="ui grey text">
@@ -115,7 +115,7 @@
</div>
{{end}}
</div>
- <div class="code-comment-buttons-buttons button-row">
+ <div class="right button-sequence">
{{if and $.CanMarkConversation $isNotPending}}
<button class="ui tiny basic button resolve-conversation" data-origin="timeline" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{(index .comments 0).ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
{{if $resolved}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 4c1317ba79..fc3200d7da 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -250,6 +250,20 @@ h1.error-code {
gap: 0.5rem;
}
+.button-sequence {
+ display: flex;
+ flex-flow: wrap;
+ gap: 0.5em;
+}
+
+.button-sequence.right {
+ justify-content: end;
+}
+
+.button-sequence .ui.button {
+ margin: 0 !important;
+}
+
.button-row .ui.button {
margin-right: 0;
}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 3ee76b5af3..6568a0de03 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -925,16 +925,6 @@ td .commit-summary {
border-radius: var(--border-radius);
}
-@media (max-width: 767.98px) {
- .repository.view.issue .comment-list .comment .content .form .button {
- width: 100%;
- margin: 0;
- }
- .repository.view.issue .comment-list .comment .content .form .button:not(:last-child) {
- margin-bottom: 1rem;
- }
-}
-
.repository.view.issue .comment-list .comment .merge-section {
background-color: var(--color-box-body);
}
diff --git a/web_src/css/review.css b/web_src/css/review.css
index a198edf6c5..c1ef21bdc0 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -76,19 +76,6 @@
max-width: none;
padding: 0.75rem !important;
}
- .comment-code-cloud .code-comment-buttons {
- margin: 0.5rem 0 0.25rem !important;
- }
- .comment-code-cloud .code-comment-buttons .code-comment-buttons-buttons {
- width: 100%;
- }
- .comment-code-cloud .ui.buttons {
- width: 100%;
- margin: 0 !important;
- }
- .comment-code-cloud .ui.buttons .button {
- flex: 1;
- }
}
.comment-code-cloud .comments .comment {
@@ -183,14 +170,6 @@
display: block;
}
-@media (max-width: 767.98px) {
- .comment-code-cloud .button {
- width: 100%;
- margin: 0 !important;
- margin-bottom: 0.75rem !important;
- }
-}
-
.diff-file-body .comment-form {
margin: 0 0 0 3em;
}