From 8d1ad55598311e079e2af07fb7aa3f9992ba4f65 Mon Sep 17 00:00:00 2001
From: kolaente <konrad@kola-entertainments.de>
Date: Thu, 26 Jul 2018 17:25:41 +0200
Subject: Responsive design fixes (#4508)

* reset to master

* build css

* Fixed spacing
---
 public/less/_dashboard.less  | 13 ++++++++++++-
 public/less/_form.less       | 43 +++++++++++++++++++++++++++++++++++++++----
 public/less/_home.less       | 13 +++++++++++++
 public/less/_repository.less | 31 +++++++++++++++++++++++++++++++
 public/less/_user.less       | 16 ++++++++++++++++
 5 files changed, 111 insertions(+), 5 deletions(-)

(limited to 'public/less')

diff --git a/public/less/_dashboard.less b/public/less/_dashboard.less
index 85787ce2be..8fcdb6b385 100644
--- 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
index db9f8f38a5..9b9b7879b4 100644
--- 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
index c90e8ec414..d0ce34fb86 100644
--- 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
index 6082844d25..b242de3ae5 100644
--- 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
index cc57239b59..3b29436bf7 100644
--- 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 {
-- 
cgit v1.2.3