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" .}}
 | 
			
		||||
							{{.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">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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);
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue