Skip to content

Commit

Permalink
Merge pull request #79 from barrymcgee/charm-details-page
Browse files Browse the repository at this point in the history 
Standardise entity headers on entity detail pages
  • Loading branch information
@hatched
hatched authored Apr 1, 2019
2 parents 5ded773 + c13c327 commit 04384ce
Show file tree
Hide file tree
Showing 8 changed files with 274 additions and 330 deletions.
67 changes: 0 additions & 67 deletions static/js/app/sticky-header.js
View file

This file was deleted.

48 changes: 48 additions & 0 deletions static/sass/custom/_entities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,51 @@
@extend %vf-heading-6;
}
}

.entity {
&__title-wrap {
align-items: center;
display: flex;
margin: 0.5rem 0 1rem;
}

&__meta {
margin-bottom: 1rem;
}

&__title {
text-transform: capitalize;
}

&__version {
color: $color-mid-dark;
top: 0 !important;
}

&__channel {
span {
text-transform: capitalize;
}
}

&__supported-release {
display: inline-block;
border: 1px solid $color-mid-dark;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 500;
color: $color-mid-dark;
padding: 0 0.5rem;
margin-right: 0.25rem;
text-transform: capitalize;

&.kubernetes {
border-color: $color-kubernetes;
color: $color-kubernetes;
}

&:first-of-type {
margin-left: 0.5rem;
}
}
}
1 change: 1 addition & 0 deletions static/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ $asset-path: '/static/';

// Override local variables
$color-navigation-background: #333;
$color-kubernetes: #2e69ea;

