feat: des-2697 s-app-card & bootstrap 3 has-row--col-stretch-content-y (

#304)

* feat: DES-2697 s-app-card (structure)

* fix: row-col-stretch-content-y should affect .col-

Bootstrap allows `col-` classes without `col`. So, support those too.

* fix: row-col-stretch-content-y for bootstrap 3

https://stackoverflow.com/a/22892773/11817077

* fix: row-col-stretch-content-y for bootstrap 3

https://stackoverflow.com/a/22892773/11817077

* fix: .has-row--col-stretch-content-y .row

https://stackoverflow.com/a/22892773/11817077

* refactor: DES-2697 center once, ref title not icon

* fix: simpler has-row--col-… selector

* fix: DES-2697 larger feature bullets

* refactor: DES-2697 feature layout and bullets

* fix: DES-2697 tags to fill space + align bottom

* refactor: DES-2697 feat space-around, limit height

* fix: DES-2697 only-child tags to fill + be aligned

* feat: DES-2697 smaller bullet

* feat: DES-2697 rename feats to items

* feat: DES-2697 set padding for items list

* feat: DES-2697 rename items to list

* fix: DES-2697 build dits

* feat: DES-2697 unset padding for items list

* docs: DES-2697 better comment

* chore: rebuild after merging main

* feat: DES-2697 use Bootstrap 4 grid layout

src/lib/_imports/components/bootstrap.row.css

@@ -1,5 +1,16 @@
 @import url('./bootstrap.col.css');
 
+/* BOOTSTRAP 4 */
+/* Add this class to the row in need */
 .row-col-stretch-content-y .col {
   @extend .col-stretch-content-y;
 }
+
+/* BOOTSTRAP 3 */
+/* Add this class to any containing element */
+/* NOTE: DesignSafe CMS Admin can not add class on Bootstrap 3 grid elements */
+/* https://stackoverflow.com/a/22892773/11817077 */
+.has-row--col-stretch-content-y .row:has([class^="col-"]) {
+  display: flex;
+  flex-wrap: wrap;
+}

src/lib/_imports/tools/selectors.common.css

@@ -7,7 +7,8 @@ These are global selectors to target common elements.
 
 Styleguide Tools.CustomSelectors.MultipleElements
 */
-@custom-selector :--action   button, a;
-@custom-selector :--main-content   [role="main"], main;
-@custom-selector :--portal-content   #root;
-@custom-selector :--modal   .modal;
+@custom-selector :--action          button, a;
+@custom-selector :--main-content    [role="main"], main;
+@custom-selector :--portal-content  #root;
+@custom-selector :--modal           .modal;
+@custom-selector :--heading         :is(h1, h2, h3, h4, h5, h6);

src/lib/_imports/trumps/s-app-card.css

@@ -0,0 +1,111 @@
+@import url("../tools/selectors.common.css");
+
+
+
+@custom-selector :--s-app-card
+  .s-app-card,
+  .app-card,
+  [class*="app-card--"];
+
+@custom-selector :--s-app-card__title
+  :--s-app-card > :--heading;
+
+@custom-selector :--s-app-card__desc
+  :--s-app-card > p;
+
+@custom-selector :--s-app-card__list
+  :--s-app-card > ul:not(:last-of-type);
+
+@custom-selector :--s-app-card__tags
+  :--s-app-card > ul:last-of-type;
+@custom-selector :--s-app-card__tags--no-list
+  :--s-app-card > ul:only-of-type;
+
+@custom-selector :--s-app-card__link
+  :--s-app-card > a:last-child;
+
+
+
+/* Layout */
+:--s-app-card {
+  display: flex;
+  flex-direction: column;
+
+  text-align: center;
+}
+:--s-app-card__list {
+  flex-grow: 1;
+}
+
+
+
+/* Title */
+:--s-app-card__title > .icon {
+  vertical-align: middle;
+}
+
+
+
+/* Items */
+:--s-app-card__list {
+  padding-inline-start: 0;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  /* To achieve `height: min-content` and `space-around` */
+  margin-block: auto;
+  flex-grow: 0;
+}
+:--s-app-card__list > li {
+  display: inline;
+}
+:--s-app-card__list > li:not(:last-child)::after {
+  content: "•";
+  display: inline;
+  margin-inline: 0.25em;
+}
+
+
+
+/* Tags */
+:--s-app-card__tags {
+  list-style: none;
+  padding-inline-start: 0;
+  margin-block: unset;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+:--s-app-card__tags--no-list {
+  /* To fill parent with this item, but keep text aligned to bottom */
+  flex-grow: 1;
+  align-items: end;
+}
+:--s-app-card__tags > li:where(
+  :not(:first-child),
+  :only-child
+) {
+    margin-left: auto;
+}
+
+
+
+/* Links */
+
+/* To stretch a child link atop the entire card */
+:--s-app-card {
+  position: relative;
+}
+:--s-app-card__link {
+  position: absolute;
+  user-select: none;
+  color: transparent;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

src/lib/_imports/trumps/s-app-card/config.yml

@@ -0,0 +1,79 @@
+status: prototype
+context:
+  shouldSkipPattern: false
+  📝 shouldSkipPattern: because core-styles.….css does not import this
+  shouldLoadBootstrap: true
+  📝 shouldLoadBootstrap: to use Bootstrap 4 grid for layout
+  supportStyles:
+    - ../../assets/components/bootstrap.row.css
+    - ../../assets/components/cortal.icon.css
+  can-wrap-in-a-link: false
+  data:
+    - title: ADCIRC
+      desc: Widely applied coastal circulation and coastal flooding model.
+      feats:
+        - Storm Surge
+        - Hurricane
+        - Flood
+      tags:
+        - Popular
+        - Open Source
+    - title: ANSYS
+      icon: ansys
+      desc: Widely applied coastal circulation and coastal flooding model.
+      tags:
+        - Licensed
+    - title: ClawPack
+      icon: clawpack
+      desc: Model and simulate coastal and oceanic processes.
+      feats:
+        - Tsunami
+        - Storm Surge
+        - Flood
+      tags:
+        - Open Source
+    - title: Hazmapper
+      icon: hazmapper
+      desc: Visualize, analyze, and share geospatial data.
+      tags:
+        - Open Source
+    - title: QGIS
+      icon: qgis
+      desc: Create, edit, visualize and analyze geospatial information.
+      tags:
+        - Licensed
+    - title: OpenSEES
+      icon: opensees
+      desc: Advanced seismic and structural analysis
+      feats:
+        - Earthquake
+      tags:
+        - Popular
+        - Open Source
+    - title: LS-DYNA
+      icon: lsdyna
+      desc: Conduct dynamic finite element analysis of complex physics
+      feats:
+        - Earthquake
+        - Landslide
+        - Tsunami
+        - Storm Surge
+      tags:
+        - Licensed
+    - title: OpenFOAM
+      icon: openfoam
+      desc: Simulate and analyze fluid flow and heat transfer
+      feats:
+        - Tsunami
+        - Storm Surge
+        - Flood
+        - Fire
+      tags:
+        - Open Source
+    - title: EE-UQ
+      desc: Determine the response of a structure to an earthquake.
+      feats:
+        - Earthquake
+      tags:
+        - SimCenter
+        - Open Source

src/lib/_imports/trumps/s-app-card/demo.css

@@ -0,0 +1,12 @@
+/* To add vertical gap in Bootstrap 4 grid */
+.col {
+    margin-bottom: var(--global-space--bootstrap-gap);
+}
+.row {
+    margin-bottom: calc( var(--global-space--bootstrap-gap) * -1 );
+}
+
+/* To stretch app card height to match col */
+.col .s-app-card {
+    height: 100%;
+}

src/lib/_imports/trumps/s-app-card/readme.md

@@ -0,0 +1 @@
+A card for an application e.g. a DesignSafe application button / card.

src/lib/_imports/trumps/s-app-card/s-app-card.hbs

@@ -0,0 +1,44 @@
+<div class="container">
+<div class="row row-col-stretch-content-y">
+  {{#each data}}
+    {{#if can-wrap-in-a-link}}
+    <a href="#" class="app-card">
+    {{else}}
+    <div class="col col-12 col-md-6 col-xl-4">
+    <div class="app-card">
+    {{/if}}
+      <h3>
+        {{#if icon}}<i class="icon icon-user"></i>{{/if}}
+        {{!-- FAQ: These custom icons are not available in Cortal --}}
+        {{!-- {{#if icon}}<i class="icon icon-{{icon}}"></i>{{/if}} --}}
+        {{title}}
+      </h3>
+      <p>{{desc}}</p>
+      <ul>
+        {{#each feats}}
+        <li>{{this}}</li>
+        {{else}}
+        <li>&nbsp;</li>
+        {{/each}}
+      </ul>
+      <ul>
+      {{#each tags}}
+        <li>
+        {{#if (eq this "Popular")}}<strong>{{this}}</strong>
+        {{else}}{{this}}
+        {{/if}}
+        </li>
+      {{/each}}
+      </ul>
+      {{#unless can-wrap-in-a-link}}
+        <a href="#">magic link</a>
+      {{/unless}}
+    {{#if can-wrap-in-a-link}}
+    </a>
+    {{else}}
+    </div>
+    </div>
+    {{/if}}
+  {{/each}}
+</div>
+</div>