ben.burlingham
/
d3-worldcup
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Events pane UI work.

Browse Source
master
Ben Burlingham 9 years ago
parent b6ccc65d66
commit cc87428e44
8 changed files with 128 additions and 108 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      css/events.scss
  2. 2
      css/index.scss
  3. 10
      css/rounds.scss
  4. 9
      css/sort.scss
  5. 65
      css/style.css
  6. 2
      index.html
  7. 38
      js/bundle.js
  8. 38
      js/ui.js

72
css/events.scss
Unescape View File

@ -1,5 +1,9 @@
$eventItemP: 4px;
$eventItemM: 1px;
$eventItemH: 30px;
$eventItemW: 40px;
.events { .events {
background: rgba(250, 200, 200, 0.1);
bottom: 0; bottom: 0;
font-size: 0; font-size: 0;
left: 0; left: 0;
@ -8,53 +12,43 @@
} }
.event-item { .event-item {
background: #777;
border-color: #fff;
border-radius: 0 16px 16px 0;
border-style: solid;
border-width: 1px 0;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
filter: grayscale(100%); // filter: grayscale(100%);
height: 24px; height: $eventItemH + 2 * $eventItemP;
margin-bottom: 4px; // opacity: 0.2;
opacity: 0.2; margin: $eventItemM;
padding: 4px; overflow: hidden;
padding: $eventItemP;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
width: 50px; width: $eventItemW + 2 * $eventItemP;
} }
.event-item.active, .event-year {
.event-item.active:hover { background: #fff;
background: #fdfdfd; border: 1px solid #d5d5d5;
border-color: #aaa; font-size: 13px;
filter: grayscale(0%); height: 30px;
opacity: 1; left: $eventItemP;
line-height: 30px;
position: absolute;
top: $eventItemP;
transition: top 0.1s linear;
width: $eventItemW;
z-index: 1;
} }
.event-item:hover { .event-flag {
filter: grayscale(0%); font-size: $eventItemH;
opacity: 0.8; z-index: 0;
} }
// .event-flag { .event-item:hover {
// font-size: 0; // filter: grayscale(0%);
// left: 4px; // opacity: 0.8;
// position: absolute;
// top: 4px;
// }
//
// .event-flag .flag-icon {
// font-size: 24px;
// }
// .event-location {
// font-size: 10px;
// line-height: 10px;
// }
.event-year { .event-year {
font-size: 13px; top: -$eventItemH;
line-height: 14px; }
} }

2
css/index.scss
Unescape View File

@ -1,6 +1,6 @@
.visualization { .visualization {
height: 700px; height: 700px;
margin: 20px auto; margin: 10px auto;
position: relative; position: relative;
text-align: center; text-align: center;
width: 1100px; width: 1100px;

10
css/rounds.scss
Unescape View File

@ -25,7 +25,11 @@
background: yellow; background: yellow;
} }
.round-hide { .round-text {
display: inline-block;
}
.round-tiny {
display: inline-block; display: inline-block;
font-size: 9px; font-size: 9px;
margin-left: 20px; margin-left: 20px;
@ -33,7 +37,3 @@
text-transform: uppercase; text-transform: uppercase;
width: 30px; width: 30px;
} }
.round-text {
display: inline-block;
}

9
css/sort.scss
Unescape View File

@ -25,5 +25,14 @@
} }
.sort-text { .sort-text {
display: inline-block;
}
.sort-tiny {
display: inline-block;
font-size: 9px;
margin-left: 20px;
text-align: right;
text-transform: uppercase;
width: 30px;
} }

65
css/style.css
Unescape View File

