From a1a2e3a39ba6c87e1ac599578700a06cda26a27e Mon Sep 17 00:00:00 2001
From: Chris Thoburn <runspired@gmail.com>
Date: Fri, 31 Mar 2023 16:14:29 -0700
Subject: [PATCH] new style

---
 app/helpers/sub.js                            |  7 ++
 app/models/module.js                          |  4 +
 app/routes/project-version/classes/class.js   |  7 +-
 app/styles/_class.scss                        | 92 +++++++++++++++++++
 app/styles/base/_variables.scss               |  1 +
 .../project-version/modules/module.hbs        | 14 ++-
 6 files changed, 121 insertions(+), 4 deletions(-)
 create mode 100644 app/helpers/sub.js

diff --git a/app/helpers/sub.js b/app/helpers/sub.js
new file mode 100644
index 00000000..8c899d81
--- /dev/null
+++ b/app/helpers/sub.js
@@ -0,0 +1,7 @@
+import { helper } from '@ember/component/helper';
+
+export function sub(params) {
+  return params[0] - params[1];
+}
+
+export default helper(sub);
diff --git a/app/models/module.js b/app/models/module.js
index e24b9ff1..357cde20 100644
--- a/app/models/module.js
+++ b/app/models/module.js
@@ -2,6 +2,10 @@ import { belongsTo, attr } from '@ember-data/model';
 import ClassModel from './class';
 
 export default class Module extends ClassModel {
+  get nameParts() {
+    return this.name ? this.name.split('/') : [];
+  }
+
   @attr()
   submodules;
 
diff --git a/app/routes/project-version/classes/class.js b/app/routes/project-version/classes/class.js
index db930130..922274be 100644
--- a/app/routes/project-version/classes/class.js
+++ b/app/routes/project-version/classes/class.js
@@ -18,6 +18,9 @@ export default class ClassRoute extends Route.extend(ScrollTracker) {
   @service
   metaStore;
 
+  @service
+  store;
+
   titleToken(model) {
     return model.name;
   }
@@ -37,13 +40,13 @@ export default class ClassRoute extends Route.extend(ScrollTracker) {
   }
 
   find(typeName, param) {
-    return this.store.find(typeName, param).catch((e1) => {
+    return this.store.findRecord(typeName, param).catch((e1) => {
       if (typeName != 'namespace') {
         console.warn(
           e1,
           'fetching by class or module failed, retrying as namespace'
         );
-        return this.store.find('namespace', param).catch((e2) => {
+        return this.store.findRecord('namespace', param).catch((e2) => {
           console.error(e2);
           return resolve({
             isError: true,
diff --git a/app/styles/_class.scss b/app/styles/_class.scss
index 76c99e5f..adf689cb 100644
--- a/app/styles/_class.scss
+++ b/app/styles/_class.scss
@@ -1,6 +1,98 @@
 article.chapter {
   h1.module-name {
     display: inline;
+    color: #4d4d4d;
+    font-size: 1.2em;
+
+    span.title-badge {
+      display: inline-block;
+      margin-left: 0.5em;
+      vertical-align: middle;
+      font-size: 0.5em;
+      font-weight: 500;
+      color: $white;
+      padding: 0.2em 0.5em;
+      border-radius: 3px;
+      background-color: $light-brown;
+    }
+  }
+
+  h1.package-name {
+    display: inline;
+
+    span.package-title-badge {
+      display: inline-block;
+      margin-left: 0em;
+      vertical-align: middle;
+      font-size: 0.5em;
+      font-weight: 500;
+      line-height: 1em;
+      color: $white;
+      padding: 0.2em 0.5em;
+      border-radius: 3px 0 0 3px;
+      background-color: $brown;
+      position: relative;
+      z-index: 1;
+
+      // arrow right
+      &::after {
+        content: " ";
+        display: block;
+        width: 0;
+        height: 0;
+        border-top: .7em solid transparent;
+        border-bottom: .7em solid transparent;
+        border-left: .6em solid $brown;
+        position: absolute;
+        top: 50%;
+        margin-top: -.7em;
+        left: 100%;
+        z-index: 2;
+      }
+    }
+
+    span.package-title-part {
+      display: inline-block;
+      margin-left: 0.5em;
+      vertical-align: middle;
+      font-size: 0.5em;
+      font-weight: 500;
+      line-height: 1em;
+      color: $light-brown;
+      position: relative;
+      left: -1rem;
+      padding: 0.2em 0.5em 0.2em 0.2em;
+      border-radius: 0 3px 3px 0;
+      background-color: $light-gray;
+
+      &:nth-of-type(2) {
+        padding-left: 1.2em;
+        left: -1rem;
+      }
+      &:nth-of-type(3) {
+        left: -2rem;
+        // background-color: lighten($light-gray, 20%);
+      }
+      &:nth-of-type(4) {
+        left: -3rem;
+        // background-color: lighten($light-gray, 30%);
+      }
+
+      &:last-of-type::after {
+        content: " ";
+        display: block;
+        width: 0;
+        height: 0;
+        border-top: .7em solid transparent;
+        border-bottom: .7em solid transparent;
+        border-left: .6em solid $light-gray;
+        position: absolute;
+        top: 50%;
+        margin-top: -.7em;
+        left: 100%;
+        z-index: 2;
+      }
+    }
   }
 
   .heading__link__edit {
diff --git a/app/styles/base/_variables.scss b/app/styles/base/_variables.scss
index dac471fc..03bb1d25 100644
--- a/app/styles/base/_variables.scss
+++ b/app/styles/base/_variables.scss
@@ -26,6 +26,7 @@ $top-spacing: $base-spacing * 3.333; // 80px
 $ember-orange: #dd6a58;
 $light-brown: #b67d47;
 $brown: #865931;
+$light-gray: #eaeaea;
 $medium-gray: #999;
 $dark-gray: #444545;
 $tan: #fffdf9;
diff --git a/app/templates/project-version/modules/module.hbs b/app/templates/project-version/modules/module.hbs
index 902f1465..1d3ea72c 100644
--- a/app/templates/project-version/modules/module.hbs
+++ b/app/templates/project-version/modules/module.hbs
@@ -1,8 +1,18 @@
 <article class="chapter">
   {{#if (eq this.model.name 'ember-data-overview')}}
-    <h1 class="module-name">EmberData Overview</h1>
+    <h1 class="module-name">EmberData</h1>
+  {{else if this.model.nameParts}}
+    <h1 class="package-name">
+      <span class="package-title-badge">Package</span>
+      {{~#each this.model.nameParts as |part index|~}}
+        <span class="package-title-part">{{part}}{{if (eq index (sub this.model.nameParts.length 1)) '' '/'}}</span>
+      {{~/each}}
+    </h1>
   {{else}}
-    <h1 class="module-name">Package {{this.model.name}}</h1>
+    <h1 class="module-name">
+      {{this.model.name}}
+      <span class="title-badge">Package</span>
+    </h1>
   {{/if}}
   {{#if this.model.access}}<span class="access">{{this.model.access}}</span>{{/if}}