Skip to content

Commit

Permalink
Extract presentation styles from widget's stylesheets
Browse files Browse the repository at this point in the history 
- Used 'component-descendant-descendant' pattern to define styles for
  the widget and demo page.

- Removed presentation styles from the widget. The idea is to be
  compatible with any markup and allow the client to define the
  appearance.
  • Loading branch information
@skhilko
skhilko committed Mar 31, 2015
1 parent 270d022 commit 9961095
Show file tree
Hide file tree
Showing 4 changed files with 181 additions and 192 deletions.
191 changes: 82 additions & 109 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,122 +19,95 @@
<h1>Stickies Demo</h1>
</header>
<section>
<div class="list">
<div class="category">
<h4 class="header">List 1</h4>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11</div>
<div class="item">item 12</div>
</div>
<div class="category">
<h4 class="header">List 2</h4>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11</div>
<div class="item">item 12</div>
</div>
<div class="category">
<h4 class="header">List 3</h4>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11</div>
<div class="item">item 12</div>
</div>
<div class="category">
<h4 class="header">List 4</h4>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11</div>
<div class="item">item 12</div>
</div>
<div class="category">
<h4 class="header">List 5</h4>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11</div>
<div class="item">item 12</div>
</div>
<div class="category">
<h4 class="header">List 6</h4>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11</div>
<div class="item">item 12</div>
</div>
<div class="category">
<h4 class="header">List 7</h4>
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
<div class="item">item 5</div>
<div class="item">item 6</div>
<div class="item">item 7</div>
<div class="item">item 8</div>
<div class="item">item 9</div>
<div class="item">item 10</div>
<div class="item">item 11</div>
<div class="item">item 12</div>
</div>
</div>
<ul class="list-view">
<li class="list-view-header">Header 1</li>
<li class="list-view-item">Item 1</li>
<li class="list-view-item">Item 2</li>
<li class="list-view-item">Item 3</li>
<li class="list-view-item">Item 4</li>
<li class="list-view-item">Item 5</li>
<li class="list-view-item">Item 6</li>
<li class="list-view-item">Item 7</li>
<li class="list-view-item">Item 8</li>
<li class="list-view-item">Item 9</li>
<li class="list-view-item">Item 10</li>
<li class="list-view-item">Item 11</li>
<li class="list-view-item">Item 12</li>
<li class="list-view-header">Header 2</li>
<li class="list-view-item">Item 1</li>
<li class="list-view-item">Item 2</li>
<li class="list-view-item">Item 3</li>
<li class="list-view-item">Item 4</li>
<li class="list-view-item">Item 5</li>
<li class="list-view-item">Item 6</li>
<li class="list-view-item">Item 7</li>
<li class="list-view-item">Item 8</li>
<li class="list-view-item">Item 9</li>
<li class="list-view-item">Item 10</li>
<li class="list-view-item">Item 11</li>
<li class="list-view-item">Item 12</li>
<li class="list-view-header">Header 3</li>
<li class="list-view-item">Item 1</li>
<li class="list-view-item">Item 2</li>
<li class="list-view-item">Item 3</li>
<li class="list-view-item">Item 4</li>
<li class="list-view-item">Item 5</li>
<li class="list-view-item">Item 6</li>
<li class="list-view-item">Item 7</li>
<li class="list-view-item">Item 8</li>
<li class="list-view-item">Item 9</li>
<li class="list-view-item">Item 10</li>
<li class="list-view-item">Item 11</li>
<li class="list-view-item">Item 12</li>
<li class="list-view-header">Header 4</li>
<li class="list-view-item">Item 1</li>
<li class="list-view-item">Item 2</li>
<li class="list-view-item">Item 3</li>
<li class="list-view-item">Item 4</li>
<li class="list-view-item">Item 5</li>
<li class="list-view-item">Item 6</li>
<li class="list-view-item">Item 7</li>
<li class="list-view-item">Item 8</li>
<li class="list-view-item">Item 9</li>
<li class="list-view-item">Item 10</li>
<li class="list-view-item">Item 11</li>
<li class="list-view-item">Item 12</li>
<li class="list-view-header">Header 5</li>
<li class="list-view-item">Item 1</li>
<li class="list-view-item">Item 2</li>
<li class="list-view-item">Item 3</li>
<li class="list-view-item">Item 4</li>
<li class="list-view-item">Item 5</li>
<li class="list-view-item">Item 6</li>
<li class="list-view-item">Item 7</li>
<li class="list-view-item">Item 8</li>
<li class="list-view-item">Item 9</li>
<li class="list-view-item">Item 10</li>
<li class="list-view-item">Item 11</li>
<li class="list-view-item">Item 12</li>
<li class="list-view-header">Header 6</li>
<li class="list-view-item">Item 1</li>
<li class="list-view-item">Item 2</li>
<li class="list-view-item">Item 3</li>
<li class="list-view-item">Item 4</li>
<li class="list-view-item">Item 5</li>
<li class="list-view-item">Item 6</li>
<li class="list-view-item">Item 7</li>
<li class="list-view-item">Item 8</li>
<li class="list-view-item">Item 9</li>
<li class="list-view-item">Item 10</li>
<li class="list-view-item">Item 11</li>
<li class="list-view-item">Item 12</li>
</ul>
</section>
<footer>
<p>♥ from Siarhei Khilko</p>
</footer>
</div>
<script src="scripts/main.js"></script>
<script>
new StickyHeaders(document.querySelector('.list'), {
headerSelector: '.header'
new StickyHeaders(document.querySelector('.list-view'), {
headerSelector: '.list-view-header'
});
</script>
</body>
Expand Down
113 changes: 81 additions & 32 deletions demo/styles/demo.scss
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,104 @@
html,
body {
font-size: 100%;
font-size: 100%;
}


header,
footer,
section {
max-width: 62.5rem;
padding-left: 15px;
padding-right: 15px;
margin: 0 auto;
max-width: 62.5rem;
padding-left: 15px;
padding-right: 15px;
margin: 0 auto;
}


body {
padding-top: 20px;
padding-bottom: 20px;
background: #fff;
color: #444;
font-weight: normal;
font-style: normal;
line-height: 1.5;
padding-top: 20px;
padding-bottom: 20px;
background: #fff;
color: #444;
font-weight: normal;
font-style: normal;
line-height: 1.5;
}


footer {
margin-top: 60px;
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
margin-top: 60px;
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}


.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}


.list-view {
list-style: none;
margin: 0;
padding: 0;
overflow-y: scroll;
height: 500px;
border: 1px solid hsl(0, 0%, 80%);
}


.list-view-header,
.list-view-item {
padding: 1rem 1.5rem;
}


.list-view-header {
border-bottom: 1px solid hsl(0, 0%, 80%);
background-color: hsl(0, 0, 87%);
transition: background 300ms;
}


.list-view-header.is-stuck {
list-style: none;
}

/* Responsive: Portrait tablets and up */

.list-view-header.is-stuck:hover {
background: hsl(0, 0%, 80%);
}


.list-view-item {
border-bottom: 1px solid hsl(0, 0%, 87%);
background-color: hsl(0, 0, 100%);
}


.list-view-item:last-child {
border-bottom: none;
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
header,
section,
footer {
padding-left: 0;
padding-right: 0;
}
/* Space out the masthead */

header {
margin-bottom: 30px;
}

header,
section,
footer {
padding-left: 0;
padding-right: 0;
}


/* Space out the masthead */
header {
margin-bottom: 30px;
}

}
7 changes: 3 additions & 4 deletions src/scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function StickyHeaders(el, options) {
this.headers = Array.prototype.map.call(el.querySelectorAll(this.options.headerSelector), (function(header, i) {
var clientRect = header.getBoundingClientRect();
var clone = header.cloneNode(true);
clone.classList.add('is-stuck');
clone.classList.add('stickies-header', 'is-stuck');
// explicitly define the height for the clone, just in case it was applied on the original element
// via a selector which is no longer affecting the clone
//
Expand All @@ -57,16 +57,15 @@ function StickyHeaders(el, options) {

StickyHeaders.prototype._createHeaderContainer = function() {
var header = document.createElement('div');
header.className = 'list-header-sticky';
header.className = 'stickies-container';

var headerWrap = document.createElement('div');
headerWrap.className = 'list-header-sticky-wrap';
headerWrap.className = 'stickies-container-inner';
headerWrap.style.right = SCROLL_WIDTH + 'px';
headerWrap.style.height = this.headerContainerHeight + 'px';
header.appendChild(headerWrap);

var headerContainer = this.headerContainer = document.createElement('div');
headerContainer.className = 'list-header-sticky-container';
headerWrap.appendChild(headerContainer);

header.addEventListener('click', this.onHeaderActivate.bind(this));
Expand Down
Loading

0 comments on commit 9961095

Please sign in to comment.