Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added support for inline header/footer.
  • Loading branch information
Tom Spencer committed Jun 27, 2012
1 parent d40d0b0 commit 69c52c2
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 70 deletions.
72 changes: 40 additions & 32 deletions app/core/style/_base.scss
Expand Up @@ -6,17 +6,35 @@
$appheader-size: 44px;
$appfooter-size: 40px;

// Toolbar
html, body {
width: 100%;
height: 100%;
}

// Toolbar CSS
// Supports position:fixed, overflow:scroll, iscroll polyfill and static fallback

#appwrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}

#appheader {
top: 0;
height: $appheader-size;
width: 100%;
background-color: #aaa;
z-index: 1;
}

#appfooter {
height: $appfooter-size;
bottom: 0;
height: $appfooter-size;
width: 100%;
background-color: #aaa;
z-index: 1;
}

#main {
Expand All @@ -25,61 +43,51 @@ $appfooter-size: 40px;
margin: 0 2%;
}


// Fixed toolbar positioning
.positionfixed {
body {
height: 100%;
width: 100%;
overflow: auto;
overflow: auto;
}

#appheader {
#appheader, #appfooter {
position: fixed;
top: 0;
z-index: 1;
}

#appfooter {
position: fixed;
bottom: 0;
z-index: 1;
#main, #appcontent {
position: relative;
}

#main {
position: relative;
padding-top: $appheader-size;
padding-bottom: $appfooter-size;
}
#main {
padding-top: $appheader-size;
padding-bottom: $appfooter-size;
}
}

// Overflow scroll uses position:absolute
.overflowscroll, .polyfillscroll {
body {
height: 100%;
width: 100%;
overflow: hidden;
}

#appheader {
#appheader, #appfooter, #main, #appcontent {
position: absolute;
top: 0;
}

#appfooter {
position: absolute;
bottom: 0;
}

#main {
position: absolute;
top: $appheader-size;
bottom: $appfooter-size;
overflow-x: hidden;
overflow-y: scroll;
}

#appcontent {
position: absolute;
}

}

.inline {
#main {
padding-bottom: $appfooter-size;
}

#appfooter {
position: absolute;
}
}
72 changes: 39 additions & 33 deletions assets/css/index.css
Expand Up @@ -560,78 +560,84 @@ textarea[contenteditable] {
page-break-after: avoid;
}
}
/* line 10, ../../app/core/style/_base.scss */
/* line 9, ../../app/core/style/_base.scss */
html, body {
width: 100%;
height: 100%;
}

/* line 17, ../../app/core/style/_base.scss */
#appwrapper {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
}

/* line 24, ../../app/core/style/_base.scss */
#appheader {
top: 0;
height: 44px;
width: 100%;
background-color: #aaa;
z-index: 1;
}

/* line 16, ../../app/core/style/_base.scss */
/* line 32, ../../app/core/style/_base.scss */
#appfooter {
bottom: 0;
height: 40px;
width: 100%;
background-color: #aaa;
z-index: 1;
}

/* line 22, ../../app/core/style/_base.scss */
/* line 40, ../../app/core/style/_base.scss */
#main {
width: 96%;
overflow-x: hidden;
margin: 0 2%;
}

/* line 30, ../../app/core/style/_base.scss */
/* line 49, ../../app/core/style/_base.scss */
.positionfixed body {
height: 100%;
width: 100%;
overflow: auto;
}
/* line 36, ../../app/core/style/_base.scss */
.positionfixed #appheader {
/* line 53, ../../app/core/style/_base.scss */
.positionfixed #appheader, .positionfixed #appfooter {
position: fixed;
top: 0;
z-index: 1;
}
/* line 42, ../../app/core/style/_base.scss */
.positionfixed #appfooter {
position: fixed;
bottom: 0;
z-index: 1;
/* line 57, ../../app/core/style/_base.scss */
.positionfixed #main, .positionfixed #appcontent {
position: relative;
}
/* line 48, ../../app/core/style/_base.scss */
/* line 61, ../../app/core/style/_base.scss */
.positionfixed #main {
position: relative;
padding-top: 44px;
padding-bottom: 40px;
}

/* line 56, ../../app/core/style/_base.scss */
/* line 69, ../../app/core/style/_base.scss */
.overflowscroll body, .polyfillscroll body {
height: 100%;
width: 100%;
overflow: hidden;
}
/* line 62, ../../app/core/style/_base.scss */
.overflowscroll #appheader, .polyfillscroll #appheader {
position: absolute;
top: 0;
}
/* line 67, ../../app/core/style/_base.scss */
.overflowscroll #appfooter, .polyfillscroll #appfooter {
/* line 73, ../../app/core/style/_base.scss */
.overflowscroll #appheader, .overflowscroll #appfooter, .overflowscroll #main, .overflowscroll #appcontent, .polyfillscroll #appheader, .polyfillscroll #appfooter, .polyfillscroll #main, .polyfillscroll #appcontent {
position: absolute;
bottom: 0;
}
/* line 72, ../../app/core/style/_base.scss */
/* line 77, ../../app/core/style/_base.scss */
.overflowscroll #main, .polyfillscroll #main {
position: absolute;
top: 44px;
bottom: 40px;
overflow-x: hidden;
overflow-y: scroll;
}
/* line 80, ../../app/core/style/_base.scss */
.overflowscroll #appcontent, .polyfillscroll #appcontent {

/* line 86, ../../app/core/style/_base.scss */
.inline #main {
padding-bottom: 40px;
}
/* line 90, ../../app/core/style/_base.scss */
.inline #appfooter {
position: absolute;
}

Expand Down
12 changes: 7 additions & 5 deletions index.html
Expand Up @@ -45,13 +45,15 @@
</head>

<body>
<header id="appheader"></header>
<div id="appwrapper">
<header id="appheader"></header>

<div id="main" role="main">
<div id="appcontent"></div>
</div>
<div id="main" role="main">
<div id="appcontent"></div>
</div>

<footer id="appfooter"></footer>
<footer id="appfooter"></footer>
</div>

<!-- Energize button clicks -->
<script src="assets/js/energize.min.js"></script>
Expand Down

0 comments on commit 69c52c2

Please sign in to comment.