// Set the mobile nav breakpoint to handle the large number of nav items.
@import 'vanilla-framework/scss/settings_breakpoints';
Expand Down
4 changes: 2 additions & 2 deletions templates/shared/_spicule_lead-gen-form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@
</li>
<li class="mktFormReq mktField" id="comments">
<label for="Comments_from_lead__c" class="mktoLabel ">
{% if context and context.bundle.display_name %}
How can we help with <strong>{{ context.bundle.display_name }}</strong>?
{% if context and context.entity.display_name %}
How can we help with <strong>{{ context.entity.display_name }}</strong>?
{% else %}
How can we help?
{% endif %}
Expand Down
73 changes: 73 additions & 0 deletions templates/store/_entity-header.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<div class="p-strip--light is-bordered is-shallow">
<header class="row">
<div class="col-8">
<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 %}
<h1 itemprop="name" class="u-no-margin--bottom entity__title">
<span>
{{ context.entity.display_name }}
<sup class="entity__version">
#{{ context.entity.revision_number }}
</sup>
</span>
</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>
</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',
'eventAction' : 'Goto latest version',
'eventLabel' : 'Latest version (#ID)',
'eventValue' : '{{ context.entity.latest_revision['full_id'] }}'
});"><strong>Latest version</strong> (#{{ context.entity.latest_revision }})
</a>
</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>{% if not loop.last %},{% endif %}
{% 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">
<input class="p-code-snippet__input deploy-command__field" value="{{ context.entity.id }}"
readonly="readonly">
<button class="p-code-snippet__action">Copy to clipboard</button>
</div>
<p>
<a href="https://jujucharms.com/new/?deploy-target={{ context.entity.id }}"
class="p-button--positive row" rel="nofollow">
Add to new model
</a>
</p>
</div>
</header>
</div>
111 changes: 19 additions & 92 deletions templates/store/bundle-details.html
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,32 @@
{% extends "_layout.html" %}

{% block title %}{{ context.bundle.display_name }}{% endblock %}
{% block title %}{{ context.entity.display_name }}{% endblock %}

{% block content %}

<div class="p-strip--light is-bordered is-shallow" data-js="sticky-header">
<header class="row">
<div class="col-8">
<div class="p-media-object--large u-no-margin--bottom">
<div class="p-media-object__details">
<h1 itemprop="name" class="p-media-object__title u-no-margin--bottom u-sv2" style="text-transform:capitalize">
<span>
{{ context.bundle.display_name }}
</span>
<sup class="p-heading--three">
#{{ context.bundle.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 href="https://jujucharms.com/u/{{ context.bundle.bundle_data.Meta.owner.User }}">{{ context.bundle.bundle_data.Meta.owner.User }}</a>
</li>
<li class="p-media-object__meta-list-item u-no-padding--left">
{% if context.bundle.revision_number != context.bundle.latest_revision['id'] %}
<a href="https://jujucharms.com/{{ context.bundle.latest_revision['url'] }}"
onclick="dataLayer.push({
'event' : 'GAEvent',
'eventCategory' : 'Bundle Details Link',
'eventAction' : 'Goto latest version',
'eventLabel' : 'Latest version (#ID)',
'eventValue' : '{{ context.bundle.latest_revision['full_id'] }}'
});"><strong>Latest version</strong> (#{{ context.bundle.latest_revision['id'] }})
</a>
{% else %}
<strong>Latest version</strong> (#{{ context.bundle.latest_revision['id'] }})
{% endif %}
</li>
<li class="p-media-object__meta-list-item u-no-padding--left">
<strong>Series:</strong> {{ context.bundle.bundle_data.Meta['bundle-metadata'].Series }}
</li>
<li class="p-media-object__meta-list-item u-no-padding--left">
<strong>Channels:</strong>
{% for channel_details in context.bundle.bundle_data['Meta']['published']['Info'] %}
{{ channel_details['Channel'] }},
{% endfor %}
</li>
<li class="p-media-object__meta-list-item u-no-padding--left">
<strong>Machines count:</strong> {{ context.bundle.bundle_data['Meta']['bundle-machine-count']['Count'] }}
</li>
<li class="p-media-object__meta-list-item u-no-padding--left">
<strong>Units count:</strong> {{ context.bundle.bundle_data['Meta']['bundle-unit-count']['Count'] }}
</li>
</ul>
</div>
</div>
</div>
<div class="col-4">
<div class="p-code-snippet">
<input class="p-code-snippet__input deploy-command__field" value="{{ context.bundle.bundle_data['Id'] }}" readonly="readonly">
<button class="p-code-snippet__action">Copy to clipboard</button>
</div>
<p>
<a href="https://jujucharms.com/new/?deploy-target=bundle/{{ context.bundle.bundle_data['Id'] }}" class="p-button--positive row" rel="nofollow">
Add to new model
</a>
</p>
<ul class="p-inline-list u-no-margin--bottom u-equal-height">
<li class="p-inline-list__item u-vertically-center">
<strong>Share:</strong>
</li>
<li class="p-inline-list__item">
<a href="https://twitter.com/intent/tweet?text={{ context.bundle.display_name }}%20charm&via=ubuntu_cloud&url={{ request.url | urlencode }}">
<i class="p-icon--twitter"></i>
</a>
</li>
</ul>
</div>
</header>
</div>
{% include "store/_entity-header.html" %}

<div class="p-strip is-shallow">
<div class="row">
<div class="col-8">
{% if context.bundle.bundle_data.description %}
{% if context.entity.bundle_data.description %}
<div id="description" itemprop="description">
<h3>Description</h3>
<p>{{ context.bundle.bundle_data.description }}</p>
<p>{{ context.entity.bundle_data.description }}</p>
</div>
{% endif %}
<div class="p-card--highlighted">
<object type="image/svg+xml" data="{{ context.bundle.bundle_visulisation }}"></object>
<object type="image/svg+xml" data="{{ context.entity.bundle_visulisation }}"></object>
</div>
{% if context.bundle.readme %}
{% if context.entity.readme %}
<div class="readme" id="readme">
{{ context.bundle.readme|safe }}
{{ context.entity.readme|safe }}
</div>
{% endif %}

</div>
<div class="col-4">
{% if context.bundle.owner == "spiculecharms" or context.bundle.owner == "yellow" %}
{% if context.entity.owner == "spiculecharms" or context.entity.owner == "yellow" %}
<div class="p-card expert-card has-strap expert-card--contact-shown">
<div class="expert__strap">
Juju expert partners
Expand Down Expand Up @@ -134,16 +61,16 @@ <h3>Description</h3>
</div>
{% endif %}

{% if context.bundle.bundle_data.Meta['common-info'] %}
{% if context.entity.bundle_data.Meta['common-info'] %}
<div class="p-card">
<h4 class="p-card__title">Contribute</h4>
{% if context.bundle.bundle_data.Meta['common-info']['homepage'] %}
<p><a href="{{ context.bundle.bundle_data.Meta['common-info']['homepage'] }}">
{% if context.entity.bundle_data.Meta['common-info']['homepage'] %}
<p><a href="{{ context.entity.bundle_data.Meta['common-info']['homepage'] }}">
Project homepage
</a></p>
{% endif %}
{% if context.bundle.bundle_data.Meta['common-info']['bugs-url'] %}
<p><a href="{{ context.bundle.bundle_data.Meta['common-info']['bugs-url'] }}">
{% if context.entity.bundle_data.Meta['common-info']['bugs-url'] %}
<p><a href="{{ context.entity.bundle_data.Meta['common-info']['bugs-url'] }}">
Submit a bug
</a></p>
{% endif %}
Expand All @@ -153,13 +80,13 @@ <h4 class="p-card__title">Contribute</h4>
<div class="p-card" id="files">
<h4 class="p-card__title">Files</h4>
<ul ul class="p-list-tree files__list" aria-multiselectable="true" role="tablist">
{% for file_name, file_link in context.bundle.files.items() %}
{% for file_name, file_link in context.entity.files.items() %}
<li class="p-list-tree__item">
<a href="{{ file_link }}" target="_blank">{{ file_name }}</a>
</li>
{% endfor %}
</ul>
<a target="_blank" class="p-button--neutral archive-url" href="{{ context.bundle.archive_url }}">
<a target="_blank" class="p-button--neutral archive-url" href="{{ context.entity.archive_url }}">
Download .zip
</a>
</div>
Expand All @@ -169,7 +96,7 @@ <h4 class="p-card__title">Bundle configuration</h4>
<aside class="p-accordion" role="tablist" aria-multiselect="true">
<ul class="p-accordion__list">
<li class="p-accordion__group">
{% for d,v in context.bundle.services.items() %}
{% for d,v in context.entity.services.items() %}
{% if v.Options %}
<button class="p-accordion__tab" id="charm-config-{{ d }}-tab" role="tab" aria-controls="#charm-config-{{ d }}" aria-expanded="false">
{% else %}
Expand Down Expand Up @@ -207,10 +134,10 @@ <h4 class="p-card__title">Bundle configuration</h4>
<h3 class="p-card__title">Embed this bundle</h3>
<p>Add this card to your website by copying the code below. <a ref="/community/cards">Learn more</a>.</p>
<textarea rows="2" cols="70" readonly="readonly" wrap="off" style="color:#666">&lt;script src="https://assets.ubuntu.com/v1/juju-cards-v1.6.0.js"&gt;&lt;/script&gt;
&lt;div class="juju-card" data-id="{{ context.bundle.card_id }}" data-dd&gt;&lt;/div&gt;</textarea>
&lt;div class="juju-card" data-id="{{ context.entity.card_id }}" data-dd&gt;&lt;/div&gt;</textarea>
<h4>Preview</h4>
<script src="https://assets.ubuntu.com/v1/juju-cards-v1.6.0.js"></script>
<div class="juju-card" data-id="{{ context.bundle.card_id }}"></div>
<div class="juju-card" data-id="{{ context.entity.card_id }}"></div>
</div>
</div>
</div>
Expand All @@ -223,7 +150,7 @@ <h4>Preview</h4>
window.app.treeifyFileList();
</script>

{% if context.bundle.owner == "spiculecharms" or context.bundle.owner == "yellow" %}
{% if context.entity.owner == "spiculecharms" or context.entity.owner == "yellow" %}
{% include "shared/_spicule_lead-gen-form.html" %}
{% endif %}

Expand Down
Loading

0 comments on commit 04384ce

Please sign in to comment.