mirror of
				https://codeberg.org/forgejo/forgejo.git
				synced 2025-11-04 00:11:04 +00:00 
			
		
		
		
	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…
	
	Add table
		Add a link
		
	
		Reference in a new issue