@ -7,12 +7,11 @@ body {
font-family: sans-serif; } font-family: sans-serif; }
.visualization { .visualization {
height: 700px; height: 700px;
margin: 20px auto; margin: 10px auto;
position: relative; position: relative;
text-align: center; text-align: center;
width: 1100px; } width: 1100px; }
.events { .events {
background: rgba(250, 200, 200, 0.1);
bottom: 0; bottom: 0;
font-size: 0; font-size: 0;
left: 0; left: 0;
@ -20,36 +19,35 @@ body {
width: 200px; } width: 200px; }
.event-item { .event-item {
background: #777;
border-color: #fff;
border-radius: 0 16px 16px 0;
border-style: solid;
border-width: 1px 0;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
filter: grayscale(100%); height: 38px;
height: 24px; margin: 1px;
margin-bottom: 4px; overflow: hidden;
opacity: 0.2;
padding: 4px; padding: 4px;
position: relative; position: relative;
vertical-align: baseline; vertical-align: baseline;
width: 50px; } width: 48px; }
.event-item.active,
.event-item.active:hover {
background: #fdfdfd;
border-color: #aaa;
filter: grayscale(0%);
opacity: 1; }
.event-item:hover {
filter: grayscale(0%);
opacity: 0.8; }
.event-year { .event-year {
background: #fff;
border: 1px solid #d5d5d5;
font-size: 13px; font-size: 13px;
line-height: 14px; } height: 30px;
left: 4px;
line-height: 30px;
position: absolute;
top: 4px;
transition: top 0.1s linear;
width: 40px;
z-index: 1; }
.event-flag {
font-size: 30px;
z-index: 0; }
.event-item:hover .event-year {
top: -30px; }
.tourney { .tourney {
background: rgba(10, 240, 120, 0.1); background: rgba(10, 240, 120, 0.1);
left: 0; left: 0;
@ -108,6 +106,17 @@ body {
.sort-item.active { .sort-item.active {
background: red; } background: red; }
.sort-text {
display: inline-block; }
.sort-tiny {
display: inline-block;
font-size: 9px;
margin-left: 20px;
text-align: right;
text-transform: uppercase;
width: 30px; }
.rounds { .rounds {
background: rgba(240, 120, 10, 0.1); background: rgba(240, 120, 10, 0.1);
bottom: 0; bottom: 0;
@ -131,13 +140,13 @@ body {
.round-item:hover { .round-item:hover {
background: yellow; } background: yellow; }
.round-hide { .round-text {
display: inline-block; }
.round-tiny {
display: inline-block; display: inline-block;
font-size: 9px; font-size: 9px;
margin-left: 20px; margin-left: 20px;
text-align: right; text-align: right;
text-transform: uppercase; text-transform: uppercase;
width: 30px; } width: 30px; }
.round-text {
display: inline-block; }

2
index.html
Unescape View File

@ -13,7 +13,7 @@
<div class="visualization"> <div class="visualization">
<div class="tourney"> <div class="tourney">
<!-- <div class="tourney-flag flag-icon flag-icon-jp"></div> --> <!-- <div class="tourney-flag flag-icon flag-icon-jp"></div> -->
<img src="res/2002.jpg" alt="" style="width: 200px;" /> <a href="https://en.wikipedia.org/wiki/2002_FIFA_World_Cup" target='blank'><img src="res/2002.jpg" alt="" style="width: 200px;" /></a>
<div class="tourney-country">Japan / South Korea</div> <div class="tourney-country">Japan / South Korea</div>
<div class="tourney-year">2002</div> <div class="tourney-year">2002</div>
</div> </div>

38
js/bundle.js
Unescape View File

@ -570,19 +570,19 @@
EVENT: { EVENT: {
ITEM: 'event-item', ITEM: 'event-item',
YEAR: 'event-year', YEAR: 'event-year',
FLAG: 'event-flag', FLAG: 'event-flag'
LOCATION: 'event-location'
}, },
SORT: { SORT: {
ITEM: 'sort-item', ITEM: 'sort-item',
TEXT: 'sort-text' TEXT: 'sort-text',
TINY: 'sort-tiny'
}, },
ROUND: { ROUND: {
ITEM: 'round-item', ITEM: 'round-item',
HIDE: 'round-hide', TEXT: 'round-text',
TEXT: 'round-text' TINY: 'round-tiny'
} }
}, },
@ -643,12 +643,12 @@
roundsItems.forEach(function (item) { roundsItems.forEach(function (item) {
var type = item.getAttribute(UI.DATA.ROUND); var type = item.getAttribute(UI.DATA.ROUND);
var hide = item.querySelector('.' + UI.CLASSNAMES.ROUND.HIDE); var tiny = item.querySelector('.' + UI.CLASSNAMES.ROUND.TINY);
hide.innerHTML = UI.I18N.SHOW; tiny.innerHTML = UI.I18N.SHOW;
if (roundsToShow.indexOf(type) > -1) { if (roundsToShow.indexOf(type) > -1) {
item.className += ' active'; item.className += ' active';
hide.innerHTML = UI.I18N.HIDE; tiny.innerHTML = UI.I18N.HIDE;
} }
}); });
@ -684,7 +684,7 @@
eventsList.forEach(function (evt) { eventsList.forEach(function (evt) {
var item = document.createElement('div'); var item = document.createElement('div');
var year = document.createElement('div'); var year = document.createElement('div');
var location = document.createElement('div'); var flag = document.createElement('div');
item.className = UI.CLASSNAMES.EVENT.ITEM; item.className = UI.CLASSNAMES.EVENT.ITEM;
item.addEventListener('click', onClick); item.addEventListener('click', onClick);
@ -694,18 +694,17 @@
year.className = UI.CLASSNAMES.EVENT.YEAR; year.className = UI.CLASSNAMES.EVENT.YEAR;
year.innerHTML = evt.year; year.innerHTML = evt.year;
location.className = UI.CLASSNAMES.EVENT.LOCATION; flag.className = UI.CLASSNAMES.EVENT.FLAG + ' flag-icon flag-icon-' + evt.icon;
location.innerHTML = evt.location;
item.appendChild(year); item.appendChild(year);
// item.appendChild(location); item.appendChild(flag);
eventsDiv.appendChild(item); eventsDiv.appendChild(item);
}); });
}, },
buildSortPane: function buildSortPane(onClick) { buildSortPane: function buildSortPane(onClick) {
var sortList = [{ text: 'Order by continent', value: null }, { text: 'Order by goals scored', value: UI.SORT_TYPES.GOALS }, { text: 'Order by country name', value: UI.SORT_TYPES.COUNTRY }, { text: 'Order by country population', value: UI.SORT_TYPES.POPULATION }]; var sortList = [{ text: 'Continent', value: null }, { text: 'Goals Scored', value: UI.SORT_TYPES.GOALS }, { text: 'Country Name', value: UI.SORT_TYPES.COUNTRY }];
var sortDiv = document.querySelector('.sort'); var sortDiv = document.querySelector('.sort');
@ -716,6 +715,7 @@
sortList.forEach(function (sort) { sortList.forEach(function (sort) {
var item = document.createElement('div'); var item = document.createElement('div');
var text = document.createElement('div'); var text = document.createElement('div');
var tiny = document.createElement('div');
item.className = UI.CLASSNAMES.SORT.ITEM; item.className = UI.CLASSNAMES.SORT.ITEM;
item.addEventListener('click', onClick); item.addEventListener('click', onClick);
@ -725,7 +725,11 @@
text.className = UI.CLASSNAMES.SORT.TEXT; text.className = UI.CLASSNAMES.SORT.TEXT;
text.innerHTML = sort.text; text.innerHTML = sort.text;
tiny.className = UI.CLASSNAMES.SORT.TINY;
tiny.innerHTML = 'sort';
item.appendChild(text); item.appendChild(text);
item.appendChild(tiny);
sortDiv.appendChild(item); sortDiv.appendChild(item);
}); });
}, },
@ -746,16 +750,16 @@
item.setAttribute(UI.DATA.ROUND, round.value); item.setAttribute(UI.DATA.ROUND, round.value);
item.setAttribute(UI.DATA.ROOT, true); item.setAttribute(UI.DATA.ROOT, true);
var hide = document.createElement('div'); var tiny = document.createElement('div');
hide.className = UI.CLASSNAMES.ROUND.HIDE; tiny.className = UI.CLASSNAMES.ROUND.TINY;
hide.innerHTML = 'hide'; tiny.innerHTML = 'hide';
var text = document.createElement('div'); var text = document.createElement('div');
text.className = UI.CLASSNAMES.ROUND.TEXT; text.className = UI.CLASSNAMES.ROUND.TEXT;
text.innerHTML = round.text; text.innerHTML = round.text;
item.appendChild(text); item.appendChild(text);
item.appendChild(hide); item.appendChild(tiny);
roundsDiv.appendChild(item); roundsDiv.appendChild(item);
}); });
}, },

