UI: Make document body a flexbox (#6139)

* UI: Make document body a flexbox

Fixes: https://github.com/go-gitea/gitea/issues/6118

* ie11 fixes

* increase padding to 80px

* add flex-grow

Makefile

@@ -371,7 +371,7 @@ generate-stylesheets:
 		echo "Please install npm version 5.2+"; \
 		exit 1; \
 	fi;
-	$(eval BROWSERS := "> 2%, last 2 firefox versions, last 2 safari versions")
+	$(eval BROWSERS := "> 1%, last 2 firefox versions, last 2 safari versions, ie 11")
 	npx lessc --clean-css public/less/index.less public/css/index.css
 	$(foreach file, $(filter-out public/less/themes/_base.less, $(wildcard public/less/themes/*)),npx lessc --clean-css public/less/themes/$(notdir $(file)) > public/css/theme-$(notdir $(call strip-suffix,$(file))).css;)
 	$(foreach file, $(wildcard public/css/*),npx postcss --use autoprefixer --autoprefixer.browsers $(BROWSERS) -o $(file) $(file);)

public/less/_admin.less

@@ -1,6 +1,5 @@
 .admin {
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 
     .table.segment {
         padding: 0;

public/less/_base.less

@@ -1,10 +1,10 @@
-@footer-margin: 40px;
-
 body {
     font-family: "Lato", "Segoe UI", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
     background-color: #fff;
     overflow-y: scroll;
     -webkit-font-smoothing: antialiased;
+    display: flex;
+    flex-direction: column;
 }
 img {
     border-radius: 3px;
@@ -56,9 +56,8 @@ pre, code {
     hyphens: auto;
 }
 .full.height {
-    padding: 0;
+    flex-grow: 1;
-    margin: 0 0 calc(-@footer-margin - 2px) 0;
+    padding-bottom: 80px;
-    min-height: 100%;
 }
 .following.bar {
     z-index: 900;
@@ -440,11 +439,10 @@ pre, code {
 }
 
 footer {
-    position: absolute;
     background-color: white;
     border-top: 1px solid #d6d6d6;
-    clear: both;
     width: 100%;
+    height: 40px;
     color: #888888;
     .container {
         width: 100vw !important;

public/less/_dashboard.less

@@ -1,6 +1,5 @@
 .dashboard {
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 
     &.feeds,
     &.issues {

public/less/_explore.less

@@ -1,6 +1,5 @@
 .explore {
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 
     .navbar {
         justify-content: center;

public/less/_home.less

@@ -1,5 +1,4 @@
 .home {
-	padding-bottom: @footer-margin * 2;
 	.logo {
 		max-width: 220px;
 	}
@@ -45,7 +44,6 @@
 
 .signup {
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 }
 
 footer {

public/less/_install.less

@@ -1,6 +1,5 @@
 .install {
     padding-top: 45px;
-    padding-bottom: @footer-margin * 2;
     form {
         @input-padding: 320px !important;
         label {

public/less/_organization.less

@@ -1,6 +1,5 @@
 .organization {
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 
     .head {
         .ui.header {

public/less/_repository.less

@@ -2,7 +2,6 @@
     @mega-octicon-width: 30px;
 
     padding-top: 15px;
-    padding-bottom: @footer-margin * 2;
 
     .repo-header {
         .ui.compact.menu {

public/less/_user.less

@@ -1,7 +1,6 @@
 .user {
     &:not(.icon) {
         padding-top: 15px;
-        padding-bottom: @footer-margin * 2;
     }
 
     &.profile {