Add item detail page

2017-02-11 22:53:54 +01:00
parent 56f9495a59
commit 1f58dea853
21 changed files with 301 additions and 89 deletions
--- a/templates/default-page.pug
+++ b/templates/default-page.pug
@@ -0,0 +1,26 @@
+extends layout.pug
+
+block body
+  .page
+    .page__header
+      .branding
+        a.branding__logo(href='/')
+          img(src='/assets/logo.svg')
+        .branding__content
+          .nav
+            .nav__item
+              a.icon-link(href='/') How to Use Technology Radar?
+            .nav__item
+              a.icon-link(href='/') Technologies Overview
+    .page__content
+      block content
+    .page__footer
+      .branding
+        span.branding__logo
+          img(src='/assets/logo.svg')
+        .branding__content
+          span.footnote
+            | AOE is a leading provider of Enterprise Open Source web solutions.
+            | Using current agile development methods, more than 250+ developers
+            | and consultants in 8 global locations develop customized Open Source
+            | solutions for global companies and corporations.
--- a/templates/item-page.pug
+++ b/templates/item-page.pug
@@ -0,0 +1,76 @@
+extends layout.pug
+
+block vars
+  //-
+    - var title=item.attributes.title
+
+block body
+  .item-page
+    .item-page__nav
+      .item-page__nav__inner
+        .nav
+          .nav__item
+            a.icon-link.icon-link--primary.icon-link--big(href='/') AOE Technology Radar
+        .item-page__header
+          h3.headline
+            = translate(item.quadrant)
+        .item-list
+          .item-list__header
+            .split
+              .split__left
+                span(class=`badge badge--big badge--${item.attributes.ring}`)
+                  = item.attributes.ring
+              .split__right
+                a.icon-link(href=`/${item.quadrant}.html`) Quadrant Overview
+          .item-list__list
+            each ringItem in itemsInRing
+              a.item(class=`${ringItem.name === item.name ? 'is-active' : ''}` href=`/${ringItem.quadrant}/${ringItem.name}.html`)
+                .item__title= ringItem.attributes.title
+                if ringItem.attributes.info
+                  .item__info= ringItem.attributes.info
+    .item-page__content
+      .item-page__content__inner
+        .split
+          .split__left
+          .split__right
+            .nav
+              .nav__item
+                a.icon-link(href='/') How to Use Technology Radar?
+              .nav__item
+                a.icon-link(href='/') Technologies Overview
+        .item-page__header
+          .split
+            .split__left
+              h1.hero-headline.hero-headline--inverse
+                = item.attributes.title
+            .split__right
+              span(class=`badge badge--big badge--${item.attributes.ring}`)
+                = item.attributes.ring
+        .item-details
+          != item.body
+  //-
+    a(href='/' + item.quadrant + '.html')= translate(item.quadrant)
+    h1 #{item.attributes.title}
+      = ' '
+      small #{item.attributes.ring}
+
+
+    hr
+
+    h4= item.revisions[0].version
+    h5 New: #{item.isNew ? 'YES' : 'NO'}
+    h5 Feature: #{item.attributes.isFeatured ? 'YES' : 'NO'}
+
+    section
+      != item.revisions[0].body
+    hr
+
+    ul
+      each revision, index in item.revisions
+        if index > 0
+          li
+            h3
+              = revision.version
+              = ' '
+              = revision.attributes.ring
+            != revision.body
--- a/templates/item.pug
+++ b/templates/item.pug
@@ -1,33 +0,0 @@
-extends layout.pug
-
-block vars
-  //-
-    - var title=item.attributes.title
-
-block content
-  //-
-    a(href='/' + quadrantName + '.html')= translate(quadrantName)
-    h1 #{item.attributes.title}
-      = ' '
-      small #{item.attributes.ring}
-
-
-    hr
-
-    h4= item.revisions[0].version
-    h5 New: #{item.isNew ? 'YES' : 'NO'}
-    h5 Feature: #{item.attributes.isFeatured ? 'YES' : 'NO'}
-
-    section
-      != item.revisions[0].body
-    hr
-
-    ul
-      each revision, index in item.revisions
-        if index > 0
-          li
-            h3
-              = revision.version
-              = ' '
-              = revision.attributes.ring
-            != revision.body
--- a/templates/layout.pug
+++ b/templates/layout.pug
@@ -4,28 +4,6 @@ html
    title #{title} - AOE Tech Radar
    link(rel='stylesheet', href='/styles.css')
  body
-    .page
-      .page__header
-        .branding
-          a.branding__logo(href='/')
-            img(src='/assets/logo.svg')
-          .branding__content
-            .nav
-              .nav__item
-                a.icon-link(href='/') How to Use Technology Radar?
-              .nav__item
-                a.icon-link(href='/') Technologies Overview
-      .page__content
-        block content
-        block scripts
-          script(src='/bundle.js')
-      .page__footer
-        .branding
-          span.branding__logo
-            img(src='/assets/logo.svg')
-          .branding__content
-            span.footnote
-              | AOE is a leading provider of Enterprise Open Source web solutions.
-              | Using current agile development methods, more than 250+ developers
-              | and consultants in 8 global locations develop customized Open Source
-              | solutions for global companies and corporations.
+    block body
+    block scripts
+      script(src='/bundle.js')
--- a/templates/quadrant-page.pug
+++ b/templates/quadrant-page.pug
@@ -1,4 +1,4 @@
-extends layout.pug
+extends default-page.pug

 block vars
  - var title='Quadrant'