38
js/ui.js
Unescape View File

@ -4,18 +4,18 @@ const UI = {
ITEM: 'event-item', ITEM: 'event-item',
YEAR: 'event-year', YEAR: 'event-year',
FLAG: 'event-flag', FLAG: 'event-flag',
LOCATION: 'event-location',
}, },
SORT: { SORT: {
ITEM: 'sort-item', ITEM: 'sort-item',
TEXT: 'sort-text', TEXT: 'sort-text',
TINY: 'sort-tiny',
}, },
ROUND: { ROUND: {
ITEM: 'round-item', ITEM: 'round-item',
HIDE: 'round-hide',
TEXT: 'round-text', TEXT: 'round-text',
TINY: 'round-tiny',
}, },
}, },
@ -76,12 +76,12 @@ const UI = {
roundsItems.forEach(item => { roundsItems.forEach(item => {
const type = item.getAttribute(UI.DATA.ROUND); const type = item.getAttribute(UI.DATA.ROUND);
const hide = item.querySelector(`.${UI.CLASSNAMES.ROUND.HIDE}`); const tiny = item.querySelector(`.${UI.CLASSNAMES.ROUND.TINY}`);
hide.innerHTML = UI.I18N.SHOW; tiny.innerHTML = UI.I18N.SHOW;
if (roundsToShow.indexOf(type) > -1) { if (roundsToShow.indexOf(type) > -1) {
item.className += ' active'; item.className += ' active';
hide.innerHTML = UI.I18N.HIDE; tiny.innerHTML = UI.I18N.HIDE;
} }
}); });
@ -139,7 +139,7 @@ const UI = {
eventsList.forEach((evt) => { eventsList.forEach((evt) => {
const item = document.createElement('div'); const item = document.createElement('div');
const year = document.createElement('div'); const year = document.createElement('div');
const location = document.createElement('div'); const flag = document.createElement('div');
item.className = UI.CLASSNAMES.EVENT.ITEM; item.className = UI.CLASSNAMES.EVENT.ITEM;
item.addEventListener('click', onClick); item.addEventListener('click', onClick);
@ -149,11 +149,10 @@ const UI = {
year.className = UI.CLASSNAMES.EVENT.YEAR; year.className = UI.CLASSNAMES.EVENT.YEAR;
year.innerHTML = evt.year; year.innerHTML = evt.year;
location.className = UI.CLASSNAMES.EVENT.LOCATION; flag.className = `${UI.CLASSNAMES.EVENT.FLAG} flag-icon flag-icon-${evt.icon}`;
location.innerHTML = evt.location;
item.appendChild(year); item.appendChild(year);
// item.appendChild(location); item.appendChild(flag);
eventsDiv.appendChild(item); eventsDiv.appendChild(item);
}); });
@ -161,10 +160,10 @@ const UI = {
buildSortPane: (onClick) => { buildSortPane: (onClick) => {
const sortList = [ const sortList = [
{ text: 'Order by continent', value: null }, { text: 'Continent', value: null },
{ text: 'Order by goals scored', value: UI.SORT_TYPES.GOALS }, { text: 'Goals Scored', value: UI.SORT_TYPES.GOALS },
{ text: 'Order by country name', value: UI.SORT_TYPES.COUNTRY }, { text: 'Country Name', value: UI.SORT_TYPES.COUNTRY },
{ text: 'Order by country population', value: UI.SORT_TYPES.POPULATION }, // { text: 'Order by country population', value: UI.SORT_TYPES.POPULATION },
]; ];
const sortDiv = document.querySelector('.sort'); const sortDiv = document.querySelector('.sort');
@ -176,6 +175,7 @@ const UI = {
sortList.forEach(sort => { sortList.forEach(sort => {
const item = document.createElement('div'); const item = document.createElement('div');
const text = document.createElement('div'); const text = document.createElement('div');
const tiny = document.createElement('div');
item.className = UI.CLASSNAMES.SORT.ITEM; item.className = UI.CLASSNAMES.SORT.ITEM;
item.addEventListener('click', onClick); item.addEventListener('click', onClick);
@ -185,7 +185,11 @@ const UI = {
text.className = UI.CLASSNAMES.SORT.TEXT; text.className = UI.CLASSNAMES.SORT.TEXT;
text.innerHTML = sort.text; text.innerHTML = sort.text;
tiny.className = UI.CLASSNAMES.SORT.TINY;
tiny.innerHTML = 'sort';
item.appendChild(text); item.appendChild(text);
item.appendChild(tiny);
sortDiv.appendChild(item); sortDiv.appendChild(item);
}); });
}, },
@ -213,16 +217,16 @@ const UI = {
item.setAttribute(UI.DATA.ROUND, round.value); item.setAttribute(UI.DATA.ROUND, round.value);
item.setAttribute(UI.DATA.ROOT, true); item.setAttribute(UI.DATA.ROOT, true);
const hide = document.createElement('div'); const tiny = document.createElement('div');
hide.className = UI.CLASSNAMES.ROUND.HIDE; tiny.className = UI.CLASSNAMES.ROUND.TINY;
hide.innerHTML = 'hide'; tiny.innerHTML = 'hide';
const text = document.createElement('div'); const text = document.createElement('div');
text.className = UI.CLASSNAMES.ROUND.TEXT; text.className = UI.CLASSNAMES.ROUND.TEXT;
text.innerHTML = round.text; text.innerHTML = round.text;
item.appendChild(text); item.appendChild(text);
item.appendChild(hide); item.appendChild(tiny);
roundsDiv.appendChild(item); roundsDiv.appendChild(item);
}); });
}, },

Write Preview
Loading…
Cancel
Save