Merge pull request #871 from ember-learn/edit-pencil

Fix styling of title and pencil

Author: mansona

app/index.html

@@ -10,7 +10,7 @@
     {{content-for "head"}}
 
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/app.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/ember-api-docs.css">
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet">
 
     {{content-for "head-footer"}}

app/styles/app.css

@@ -0,0 +1,27 @@
+.article-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.module-name {
+  display: inline-block;
+  margin-bottom: 0;
+}
+
+.access {
+  color: #fff;
+  background-color: var(--color-gray-600);
+  margin-left: var(--spacing-1);
+  padding: 0.25rem var(--spacing-1);
+  font-size: var(--font-size-md);
+  border-radius: var(--radius);
+  vertical-align: middle;
+}
+
+main a.edit-icon {
+  height: 1rem;
+  width: 16px;
+  display: inline-block;
+  background: none;
+}

app/templates/project-version/classes/class.hbs

@@ -1,10 +1,15 @@
 {{! template-lint-disable no-action }}
 <article class="chapter">
-  {{#if (and @model.project.id @model.file @model.line (is-latest version=@model.projectVersion.version allVersions=this.allVersions))}}
-    <a data-tooltip="Edit on Github" class="heading__link__edit" href="{{github-link @model.project.id @model.projectVersion.version @model.file @model.line isEdit=true}}" target="_blank" rel="noopener noreferrer">{{svg-jar "fa-pencil"}}</a>
-  {{/if}}
-  <h1 class="module-name">Class {{@model.name}}</h1>
-  {{#if @model.access}}<span class="access">{{@model.access}}</span>{{/if}}
+  <div class="article-title-wrapper">
+    <h1 class="module-name">Class {{@model.name}}
+      {{#if @model.access}}
+        <span class="access">{{@model.access}}</span>
+      {{/if}}
+    </h1>
+    {{#if (and @model.project.id @model.file @model.line (is-latest version=@model.projectVersion.version allVersions=this.allVersions))}}
+      <a data-tooltip="Edit on Github" class="edit-icon" href="{{github-link @model.project.id @model.projectVersion.version @model.file @model.line isEdit=true}}" target="_blank" rel="noopener noreferrer">{{svg-jar "pen"}}</a>
+    {{/if}}
+  </div>
   <hr>
   <div class="attributes">
     {{#if @model.extends}}

app/templates/project-version/modules/module.hbs

@@ -1,10 +1,13 @@
 <article class="chapter">
-  {{#if (eq this.model.name 'ember-data-overview')}}
-    <h1 class="module-name">EmberData Overview</h1>
-  {{else}}
-    <h1 class="module-name">Package {{this.model.name}}</h1>
-  {{/if}}
-  {{#if this.model.access}}<span class="access">{{this.model.access}}</span>{{/if}}
+  <div class="article-title-wrapper">
+    {{#if (eq this.model.name 'ember-data-overview')}}
+      <h1 class="module-name">EmberData Overview</h1>
+    {{else}}
+      <h1 class="module-name">Package {{this.model.name}}
+        {{#if this.model.access}}<span class="access">{{this.model.access}}</span>{{/if}}
+      </h1>
+    {{/if}}
+  </div>
   <hr>
 
   <p class="attributes">

public/assets/images/pen.svg

@@ -7,6 +7,6 @@ module('Acceptance | release URL', function (hooks) {
 
   test('specifying release instead of specific version in URL should go to the latest release', async function (assert) {
     await visit('ember/release/classes/Application');
-    assert.dom('h1.module-name').hasText('Class Application');
+    assert.dom('h1.module-name').includesText('Class Application');
   });
 });