diff --git a/css/diagram.scss b/css/diagram.scss index 45d5ea1..269c89f 100644 --- a/css/diagram.scss +++ b/css/diagram.scss @@ -1,5 +1,4 @@ .diagram { - background: rgba(150, 100, 200, 0.1); font-size: 10px; margin: 0 auto; position: relative; diff --git a/css/events.scss b/css/events.scss index 5f95367..beb57a9 100644 --- a/css/events.scss +++ b/css/events.scss @@ -21,6 +21,7 @@ $eventItemW: 40px; overflow: hidden; padding: $eventItemP; position: relative; + text-align: center; vertical-align: baseline; width: $eventItemW + 2 * $eventItemP; } @@ -32,9 +33,10 @@ $eventItemW: 40px; height: 30px; left: $eventItemP; line-height: 30px; + opacity: 1; position: absolute; top: $eventItemP; - transition: top 0.1s linear; + transition: opacity 0.15s ease-in; width: $eventItemW; z-index: 1; } @@ -49,6 +51,7 @@ $eventItemW: 40px; // opacity: 0.8; .event-year { - top: -$eventItemH; + // top: -$eventItemH; + opacity: 0; } } diff --git a/css/index.scss b/css/index.scss index ab78988..2965967 100644 --- a/css/index.scss +++ b/css/index.scss @@ -2,6 +2,5 @@ height: 700px; margin: 10px auto; position: relative; - text-align: center; width: 1100px; } diff --git a/css/rounds.scss b/css/rounds.scss index 1876d52..44fb0cb 100644 --- a/css/rounds.scss +++ b/css/rounds.scss @@ -1,20 +1,24 @@ +$roundH: 40px; +$roundW: 200px; +$tinyW: 50px; +$textW: 120px; +$iconM: 5px; +$iconW: $roundW - $tinyW - $textW - (2 * $iconM) - 2; + .rounds { - background: rgba(240, 120, 10, 0.1); bottom: 0; - color: #000; position: absolute; right: 0; - text-align: right; - width: 200px; + width: $roundW; z-index: 1; } .round-item { + border: 1px solid #d5d5d5; cursor: pointer; - font-size: 13px; - line-height: 34px; + font-size: 0; + line-height: $roundH; opacity: 0.2; - padding: 0 10px; } .round-item.active { @@ -27,13 +31,24 @@ .round-text { display: inline-block; + font-size: 13px; + width: $textW; } .round-tiny { display: inline-block; font-size: 9px; - margin-left: 20px; - text-align: right; + line-height: $roundH; + text-align: center; text-transform: uppercase; - width: 30px; + vertical-align: top; + width: $tinyW; +} + +.round-icon { + display: inline-block; + height: $iconW; + margin: ($roundH - $iconW) / 2 $iconM; + vertical-align: top; + width: $iconW; } diff --git a/css/sort.scss b/css/sort.scss index a36818e..bac19f8 100644 --- a/css/sort.scss +++ b/css/sort.scss @@ -1,19 +1,25 @@ +$sortH: 40px; +$sortW: 200px; +$tinyW: 50px; +$textW: 120px; +$iconM: 5px; +$iconW: $sortW - $tinyW - $textW - (2 * $iconM) - 2; + .sort { - background: rgba(10, 120, 240, 0.1); position: absolute; right: 0; - text-align: right; top: 0; - width: 200px; + width: $sortW; z-index: 1; } .sort-item { - border: 1px solid brickred; + border: 1px solid #d5d5d5; cursor: pointer; - font-size: 13px; - line-height: 34px; - padding: 0 10px; + font-size: 0; + line-height: $sortH; + margin-bottom: 5px; + width: $sortW; } .sort-item:hover { @@ -26,13 +32,27 @@ .sort-text { display: inline-block; + font-size: 13px; + padding-left: 10px; + text-align: left; + vertical-align: top; + width: $textW; } .sort-tiny { display: inline-block; font-size: 9px; - margin-left: 20px; - text-align: right; + line-height: $sortH; + text-align: center; text-transform: uppercase; - width: 30px; + vertical-align: top; + width: $tinyW; +} + +.sort-icon { + display: inline-block; + height: $iconW; + margin: ($sortH - $iconW) / 2 $iconM; + vertical-align: top; + width: $iconW; } diff --git a/css/style.css b/css/style.css index fe72869..62a015e 100644 --- a/css/style.css +++ b/css/style.css @@ -9,7 +9,6 @@ body { height: 700px; margin: 10px auto; position: relative; - text-align: center; width: 1100px; } .events { bottom: 0; @@ -26,6 +25,7 @@ body { overflow: hidden; padding: 4px; position: relative; + text-align: center; vertical-align: baseline; width: 48px; } @@ -36,9 +36,10 @@ body { height: 30px; left: 4px; line-height: 30px; + opacity: 1; position: absolute; top: 4px; - transition: top 0.1s linear; + transition: opacity 0.15s ease-in; width: 40px; z-index: 1; } @@ -47,26 +48,29 @@ body { z-index: 0; } .event-item:hover .event-year { - top: -30px; } + opacity: 0; } .tourney { - background: rgba(10, 240, 120, 0.1); left: 0; position: absolute; top: 0; } -.tourney-flag { - border: 1px solid #ddd; - font-size: 150px; } +.tourney-link { + display: block; + margin-bottom: 20px; } + +.tourney-image { + width: 200px; } .tourney-country { + color: #777; font-size: 20px; - font-style: italic; } + line-height: 40px; } .tourney-year { + color: #777; font-size: 40px; - font-style: italic; } + line-height: 40px; } .diagram { - background: rgba(150, 100, 200, 0.1); font-size: 10px; margin: 0 auto; position: relative; @@ -86,20 +90,19 @@ body { fill-opacity: 1; stroke-opacity: 1; } .sort { - background: rgba(10, 120, 240, 0.1); position: absolute; right: 0; - text-align: right; top: 0; width: 200px; z-index: 1; } .sort-item { - border: 1px solid brickred; + border: 1px solid #d5d5d5; cursor: pointer; - font-size: 13px; - line-height: 34px; - padding: 0 10px; } + font-size: 0; + line-height: 40px; + margin-bottom: 5px; + width: 200px; } .sort-item:hover { background: yellow; } @@ -108,31 +111,41 @@ body { background: red; } .sort-text { - display: inline-block; } + display: inline-block; + font-size: 13px; + padding-left: 10px; + text-align: left; + vertical-align: top; + width: 120px; } .sort-tiny { display: inline-block; font-size: 9px; - margin-left: 20px; - text-align: right; + line-height: 40px; + text-align: center; text-transform: uppercase; - width: 30px; } + vertical-align: top; + width: 50px; } + +.sort-icon { + display: inline-block; + height: 18px; + margin: 11px 5px; + vertical-align: top; + width: 18px; } .rounds { - background: rgba(240, 120, 10, 0.1); bottom: 0; - color: #000; position: absolute; right: 0; - text-align: right; width: 200px; z-index: 1; } .round-item { + border: 1px solid #d5d5d5; cursor: pointer; - font-size: 13px; - line-height: 34px; - opacity: 0.2; - padding: 0 10px; } + font-size: 0; + line-height: 40px; + opacity: 0.2; } .round-item.active { opacity: 1; } @@ -141,12 +154,22 @@ body { background: yellow; } .round-text { - display: inline-block; } + display: inline-block; + font-size: 13px; + width: 120px; } .round-tiny { display: inline-block; font-size: 9px; - margin-left: 20px; - text-align: right; + line-height: 40px; + text-align: center; text-transform: uppercase; - width: 30px; } + vertical-align: top; + width: 50px; } + +.round-icon { + display: inline-block; + height: 18px; + margin: 11px 5px; + vertical-align: top; + width: 18px; } diff --git a/css/tourney.scss b/css/tourney.scss index 6347a67..9fa3018 100644 --- a/css/tourney.scss +++ b/css/tourney.scss @@ -1,21 +1,26 @@ .tourney { - background: rgba(10, 240, 120, 0.1); left: 0; position: absolute; top: 0; } -.tourney-flag { - border: 1px solid #ddd; - font-size: 150px; +.tourney-link { + display: block; + margin-bottom: 20px; +} + +.tourney-image { + width: 200px; } .tourney-country { + color: #777; font-size: 20px; - font-style: italic; + line-height: 40px; } .tourney-year { + color: #777; font-size: 40px; - font-style: italic; + line-height: 40px; } diff --git a/index.html b/index.html index d13a34b..a0dee61 100644 --- a/index.html +++ b/index.html @@ -11,12 +11,7 @@
-
- - -
Japan / South Korea
-
2002
-
+
@@ -48,7 +43,13 @@ update ribbon hover // STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME - better layout: embiggen current event flag + + color scheme pane + toggle sort icon + toggle round icon + image edit posters + fix SVG icons to be smaller and inline + better colors remove dependencies from Diagram diff --git a/js/bundle.js b/js/bundle.js index 68bc08e..c4b6e9c 100644 --- a/js/bundle.js +++ b/js/bundle.js @@ -65,12 +65,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } __webpack_require__(5); - __webpack_require__(12); + __webpack_require__(6); __webpack_require__(7); - __webpack_require__(13); __webpack_require__(8); __webpack_require__(9); __webpack_require__(10); + __webpack_require__(11); var main = { changeEvent: function changeEvent(e) { @@ -119,6 +119,7 @@ generateUI: function generateUI() { var state = main.getState(); + _ui2.default.buildTourneyPane(); _ui2.default.buildEventsPane(main.changeEvent); _ui2.default.buildSortPane(main.changeSort); _ui2.default.buildRoundsPane(main.changeRound); @@ -131,6 +132,7 @@ _diagram2.default.clear(); _diagram2.default.build(main.json, state.eventKey, state.sort, _ui2.default.SORT_TYPES, matrix); + _ui2.default.updateTourneyPane(state.eventKey); _ui2.default.updateEventsPane(state.eventKey); _ui2.default.updateSortPane(state.sort); _ui2.default.updateRoundsPane(state.rounds.split(','), main.json.rounds); @@ -567,6 +569,12 @@ }); var UI = { CLASSNAMES: { + TOURNEY: { + LINK: 'tourney-link', + IMAGE: 'tourney-image', + COUNTRY: 'tourney-country', + YEAR: 'tourney-year' + }, EVENT: { ITEM: 'event-item', YEAR: 'event-year', @@ -574,12 +582,14 @@ }, SORT: { + ICON: 'sort-icon', ITEM: 'sort-item', TEXT: 'sort-text', TINY: 'sort-tiny' }, ROUND: { + ICON: 'round-icon', ITEM: 'round-item', TEXT: 'round-text', TINY: 'round-tiny' @@ -629,6 +639,39 @@ }); }, + updateTourneyPane: function updateTourneyPane(eventKey) { + var tourneyList = { + '1930': "Uruguay", + '1934': "Italy", + '1938': "France", + '1954': "Switzerland", + '1958': "Sweden", + '1962': "Chile", + '1966': "England", + '1970': "Mexico", + '1974': "West Germany", + '1978': "Argentina", + '1982': "Spain", + '1986': "Mexico", + '1990': "Italy", + '1994': "USA", + '1998': "France", + '2002': "Japan / South Korea", + '2006': "Germany", + '2010': "Johannesburg", + '2014': "Brazil" + }; + + var ek = tourneyList[eventKey] === undefined ? null : eventKey; + + var tourneyPane = document.querySelector('.tourney'); + + tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.IMAGE).src = 'res/' + ek + '.jpg'; + tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.LINK).href = 'https://en.wikipedia.org/wiki/' + ek + '_FIFA_World_Cup'; + tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.COUNTRY).innerHTML = tourneyList[ek]; + tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.YEAR).innerHTML = ek; + }, + updateEventsPane: function updateEventsPane(eventKey) { var eventItems = document.querySelectorAll('.' + UI.CLASSNAMES.EVENT.ITEM); UI.clearActive(eventItems); @@ -672,8 +715,32 @@ }); }, + buildTourneyPane: function buildTourneyPane() { + var link = document.createElement('a'); + var img = document.createElement('img'); + var country = document.createElement('div'); + var year = document.createElement('year'); + + link.className = UI.CLASSNAMES.TOURNEY.LINK; + link.target = '_blank'; + + img.className = UI.CLASSNAMES.TOURNEY.IMAGE; + + country.className = UI.CLASSNAMES.TOURNEY.COUNTRY; + + year.className = UI.CLASSNAMES.TOURNEY.YEAR; + + var tourneyPane = document.querySelector('.tourney'); + + link.appendChild(img); + + tourneyPane.appendChild(link); + tourneyPane.appendChild(year); + tourneyPane.appendChild(country); + }, + buildEventsPane: function buildEventsPane(onClick) { - var eventsList = [{ year: 1930, location: "Uruguay", icon: "uy" }, { year: 1934, location: "Italy", icon: "it" }, { year: 1938, location: "France", icon: "fr" }, { year: 1954, location: "Switzerland", icon: "ch" }, { year: 1958, location: "Sweden", icon: "se" }, { year: 1962, location: "Chile", icon: "cl" }, { year: 1966, location: "England", icon: "gb" }, { year: 1970, location: "Mexico", icon: "mx" }, { year: 1974, location: "West Germany", icon: "de" }, { year: 1978, location: "Argentina", icon: "ar" }, { year: 1982, location: "Spain", icon: "es" }, { year: 1986, location: "Mexico", icon: "mx" }, { year: 1990, location: "Italy", icon: "it" }, { year: 1994, location: "USA", icon: "us" }, { year: 1998, location: "France", icon: "fr" }, { year: 2002, location: "Japan / South Korea", icon: "jp" }, { year: 2006, location: "Germany", icon: "de" }, { year: 2010, location: "Johannesburg", icon: "za" }, { year: 2014, location: "Brazil", icon: "br" }]; + var eventsList = [{ year: 1930, icon: "uy" }, { year: 1934, icon: "it" }, { year: 1938, icon: "fr" }, { year: 1954, icon: "ch" }, { year: 1958, icon: "se" }, { year: 1962, icon: "cl" }, { year: 1966, icon: "gb" }, { year: 1970, icon: "mx" }, { year: 1974, icon: "de" }, { year: 1978, icon: "ar" }, { year: 1982, icon: "es" }, { year: 1986, icon: "mx" }, { year: 1990, icon: "it" }, { year: 1994, icon: "us" }, { year: 1998, icon: "fr" }, { year: 2002, icon: "jp" }, { year: 2006, icon: "de" }, { year: 2010, icon: "za" }, { year: 2014, icon: "br" }]; var eventsDiv = document.querySelector('.events'); @@ -713,6 +780,7 @@ } sortList.forEach(function (sort) { + var icon = document.createElement('img'); var item = document.createElement('div'); var text = document.createElement('div'); var tiny = document.createElement('div'); @@ -728,8 +796,13 @@ tiny.className = UI.CLASSNAMES.SORT.TINY; tiny.innerHTML = 'sort'; + icon.className = UI.CLASSNAMES.SORT.ICON; + icon.src = 'res/sort.svg'; + + item.appendChild(icon); item.appendChild(text); item.appendChild(tiny); + sortDiv.appendChild(item); }); }, @@ -744,22 +817,29 @@ } roundsList.forEach(function (round) { + var icon = document.createElement('img'); var item = document.createElement('div'); + var text = document.createElement('div'); + var tiny = document.createElement('div'); + item.className = UI.CLASSNAMES.ROUND.ITEM; item.addEventListener('click', onClick); item.setAttribute(UI.DATA.ROUND, round.value); item.setAttribute(UI.DATA.ROOT, true); - 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; + icon.className = UI.CLASSNAMES.ROUND.ICON; + icon.src = 'res/check.svg'; + + item.appendChild(icon); item.appendChild(text); item.appendChild(tiny); + roundsDiv.appendChild(item); }); }, @@ -810,39 +890,37 @@ // removed by extract-text-webpack-plugin /***/ }, -/* 6 */, -/* 7 */ +/* 6 */ /***/ function(module, exports) { // removed by extract-text-webpack-plugin /***/ }, -/* 8 */ +/* 7 */ /***/ function(module, exports) { // removed by extract-text-webpack-plugin /***/ }, -/* 9 */ +/* 8 */ /***/ function(module, exports) { // removed by extract-text-webpack-plugin /***/ }, -/* 10 */ +/* 9 */ /***/ function(module, exports) { // removed by extract-text-webpack-plugin /***/ }, -/* 11 */, -/* 12 */ +/* 10 */ /***/ function(module, exports) { // removed by extract-text-webpack-plugin /***/ }, -/* 13 */ +/* 11 */ /***/ function(module, exports) { // removed by extract-text-webpack-plugin diff --git a/js/index.js b/js/index.js index 097a84f..d30e0fb 100644 --- a/js/index.js +++ b/js/index.js @@ -58,6 +58,7 @@ const main = { generateUI: () => { const state = main.getState(); + UI.buildTourneyPane(); UI.buildEventsPane(main.changeEvent); UI.buildSortPane(main.changeSort); UI.buildRoundsPane(main.changeRound); @@ -70,6 +71,7 @@ const main = { Diagram.clear(); Diagram.build(main.json, state.eventKey, state.sort, UI.SORT_TYPES, matrix); + UI.updateTourneyPane(state.eventKey); UI.updateEventsPane(state.eventKey); UI.updateSortPane(state.sort); UI.updateRoundsPane(state.rounds.split(','), main.json.rounds); diff --git a/js/ui.js b/js/ui.js index 72335a0..ec9b0d8 100644 --- a/js/ui.js +++ b/js/ui.js @@ -1,5 +1,11 @@ const UI = { CLASSNAMES: { + TOURNEY: { + LINK: 'tourney-link', + IMAGE: 'tourney-image', + COUNTRY: 'tourney-country', + YEAR: 'tourney-year', + }, EVENT: { ITEM: 'event-item', YEAR: 'event-year', @@ -7,12 +13,14 @@ const UI = { }, SORT: { + ICON: 'sort-icon', ITEM: 'sort-item', TEXT: 'sort-text', TINY: 'sort-tiny', }, ROUND: { + ICON: 'round-icon', ITEM: 'round-item', TEXT: 'round-text', TINY: 'round-tiny', @@ -62,6 +70,39 @@ const UI = { }); }, + updateTourneyPane: (eventKey) => { + const tourneyList = { + '1930': "Uruguay", + '1934': "Italy", + '1938': "France", + '1954': "Switzerland", + '1958': "Sweden", + '1962': "Chile", + '1966': "England", + '1970': "Mexico", + '1974': "West Germany", + '1978': "Argentina", + '1982': "Spain", + '1986': "Mexico", + '1990': "Italy", + '1994': "USA", + '1998': "France", + '2002': "Japan / South Korea", + '2006': "Germany", + '2010': "Johannesburg", + '2014': "Brazil", + }; + + const ek = (tourneyList[eventKey] === undefined ? null : eventKey); + + const tourneyPane = document.querySelector('.tourney'); + + tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.IMAGE}`).src = `res/${ek}.jpg`; + tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.LINK}`).href = `https://en.wikipedia.org/wiki/${ek}_FIFA_World_Cup`; + tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.COUNTRY}`).innerHTML = tourneyList[ek]; + tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.YEAR}`).innerHTML = ek; + }, + updateEventsPane: (eventKey) => { const eventItems = document.querySelectorAll(`.${UI.CLASSNAMES.EVENT.ITEM}`); UI.clearActive(eventItems); @@ -107,27 +148,51 @@ const UI = { }); }, + buildTourneyPane: () => { + const link = document.createElement('a'); + const img = document.createElement('img'); + const country = document.createElement('div'); + const year = document.createElement('year'); + + link.className = UI.CLASSNAMES.TOURNEY.LINK; + link.target = '_blank'; + + img.className = UI.CLASSNAMES.TOURNEY.IMAGE; + + country.className = UI.CLASSNAMES.TOURNEY.COUNTRY; + + year.className = UI.CLASSNAMES.TOURNEY.YEAR; + + const tourneyPane = document.querySelector('.tourney'); + + link.appendChild(img); + + tourneyPane.appendChild(link); + tourneyPane.appendChild(year); + tourneyPane.appendChild(country); + }, + buildEventsPane: (onClick) => { const eventsList = [ - { year: 1930, location: "Uruguay", icon: "uy" }, - { year: 1934, location: "Italy", icon: "it" }, - { year: 1938, location: "France", icon: "fr" }, - { year: 1954, location: "Switzerland", icon: "ch" }, - { year: 1958, location: "Sweden", icon: "se" }, - { year: 1962, location: "Chile", icon: "cl" }, - { year: 1966, location: "England", icon: "gb" }, - { year: 1970, location: "Mexico", icon: "mx" }, - { year: 1974, location: "West Germany", icon: "de" }, - { year: 1978, location: "Argentina", icon: "ar" }, - { year: 1982, location: "Spain", icon: "es" }, - { year: 1986, location: "Mexico", icon: "mx" }, - { year: 1990, location: "Italy", icon: "it" }, - { year: 1994, location: "USA", icon: "us" }, - { year: 1998, location: "France", icon: "fr" }, - { year: 2002, location: "Japan / South Korea", icon: "jp" }, - { year: 2006, location: "Germany", icon: "de" }, - { year: 2010, location: "Johannesburg", icon: "za" }, - { year: 2014, location: "Brazil", icon: "br" }, + { year: 1930, icon: "uy" }, + { year: 1934, icon: "it" }, + { year: 1938, icon: "fr" }, + { year: 1954, icon: "ch" }, + { year: 1958, icon: "se" }, + { year: 1962, icon: "cl" }, + { year: 1966, icon: "gb" }, + { year: 1970, icon: "mx" }, + { year: 1974, icon: "de" }, + { year: 1978, icon: "ar" }, + { year: 1982, icon: "es" }, + { year: 1986, icon: "mx" }, + { year: 1990, icon: "it" }, + { year: 1994, icon: "us" }, + { year: 1998, icon: "fr" }, + { year: 2002, icon: "jp" }, + { year: 2006, icon: "de" }, + { year: 2010, icon: "za" }, + { year: 2014, icon: "br" }, ]; const eventsDiv = document.querySelector('.events'); @@ -173,6 +238,7 @@ const UI = { } sortList.forEach(sort => { + const icon = document.createElement('img'); const item = document.createElement('div'); const text = document.createElement('div'); const tiny = document.createElement('div'); @@ -188,8 +254,13 @@ const UI = { tiny.className = UI.CLASSNAMES.SORT.TINY; tiny.innerHTML = 'sort'; + icon.className = UI.CLASSNAMES.SORT.ICON; + icon.src = 'res/sort.svg'; + + item.appendChild(icon); item.appendChild(text); item.appendChild(tiny); + sortDiv.appendChild(item); }); }, @@ -211,22 +282,29 @@ const UI = { } roundsList.forEach(round => { + const icon = document.createElement('img'); const item = document.createElement('div'); + const text = document.createElement('div'); + const tiny = document.createElement('div'); + item.className = UI.CLASSNAMES.ROUND.ITEM; item.addEventListener('click', onClick); item.setAttribute(UI.DATA.ROUND, round.value); item.setAttribute(UI.DATA.ROOT, true); - 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; + icon.className = UI.CLASSNAMES.ROUND.ICON; + icon.src = 'res/check.svg'; + + item.appendChild(icon); item.appendChild(text); item.appendChild(tiny); + roundsDiv.appendChild(item); }); }, diff --git a/res/check.svg b/res/check.svg new file mode 100644 index 0000000..aa258c9 --- /dev/null +++ b/res/check.svg @@ -0,0 +1,49 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/res/sort.svg b/res/sort.svg new file mode 100644 index 0000000..741bbbc --- /dev/null +++ b/res/sort.svg @@ -0,0 +1,57 @@ + + + +image/svg+xml \ No newline at end of file