Merge pull request #253 from canonical/wd-15205

feat: Implement new design for asset cards
canonical · Nov 7, 2024 · 2d0c45f · 2d0c45f
2 parents ad099cd + e7f1b7e
commit 2d0c45f
Show file tree

Hide file tree

Showing 13 changed files with 223 additions and 128 deletions.
diff --git a/static/sass/main.scss b/static/sass/main.scss
@@ -10,7 +10,7 @@
   }
 }
 
-.asset-thumbnail {
+.p-asset-card--thumbnail {
   max-height: 100px;
   min-height: 100px;
 }
@@ -40,4 +40,10 @@
 .p-filter-panel-section__chips-toggle {
   padding-top: 6px;
   margin-bottom: 18px;
+}
+
+.p-asset-card {
+  padding:0.75rem;
+  background:#f7f7f7;
+  margin-top:2rem;
 }
diff --git a/templates/_asset-card-image.html b/templates/_asset-card-image.html
@@ -0,0 +1,51 @@
+<div class="p-asset-card p-equal-height-row__col" style="padding:0.75rem;background:#f7f7f7;margin-top:2rem;">
+  <div class="p-equal-height-row__item">
+    {% if asset.data.image %}
+    <a href="/v1/{{ asset.file_path }}" target="_blank">
+      <img
+        class="p-asset-card--thumbnail"
+        src="/v1/{{ asset.file_path }}"
+      />
+    </a>
+    {% endif %}
+  </div>
+  <div class="p-equal-height-row__item">
+    {% if asset.name %}
+      <p class="u-no-margin--bottom"><strong>{{ asset.name }}</strong></p>
+    {% else %}
+      <p class="u-no-margin--bottom"><strong>{{ asset.file_path.split('.')[0] }}</strong></p>
+    {% endif %}
+    <p>File type: <strong>.{{ asset.file_path.split('.', 1)[1] }}</strong></p>
+    <p class="u-no-margin--bottom">Image size: <strong>{% if asset.data.width and asset.data.height %}{{asset.data.width}} x {{asset.data.height}}{% endif %}</strong></p>
+    <p>
+      Tags: 
+      {% for tag in asset.tags %}
+      <strong>{{ tag.name }}{% if not loop.last %},{% endif %}</strong>
+      {% endfor %}
+    </p>
+    <p>
+      <span>Date created: {{ asset.created.strftime('%d %B %Y') }}</span>
+    </p>
+  </div>
+  <div class="p-equal-height-row__item">
+    <p class="p-text--small">
+      <a href="/manager/details?file-path={{ asset.file_path }}">Full asset details&nbsp;&rsaquo;</a>
+    </p>
+  </div>
+  <div class="p-equal-height-row__item">
+    <p class="u-align--right u-no-margin--bottom" style="height:100%">
+      <button
+        class="p-button--positive copy-link is-dense"
+        data-url="/v1/{{ asset.file_path }}"
+      >
+        Asset link
+      </button>
+      <a
+        class="p-button is-dense"
+        href="/manager/update?file-path={{ asset.file_path }}"
+      >
+        Edit asset
+    </a>
+    </p>
+  </div>
+</div>
diff --git a/templates/_asset-card.html b/templates/_asset-card.html
@@ -0,0 +1,48 @@
+<div class="p-asset-card p-equal-height-row__col" style="">
+  <div class="p-equal-height-row__item" style="max-height:6rem;">
+    {% if asset.asset_type == "whitepaper" %}
+      <img class="p-asset-card--thumbnail" src="https://assets.ubuntu.com/v1/b061c401-White+paper.svg" alt="">
+    {% else %}
+      <img class="p-asset-card--thumbnail" src="https://assets.ubuntu.com/v1/fd84bbdc-Document-open.svg" alt="">
+    {% endif %}
+  </div>
+  <div class="p-equal-height-row__item">
+    {% if asset.name %}
+      <p><strong>{{ asset.name }}</strong></p>
+    {% else %}
+      <p><strong>{{ asset.file_path.split('.')[0] }}</strong></p>
+    {% endif %}
+    <p class="u-no-margin--bottom">File type: <strong>.{{ asset.file_path.split('.', 1)[1] }}</strong></p>
+    <p>Asset type: <strong>{{ asset.asset_type }}</strong></p>
+    <p>
+      Tags: 
+      {% for tag in asset.tags %}
+      <strong>{{ tag.name }}{% if not loop.last %},{% endif %}</strong>
+      {% endfor %}
+    </p>
+    <p>
+      <span>Date created: {{ asset.created.strftime('%d %B %Y') }}</span>
+    </p>
+  </div>
+  <div class="p-equal-height-row__item">
+    <p class="p-text--small">
+      <a href="/manager/details?file-path={{ asset.file_path }}">Full asset details&nbsp;&rsaquo;</a>
+    </p>
+  </div>
+  <div class="p-equal-height-row__item">
+    <p class="u-align--right u-no-margin--bottom" style="height:100%">
+      <button
+        class="p-button--positive copy-link is-dense"
+        data-url="/v1/{{ asset.file_path }}"
+      >
+        Asset link
+      </button>
+      <a
+        class="p-button is-dense"
+        href="/manager/update?file-path={{ asset.file_path }}"
+      >
+        Edit asset
+      </a>
+    </p>
+  </div>
+</div>
diff --git a/templates/_asset-list.html b/templates/_asset-list.html
@@ -1,3 +1,7 @@
 {% for asset in assets %}
-  {% include "_asset.html" %}
+  {% if asset.data.image %}
+    {% include "_asset-card-image.html" %}
+  {% else %}
+    {% include "_asset-card.html" %}
+  {% endif %}
 {% endfor %}
diff --git a/templates/_asset.html b/templates/_asset.html
diff --git a/templates/create-update.html b/templates/create-update.html
@@ -21,7 +21,7 @@ <h2 class="u-no-margin--bottom" id="upload-asset">Upload asset</h2>
         <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
         <div class="p-section">
           {% if is_update %}
-            <p>{{ asset.file_path}}</p>
+            <h3>{{ asset.file_path}}</h3>
             <a href="/v1/{{ asset.file_path }}" target="_blank">
               <img class="p-image--bordered asset-thumbnail" src="/v1/{{ asset.file_path }}">
             </a>
@@ -62,7 +62,7 @@ <h2 class="u-no-margin--bottom" id="upload-asset">Upload asset</h2>
         <div class="p-section">
           <label class="p-heading--5 u-no-margin--bottom" id="asset-name">Asset name</label>
           <p class="u-text--muted u-no-padding--top">Use any relevant naming conventions for your asset.</p>
-          <input type="text" id="name" name="friendly_name" aria-labelledby="asset-name" value="{% if asset %}{{ asset.name }}{% endif %}">
+          <input type="text" id="name" name="name" aria-labelledby="asset-name" value="{% if asset %}{{ asset.name }}{% endif %}">
         </div>
       </div>
     </div>
@@ -204,7 +204,7 @@ <h4 class="p-filter-panel-section__heading p-heading--5">Authors</h4>
         <div class="p-section">
           <label class="p-heading--5 u-no-margin--bottom">Google Drive link</label>
           <p class="u-text--muted u-no-padding--top">Link to the asset on Google Drive, if applicable.</p>
-          <input type="text" id="google-drive-link" name="google_drive_link" placeholder="Link" {% if is_update %}disabled{% endif %} value="{% if asset and asset.google_drive_link %}{{ asset.google_drive_link }}{% endif %}">
+          <input type="text" id="google-drive-link" name="google_drive_link" placeholder="Link" value="{% if asset and asset.google_drive_link %}{{ asset.google_drive_link }}{% endif %}">
         </div>
       </div>
     </div>

diff --git a/templates/created.html b/templates/created.html
@@ -13,14 +13,14 @@ <h2>Failed to upload {{failed|length}} assets</h2>
   </div>
   {% endif %}
   {% if assets %}
-  <div class="row">
+  <div class="p-equal-height-row">
     <h2>{{assets|length}} assets created</h2>
     {% include "_asset-list.html" %}
   </div>
   {% endif %}
 
   {% if existing %}
-  <div class="row">
+  <div class="p-equal-height-row">
     {% set assets = existing %}
     <h2>{{existing|length}} existing assets</h2>
     {% include "_asset-list.html" %}

diff --git a/templates/details.html b/templates/details.html
@@ -0,0 +1,58 @@
+{% extends "_layout.html" %}
+
+{% block title %}Asset details{% endblock %}
+
+{% block content %}
+<div class="p-strip is-shallow">
+  <div class="row">
+    <div class="col-4">
+      <h2>Asset details</h2>
+      {% if asset.data.image %}
+      <a href="/v1/{{ asset.file_path }}" target="_blank">
+        <img
+          src="/v1/{{ asset.file_path }}"
+        />
+      </a>
+      {% endif %}
+      <p>File path:<strong>{{ asset.file_path }}</strong></p>
+      <p>Name: <strong>{{ asset.name }}</strong></p>
+      <p>File type: <strong>.{{ asset.file_path.split('.', 1)[1] }}</strong></p>
+      <p>Asset type: <strong>{{ asset.asset_type }}</strong></p>
+      <p>Image size: <strong>{% if asset.data.width and asset.data.height %}{{asset.data.width}} x {{asset.data.height}}{% else %}Unknown{% endif %}</strong></p>
+      <p>
+        Products:
+        {% for product in asset.products %}
+        <strong>{{ product.name }}{% if not loop.last %},{% endif %}</strong>
+        {% endfor %}
+      </p>
+      <p>
+        Tags: 
+        {% for tag in asset.tags %}
+        <strong>{{ tag.name }}{% if not loop.last %},{% endif %}</strong>
+        {% endfor %}
+      </p>
+      <p>Language: <strong>{{ asset.language }}</strong></p>
+      <p>Salesforce campaign ID: <strong>{{ asset.salesforce_campaign_id }}</strong></p>
+      <p>Google drive link: <a href="{{ asset.google_drive_link }}">{{ asset.google_drive_link }}</a></p>
+      <p>Author email: <strong>{{ asset.author_email }}</strong></p>
+      <p>Deprecated: <strong>{{ asset.deprecated }}</strong></p>
+      <p>Created: {{ asset.created.strftime('%d %B %Y') }}</p>
+      <p>Updated: {{ asset.updated.strftime('%d %B %Y') }}</p>
+      <p style="height:100%">
+        <button
+          class="p-button--positive copy-link is-dense"
+          data-url="/v1/{{ asset.file_path }}"
+        >
+          Asset link
+        </button>
+        <a
+        class="p-button is-dense"
+        href="/manager/update?file-path={{ asset.file_path }}"
+        >
+          Edit asset
+        </a>
+      </p>
+    </div>
+  </div>
+</div>
+{% endblock %}
diff --git a/templates/index.html b/templates/index.html
@@ -34,7 +34,7 @@
   </div>
 </div>
 <div class="p-strip is-shallow">
-  <div class="row u-clearfix">
+  <div class="p-equal-height-row">
     {% if assets %}
       {% include "_asset-list.html" %}
     {% elif request.values.get("q", None) %}

diff --git a/templates/update.html b/templates/update.html