Refactor entity header styling

canonical · Mar 25, 2019 · e0966ad · e0966ad
1 parent df4d4ca
commit e0966ad
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 33 deletions.
diff --git a/static/sass/custom/_entities.scss b/static/sass/custom/_entities.scss
@@ -17,6 +17,16 @@
 }
 
 .entity {
+  &__title-wrap {
+    align-items: center;
+    display: flex;
+    margin: 0.5rem 0 1rem;
+  }
+
+  &__meta {
+    margin-bottom: 1rem;
+  }
+
   &__title,
   &__version {
     font-size: 2.5rem;
@@ -30,4 +40,21 @@
     color: #666;
     top: 0 !important;
   }
+
+  &__channel {
+    span {
+      text-transform: capitalize;
+    }
+  }
+
+  &__supported-release {
+    display: inline-block;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 0.9rem;
+    color: #666;
+    padding: 0.15rem;
+    margin-right: 0.25rem;
+    text-transform: capitalize;
+  }
 }
diff --git a/templates/store/_entity-header.html b/templates/store/_entity-header.html
@@ -1,26 +1,31 @@
 <div class="p-strip--light is-bordered is-shallow">
   <header class="row">
     <div class="col-8">
-      <div class="p-media-object--large u-no-margin--bottom">
+      <div class="entity__title-wrap">
         {% if context.entity.icon %}
           <img src="{{ context.entity.icon }}" alt="" width="96" id="the-icon" class="p-media-object__image is-round" />
         {% endif %}
-        <div class="p-media-object__details">
-          <h1 itemprop="name" class="p-media-object__title u-no-margin--bottom entity__title">
-            <span>
-              {{ context.entity.display_name }}
-            </span>
-            <sup class="p-heading--three entity__version">
-              #{{ context.entity.revision_number }}
-            </sup>
-          </h1>
-          <ul class="p-media-object__meta-list u-no-margin--bottom">
-            <li class="p-media-object__meta-list-item u-no-padding--left">
-              <strong>By</strong> <a
+        <h1 itemprop="name" class="p-media-object__title u-no-margin--bottom entity__title">
+          <span>
+            {{ context.entity.display_name }}
+          </span>
+          <sup class="p-heading--three entity__version">
+            #{{ context.entity.revision_number }}
+          </sup>
+        </h1>
+      </div>
+      <ul class="entity__meta p-inline-list--middot">
+        {% if context.entity.user %}
+          <li class="p-inline-list__item">
+            <span class="entity__user">
+              By <a
                 href="/u/{{ context.entity.user }}">{{ context.entity.user }}</a>
-            </li>
-            <li class="p-media-object__meta-list-item u-no-padding--left">
-              {% if context.entity.latest_revision and context.entity.revision_number != context.entity.latest_revision %}
+            </span>
+          </li>
+        {% endif %}
+        {% if context.entity.latest_revision and context.entity.revision_number != context.entity.latest_revision %}
+          <li class="p-inline-list__item">
+            <span class="entity__latest-version">
               <a href="/{{ context.entity.latest_revision['url'] }}" onclick="dataLayer.push({
                     'event' : 'GAEvent',
                     'eventCategory' : 'Entity Details Link',
@@ -29,23 +34,25 @@ <h1 itemprop="name" class="p-media-object__title u-no-margin--bottom entity__tit
                     'eventValue' : '{{ context.entity.latest_revision['full_id'] }}'
                   });"><strong>Latest version</strong> (#{{ context.entity.latest_revision }})
               </a>
-              {% endif %}
-            </li>
-            {% if context.entity.meta_published_info %}
-              <li class="p-media-object__meta-list-item u-no-padding--left">
-                {% for meta_info in context.entity.meta_published_info %}
-                <span>{{ meta_info['Channel'] }}</span>
-                {% endfor %}
-              </li>
-            {% endif %}
-            {% if context.entity.series %}
-              <li class="p-media-object__meta-list-item u-no-padding--left">
-                  <strong>Supports:</strong> {{ context.entity.series|join(', ') }}
-              </li>
-            {% endif %}
-          </ul>
-        </div>
-      </div>
+            </span>
+          </li>
+        {% endif %}
+        {% if context.entity.meta_published_info %}
+          <li class="p-inline-list__item">
+            <span class="entity__channel">
+              {% for meta_info in context.entity.meta_published_info %}
+              <span>{{ meta_info['Channel'] }}</span>
+              {% endfor %}
+            </span>
+          </li>
+        {% endif %}
+      </ul>
+      {% if context.entity.series %}
+      Supports:
+        {% for supported_release in context.entity.series %}
+          <span class="entity__supported-release {{ supported_release }}">{{ supported_release }}</span>
+        {% endfor %}
+      {% endif %}
     </div>
     <div class="col-4">
       <div class="p-code-snippet">