Responsive design fixes (#4508)

kolaente · lafriks · commit 8d1ad5559831 · 2018-07-26T18:25:41.000+03:00
* reset to master

* build css

* Fixed spacing
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}}">

Original file line number	Diff line number	Diff line change
`@@ -26,6 +26,13 @@`
`26`	`26`	`top: 7px;`
`27`	`27`	`left: 90%;`
`28`	`28`	`width: 15%;`
	`29`	`+`
	`30`	`+ @media only screen and (max-width: 768px) {`
	`31`	`+ top: 10px;`
	`32`	`+ left: auto;`
	`33`	`+ width: auto;`
	`34`	`+ right: 13px;`
	`35`	`+ }`
`29`	`36`	`}`
`30`	`37`	`}`
`31`	`38`
`@@ -40,12 +47,16 @@`
`40`	`47`	`right: 0!important;`
`41`	`48`	`left: auto!important;`
`42`	`49`	`}`
	`50`	`+`
	`51`	`+ @media only screen and (max-width: 768px) {`
	`52`	`+ width: 100%;`
	`53`	`+ }`
`43`	`54`	`}`
`44`	`55`	`.right.stackable.menu > .item.active {`
`45`	`56`	`color: #d9453d;`
`46`	`57`	`}`
`47`	`58`	`}`
`48`		`-`
	`59`	`+`
`49`	`60`	`/* Accomodate for Semantic's 1px hacks on .attached elements */`
`50`	`61`	`.dashboard-repos {`
`51`	`62`	`margin: 0 1px;`
Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,22 @@`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`	`}`
	`40`	`+`
	`41`	`+ #profile-avatar {`
	`42`	`+ @media only screen and (max-width: 768px) {`
	`43`	`+ height: 250px;`
	`44`	`+ overflow: hidden;`
	`45`	`+`
	`46`	`+ img {`
	`47`	`+ max-height: 768px;`
	`48`	`+ max-width: 768px;`
	`49`	`+ }`
	`50`	`+ }`
	`51`	`+ }`
	`52`	`+`
	`53`	`+ @media only screen and (max-width: 768px) {`
	`54`	`+ width: 100%;`
	`55`	`+ }`
`40`	`56`	`}`
`41`	`57`
`42`	`58`	`.ui.repository.list {`