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:
silverwind authored and zeripath committed 2019-02-24 21:02:45 +00:00
1 parent 15ecc08475
commit 28fcbf33dc
11 files changed
+7 -18

No files matched your search

+1 -1
View File
@@ -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);)
+1 -1
View File
@@ -1 +1 @@
.tribute-container{box-shadow:0 1px 3px 1px #c7c7c7}.tribute-container ul{background:#fff}.tribute-container li{padding:8px 12px;border-bottom:1px solid #dcdcdc}.tribute-container li img{display:inline-block;vertical-align:middle;width:28px;height:28px;margin-right:5px}.tribute-container li span.fullname{font-weight:400;font-size:.8rem;margin-left:3px}.tribute-container li.highlight,.tribute-container li:hover{background:#2185D0;color:#fff}.emoji{width:1.5em;height:1.5em;display:inline-block;background-size:contain}.ui.label .emoji{height:1.2em!important}body{font-family:Lato,"Segoe UI","Microsoft YaHei",Arial,Helvetica,sans-serif!important;background-color:#fff;overflow-y:scroll;-webkit-font-smoothing:antialiased}img{border-radius:3px}table{border-collapse:collapse}a{cursor:pointer}.rounded{border-radius:.28571429rem!important}code,pre{font:12px Consolas,"Liberation Mono",Menlo,Courier,monospace}code.raw,pre.raw{padding:7px 12px;margin:10px 0;background-color:#f8f8f8;border:1px solid #ddd;border-radius:3px;font-size:13px;line-height:1.5;overflow:auto}code.wrap,pre.wrap{white-space:pre-wrap;-ms-word-break:break-all;word-break:break-all;overflow-wrap:break-word;word-wrap:break-word}.dont-break-out{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full.height{padding:0;margin:0 0 calc(-40px - 2px) 0;min-height:100%}.following.bar{z-index:900;left:0;width:100%;margin:0}.following.bar.light{background-color:#fff;border-bottom:1px solid #DDD;box-shadow:0 2px 3px rgba(0,0,0,.04)}.following.bar .column .menu{margin-top:0}.following.bar .top.menu a.item.brand{padding-left:0}.following.bar .brand .ui.mini.image{width:30px}.following.bar .top.menu .dropdown.item.active,.following.bar .top.menu .dropdown.item:hover,.following.bar .top.menu a.item:hover{background-color:transparent}.following.bar .top.menu a.item:hover{color:rgba(0,0,0,.45)}.following.bar .top.menu .menu{z-index:900}.following.bar .octicon{margin-right:.75em}.following.bar .octicon.fitted{margin-right:0}.following.bar .searchbox{background-color:#f4f4f4!important}.following.bar .searchbox:focus{background-color:#e9e9e9!important}.following.bar .text .octicon{width:16px;text-align:center}.following.bar #navbar{width:100vw;padding:0 .5rem}.following.bar #navbar .brand{margin:0}@media only screen and (max-width:767px){.following.bar #navbar:not(.shown)>:not(:first-child){display:none}}.right.stackable.menu{margin-left:auto;display:flex;align-items:inherit;flex-direction:inherit}.ui.left{float:left}.ui.right{float:right}.ui.button,.ui.menu .item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.ui.container.fluid.padded{padding:0 10px 0 10px}.ui.form .ui.button{font-weight:400}.ui.floating.label{z-index:10}.ui.transparent.label{background-color:transparent}.ui.menu,.ui.segment,.ui.vertical.menu{box-shadow:none}.ui .menu:not(.vertical) .item>.button.compact{padding:.58928571em 1.125em}.ui .menu:not(.vertical) .item>.button.small{font-size:.92857143rem}.ui.dropdown .menu>.item>.floating.label{z-index:11}.ui.dropdown .menu .menu>.item>.floating.label{z-index:21}.ui .text.red{color:#d95c5c!important}.ui .text.red a{color:#d95c5c!important}.ui .text.red a:hover{color:#E67777!important}.ui .text.blue{color:#428bca!important}.ui .text.blue a{color:#15c!important}.ui .text.blue a:hover{color:#428bca!important}.ui .text.black{color:#444}.ui .text.black:hover{color:#000}.ui .text.grey{color:#767676!important}.ui .text.grey a{color:#444!important}.ui .text.grey a:hover{color:#000!important}.ui .text.light.grey{color:#888!important}.ui .text.green{color:#6cc644!important}.ui .text.purple{color:#6e5494!important}.ui .text.yellow{color:#FBBD08!important}.ui .text.gold{color:#a1882b!important}.ui .text.left{text-align:left!important}.ui .text.right{text-align:right!important}.ui .text.small{font-size:.75em}.ui .text.normal{font-weight:400}.ui .text.bold{font-weight:700}.ui .text.italic{font-style:italic}.ui .text.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}.ui .text.thin{font-weight:400}.ui .text.middle{vertical-align:middle}.ui .message{text-align:center}.ui.bottom.attached.message{font-weight:700;text-align:left;color:#000}.ui.bottom.attached.message .pull-right{color:#000}.ui.bottom.attached.message .pull-right>span,.ui.bottom.attached.message>span{color:#21ba45}.ui .header>i+.content{padding-left:.75rem;vertical-align:middle}.ui .warning.header{background-color:#F9EDBE!important;border-color:#F0C36D}.ui .warning.segment{border-color:#F0C36D}.ui .info.segment{border:1px solid #c5d5dd}.ui .info.segment.top{background-color:#e6f1f6!important}.ui .info.segment.top h3,.ui .info.segment.top h4{margin-top:0}.ui .info.segment.top h3:last-child{margin-top:4px}.ui .info.segment.top>:last-child{margin-bottom:0}.ui .normal.header{font-weight:400}.ui .avatar.image{border-radius:3px}.ui .form .fake{display:noLine truncated .tribute-container{box-shadow:0 1px 3px 1px #c7c7c7}.tribute-container ul{background:#fff}.tribute-container li{padding:8px 12px;border-bottom:1px solid #dcdcdc}.tribute-container li img{display:inline-block;vertical-align:middle;width:28px;height:28px;margin-right:5px}.tribute-container li span.fullname{font-weight:400;font-size:.8rem;margin-left:3px}.tribute-container li.highlight,.tribute-container li:hover{background:#2185D0;color:#fff}.emoji{width:1.5em;height:1.5em;display:inline-block;background-size:contain}.ui.label .emoji{height:1.2em!important}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}table{border-collapse:collapse}a{cursor:pointer}.rounded{border-radius:.28571429rem!important}code,pre{font:12px Consolas,"Liberation Mono",Menlo,Courier,monospace}code.raw,pre.raw{padding:7px 12px;margin:10px 0;background-color:#f8f8f8;border:1px solid #ddd;border-radius:3px;font-size:13px;line-height:1.5;overflow:auto}code.wrap,pre.wrap{white-space:pre-wrap;-ms-word-break:break-all;word-break:break-all;overflow-wrap:break-word;word-wrap:break-word}.dont-break-out{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full.height{flex-grow:1;padding-bottom:80px}.following.bar{z-index:900;left:0;width:100%;margin:0}.following.bar.light{background-color:#fff;border-bottom:1px solid #DDD;box-shadow:0 2px 3px rgba(0,0,0,.04)}.following.bar .column .menu{margin-top:0}.following.bar .top.menu a.item.brand{padding-left:0}.following.bar .brand .ui.mini.image{width:30px}.following.bar .top.menu .dropdown.item.active,.following.bar .top.menu .dropdown.item:hover,.following.bar .top.menu a.item:hover{background-color:transparent}.following.bar .top.menu a.item:hover{color:rgba(0,0,0,.45)}.following.bar .top.menu .menu{z-index:900}.following.bar .octicon{margin-right:.75em}.following.bar .octicon.fitted{margin-right:0}.following.bar .searchbox{background-color:#f4f4f4!important}.following.bar .searchbox:focus{background-color:#e9e9e9!important}.following.bar .text .octicon{width:16px;text-align:center}.following.bar #navbar{width:100vw;padding:0 .5rem}.following.bar #navbar .brand{margin:0}@media only screen and (max-width:767px){.following.bar #navbar:not(.shown)>:not(:first-child){display:none}}.right.stackable.menu{margin-left:auto;display:flex;align-items:inherit;flex-direction:inherit}.ui.left{float:left}.ui.right{float:right}.ui.button,.ui.menu .item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.ui.container.fluid.padded{padding:0 10px 0 10px}.ui.form .ui.button{font-weight:400}.ui.floating.label{z-index:10}.ui.transparent.label{background-color:transparent}.ui.menu,.ui.segment,.ui.vertical.menu{box-shadow:none}.ui .menu:not(.vertical) .item>.button.compact{padding:.58928571em 1.125em}.ui .menu:not(.vertical) .item>.button.small{font-size:.92857143rem}.ui.dropdown .menu>.item>.floating.label{z-index:11}.ui.dropdown .menu .menu>.item>.floating.label{z-index:21}.ui .text.red{color:#d95c5c!important}.ui .text.red a{color:#d95c5c!important}.ui .text.red a:hover{color:#E67777!important}.ui .text.blue{color:#428bca!important}.ui .text.blue a{color:#15c!important}.ui .text.blue a:hover{color:#428bca!important}.ui .text.black{color:#444}.ui .text.black:hover{color:#000}.ui .text.grey{color:#767676!important}.ui .text.grey a{color:#444!important}.ui .text.grey a:hover{color:#000!important}.ui .text.light.grey{color:#888!important}.ui .text.green{color:#6cc644!important}.ui .text.purple{color:#6e5494!important}.ui .text.yellow{color:#FBBD08!important}.ui .text.gold{color:#a1882b!important}.ui .text.left{text-align:left!important}.ui .text.right{text-align:right!important}.ui .text.small{font-size:.75em}.ui .text.normal{font-weight:400}.ui .text.bold{font-weight:700}.ui .text.italic{font-style:italic}.ui .text.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}.ui .text.thin{font-weight:400}.ui .text.middle{vertical-align:middle}.ui .message{text-align:center}.ui.bottom.attached.message{font-weight:700;text-align:left;color:#000}.ui.bottom.attached.message .pull-right{color:#000}.ui.bottom.attached.message .pull-right>span,.ui.bottom.attached.message>span{color:#21ba45}.ui .header>i+.content{padding-left:.75rem;vertical-align:middle}.ui .warning.header{background-color:#F9EDBE!important;border-color:#F0C36D}.ui .warning.segment{border-color:#F0C36D}.ui .info.segment{border:1px solid #c5d5dd}.ui .info.segment.top{background-color:#e6f1f6!important}.ui .info.segment.top h3,.ui .info.segment.top h4{margin-top:0}.ui .info.segment.top h3:last-child{margin-top:4px}.ui .info.segment.top>:last-child{margin-bottom:0}.ui .normal.header{font-weight:400}.ui .avatar.image{border-radius:3px}.ui .form .fake{Line truncated
-1
View File
@@ -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;
+5 -7
View File
@@ -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
View File
@@ -1,6 +1,5 @@
.dashboard { .dashboard {
padding-top: 15px; padding-top: 15px;
padding-bottom: @footer-margin * 2;
&.feeds, &.feeds,
&.issues { &.issues {
-1
View File
@@ -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;
-2
View File
@@ -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
View File
@@ -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
View File
@@ -1,6 +1,5 @@
.organization { .organization {
padding-top: 15px; padding-top: 15px;
padding-bottom: @footer-margin * 2;
.head { .head {
.ui.header { .ui.header {
-1
View File
@@ -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
View File
@@ -1,7 +1,6 @@
.user { .user {
&:not(.icon) { &:not(.icon) {
padding-top: 15px; padding-top: 15px;
padding-bottom: @footer-margin * 2;
} }
&.profile { &.profile {