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
tokarchuk/v1.17
silverwind 6 years ago committed by zeripath
parent 15ecc08475
commit 28fcbf33dc
  1. 2
      Makefile
  2. 2
      public/css/index.css
  3. 1
      public/less/_admin.less
  4. 12
      public/less/_base.less
  5. 1
      public/less/_dashboard.less
  6. 1
      public/less/_explore.less
  7. 2
      public/less/_home.less
  8. 1
      public/less/_install.less
  9. 1
      public/less/_organization.less
  10. 1
      public/less/_repository.less
  11. 1
      public/less/_user.less

@ -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 {

Loading…
Cancel
Save