feat: des-2737 finish app test page markup & styles (#1208)

* Fix/des 2730 adjust app page styles (#1206) * fix: des-2730 app-card spacing * fix: des-2730 app-card repo italic * fix: des-2730 version-list spacing * fix: des-2730 improve heading visual hierarchy * chore: des-2730 do not load app-card.css globally Because #1199 allows loading it via template. * chore: des-2730 establish s-version-list markup * fix: des-2730 s-version-list neglects html case I just copied this before, but forgot to update it. * fix: des-2730 s-version-list lost padding When button/a was in a `<p>`, the padding came from Bootstrap. But now button/a is not in a `<p>`, so padding must be added. * feat: des-2730 o-app-grid * feat: des-2730 s-app-page overwrite bootstrap grid * feat: des-2730 app-page.css load app-grid.css * Fix/des 2731 integrate plugins and styles (#1205) * fix: des-2731 util class not quick inline styles * fix: des-2731 version list inline styles + html * refactor: des-2731 o-app-grid not u-app-card-grid * fix: des-2735 app page not loading app page css (#1210) * refactor: des-2736 better integrate styles into cms (#1209) * refactor: des-2736 …version-list→…app-version-list * fix: des-2735 app page not loading app page css * refactor: des-2737 move plugin styles → django app - move plugin styles into appropriate django app - load app styles only once per page * fix: des-2737 fix incomplete rename * refactor: des-2737 simplify a too-complex selector * fix: des-2737 support new icons * refactor: des-2737 load app css globally (#1213)
DesignSafe-CI · Apr 22, 2024 · db25814 · db25814
1 parent 6a15778
commit db25814
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 46 deletions.
diff --git a/designsafe/apps/workspace/templates/designsafe/apps/workspace/app_card.html b/designsafe/apps/workspace/templates/designsafe/apps/workspace/app_card.html
@@ -1,5 +1,5 @@
-<a class="c-app-card" href="{{app.href}}" style="width: 230px">
-    <h3 class="c-app-card__title"><i class="icon icon-hazmapper"></i> {{app.label}}</h3>
+<a class="c-app-card" href="{{app.href}}">
+    <h3 class="c-app-card__title"><i class="ds-icon ds-icon-{{app.icon}}"></i> {{app.label}}</h3>
 
     <p class="c-app-card__desc">{{app.description}}</p>
 

diff --git a/designsafe/apps/workspace/templates/designsafe/apps/workspace/app_listing_plugin.html b/designsafe/apps/workspace/templates/designsafe/apps/workspace/app_listing_plugin.html
@@ -1,5 +1,5 @@
 <h2>{{instance.app_category}}</h2>
-<section style="display:flex; gap:30px; flex-wrap: wrap">
+<section class="o-app-grid">
     {% for app in listing %}
     {% include "designsafe/apps/workspace/app_card.html" with app=app %}
     {% endfor %}

diff --git a/designsafe/apps/workspace/templates/designsafe/apps/workspace/app_variant_plugin.html b/designsafe/apps/workspace/templates/designsafe/apps/workspace/app_variant_plugin.html
@@ -1,15 +1,10 @@
-<section style="background-color: #f4f4f4; padding: 25px;">
-    <h3>Select a Version</h3>
+<section class="s-app-version-list">
+    <h2>Select a Version</h2>
     {% for variant in listing %}
     <article>
-        <div style="display:flex; align-items: center; justify-content: space-between;">
-            <h4>{{variant.label}}</h4>
-            <a href="{{variant.href}}"><button class="btn btn-success">Get Started</button></a>
-        </div>
+        <h3>{{variant.label}}</h3>
+        <a class="btn btn-success" href="{{variant.href}}">Get Started</a>
         <p>{{variant.description}}</p>
-        {% if listing.count > forloop.counter %}
-        <hr />
-        {% endif %}
     </article>
     {% endfor %}
 </section>
diff --git a/designsafe/apps/workspace/templates/designsafe/apps/workspace/related_apps_plugin.html b/designsafe/apps/workspace/templates/designsafe/apps/workspace/related_apps_plugin.html
@@ -1,5 +1,5 @@
 <h2>Related Applications</h2>
-<section style="display:flex; gap:30px; flex-wrap: wrap">
+<section class="o-app-grid">
     {% for app in listing %}
     {% include "designsafe/apps/workspace/app_card.html" with app=app %}
     {% endfor %}

diff --git a/designsafe/static/styles/app-card.css b/designsafe/static/styles/app-card.css
@@ -5,16 +5,9 @@
 
 
 
-/* Card */
-/* To stretch card to fill column height */
-[class^="col-"] .c-app-card {
-    height: 100%;
-    min-height: 230px;
-}
-
 /* Title */
 .c-app-card__title {
-    margin-top: 0.5em;
+    margin-top: 1em;
     margin-bottom: 0;
 }
 .c-app-card__title > .icon::before {
@@ -23,7 +16,7 @@
 
 /* Description */
 .c-app-card__desc {
-    padding-inline: 1rem;
+    padding-inline: 1.5rem;
     margin-block: 1.5rem;
 }
 
@@ -89,3 +82,7 @@ a.c-app-card:active {
 .c-app-card__flags > *:has(strong) {
     background-color: #ECE4BF;
 }
+
+.c-app-card__repo {
+    font-style: italic;
+}
diff --git a/designsafe/static/styles/app-grid.css b/designsafe/static/styles/app-grid.css
@@ -0,0 +1,12 @@
+.o-app-grid {
+    display: grid;
+    gap: 30px; /* mimics Bootstrap's gap */
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    justify-content: flex-start;
+
+    margin-bottom: 40px;
+}
+.o-app-grid > * {
+    min-height: 230px;
+    max-width: 350px;
+}
diff --git a/designsafe/static/styles/app-page.css b/designsafe/static/styles/app-page.css
@@ -1,4 +1,5 @@
 @import url("./app-card.css");
+@import url("./app-grid.css");
 @import url("./app-version-list.css");
 
 /* To make width of page content line up with width of header. */
@@ -11,22 +12,35 @@
     color: var(--ds-accent-color, #47a59d);
 }
 .s-app-page h2 {
-    font-size: 2.0rem;
+    font-size: 2.5rem;
+    font-weight: 500; /* e.g. "medium" */
     text-transform: none;
 
     margin-bottom: 30px;
 }
-.s-app-page h2:not(.s-version-list *) {
+.s-app-page h2:not(.s-app-version-list *) {
     color: var(--ds-accent-color, #47a59d);
 
     margin-top: 40px;
     padding-bottom: 16px;
     border-bottom: 2px solid var(--ds-accent-color, #47a59d);
 }
-.s-app-page h3:not(.s-version-list *):not(.c-app-card__title) {
+.s-app-page h3:not(.s-app-version-list *):not(.c-app-card__title) {
+    font-size: 1.8rem;
     margin-top: 40px; /* double Bootstrap h3 margin-top */
 }
 
-p:where(.s-app-page *) {
+.s-app-page p {
     line-height: 1.8;
 }
+
+/* Add more space between Bootstrap columns */
+/* HACK: Overwrite Bootstrap grid */
+.s-app-page [class*="col-"] {
+    padding-left: 30px;
+    padding-right: 30px;
+}
+.s-app-page .row {
+    margin-left: -30px;
+    margin-right: -30px;
+}
diff --git a/designsafe/static/styles/app-version-list.css b/designsafe/static/styles/app-version-list.css
@@ -1,27 +1,38 @@
-.s-version-list {
+/* FAQ: Relies on markup, so CMS can replicate the design */
+
+/* Container */
+.s-app-version-list {
     background-color: #F4F4F4;
     padding: 20px;
 }
-.s-version-list > h2 {
+
+/* List Title */
+.s-app-version-list > h2 {
     color: inherit;
     margin-top: unset;
     padding-bottom: unset;
     border-bottom: unset;
 }
-.s-version-list > article {
-    padding-top: 30px;
+
+/* Version Content Layout */
+.s-app-version-list > article {
     display: grid;
     grid-template-areas:
         "name link"
         "desc desc";
 }
-.s-version-list > article:not(:last-of-type) {
+
+/* Space & Lines Between Versions */
+.s-app-version-list > article:not(:last-of-type) {
     padding-bottom: 15px;
 }
-.s-version-list > *:not(:first-of-type) {
+.s-app-version-list > article:not(:first-of-type) {
+    padding-top: 30px;
     border-top: 1px solid #333333;
 }
-.s-version-list > * > h3 {
+
+/* Version Label */
+.s-app-version-list > article > h3 {
     grid-area: name;
     font-size: 1.6rem;
     font-weight: 500; /* e.g. "medium", Core-Styles `var(--medium)` */
@@ -31,22 +42,26 @@
     display: grid;
     align-content: center;
 }
+
+/* Version Link */
+.s-app-version-list > article > a,
+/* To support manual content via CMS */
 /* FAQ: CMS forces a button or link on its own line to be in a paragraph */
-.s-version-list > * > p:has(
-    a:only-child,
-    button:only-child
-) {
+.s-app-version-list > * > p:has(a:only-child) {
     grid-area: link;
     justify-self: end;
 }
-.s-version-list > * > p:not(:has(
-    a:only-child,
-    button:only-child
-)) {
+.s-app-version-list > article > a {
+    margin-bottom: 10px; /* mimics Bootstrap `p { margin: 0 0 10px; }` */
+}
+.s-app-version-list > * > p:only-of-type,
+/* To support manual content via CMS */
+/* FAQ: CMS forces a button or link on its own line to be in a paragraph */
+.s-app-version-list > * > p:not(:has(a:only-child)) {
     grid-area: desc;
 }
 
 /* Bootstrap */
-.s-version-list .btn {
+.s-app-version-list .btn {
     padding-inline: 24px; /* double Bootstrap .btn padding */
 }
diff --git a/designsafe/templates/base.j2 b/designsafe/templates/base.j2
@@ -35,7 +35,6 @@
       <link rel="stylesheet" href="<%= htmlWebpackPlugin.files.css %>">
       <link href="{% static 'vendor/angular-material/angular-material.css' %}" rel="stylesheet">
       <link href="{% static 'styles/ng-designsafe.css' %}" rel="stylesheet">
-      <link href="{% static 'styles/app-card.css' %}" rel="stylesheet" type="text/css">
       <link href="{% static 'styles/DesignSafe-Icons.css' %}" rel="stylesheet" type="text/css">
       {% block styles %}{% endblock %}
       {% render_block "css" %}

diff --git a/designsafe/templates/cms_page_for_app.html b/designsafe/templates/cms_page_for_app.html
@@ -1,6 +1,9 @@
 {% extends "cms_page.html" %}
 {% load cms_tags static sekizai_tags %}
 {% block page_class %}s-app-page{% endblock page_class %}
-{% addtoblock "css" %}
-<link href="{% static 'styles/app-page.css' %}" rel="stylesheet" />
-{% endaddtoblock %}
+
+{% block styles %}
+    {% addtoblock "css" %}
+    <link href="{% static 'styles/app-page.css' %}" rel="stylesheet" />
+    {% endaddtoblock %}
+{% endblock %}