Responsive design fixes (#4508)
* reset to master * build css * Fixed spacing
This commit is contained in:
		
							parent
							
								
									f847884d16
								
							
						
					
					
						commit
						8d1ad55598
					
				
					 7 changed files with 113 additions and 7 deletions
				
			
		
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							|  | @ -26,6 +26,13 @@ | |||
|                     top: 7px; | ||||
|                     left: 90%; | ||||
|                     width: 15%; | ||||
| 
 | ||||
|                     @media only screen and (max-width: 768px) { | ||||
|                         top: 10px; | ||||
|                         left: auto; | ||||
|                         width: auto; | ||||
|                         right: 13px; | ||||
|                     } | ||||
|                 } | ||||
|             } | ||||
| 
 | ||||
|  | @ -40,12 +47,16 @@ | |||
| 				right: 0!important; | ||||
| 				left: auto!important; | ||||
| 			} | ||||
| 
 | ||||
| 			@media only screen and (max-width: 768px) { | ||||
| 				width: 100%; | ||||
| 			} | ||||
| 		} | ||||
| 		.right.stackable.menu > .item.active { | ||||
| 			color: #d9453d; | ||||
| 		} | ||||
|     } | ||||
|      | ||||
| 
 | ||||
|     /* Accomodate for Semantic's 1px hacks on .attached elements */ | ||||
|     .dashboard-repos { | ||||
|         margin: 0 1px; | ||||
|  |  | |||
|  | @ -102,7 +102,7 @@ | |||
| .user.reset.password, | ||||
| .user.signin, | ||||
| .user.signup { | ||||
|     @input-padding: 200px!important; | ||||
|     @input-padding: 200px; | ||||
|     #create-page-form; | ||||
|     form { | ||||
|         width: 700px!important; | ||||
|  | @ -113,6 +113,12 @@ | |||
|         .inline.field > label { | ||||
|             width: @input-padding; | ||||
|         } | ||||
| 
 | ||||
|         .inline.field > label, input { | ||||
|             @media only screen and (max-width: 768px) { | ||||
|                 width: 100% !important; | ||||
|             } | ||||
|         } | ||||
|     } | ||||
| } | ||||
| 
 | ||||
|  | @ -137,19 +143,35 @@ | |||
|                 padding-left: 0 !important; | ||||
|                 text-align: center; | ||||
|             } | ||||
| 
 | ||||
|             @media only screen and (max-width: 768px) { | ||||
|                 label, input, .selection.dropdown { | ||||
|                     width: 100% !important; | ||||
|                 } | ||||
| 
 | ||||
|                 .field button, .field a { | ||||
|                     margin-bottom: 1em; | ||||
|                     width: 100%; | ||||
|                 } | ||||
|             } | ||||
|         } | ||||
|     } | ||||
| 
 | ||||
| 	&.new.repo { | ||||
| 		.ui.form { | ||||
| 			.selection.dropdown:not(.owner) { | ||||
| 				width: 50%!important; | ||||
| 			} | ||||
| 			@media only screen and (min-width: 768px) { | ||||
| 				#auto-init { | ||||
| 					margin-left: @create-page-form-input-padding+15px; | ||||
| 				} | ||||
| 			} | ||||
| 
 | ||||
| 			.selection.dropdown:not(.owner) { | ||||
| 				width: 50%!important; | ||||
| 
 | ||||
| 				@media only screen and (max-width: 768px) { | ||||
| 					width: 100% !important; | ||||
| 				} | ||||
| 			} | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  | @ -175,3 +197,16 @@ | |||
|         font-family: monospace; | ||||
|     } | ||||
| } | ||||
| 
 | ||||
