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

2
css/index.scss
Unescape View File

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

10
css/rounds.scss
Unescape View File

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

9
css/sort.scss
Unescape View File

@ -25,5 +25,14 @@
}
.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; }
.visualization {
height: 700px;
margin: 20px auto;
margin: 10px auto;
position: relative;
text-align: center;
width: 1100px; }
.events {
background: rgba(250, 200, 200, 0.1);
bottom: 0;
font-size: 0;
left: 0;
@ -20,36 +19,35 @@ body {
width: 200px; }
.event-item {
background: #777;
border-color: #fff;
border-radius: 0 16px 16px 0;
border-style: solid;
border-width: 1px 0;
cursor: pointer;
display: inline-block;
filter: grayscale(100%);
height: 24px;
margin-bottom: 4px;
opacity: 0.2;
height: 38px;
margin: 1px;
overflow: hidden;
padding: 4px;
position: relative;
vertical-align: baseline;
width: 50px; }
.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; }
width: 48px; }
.event-year {
background: #fff;
border: 1px solid #d5d5d5;
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 {
background: rgba(10, 240, 120, 0.1);
left: 0;
@ -108,6 +106,17 @@ body {
.sort-item.active {
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 {
background: rgba(240, 120, 10, 0.1);
bottom: 0;
@ -131,13 +140,13 @@ body {
.round-item:hover {
background: yellow; }
.round-hide {
.round-text {
display: inline-block; }
.round-tiny {
display: inline-block;
font-size: 9px;
margin-left: 20px;
text-align: right;
text-transform: uppercase;
width: 30px; }
.round-text {
display: inline-block; }

2
index.html
Unescape View File

@ -13,7 +13,7 @@
<div class="visualization">
<div class="tourney">
<!-- <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-year">2002</div>
</div>

38
js/bundle.js
Unescape View File

@ -570,19 +570,19 @@
EVENT: {
ITEM: 'event-item',
YEAR: 'event-year',
FLAG: 'event-flag',
LOCATION: 'event-location'
FLAG: 'event-flag'
},
SORT: {
ITEM: 'sort-item',
TEXT: 'sort-text'
TEXT: 'sort-text',
TINY: 'sort-tiny'
},
ROUND: {
ITEM: 'round-item',
HIDE: 'round-hide',
TEXT: 'round-text'
TEXT: 'round-text',
TINY: 'round-tiny'
}
},
@ -643,12 +643,12 @@
roundsItems.forEach(function (item) {
var type = item.getAttribute(UI.DATA.ROUND);
var hide = item.querySelector('.' + UI.CLASSNAMES.ROUND.HIDE);
hide.innerHTML = UI.I18N.SHOW;
var tiny = item.querySelector('.' + UI.CLASSNAMES.ROUND.TINY);
tiny.innerHTML = UI.I18N.SHOW;
if (roundsToShow.indexOf(type) > -1) {
item.className += ' active';
hide.innerHTML = UI.I18N.HIDE;
tiny.innerHTML = UI.I18N.HIDE;
}
});
@ -684,7 +684,7 @@
eventsList.forEach(function (evt) {
var item = 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.addEventListener('click', onClick);
@ -694,18 +694,17 @@
year.className = UI.CLASSNAMES.EVENT.YEAR;
year.innerHTML = evt.year;
location.className = UI.CLASSNAMES.EVENT.LOCATION;
location.innerHTML = evt.location;
flag.className = UI.CLASSNAMES.EVENT.FLAG + ' flag-icon flag-icon-' + evt.icon;
item.appendChild(year);
// item.appendChild(location);
item.appendChild(flag);
eventsDiv.appendChild(item);
});
},
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');
@ -716,6 +715,7 @@
sortList.forEach(function (sort) {
var item = document.createElement('div');
var text = document.createElement('div');
var tiny = document.createElement('div');
item.className = UI.CLASSNAMES.SORT.ITEM;
item.addEventListener('click', onClick);
@ -725,7 +725,11 @@
text.className = UI.CLASSNAMES.SORT.TEXT;
text.innerHTML = sort.text;
tiny.className = UI.CLASSNAMES.SORT.TINY;
tiny.innerHTML = 'sort';
item.appendChild(text);
item.appendChild(tiny);
sortDiv.appendChild(item);
});
},
@ -746,16 +750,16 @@
item.setAttribute(UI.DATA.ROUND, round.value);
item.setAttribute(UI.DATA.ROOT, true);
var hide = document.createElement('div');
hide.className = UI.CLASSNAMES.ROUND.HIDE;
hide.innerHTML = 'hide';
var tiny = document.createElement('div');
tiny.className = UI.CLASSNAMES.ROUND.TINY;
tiny.innerHTML = 'hide';
var text = document.createElement('div');
text.className = UI.CLASSNAMES.ROUND.TEXT;
text.innerHTML = round.text;
item.appendChild(text);
item.appendChild(hide);
item.appendChild(tiny);
roundsDiv.appendChild(item);
});
},

38
js/ui.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save