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
This commit is contained in:
parent
15ecc08475
commit
28fcbf33dc
11 changed files with 7 additions and 18 deletions
2
Makefile
2
Makefile
|
@ -371,7 +371,7 @@ generate-stylesheets:
|
||||||
echo "Please install npm version 5.2+"; \
|
echo "Please install npm version 5.2+"; \
|
||||||
exit 1; \
|
exit 1; \
|
||||||
fi;
|
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
|
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, $(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);)
|
$(foreach file, $(wildcard public/css/*),npx postcss --use autoprefixer --autoprefixer.browsers $(BROWSERS) -o $(file) $(file);)
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -1,6 +1,5 @@
|
||||||
.admin {
|
.admin {
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-bottom: @footer-margin * 2;
|
|
||||||
|
|
||||||
.table.segment {
|
.table.segment {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
@footer-margin: 40px;
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "Lato", "Segoe UI", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
|
font-family: "Lato", "Segoe UI", "Microsoft YaHei", Arial, Helvetica, sans-serif !important;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
@ -56,9 +56,8 @@ pre, code {
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
}
|
}
|
||||||
.full.height {
|
.full.height {
|
||||||
padding: 0;
|
flex-grow: 1;
|
||||||
margin: 0 0 calc(-@footer-margin - 2px) 0;
|
padding-bottom: 80px;
|
||||||
min-height: 100%;
|
|
||||||
}
|
}
|
||||||
.following.bar {
|
.following.bar {
|
||||||
z-index: 900;
|
z-index: 900;
|
||||||
|
@ -440,11 +439,10 @@ pre, code {
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
position: absolute;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-top: 1px solid #d6d6d6;
|
border-top: 1px solid #d6d6d6;
|
||||||
clear: both;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
color: #888888;
|
color: #888888;
|
||||||
.container {
|
.container {
|
||||||
width: 100vw !important;
|
width: 100vw !important;
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
.dashboard {
|
.dashboard {
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-bottom: @footer-margin * 2;
|
|
||||||
|
|
||||||
&.feeds,
|
&.feeds,
|
||||||
&.issues {
|
&.issues {
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
.explore {
|
.explore {
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-bottom: @footer-margin * 2;
|
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
.home {
|
.home {
|
||||||
padding-bottom: @footer-margin * 2;
|
|
||||||
.logo {
|
.logo {
|
||||||
max-width: 220px;
|
max-width: 220px;
|
||||||
}
|
}
|
||||||
|
@ -45,7 +44,6 @@
|
||||||
|
|
||||||
.signup {
|
.signup {
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-bottom: @footer-margin * 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
.install {
|
.install {
|
||||||
padding-top: 45px;
|
padding-top: 45px;
|
||||||
padding-bottom: @footer-margin * 2;
|
|
||||||
form {
|
form {
|
||||||
@input-padding: 320px !important;
|
@input-padding: 320px !important;
|
||||||
label {
|
label {
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
.organization {
|
.organization {
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-bottom: @footer-margin * 2;
|
|
||||||
|
|
||||||
.head {
|
.head {
|
||||||
.ui.header {
|
.ui.header {
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
@mega-octicon-width: 30px;
|
@mega-octicon-width: 30px;
|
||||||
|
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-bottom: @footer-margin * 2;
|
|
||||||
|
|
||||||
.repo-header {
|
.repo-header {
|
||||||
.ui.compact.menu {
|
.ui.compact.menu {
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
.user {
|
.user {
|
||||||
&:not(.icon) {
|
&:not(.icon) {
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-bottom: @footer-margin * 2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.profile {
|
&.profile {
|
||||||
|
|
Reference in a new issue