| .new.org .ui.form { | ||||
| 	@media only screen and (max-width: 768px) { | ||||
| 		.field button, .field a{ | ||||
| 			margin-bottom: 1em; | ||||
| 			width: 100%; | ||||
| 		} | ||||
| 
 | ||||
| 		.field input { | ||||
| 			width: 100% !important; | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  |  | |||
|  | @ -47,3 +47,16 @@ | |||
|     padding-top: 15px; | ||||
|     padding-bottom: @footer-margin * 2; | ||||
| } | ||||
| 
 | ||||
| footer { | ||||
| 	@media only screen and (max-width: 880px) { | ||||
| 		text-align: center; | ||||
| 	} | ||||
| 
 | ||||
| 	.ui.container .left, .ui.container .right { | ||||
| 		@media only screen and (max-width: 880px) { | ||||
| 			display: inline; | ||||
| 			float: none; | ||||
| 		} | ||||
| 	} | ||||
| } | ||||
|  |  | |||
|  | @ -172,9 +172,14 @@ | |||
|     #clone-panel { | ||||
|         width: 350px; | ||||
| 
 | ||||
|         @media only screen and (max-width: 768px) { | ||||
|             width: 100%; | ||||
|         } | ||||
| 
 | ||||
|         input { | ||||
|             border-radius: 0; | ||||
|             padding: 5px 10px; | ||||
|             width: 50%; | ||||
|         } | ||||
| 
 | ||||
|         .clone.button { | ||||
|  | @ -220,6 +225,12 @@ | |||
|                 padding: 8px 10px; | ||||
|                 font-weight: normal; | ||||
|             } | ||||
| 
 | ||||
|             .ui.tiny.blue.buttons { | ||||
|                 @media only screen and (max-width: 768px) { | ||||
|                     width: 100%; | ||||
|                 } | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         #repo-files-table { | ||||
|  | @ -1229,6 +1240,20 @@ | |||
|         .prerelease.field { | ||||
|             margin-bottom: 0; | ||||
|         } | ||||
| 
 | ||||
|         .field { | ||||
|             button, input { | ||||
|                 @media only screen and (max-width: 438px) { | ||||
|                     width: 100%; | ||||
|                 } | ||||
|             } | ||||
| 
 | ||||
|             button { | ||||
|                 @media only screen and (max-width: 768px) { | ||||
|                     margin-bottom: 1em; | ||||
|                 } | ||||
|             } | ||||
|         } | ||||
|     } | ||||
| 
 | ||||
|     &.forks { | ||||
|  | @ -1756,3 +1781,9 @@ tbody.commit-list { | |||
| #repo-topic { | ||||
|     margin-top: 5px; | ||||
| } | ||||
| 
 | ||||
| .new-dependency-drop-list { | ||||
| 	@media only screen and (max-width: 768px) { | ||||
| 		width: 100%; | ||||
| 	} | ||||
| } | ||||
|  |  | |||
|  | @ -37,6 +37,22 @@ | |||
|                     } | ||||
|                 } | ||||
|             } | ||||
| 
 | ||||
|             #profile-avatar { | ||||
|                 @media only screen and (max-width: 768px) { | ||||
|                     height: 250px; | ||||
|                     overflow: hidden; | ||||
| 
 | ||||
|                     img { | ||||
|                         max-height: 768px; | ||||
|                         max-width: 768px; | ||||
|                     } | ||||
|                 } | ||||
|             } | ||||
| 
 | ||||
|             @media only screen and (max-width: 768px) { | ||||
|                 width: 100%; | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         .ui.repository.list { | ||||
|  |  | |||
|  | @ -12,7 +12,7 @@ | |||
| 			{{end}} | ||||
| 		</h2> | ||||
| 		{{template "base/alert" .}} | ||||
| 		<form class="ui form grid" action="{{.Link}}" method="post"> | ||||
| 		<form class="ui form stackable grid" action="{{.Link}}" method="post"> | ||||
| 			{{.CsrfTokenHtml}} | ||||
| 			<div class="ui seven wide column target"> | ||||
| 				<div class="inline field {{if .Err_TagName}}error{{end}}"> | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue