Implements header-panel.
Includes support for standard, seamed, waterfall (multiple sizes) and scroll modes.master
Sérgio Gomes
parent
73f33dde3a
commit
811d33e3ec
|
|
@ -100,15 +100,20 @@
|
|||
<h1>Navigation</h1>
|
||||
<iframe src="./styleguide/navigation/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Icons</h1>
|
||||
<iframe src="./styleguide/icons/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Header panel</h1>
|
||||
<iframe src="./styleguide/header-panel/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="styleguide/navigation/sidenav.js" async defer></script>
|
||||
|
||||
<div class="styleguide-demo">
|
||||
<h1>Icons</h1>
|
||||
<iframe src="./styleguide/icons/demo.html" scrolling="no"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- Script to handle sizing the iFrames -->
|
||||
<script>
|
||||
'use strict';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
@import '../palette/palette';
|
||||
@import '../shadow/shadow';
|
||||
|
||||
/* Colors */
|
||||
$panel-bg-color: nth($primaryPalette, 6);
|
||||
$panel-text-color: nth($pagePalette, 3);
|
||||
|
||||
/* Sizes */
|
||||
$panel-small-height: 60px;
|
||||
$panel-medium-tall-height: 120px;
|
||||
$panel-tall-height: 180px;
|
||||
$panel-default-height: $panel-small-height;
|
||||
|
||||
.header-panel {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-panel > .header-panel-header {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
height: 60px;
|
||||
min-height: $panel-default-height;
|
||||
line-height: $panel-default-height;
|
||||
font-size: 18px;
|
||||
padding: 0 10px;
|
||||
background-color: $panel-bg-color;
|
||||
color: $panel-text-color;
|
||||
z-index: 100;
|
||||
transition: min-height 0.2s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.header-panel.header-panel-tall > .header-panel-header {
|
||||
min-height: $panel-tall-height;
|
||||
}
|
||||
|
||||
.header-panel.header-panel-medium-tall > .header-panel-header {
|
||||
min-height: $panel-medium-tall-height;
|
||||
}
|
||||
|
||||
.header-panel > .header-panel-header.header-panel-compact {
|
||||
min-height: $panel-default-height;
|
||||
}
|
||||
|
||||
.header-panel.header-panel-scroll {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.header-panel > .header-panel-header.header-panel-shadow {
|
||||
@include shadow-z2();
|
||||
}
|
||||
|
||||
.header-panel > .header-panel-content {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header-panel.header-panel-scroll > .header-panel-content {
|
||||
overflow: visible;
|
||||
}
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Buttons</title>
|
||||
|
||||
<link href="//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel='stylesheet'>
|
||||
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-standard">
|
||||
<div class="header-panel-header">Standard</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-seamed">
|
||||
<div class="header-panel-header">Seamed</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-waterfall">
|
||||
<div class="header-panel-header">Waterfall</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-tall header-panel-waterfall">
|
||||
<div class="header-panel-header">Waterfall-tall</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-medium-tall header-panel-waterfall">
|
||||
<div class="header-panel-header">Waterfall-medium-tall</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-container">
|
||||
<div class="header-panel header-panel-scroll">
|
||||
<div class="header-panel-header">Scroll</div>
|
||||
<div class="header-panel-content">
|
||||
<div class="demo-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="header-panel.js"></script>
|
||||
<script src="../third_party/rAF.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
@import '../styleguide_demo_bp';
|
||||
@import '_header_panel';
|
||||
|
||||
.demo-container {
|
||||
width: 400px;
|
||||
float: left;
|
||||
margin: 0 40px 40px 0;
|
||||
}
|
||||
|
||||
.demo-content {
|
||||
height: 2000px;
|
||||
background: linear-gradient(rgb(214, 227, 231), lightblue);
|
||||
}
|
||||
|
||||
.header-panel {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
'use strict';
|
||||
|
||||
(function() {
|
||||
window.addEventListener('load', function() {
|
||||
var panels = document.querySelectorAll('.header-panel');
|
||||
var MODE = {
|
||||
STANDARD: 0,
|
||||
SEAMED: 1,
|
||||
WATERFALL: 2,
|
||||
SCROLL: 3
|
||||
};
|
||||
var SHADOW_CLASS = 'header-panel-shadow';
|
||||
var COMPACT_CLASS = 'header-panel-compact';
|
||||
|
||||
var scrollHandler = function(mode, header, content) {
|
||||
return function() {
|
||||
if (mode === MODE.WATERFALL) {
|
||||
if (content.scrollTop > 0) {
|
||||
header.classList.add(SHADOW_CLASS);
|
||||
header.classList.add(COMPACT_CLASS);
|
||||
} else {
|
||||
header.classList.remove(SHADOW_CLASS);
|
||||
header.classList.remove(COMPACT_CLASS);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
for (var i = 0; i < panels.length; i++) {
|
||||
var panel = panels[i];
|
||||
var header = panel.querySelector('.header-panel-header');
|
||||
var content = panel.querySelector('.header-panel-content');
|
||||
var mode = MODE.STANDARD;
|
||||
if (panel.classList.contains('header-panel-seamed')) {
|
||||
mode = MODE.SEAMED;
|
||||
} else if (panel.classList.contains('header-panel-waterfall')) {
|
||||
mode = MODE.WATERFALL;
|
||||
} else if (panel.classList.contains('header-panel-scroll')) {
|
||||
mode = MODE.SCROLL;
|
||||
}
|
||||
|
||||
if (mode === MODE.STANDARD) {
|
||||
header.classList.add(SHADOW_CLASS);
|
||||
} else if (mode === MODE.SEAMED || mode === MODE.SCROLL) {
|
||||
header.classList.remove(SHADOW_CLASS);
|
||||
} else if (mode === MODE.WATERFALL) {
|
||||
var handler = scrollHandler(mode, header, content);
|
||||
content.addEventListener('scroll', handler);
|
||||
handler();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
Loading…
Reference in New Issue