@tacc/core-styles 2.8.0 → 2.9.0

package/src/lib/_imports/trumps/s-image-grid/readme.md

@@ -0,0 +1,12 @@
+A block or list of links that each have an image.
+
+The grid supports, without change to layout:
+
+- large and small images
+- markup with or without `<ul>` and `<li>`'s
+
+The grid supports user input to change layout:
+
+- `--row-height`: row height (hint: `1fr` gives equal-height rows)
+- `--min-width`: minimum width (the smallest width for an image)
+- `--max-cols`: maximum columns (the maximum number of columns)

package/src/lib/_imports/trumps/s-image-grid/s-image-grid.hbs

@@ -0,0 +1,145 @@
+<dl>
+  <dt>
+    Images Use Full-Size URLs<br />
+    <small><ul>
+      <li>images are larger, so (by default) row height will be taller</li>
+      <li>link <code>href</code> matches image </code>src</code> (not sensible, but usage via a cms plugin create such markup if a user does not add links)</li>
+    </ul></small>
+  </dt>
+  <dd>
+    <div class="s-image-grid s-image-grid--links-are-automatic">
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img large=true }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img large=true wide=true }}
+      </a>
+      <a href="{{> @img-url large=true tall=true }}" target="_blank">
+        {{> @img large=true tall=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img large=true }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img large=true wide=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img large=true }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img large=true wide=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img large=true }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img large=true wide=true }}
+      </a>
+      <a href="{{> @img-url large=true tall=true }}" target="_blank">
+        {{> @img large=true tall=true }}
+      </a>
+    </div>
+  </dd>
+  <dt>
+    Images Use Thumbnail URLs<br />
+    <small><ul>
+      <li>images are smaller, so (by default) row height will be shorter</li>
+      <li>link <code>href</code> is to a larger-size image than the image </code>src</code> (expected markup)</li>
+    </ul></small>
+  </dt>
+  <dd>
+    <div class="s-image-grid s-image-grid--links-are-manual">
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img wide=true }}
+      </a>
+      <a href="{{> @img-url large=true tall=true }}" target="_blank">
+        {{> @img tall=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img wide=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img wide=true }}
+      </a>
+      <a href="{{> @img-url large=true }}" target="_blank">
+        {{> @img }}
+      </a>
+      <a href="{{> @img-url large=true wide=true }}" target="_blank">
+        {{> @img wide=true }}
+      </a>
+      <a href="{{> @img-url large=true tall=true }}" target="_blank">
+        {{> @img tall=true }}
+      </a>
+    </div>
+  </dd>
+  <dt>
+    Grid is a List<br />
+    <small><ul>
+      <li>this grid should look identical to "Images Use Thumbnail URLs"</li>
+      <li>the markup is different, though (this uses &lt;ul&gt; and &lt;li&gt;'s)</li>
+    </ul></small>
+  </dt>
+  <dd>
+    <ul class="s-image-grid s-image-grid--links-are-manual">
+      <li>
+        <a href="{{> @img-url large=true }}" target="_blank">
+          {{> @img }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true wide=true }}" target="_blank">
+          {{> @img wide=true }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true tall=true }}" target="_blank">
+          {{> @img tall=true }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true }}" target="_blank">
+          {{> @img }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true wide=true }}" target="_blank">
+          {{> @img large=true wide=true }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true }}" target="_blank">
+          {{> @img }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true wide=true }}" target="_blank">
+          {{> @img wide=true }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true }}" target="_blank">
+          {{> @img }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true wide=true }}" target="_blank">
+          {{> @img wide=true }}
+        </a>
+      </li>
+      <li>
+        <a href="{{> @img-url large=true tall=true }}" target="_blank">
+          {{> @img tall=true }}
+        </a>
+      </li>
+    </ul>
+  </dd>
+</dl>

package/src/lib/_imports/trumps/s-image-grid.css

@@ -0,0 +1,45 @@
+@import url("../tools/x-grid.css");
+
+
+
+/* Grid Layout */
+
+.s-image-grid {
+  @extend .x-grid--layout-cols-equal-min-width-max-count;
+
+  /*
+  --gap: var(--global-space--grid-gap);
+  --max-cols: 7;
+  --min-width: 250px;
+  --row-height: auto;
+  */
+}
+.s-image-grid * {
+  max-width: 100%; /* effectual if cell width is smaller than content */
+  max-height: 100%; /* effectual if cell height is smaller than content */
+}
+
+
+
+/* List Layout */
+
+ul.s-image-grid {
+  padding-inline-start: unset; /* undo browser styles */
+  margin-bottom: unset; /* undo core-styles.base.css */
+}
+ul.s-image-grid > li {
+  list-style: none;
+}
+
+
+
+/* Image Layout */
+
+.s-image-grid > a,
+.s-image-grid > li,
+.s-image-grid > li > a {
+  /* So image is horizontally centered */
+  align-items: center;
+  display: flex; /* FAQ: `grid` would allow overflow; `flex` does not */
+  justify-content: center;
+}