mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-31 10:56:10 +01:00 
			
		
		
		
	Minor dashboard tweaks, fix flex-list margins (#26829)
Some small dashboard tweaks: - Remove margin-bottom from divider so first item does not appear to have un-equal margins - Restore previous icon color - Add slight margin-right to icon Before: <img width="783" alt="Screenshot 2023-08-31 at 00 10 28" src="https://github.com/go-gitea/gitea/assets/115237/b75f70d7-8704-4afb-866d-fea0484c52d4"> After: <img width="783" alt="Screenshot 2023-08-31 at 00 10 08" src="https://github.com/go-gitea/gitea/assets/115237/50ed0c47-6f7c-449e-a054-13091369d43f"> --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
		| @@ -2,7 +2,8 @@ | ||||
| <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}"> | ||||
| <div class="page-content devtest"> | ||||
| 	<div class="ui container"> | ||||
| 		<h1 class="gt-border-secondary-bottom">Flex List (standalone)</h1> | ||||
| 		<h1>Flex List (standalone)</h1> | ||||
| 		<div class="divider"></div> | ||||
| 		<div class="flex-list"> | ||||
| 			<div class="flex-item"> | ||||
| 				<div class="flex-item-leading"> | ||||
| @@ -85,7 +86,7 @@ | ||||
| 			</div> | ||||
| 		</div> | ||||
|  | ||||
| 		<div class="divider gt-my-0"></div> | ||||
| 		<div class="divider"></div> | ||||
|  | ||||
| 		<h1>Flex List (with "ui segment")</h1> | ||||
| 		<div class="ui attached segment"> | ||||
| @@ -101,6 +102,14 @@ | ||||
| 				<div class="flex-item">item 2</div> | ||||
| 			</div> | ||||
| 		</div> | ||||
|  | ||||
| 		<h1>If parent provides the padding/margin space:</h1> | ||||
| 		<div class="gt-border-secondary gt-py-4"> | ||||
| 			<div class="flex-list flex-space-fitted"> | ||||
| 				<div class="flex-item">item 1 (no padding top)</div> | ||||
| 				<div class="flex-item">item 2 (no padding bottom)</div> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 	</div> | ||||
| </div> | ||||
| {{template "base/footer" .}} | ||||
|   | ||||
| @@ -12,8 +12,9 @@ | ||||
| 		<button class="ui primary button">{{.locale.Tr "explore.search"}}</button> | ||||
| 	</div> | ||||
| </form> | ||||
| <div class="{{if .PackageDescriptors}}flex-list{{end}} gt-pt-4"> | ||||
| <div> | ||||
| 	{{range .PackageDescriptors}} | ||||
| 	<div class="flex-list"> | ||||
| 		<div class="flex-item"> | ||||
| 			<div class="flex-item-main"> | ||||
| 				<div class="flex-item-title"> | ||||
| @@ -34,6 +35,7 @@ | ||||
| 				</div> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 	</div> | ||||
| 	{{else}} | ||||
| 		{{if not .HasPackages}} | ||||
| 			<div class="empty center"> | ||||
| @@ -46,7 +48,7 @@ | ||||
| 				<p>{{.locale.Tr "packages.empty.documentation" "https://docs.gitea.com/usage/packages/overview/" | Safe}}</p> | ||||
| 			</div> | ||||
| 		{{else}} | ||||
| 			<p>{{.locale.Tr "packages.filter.no_result"}}</p> | ||||
| 			<p class="gt-py-4">{{.locale.Tr "packages.filter.no_result"}}</p> | ||||
| 		{{end}} | ||||
| 	{{end}} | ||||
| 	{{template "base/paginate" .}} | ||||
|   | ||||
| @@ -18,8 +18,9 @@ | ||||
| 		<button class="ui primary button">{{.locale.Tr "explore.search"}}</button> | ||||
| 	</div> | ||||
| </form> | ||||
| <div class="{{if .PackageDescriptors}}flex-list{{end}} gt-pt-4"> | ||||
| <div> | ||||
| 	{{range .PackageDescriptors}} | ||||
| 	<div class="flex-list"> | ||||
| 		<div class="flex-item"> | ||||
| 			<div class="flex-item-main"> | ||||
| 				<a class="flex-item-title" href="{{.FullWebLink}}">{{.Version.LowerVersion}}</a> | ||||
| @@ -28,8 +29,9 @@ | ||||
| 				</div> | ||||
| 			</div> | ||||
| 		</div> | ||||
| 	</div> | ||||
| 	{{else}} | ||||
| 		<p>{{.locale.Tr "packages.filter.no_result"}}</p> | ||||
| 		<p class="gt-py-4">{{.locale.Tr "packages.filter.no_result"}}</p> | ||||
| 	{{end}} | ||||
| 	{{template "base/paginate" .}} | ||||
| </div> | ||||
|   | ||||
| @@ -1,4 +1,4 @@ | ||||
| <div class="flex-list gt-m-0"> | ||||
| <div class="flex-list"> | ||||
| 	{{if eq (len .Runs) 0}} | ||||
| 	<div class="empty center"> | ||||
| 		{{svg "octicon-no-entry" 48}} | ||||
|   | ||||
| @@ -11,7 +11,7 @@ | ||||
| 			</div> | ||||
| 		</h4> | ||||
| 		<div class="ui attached segment"> | ||||
| 			<div class="{{if not .HasError}}gt-hidden{{end}} gt-mb-4" id="add-deploy-key-panel"> | ||||
| 			<div class="{{if not .HasError}}gt-hidden{{end}}" id="add-deploy-key-panel"> | ||||
| 				<form class="ui form" action="{{.Link}}" method="post"> | ||||
| 					{{.CsrfTokenHtml}} | ||||
| 					<div class="field"> | ||||
|   | ||||
| @@ -1,4 +1,4 @@ | ||||
| <div id="issue-list" class="flex-list gt-pt-4"> | ||||
| <div id="issue-list" class="flex-list"> | ||||
| 	{{$approvalCounts := .ApprovalCounts}} | ||||
| 	{{range .Issues}} | ||||
| 		<div class="flex-item flex-item-baseline"> | ||||
|   | ||||
| @@ -116,7 +116,7 @@ | ||||
| 				<div class="flex-item-body">{{TimeSince .GetCreate $.locale}}</div> | ||||
| 			</div> | ||||
| 			<div class="flex-item-trailing"> | ||||
| 				{{svg (printf "octicon-%s" (ActionIcon .GetOpType)) 32}} | ||||
| 				{{svg (printf "octicon-%s" (ActionIcon .GetOpType)) 32 "text grey gt-mr-2"}} | ||||
| 			</div> | ||||
| 		</div> | ||||
| 	{{end}} | ||||
|   | ||||
| @@ -17,9 +17,7 @@ | ||||
| 						</div> | ||||
| 					{{end}} | ||||
| 					{{template "user/heatmap" .}} | ||||
| 					<div class="feeds"> | ||||
| 						{{template "user/dashboard/feeds" .}} | ||||
| 					</div> | ||||
| 					{{template "user/dashboard/feeds" .}} | ||||
| 				{{else if eq .TabName "stars"}} | ||||
| 					<div class="stars"> | ||||
| 						{{template "explore/repo_search" .}} | ||||
|   | ||||
| @@ -5,7 +5,7 @@ | ||||
| 	</div> | ||||
| </h4> | ||||
| <div class="ui attached segment"> | ||||
| 	<div class="{{if not .HasGPGError}}gt-hidden{{end}} gt-mb-4" id="add-gpg-key-panel"> | ||||
| 	<div class="{{if not .HasGPGError}}gt-hidden{{end}}" id="add-gpg-key-panel"> | ||||
| 		<form class="ui form{{if .HasGPGError}} error{{end}}" action="{{.Link}}" method="post"> | ||||
| 			{{.CsrfTokenHtml}} | ||||
| 			<input type="hidden" name="title" value="none"> | ||||
|   | ||||
| @@ -7,7 +7,7 @@ | ||||
| 	</div> | ||||
| </h4> | ||||
| <div class="ui attached segment"> | ||||
| 	<div class="{{if not .HasSSHError}}gt-hidden{{end}} gt-mb-4" id="add-ssh-key-panel"> | ||||
| 	<div class="{{if not .HasSSHError}}gt-hidden{{end}}" id="add-ssh-key-panel"> | ||||
| 		<form class="ui form" action="{{.Link}}" method="post"> | ||||
| 			{{.CsrfTokenHtml}} | ||||
| 			<div class="field {{if .Err_Title}}error{{end}}"> | ||||
|   | ||||
| @@ -95,10 +95,3 @@ | ||||
|     position: static; | ||||
|   } | ||||
| } | ||||
|  | ||||
| .feeds code { | ||||
|   padding: 2px 4px; | ||||
|   border-radius: var(--border-radius); | ||||
|   background-color: var(--color-markup-code-block); | ||||
|   word-break: break-all; | ||||
| } | ||||
|   | ||||
| @@ -91,11 +91,23 @@ | ||||
|   border-top: 1px solid var(--color-secondary); | ||||
| } | ||||
|  | ||||
| /* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly */ | ||||
| /* Fomantic UI segment has default "padding: 1em", so here it removes the padding-top and padding-bottom accordingly. | ||||
| Developers could also use "flex-space-fitted" class to remove the first item's padding-top and the last item's padding-bottom */ | ||||
| .flex-list.flex-space-fitted > .flex-item:first-child, | ||||
| .ui.segment > .flex-list:first-child > .flex-item:first-child { | ||||
|   padding-top: 0; | ||||
| } | ||||
|  | ||||
| .flex-list.flex-space-fitted > .flex-item:last-child, | ||||
| .ui.segment > .flex-list:last-child > .flex-item:last-child { | ||||
|   padding-bottom: 0; | ||||
| } | ||||
|  | ||||
| /* If there is a divider besides the flex-list, some padding/margin are not needs */ | ||||
| .divider + .flex-list > .flex-item:first-child { | ||||
|   padding-top: 0; | ||||
| } | ||||
|  | ||||
| .flex-list + .divider { | ||||
|   margin-top: 0; | ||||
| } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user