Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

KB public: fix IE11 layout bug

Browse source 
It adds a wrapper element around the contents inside the body  to workaround the wrong height calculation bug in IE11 : https://github.com/philipwalton/flexbugs#flexbug-3
Additionally it fixes a text overflow bug in grid elements.
Fixes #2600
This commit is contained in:
Felix Niklas 2019-06-20 09:56:27 +02:00 committed by Thorsten Eckel
parent 96f6d5e0e5
commit a7a2a8b1f0
3 changed files with 64 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/knowledge_base_public/language.js
View file

@ -98,7 +98,7 @@
LanguageDetector.show = function(lang) { LanguageDetector.show = function(lang) {
var elem = new LanguageBannerElement(lang) var elem = new LanguageBannerElement(lang)
document.body.prepend(elem.el) document.querySelector('.js-wrapper').prepend(elem.el)
} }
LanguageDetector.checkIfBetterLanguageAvailable() LanguageDetector.checkIfBetterLanguageAvailable()

13
app/assets/stylesheets/knowledge_base.scss
View file

@ -99,7 +99,6 @@ body {
overflow-y: scroll; overflow-y: scroll;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 100vh;
} }
h1 { h1 {
@ -240,11 +239,18 @@ b {
} }
} }
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header { .header {
background: $light-bg; background: $light-bg;
border-bottom: 1px solid $dark-border; border-bottom: 1px solid $dark-border;
position: relative; position: relative;
padding: .3em 0 .9em; padding: .3em 0 .9em;
flex-shrink: 0;
.container { .container {
display: flex; display: flex;
@ -422,7 +428,6 @@ b {
} }
.main { .main {
flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
@ -433,7 +438,7 @@ b {
} }
.container { .container {
flex: 1; flex: 1 1 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -681,6 +686,7 @@ b {
span { span {
display: block; display: block;
max-width: 100%;
} }
} }
@ -985,6 +991,7 @@ b {
} }
.footer { .footer {
margin-top: auto;
border-top: 1px solid $dark-border; border-top: 1px solid $dark-border;
background: $light-bg; background: $light-bg;
color: hsl(210,8%,50%); color: hsl(210,8%,50%);

16
app/views/layouts/knowledge_base.html.erb
View file

@ -12,9 +12,10 @@
<%= stylesheet_link_tag "knowledge_base.css", :media => 'all' %> <%= stylesheet_link_tag "knowledge_base.css", :media => 'all' %>
<%= render 'knowledge_base/public/inline_stylesheet', knowledge_base: @knowledge_base %> <%= render 'knowledge_base/public/inline_stylesheet', knowledge_base: @knowledge_base %>
<%= render 'knowledge_base/public/top_banner', object: @object || @knowledge_base if editor? %> <div class="wrapper js-wrapper">
<%= render 'knowledge_base/public/top_banner', object: @object || @knowledge_base if editor? %>
<header class="header js-header"> <header class="header js-header">
<div class="container"> <div class="container">
<h1 class="logo"> <h1 class="logo">
<%= link_to custom_path_if_needed(help_root_path(locale: params[:locale])) do %> <%= link_to custom_path_if_needed(help_root_path(locale: params[:locale])) do %>
@ -36,13 +37,13 @@
<ul class="search-results js-search-results" data-empty-placeholder="<%= zt('No results were found.') %>"></ul> <ul class="search-results js-search-results" data-empty-placeholder="<%= zt('No results were found.') %>"></ul>
</div> </div>
</div> </div>
</header> </header>
<%= render_breadcrumb_if_needed %> <%= render_breadcrumb_if_needed %>
<%= yield %> <%= yield %>
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<div class="footer-menu"> <div class="footer-menu">
<div class="copyright"> <div class="copyright">
@ -66,7 +67,8 @@
</div> </div>
</div> </div>
</div> </div>
</footer> </footer>
</div>
<script type='text/javascript'> <script type='text/javascript'>
if(window.fetch === undefined || window.Promise === undefined || Element.prototype.prepend === undefined){ if(window.fetch === undefined || window.Promise === undefined || Element.prototype.prepend === undefined){