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>
|
<h1>Navigation</h1>
|
||||||
<iframe src="./styleguide/navigation/demo.html" scrolling="no"></iframe>
|
<iframe src="./styleguide/navigation/demo.html" scrolling="no"></iframe>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<script src="styleguide/navigation/sidenav.js" async defer></script>
|
<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 to handle sizing the iFrames -->
|
||||||
<script>
|
<script>
|
||||||
'use strict';
|
'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