Responsive design fixes (#4508)

* reset to master * build css * Fixed spacing
go-gitea · Jul 26, 2018 · 8d1ad55 · 8d1ad55
1 parent f847884
commit 8d1ad55
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 7 deletions.
diff --git a/public/css/index.css b/public/css/index.css
diff --git a/public/less/_dashboard.less b/public/less/_dashboard.less
@@ -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;

diff --git a/public/less/_form.less b/public/less/_form.less
@@ -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;
+		}
+	}
+}
diff --git a/public/less/_home.less b/public/less/_home.less
@@ -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;
+		}
+	}
+}
diff --git a/public/less/_repository.less b/public/less/_repository.less
@@ -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%;
+	}
+}
diff --git a/public/less/_user.less b/public/less/_user.less
@@ -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 {

diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
@@ -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}}">