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>