use flex for the default template

(cherry picked from commit 3775be4ce9)
This commit is contained in:
Mario 2018-11-26 11:44:10 +00:00
parent 3b42bd43ab
commit 58c0b81908
3 changed files with 35 additions and 17 deletions

View File

@ -1,22 +1,37 @@
main { main {
display: table;
table-layout: fixed;
position: relative; position: relative;
width: 100%; min-height: 100vh;
height: 100vh; display: flex;
flex-direction: column;
} }
aside { .content {
display: flex;
flex: 1;
}
.columns {
display: flex;
flex:1;
min-width: 0;
}
#region_1 {
position: relative; position: relative;
display: table-cell; order: 1;
vertical-align: top;
padding: 4.5rem 7px 0px 7px; padding: 4.5rem 7px 0px 7px;
} }
section { #region_2 {
position: relative; position: relative;
width: 100%; flex: 1;
display: table-cell; order: 2;
vertical-align: top;
padding: 4.5rem 7px 200px 7px; padding: 4.5rem 7px 200px 7px;
min-width: 0;
}
#region_3 {
position: relative;
order: 3;
padding: 4.5rem 7px 0px 7px;
} }

View File

@ -71,7 +71,6 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #ccc;
text-align: center; text-align: center;
} }

View File

@ -10,12 +10,16 @@
<header><?php if(x($page,'header')) echo $page['header']; ?></header> <header><?php if(x($page,'header')) echo $page['header']; ?></header>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"><?php if(x($page,'nav')) echo $page['nav']; ?></nav> <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"><?php if(x($page,'nav')) echo $page['nav']; ?></nav>
<main> <main>
<aside id="region_1"><div class="aside_spacer"><div id="left_aside_wrapper"><?php if(x($page,'aside')) echo $page['aside']; ?></div></div></aside> <div class="content">
<section id="region_2"><?php if(x($page,'content')) echo $page['content']; ?> <div class="columns">
<aside id="region_1"><div class="aside_spacer"><div id="left_aside_wrapper"><?php if(x($page,'aside')) echo $page['aside']; ?></div></div></aside>
<section id="region_2"><?php if(x($page,'content')) echo $page['content']; ?>
<div id="page-footer"></div> <div id="page-footer"></div>
<div id="pause"></div> <div id="pause"></div>
</section> </section>
<aside id="region_3" class="d-none d-xl-table-cell"><div class="aside_spacer"><div id="right_aside_wrapper"><?php if(x($page,'right_aside')) echo $page['right_aside']; ?></div></div></aside> <aside id="region_3" class="d-none d-xl-table-cell"><div class="aside_spacer"><div id="right_aside_wrapper"><?php if(x($page,'right_aside')) echo $page['right_aside']; ?></div></div></aside>
</div>
</div>
</main> </main>
<footer><?php if(x($page,'footer')) echo $page['footer']; ?></footer> <footer><?php if(x($page,'footer')) echo $page['footer']; ?></footer>
</body> </body>