mirror of
				https://github.com/go-gitea/gitea
				synced 2025-10-31 11:28:24 +00:00 
			
		
		
		
	Fix UI on mobile view (#25315)
Various fixes to pages or elements which were looking ugly on mobile. <details> <summary>Screenshots</summary>          </details> Co-authored by @silverwind --------- Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
		| @@ -9,6 +9,7 @@ | ||||
| @import "./modules/comment.css"; | ||||
|  | ||||
| @import "./shared/issuelist.css"; | ||||
| @import "./shared/milestone.css"; | ||||
| @import "./shared/repoorg.css"; | ||||
| @import "./shared/settings.css"; | ||||
|  | ||||
|   | ||||
| @@ -87,6 +87,18 @@ | ||||
|   } | ||||
| } | ||||
|  | ||||
| .projects-header { | ||||
|   margin-bottom: 1rem; | ||||
|   flex-direction: column; | ||||
|   gap: 8px; | ||||
| } | ||||
|  | ||||
| .projects-toolbar { | ||||
|   display: flex; | ||||
|   justify-content: space-between; | ||||
|   padding-left: 4px; | ||||
| } | ||||
|  | ||||
| .repository .issue-content-right .menu { | ||||
|   overflow-x: auto; | ||||
|   max-height: 500px; | ||||
| @@ -225,6 +237,14 @@ | ||||
|   align-items: center; | ||||
| } | ||||
|  | ||||
| @media (max-width: 767.68px) { | ||||
|   .repository.file.list .repo-description { | ||||
|     flex-direction: column; | ||||
|     gap: 8px; | ||||
|     align-items: normal; | ||||
|   } | ||||
| } | ||||
|  | ||||
| .repository.file.list #repo-desc { | ||||
|   font-size: 1.2em; | ||||
| } | ||||
| @@ -1167,56 +1187,6 @@ | ||||
|   margin-top: -8px; | ||||
| } | ||||
|  | ||||
| .repository .milestone.list { | ||||
|   list-style: none; | ||||
| } | ||||
|  | ||||
| .repository .milestone.list > .item { | ||||
|   padding-top: 10px; | ||||
|   padding-bottom: 10px; | ||||
| } | ||||
|  | ||||
| .repository .milestone.list > .item + .item { | ||||
|   border-top: 1px solid var(--color-secondary); | ||||
| } | ||||
|  | ||||
| .repository .milestone.list > .item progress { | ||||
|   width: 200px; | ||||
|   height: 16px; | ||||
| } | ||||
|  | ||||
| .repository .milestone.list > .item .meta { | ||||
|   color: var(--color-text-light-2); | ||||
|   padding-top: 5px; | ||||
| } | ||||
|  | ||||
| .repository .milestone.list > .item .meta .issue-stats .svg { | ||||
|   padding-left: 5px; | ||||
| } | ||||
|  | ||||
| .repository .milestone.list > .item .meta .overdue { | ||||
|   color: var(--color-red); | ||||
| } | ||||
|  | ||||
| .repository .milestone.list > .item .operate { | ||||
|   margin-top: -15px; | ||||
| } | ||||
|  | ||||
| .repository .milestone.list > .item .operate > a { | ||||
|   font-size: 15px; | ||||
|   padding-top: 5px; | ||||
|   padding-right: 10px; | ||||
|   color: var(--color-text-light-2); | ||||
| } | ||||
|  | ||||
| .repository .milestone.list > .item .operate > a:hover { | ||||
|   color: var(--color-text); | ||||
| } | ||||
|  | ||||
| .repository .milestone.list > .item .content { | ||||
|   padding-top: 10px; | ||||
| } | ||||
|  | ||||
| .repository.new.milestone textarea { | ||||
|   height: 200px; | ||||
| } | ||||
| @@ -1964,6 +1934,13 @@ | ||||
|   } | ||||
| } | ||||
|  | ||||
| .repository .activity-header { | ||||
|   display: flex; | ||||
|   justify-content: space-between; | ||||
|   gap: 8px; | ||||
|   flex-wrap: wrap; | ||||
| } | ||||
|  | ||||
| .repository.settings.collaboration .collaborator.list { | ||||
|   padding: 0; | ||||
| } | ||||
| @@ -3381,6 +3358,12 @@ tbody.commit-list { | ||||
|   margin-bottom: 8px; | ||||
| } | ||||
|  | ||||
| @media (max-width: 767.98px) { | ||||
|   #issue-pins { | ||||
|     grid-template-columns: repeat(1, 1fr); | ||||
|   } | ||||
| } | ||||
|  | ||||
| .pinned-issue-card { | ||||
|   border-radius: var(--border-radius); | ||||
|   padding: 8px 10px; | ||||
|   | ||||
| @@ -13,3 +13,23 @@ | ||||
| .issue-list-toolbar-right { | ||||
|   margin-left: auto; | ||||
| } | ||||
|  | ||||
| @media (max-width: 767.98px) { | ||||
|   .issue-list-toolbar { | ||||
|     flex-direction: column-reverse; | ||||
|   } | ||||
|   .issue-list-toolbar-right { | ||||
|     margin-right: auto; | ||||
|     width: 100%; | ||||
|   } | ||||
|   .issue-list-navbar { | ||||
|     order: 0; | ||||
|   } | ||||
|   .issue-list-new { | ||||
|     order: 1; | ||||
|     margin-left: auto !important; | ||||
|   } | ||||
|   .issue-list-search { | ||||
|     order: 2 !important; | ||||
|   } | ||||
| } | ||||
|   | ||||
| @@ -8,7 +8,6 @@ | ||||
| .list-header-sort { | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   justify-content: flex-end; | ||||
|   padding-left: 1rem; | ||||
|   padding-right: 1rem; | ||||
| } | ||||
| @@ -44,3 +43,16 @@ | ||||
| .small-menu-items .item.active { | ||||
|   background: var(--color-active) !important; | ||||
| } | ||||
|  | ||||
| @media (max-width: 767.98px) { | ||||
|   .list-header-search { | ||||
|     order: 0; | ||||
|   } | ||||
|   .list-header-toggle { | ||||
|     order: 1; | ||||
|   } | ||||
|   .list-header-sort { | ||||
|     order: 2; | ||||
|     margin-left: auto; | ||||
|   } | ||||
| } | ||||
|   | ||||
							
								
								
									
										66
									
								
								web_src/css/shared/milestone.css
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										66
									
								
								web_src/css/shared/milestone.css
									
									
									
									
									
										Normal file
									
								
							| @@ -0,0 +1,66 @@ | ||||
| .milestone-list { | ||||
|   list-style: none; | ||||
| } | ||||
|  | ||||
| .milestone-card { | ||||
|   width: 100%; | ||||
|   padding-top: 10px; | ||||
|   padding-bottom: 10px; | ||||
| } | ||||
|  | ||||
| .milestone-card + .milestone-card { | ||||
|   border-top: 1px solid var(--color-secondary); | ||||
| } | ||||
|  | ||||
| .milestone-card .content { | ||||
|   padding-top: 10px; | ||||
| } | ||||
|  | ||||
| .milestone-header progress { | ||||
|   width: 200px; | ||||
|   height: 16px; | ||||
| } | ||||
|  | ||||
| .milestone-header { | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   margin: 0; | ||||
|   flex-wrap: wrap; | ||||
|   justify-content: space-between; | ||||
| } | ||||
|  | ||||
| .milestone-toolbar { | ||||
|   padding-top: 5px; | ||||
|   display: flex; | ||||
|   flex-wrap: wrap; | ||||
|   gap: 8px; | ||||
|   justify-content: space-between; | ||||
| } | ||||
|  | ||||
| .milestone-toolbar .group { | ||||
|   color: var(--color-text-light-2); | ||||
|   display: flex; | ||||
|   flex-wrap: wrap; | ||||
|   gap: 8px; | ||||
| } | ||||
|  | ||||
| .milestone-toolbar .group .overdue { | ||||
|   color: var(--color-red); | ||||
| } | ||||
|  | ||||
| .milestone-toolbar .group > a { | ||||
|   font-size: 15px; | ||||
|   color: var(--color-text-light-2); | ||||
| } | ||||
|  | ||||
| .milestone-toolbar .group > a:hover { | ||||
|   color: var(--color-text); | ||||
| } | ||||
|  | ||||
| @media (max-width: 767.98px) { | ||||
|   .milestone-card { | ||||
|     display: flex; | ||||
|     flex-direction: column; | ||||
|     gap: 8px; | ||||
|   } | ||||
| } | ||||
		Reference in New Issue
	
	Block a user