fix(ui): put buttons in a single row on mobile
This commit is contained in:
		
					parent
					
						
							
								8f0de303f3
							
						
					
				
			
			
				commit
				
					
						787e3163f8
					
				
			
		
					 5 changed files with 17 additions and 34 deletions
				
			
		| 
						 | 
					@ -90,7 +90,7 @@
 | 
				
			||||||
							{{template "repo/issue/comment_tab" .}}
 | 
												{{template "repo/issue/comment_tab" .}}
 | 
				
			||||||
							{{.CsrfTokenHtml}}
 | 
												{{.CsrfTokenHtml}}
 | 
				
			||||||
							<div class="field footer">
 | 
												<div class="field footer">
 | 
				
			||||||
								<div class="text right">
 | 
													<div class="right button-sequence">
 | 
				
			||||||
									{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
 | 
														{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
 | 
				
			||||||
										{{if .Issue.IsClosed}}
 | 
															{{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">
 | 
																<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">
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -106,7 +106,7 @@
 | 
				
			||||||
				</div>
 | 
									</div>
 | 
				
			||||||
			{{end}}
 | 
								{{end}}
 | 
				
			||||||
		</div>
 | 
							</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">
 | 
								<div class="tw-flex-1">
 | 
				
			||||||
				{{if $resolved}}
 | 
									{{if $resolved}}
 | 
				
			||||||
					<div class="ui grey text">
 | 
										<div class="ui grey text">
 | 
				
			||||||
| 
						 | 
					@ -115,7 +115,7 @@
 | 
				
			||||||
					</div>
 | 
										</div>
 | 
				
			||||||
				{{end}}
 | 
									{{end}}
 | 
				
			||||||
			</div>
 | 
								</div>
 | 
				
			||||||
			<div class="code-comment-buttons-buttons button-row">
 | 
								<div class="right button-sequence">
 | 
				
			||||||
				{{if and $.CanMarkConversation $isNotPending}}
 | 
									{{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">
 | 
										<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}}
 | 
											{{if $resolved}}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -250,6 +250,20 @@ h1.error-code {
 | 
				
			||||||
  gap: 0.5rem;
 | 
					  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 {
 | 
					.button-row .ui.button {
 | 
				
			||||||
  margin-right: 0;
 | 
					  margin-right: 0;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -925,16 +925,6 @@ td .commit-summary {
 | 
				
			||||||
  border-radius: var(--border-radius);
 | 
					  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 {
 | 
					.repository.view.issue .comment-list .comment .merge-section {
 | 
				
			||||||
  background-color: var(--color-box-body);
 | 
					  background-color: var(--color-box-body);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -76,19 +76,6 @@
 | 
				
			||||||
    max-width: none;
 | 
					    max-width: none;
 | 
				
			||||||
    padding: 0.75rem !important;
 | 
					    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 {
 | 
					.comment-code-cloud .comments .comment {
 | 
				
			||||||
| 
						 | 
					@ -183,14 +170,6 @@
 | 
				
			||||||
  display: block;
 | 
					  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 {
 | 
					.diff-file-body .comment-form {
 | 
				
			||||||
  margin: 0 0 0 3em;
 | 
					  margin: 0 0 0 3em;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue