diff --git a/package.json b/package.json index 4be5c0f..1753911 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "postcss-easy-import": "2.0.0", "postcss-nested": "1.0.0", "pug": "2.0.0-beta9", + "vue": "2.1.10", "walk": "2.3.9", "webpack": "2.2.0" } diff --git a/static-pages/overview.pug b/static-pages/overview.pug index cd913b3..672ef5b 100644 --- a/static-pages/overview.pug +++ b/static-pages/overview.pug @@ -1,12 +1,43 @@ extends ../templates/default-page.pug block vars + - var noLogo=true - var title='Technologies Overview' block content .headline-group .hero-headline | Technologies Overview - div.item-index - each items, letter in groupByFirstLetter(radar) - .item-index__letter= letter + .filter + .nav + .nav__item + a.badge.badge--big.badge--neutral(href='#') all + each items, ringName in groupByRing(radar) + .nav__item + a.badge.badge--big.badge--empty(href='#')= ringName + + div.letter-index + each items, letter in groupByFirstLetter(radar) + .letter-index__group + .letter-index__letter= letter + .letter-index__items + .item-list + .item-list__list + each item in items + a.item.item--no-leading-border.item--no-trailing-border(href=`/${item.quadrant}/${item.name}.html`) + .split.split--align-top + .split__left + .item__title + = item.attributes.title + if item.isNew + = ' ' + span.is-new new + if item.attributes.info + .item__info= item.attributes.info + .split__right + .nav + .nav__item + = translate(item.quadrant) + .nav__item + span(class=`badge badge--${item.attributes.ring}`) + = item.attributes.ring diff --git a/styles/base.css b/styles/base.css index 86e88b9..9cf6705 100644 --- a/styles/base.css +++ b/styles/base.css @@ -10,6 +10,7 @@ --color-orange: #FAA03D; --color-blue: #40A7D1; --color-marine: #688190; + --color-red: #F1235A; --color-brand: #F59134; } diff --git a/styles/components/badge.css b/styles/components/badge.css index f7f9414..791de49 100644 --- a/styles/components/badge.css +++ b/styles/components/badge.css @@ -1,6 +1,7 @@ .badge { color: var(--color-white); display: inline-block; + box-sizing: border-box; padding: 0 15px; text-transform: uppercase; border-radius: 13px; @@ -8,6 +9,8 @@ line-height: 25px; height: 25px; overflow: hidden; + text-decoration: none; + border: 1px solid var(--color-gray-normal); &--big { border-radius: 15px; @@ -17,17 +20,25 @@ padding: 0 20px; } + &--neutral { + background: var(--color-gray-normal); + border-color: var(--color-gray-normal); + } &--adopt { background: var(--color-green); + border-color: var(--color-green); } &--trial { background: var(--color-orange); + border-color: var(--color-orange); } &--assess { background: var(--color-blue); + border-color: var(--color-blue); } &--hold { background: var(--color-marine); + border-color: var(--color-marine); } } diff --git a/styles/components/filter.css b/styles/components/filter.css new file mode 100644 index 0000000..1c03e1f --- /dev/null +++ b/styles/components/filter.css @@ -0,0 +1,3 @@ +.filter { + margin-bottom: 40px; +} diff --git a/styles/components/is-new.css b/styles/components/is-new.css new file mode 100644 index 0000000..90ba1a2 --- /dev/null +++ b/styles/components/is-new.css @@ -0,0 +1,10 @@ +.is-new { + font-size: 9px; + background: var(--color-red); + display: inline-block; + padding: 3px 8px; + border-radius: 10px; + position: relative; + vertical-align: top; + margin-top: -2px; +} diff --git a/styles/components/item.css b/styles/components/item.css index 9bea5a3..c37c0a1 100644 --- a/styles/components/item.css +++ b/styles/components/item.css @@ -4,6 +4,7 @@ display: block; text-decoration: none; transition: background 200ms ease-out; + color: var(--color-gray-normal); &.is-active { background: var(--color-gray-dark-alt); @@ -23,6 +24,12 @@ } } + &--no-trailing-border { + &:last-child { + border-bottom: none; + } + } + &__title { font-size: 16px; color: var(--color-white); diff --git a/styles/components/letter-index.css b/styles/components/letter-index.css new file mode 100644 index 0000000..d2175ae --- /dev/null +++ b/styles/components/letter-index.css @@ -0,0 +1,16 @@ +.letter-index { + margin-bottom: 60px; + &__group { + border-top: 1px solid var(--color-gray-normal); + position: relative; + padding: 0 0 0 200px; + min-height: 100px; + } + &__letter { + font-size: 50px; + color: var(--color-gray-normal); + position: absolute; + left: 50px; + top: 10px; + } +} diff --git a/styles/components/nav.css b/styles/components/nav.css index c3d28e9..48ba412 100644 --- a/styles/components/nav.css +++ b/styles/components/nav.css @@ -1,6 +1,7 @@ .nav { + white-space: nowrap; &__item { - display: inline-block; + display: inline-flex; & + .nav__item { margin-left: 20px; } diff --git a/styles/components/split.css b/styles/components/split.css index c16fcdb..8eb4d6c 100644 --- a/styles/components/split.css +++ b/styles/components/split.css @@ -2,7 +2,11 @@ display: flex; align-items: center; justify-content: space-between; - + + &--align-top { + align-items: flex-start; + } + &__left { flex: 0 1 auto; } diff --git a/tasks/radar.js b/tasks/radar.js index c5e9de5..d306a39 100644 --- a/tasks/radar.js +++ b/tasks/radar.js @@ -36,14 +36,21 @@ const addItemToQuadrant = (quadrant = {}, item) => ({ }); export const groupByFirstLetter = (items) => ( - items.reduce((letterIned, item) => ({ - ...letterIned, - [getFirstLetter(item)]: addItemToFirstLetterIndex(letterIned[getFirstLetter(item)], item), + items.reduce((letterIndex, item) => ({ + ...letterIndex, + [getFirstLetter(item)]: addItemToList(letterIndex[getFirstLetter(item)], item), }), {}) ); -const addItemToFirstLetterIndex = (letterIned = [], item) => ([ - ...letterIned, +export const groupByRing = (items) => ( + items.reduce((rings, item) => ({ + ...rings, + [item.attributes.ring]: addItemToList(rings[item.attributes.ring], item), + }), {}) +); + +const addItemToList = (list = [], item) => ([ + ...list, item, ]); diff --git a/tasks/template.js b/tasks/template.js index be4f4e4..0a8b67b 100644 --- a/tasks/template.js +++ b/tasks/template.js @@ -1,6 +1,10 @@ import pug from 'pug'; import { relativePath } from './file'; -import { groupByQuadrants, groupByFirstLetter } from './radar'; +import { + groupByQuadrants, + groupByFirstLetter, + groupByRing, +} from './radar'; const templateFolder = 'templates'; @@ -17,6 +21,7 @@ export const vars = (vars) => ({ }, groupByQuadrants, groupByFirstLetter, + groupByRing, ...vars, }) diff --git a/templates/default-page.pug b/templates/default-page.pug index bfea78e..34cfbae 100644 --- a/templates/default-page.pug +++ b/templates/default-page.pug @@ -6,7 +6,7 @@ block body .branding if noLogo .branding__backlink - a.icon-link(href='/') AOE Technology Radar + a.icon-link.icon-link--primary(href='/') AOE Technology Radar if !noLogo a.branding__logo(href='/') img(src='/assets/logo.svg')