Add SVG icons and empty howto page
This commit is contained in:
Tom Raithel
@@ -41,11 +41,11 @@ If an item is overwritten in a new release, the attributes from the new item are
|
|||||||
|
|
||||||
## Todos
|
## Todos
|
||||||
|
|
||||||
|
- [x] Add Icons
|
||||||
|
- [x] Add pjax
|
||||||
- [ ] Final CSS (Icons, etc)
|
- [ ] Final CSS (Icons, etc)
|
||||||
- [ ] Get contents for how-to-use page
|
- [ ] Get contents for how-to-use page
|
||||||
- [ ] Show item history on details
|
- [ ] Show item history on details
|
||||||
- [ ] Better semantic and SEO
|
- [ ] Better semantic and SEO
|
||||||
- [ ] Implement search?
|
- [ ] Implement search?
|
||||||
- [ ] Radar View?
|
|
||||||
- [ ] Make mobile friendly
|
- [ ] Make mobile friendly
|
||||||
- [x] Add pjax
|
|
||||||
|
|||||||
10
assets/icons/back.svg
Normal file
10
assets/icons/back.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="30px" height="21px" viewBox="0 0 30 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Combined Shape</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M4.0121205,11.4268265 L28.7159803,11.4268265 C29.3420609,11.4268265 29.8495995,10.9192879 29.8495995,10.2932072 C29.8495995,9.66712664 29.3420609,9.15958803 28.7159803,9.15958803 L3.72871569,9.15958803 L10.9530947,1.93520905 C11.3958005,1.49250321 11.3958005,0.774735221 10.9530947,0.332029381 C10.5103888,-0.11067646 9.79262085,-0.11067646 9.34991501,0.332029381 L0.332029381,9.34991501 C-0.0720094163,9.75395381 -0.107299183,10.3871039 0.22616008,10.831165 C0.324565179,11.0133559 0.471399155,11.1655433 0.649413844,11.2704791 L9.34991501,19.9709803 C9.79262085,20.4136861 10.5103888,20.4136861 10.9530947,19.9709803 C11.3958005,19.5282745 11.3958005,18.8105065 10.9530947,18.3678006 L4.0121205,11.4268265 Z" id="Combined-Shape" fill="#F79223"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
10
assets/icons/overview.svg
Normal file
10
assets/icons/overview.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="16px" height="21px" viewBox="0 0 16 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Slice 1</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M2.66666667,5.21153877e-05 C1.21540741,5.21153877e-05 0,1.21545952 0,2.66671878 L0,17.7778299 C0,18.9976817 1.00237037,20.0000521 2.22222222,20.0000521 L15.3333333,20.0000521 C15.682963,20.0000521 16,19.6830151 16,19.3333854 L16,4.66671878 C15.9976296,4.27560767 15.7140741,3.99649656 15.3333333,4.00005212 C14.6921481,4.00005212 14,3.30790397 14,2.66671878 C14,2.0255336 14.6921481,1.33338545 15.3333333,1.33338545 C15.6853333,1.33812619 16,1.01871878 16,0.666718782 C16,0.314718782 15.6853333,-0.00468862535 15.3333333,5.21153877e-05 L2.66666667,5.21153877e-05 Z M2.66666667,1.33338545 L13.0346667,1.33338545 C12.8020741,1.72805212 12.6666667,2.18405212 12.6666667,2.66671878 C12.6666667,3.14938545 12.8020741,3.60538545 13.0346667,4.00005212 L2.66666667,4.00005212 C2.02548148,4.00005212 1.33333333,3.30790397 1.33333333,2.66671878 C1.33333333,2.0255336 2.02548148,1.33338545 2.66666667,1.33338545 Z M1.33333333,4.96538545 C1.72681481,5.19797804 2.18518519,5.33338545 2.66666667,5.33338545 L14.6666667,5.33338545 L14.6666667,18.6667188 L2.22222222,18.6667188 C1.71881481,18.6667188 1.33333333,18.2812373 1.33333333,17.7778299 L1.33333333,4.96538545 Z M3.77777778,7.77782989 C3.40977778,7.77782989 3.11111111,8.07649656 3.11111111,8.44449656 C3.11111111,8.81249656 3.40977778,9.11116323 3.77777778,9.11116323 L12.2222222,9.11116323 C12.5902222,9.11116323 12.8888889,8.81249656 12.8888889,8.44449656 C12.8888889,8.07649656 12.5902222,7.77782989 12.2222222,7.77782989 L3.77777778,7.77782989 Z M3.77777778,11.3333854 C3.40977778,11.3333854 3.11111111,11.6320521 3.11111111,12.0000521 C3.11111111,12.3680521 3.40977778,12.6667188 3.77777778,12.6667188 L12.2222222,12.6667188 C12.5902222,12.6667188 12.8888889,12.3680521 12.8888889,12.0000521 C12.8888889,11.6320521 12.5902222,11.3333854 12.2222222,11.3333854 L3.77777778,11.3333854 Z M3.77777778,14.888941 C3.40977778,14.888941 3.11111111,15.1876077 3.11111111,15.5556077 C3.11111111,15.9236077 3.40977778,16.2222743 3.77777778,16.2222743 L12.2222222,16.2222743 C12.5902222,16.2222743 12.8888889,15.9236077 12.8888889,15.5556077 C12.8888889,15.1876077 12.5902222,14.888941 12.2222222,14.888941 L3.77777778,14.888941 Z" fill="#7E8991"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
10
assets/icons/pie.svg
Normal file
10
assets/icons/pie.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Slice 1</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M9.33152835,0 L8.68756287,0 L8.68756287,2.60709564 C3.84312353,2.94056136 0,6.97751758 0,11.9064716 C0,17.0522244 4.18577564,21.238 9.33152835,21.238 C14.2586451,21.238 18.2974386,17.3948765 18.6290671,12.5504371 L21.2361627,12.5504371 L21.2361627,11.9064716 C21.2361627,5.34142268 15.8965773,0 9.33152835,0 Z M9.33152835,19.9496097 C4.89450513,19.9496097 1.28655301,16.3416576 1.28655301,11.9046344 C1.28655301,7.68624707 4.55001574,4.21471275 8.68756287,3.88629954 L8.68756287,12.5485999 L17.3498632,12.5485999 C17.0196127,16.6843097 13.5517529,19.9496097 9.33152835,19.9496097 Z M18.6616787,11.2620468 L9.97595316,11.2620468 L9.97595316,1.30584441 C15.3187538,1.62736784 19.6087949,5.91878689 19.929859,11.2620468 L18.6616787,11.2620468 Z" id="Page-1-Copy-2" fill="#A1A6AA"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
13
assets/icons/question.svg
Normal file
13
assets/icons/question.svg
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Group</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="Group" transform="translate(1.000000, 1.000000)">
|
||||||
|
<path d="M10.7625,0.525 C5.09744667,0.525 0.525,5.09744667 0.525,10.7625 C0.525,16.4275533 5.09744667,21 10.7625,21 C16.4275533,21 21,16.4275533 21,10.7625 C21,5.09744667 16.4275533,0.525 10.7625,0.525 Z" id="Path" stroke="#7E8991" stroke-width="1.5"></path>
|
||||||
|
<path d="M10.7625,16.45 C10.08,16.45 9.53369667,15.9036967 9.53369667,15.2211967 C9.53369667,14.5386967 10.08,13.9923933 10.7625,13.9923933 L10.7625,13.9923933 C11.445,13.9923933 11.9913033,14.5386967 11.9913033,15.2211967 C11.9913033,15.9036967 11.445,16.45 10.7625,16.45 Z M13.5373933,9.53369667 C13.4011967,9.71630333 13.24134,9.89739333 13.0823933,10.0575533 C12.9686433,10.1713033 12.8324467,10.2850533 12.67259,10.4673567 C12.4899833,10.6263033 12.3537867,10.7637133 12.2400367,10.89991 C12.1262867,11.01366 12.0125367,11.12741 11.9439833,11.2187133 C11.73893,11.4911067 11.6476267,11.8560167 11.6712867,12.1972667 L11.6712867,12.9025167 L9.89648333,12.9025167 L9.89648333,11.94732 C9.87373333,11.6285167 9.91893,11.3100167 10.0551267,10.9924267 C10.2377333,10.69607 10.44127,10.4236767 10.71518,10.17373 L11.85268,9.03623 C12.1026267,8.76353333 12.2163767,8.42228333 12.2163767,8.05737333 C12.2163767,7.69367667 12.08018,7.35242667 11.8302333,7.10248 C11.5799833,6.85223 11.2162867,6.71603333 10.8513767,6.71603333 C10.48768,6.69358667 10.1239833,6.82978333 9.85007333,7.07973 C9.57768,7.32998 9.41752,7.69367667 9.39507333,8.05858667 L7.48377,8.05858667 C7.55262667,7.21714 7.93877,6.42119333 8.57637667,5.87489 C9.23643,5.32858667 10.0551267,5.05619333 10.9202333,5.07864 C11.73893,5.03344333 12.5576267,5.30614 13.1952333,5.82969333 C13.78643,6.32989 14.0824833,7.05849667 14.0824833,7.96849667 C14.06125,8.53239333 13.8786433,9.10114333 13.5373933,9.53369667 Z" id="Page-1" fill="#7E8991"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
10
assets/icons/search.svg
Normal file
10
assets/icons/search.svg
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||||
|
<title>Page 1</title>
|
||||||
|
<desc>Created with Sketch.</desc>
|
||||||
|
<defs></defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M19.6015482,17.6785496 L15.5875479,13.6657346 C18.0332228,10.2976722 17.7392915,5.55921406 14.7021982,2.52330599 C13.0203893,0.841497065 10.8167929,0 8.61290024,0 C6.40811867,0 4.204226,0.841497065 2.52271338,2.52330599 C-0.840904461,5.88662753 -0.840904461,11.3403582 2.52271338,14.703976 C4.204226,16.3857849 6.40930388,17.227282 8.61290024,17.227282 C10.3883405,17.227282 12.1628919,16.6809015 13.6651419,15.5893257 L17.677957,19.6021408 C17.9431471,19.8673309 18.2913017,20.0003704 18.6397526,20.0003704 C18.9882035,20.0003704 19.3366544,19.8673309 19.6015482,19.6021408 C20.1328173,19.0708717 20.1328173,18.2098187 19.6015482,17.6785496 Z M3.86881239,13.3566918 C1.25276394,10.7409396 1.25276394,6.48397193 3.86881239,3.86821978 C5.13609511,2.60064075 6.82116335,1.90285005 8.61290024,1.90285005 C10.4046371,1.90285005 12.0900017,2.60064075 13.3572844,3.86821978 C15.9730365,6.48397193 15.9730365,10.7409396 13.3572844,13.3566918 C12.0900017,14.6239745 10.4046371,15.3220615 8.61290024,15.3220615 C6.82027445,15.3220615 5.13609511,14.6239745 3.86881239,13.3566918 Z" fill="#7E8991"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
14
static-pages/howto.pug
Normal file
14
static-pages/howto.pug
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
extends ../templates/default-page.pug
|
||||||
|
|
||||||
|
block vars
|
||||||
|
- var noLogo=true
|
||||||
|
- var title="How to Use Technology Radar"
|
||||||
|
|
||||||
|
block content
|
||||||
|
.headline-group
|
||||||
|
h1.hero-headline
|
||||||
|
| How to Use Technology Radar
|
||||||
|
.markdown
|
||||||
|
h2 What are quadrants?
|
||||||
|
p
|
||||||
|
| TODO
|
||||||
@@ -19,7 +19,9 @@ block content
|
|||||||
.split__left
|
.split__left
|
||||||
h4.headline= translate(quadrantName)
|
h4.headline= translate(quadrantName)
|
||||||
.split__right
|
.split__right
|
||||||
a.icon-link(href=`/${quadrantName}.html`) Quadrant Overview
|
a.icon-link(href=`/${quadrantName}.html`)
|
||||||
|
span.icon.icon--pie.icon-link__icon
|
||||||
|
| Quadrant Overview
|
||||||
.quadrant-section__rings
|
.quadrant-section__rings
|
||||||
each items, ringName in quadrant
|
each items, ringName in quadrant
|
||||||
.quadrant-section__ring
|
.quadrant-section__ring
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
--color-gray-dark: #475157;
|
--color-gray-dark: #475157;
|
||||||
--color-gray-dark-alt: #4F585E;
|
--color-gray-dark-alt: #4F585E;
|
||||||
--color-gray-dark-alt2: #525C63;
|
--color-gray-dark-alt2: #525C63;
|
||||||
--color-gray-normal: #979797;
|
--color-gray-normal: #A1A6AA;
|
||||||
--color-gray-light: #7D878D;
|
--color-gray-light: #7D878D;
|
||||||
|
|
||||||
--color-white: #fff;
|
--color-white: #fff;
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding-left: 30px;
|
|
||||||
height: 25px;
|
height: 25px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
@@ -16,19 +15,13 @@
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__icon {
|
||||||
|
margin-right: 6px;
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 25px;
|
|
||||||
height: 25px;
|
|
||||||
/* TODO icon*/
|
|
||||||
background: var(--color-gray-normal);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
29
styles/components/icon.css
Normal file
29
styles/components/icon.css
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
background-size: 22px 22px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 0 0;
|
||||||
|
vertical-align: middle;
|
||||||
|
|
||||||
|
&--pie {
|
||||||
|
background-image: url('/assets/icons/pie.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&--question {
|
||||||
|
background-image: url('/assets/icons/question.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&--overview {
|
||||||
|
background-image: url('/assets/icons/overview.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&--search {
|
||||||
|
background-image: url('/assets/icons/search.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&--back {
|
||||||
|
background-image: url('/assets/icons/back.svg');
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
.item-details {
|
.markdown {
|
||||||
color: var(--color-gray-normal);
|
color: var(--color-gray-normal);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
||||||
@@ -6,16 +6,26 @@ block body
|
|||||||
.branding
|
.branding
|
||||||
if noLogo
|
if noLogo
|
||||||
.branding__backlink
|
.branding__backlink
|
||||||
a.icon-link.icon-link--primary(href='/') AOE Technology Radar
|
a.icon-link.icon-link--primary.icon-link--big(href='/')
|
||||||
|
span.icon.icon--back.icon-link__icon
|
||||||
|
| AOE Technology Radar
|
||||||
if !noLogo
|
if !noLogo
|
||||||
a.branding__logo(href='/')
|
a.branding__logo(href='/')
|
||||||
img(src='/assets/logo.svg')
|
img(src='/assets/logo.svg')
|
||||||
.branding__content
|
.branding__content
|
||||||
.nav
|
.nav
|
||||||
.nav__item
|
.nav__item
|
||||||
a.icon-link(href='/howto.html') How to Use Technology Radar?
|
a.icon-link(href='/howto.html')
|
||||||
|
span.icon.icon--question.icon-link__icon
|
||||||
|
| How to Use Technology Radar?
|
||||||
.nav__item
|
.nav__item
|
||||||
a.icon-link(href='/overview.html') Technologies Overview
|
a.icon-link(href='/overview.html')
|
||||||
|
span.icon.icon--overview.icon-link__icon
|
||||||
|
| Technologies Overview
|
||||||
|
.nav__item
|
||||||
|
a.icon-link(href='#todo')
|
||||||
|
span.icon.icon--search.icon-link__icon
|
||||||
|
| Search
|
||||||
.page__content
|
.page__content
|
||||||
block content
|
block content
|
||||||
if !noFooter
|
if !noFooter
|
||||||
|
|||||||
@@ -19,7 +19,9 @@ block content
|
|||||||
span(class=`badge badge--big badge--${item.attributes.ring}`)
|
span(class=`badge badge--big badge--${item.attributes.ring}`)
|
||||||
= item.attributes.ring
|
= item.attributes.ring
|
||||||
.split__right
|
.split__right
|
||||||
a.icon-link(href=`/${item.quadrant}.html`) Quadrant Overview
|
a.icon-link(href=`/${item.quadrant}.html`)
|
||||||
|
span.icon.icon--pie.icon-link__icon
|
||||||
|
| Quadrant Overview
|
||||||
.item-list__list
|
.item-list__list
|
||||||
each ringItem in itemsInRing
|
each ringItem in itemsInRing
|
||||||
a.item(class=`${ringItem.name === item.name ? 'is-active' : ''}` href=`/${ringItem.quadrant}/${ringItem.name}.html`)
|
a.item(class=`${ringItem.name === item.name ? 'is-active' : ''}` href=`/${ringItem.quadrant}/${ringItem.name}.html`)
|
||||||
@@ -36,7 +38,7 @@ block content
|
|||||||
.split__right
|
.split__right
|
||||||
span(class=`badge badge--big badge--${item.attributes.ring}`)
|
span(class=`badge badge--big badge--${item.attributes.ring}`)
|
||||||
= item.attributes.ring
|
= item.attributes.ring
|
||||||
.item-details
|
.markdown
|
||||||
!= item.body
|
!= item.body
|
||||||
//-
|
//-
|
||||||
a(href='/' + item.quadrant + '.html')= translate(item.quadrant)
|
a(href='/' + item.quadrant + '.html')= translate(item.quadrant)
|
||||||
|
|||||||
Reference in New Issue
Block a user