fontdue-js 2.23.1 → 2.23.2

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.23.2
+
+- Fixed a right-edge gap in the *CharacterViewer* glyph grid.
+
 ## 2.23.1
 
 - Tweaked checkout styling.

package/dist/components/CharacterViewer/index.js

@@ -235,14 +235,31 @@ function CharacterViewerComponent(_ref3) {
   const handleMouseLeave = () => {
     if (selectedGlyph) setActiveGlyph(undefined);
   };
-  const {
-    ref: blocksRef,
-    width: blocksWidth
-  } = useSize();
   const {
     ref: monitorRef,
     width: monitorWidth
   } = useSize();
+
+  // Read the grid's resolved first-track width and expose it as --cell-width
+  // on the blocks container. CSS uses --cell-width as min-height on every
+  // cell so rows have consistent height regardless of cell composition —
+  // without it, rows of all-wide span-N cells would collapse to glyph content
+  // height. We read the grid track instead of measuring an individual cell so
+  // a wide span-N cell at index 0 wouldn't poison the measurement.
+  const blocksRef = (0, _react.useRef)(null);
+  const [cellWidth, setCellWidth] = (0, _react.useState)(null);
+  const measureCell = (0, _react.useCallback)(() => {
+    var _blocksRef$current;
+    const list = (_blocksRef$current = blocksRef.current) === null || _blocksRef$current === void 0 ? void 0 : _blocksRef$current.querySelector('.character-viewer__block__character-list');
+    if (!list) return;
+    const firstTrack = getComputedStyle(list).gridTemplateColumns.split(' ')[0];
+    const width = parseFloat(firstTrack);
+    if (!Number.isNaN(width)) setCellWidth(width);
+  }, []);
+  (0, _react.useEffect)(measureCell, [measureCell]);
+  (0, _resizeObserver.default)(blocksRef, measureCell, {
+    polyfill: typeof window === 'undefined' ? ServerSideResizeObserverPolyfill : null
+  });
   if (!fontStyle) return null;
   const {
     ascender,
@@ -365,9 +382,9 @@ function CharacterViewerComponent(_ref3) {
   })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer_blocks",
     ref: blocksRef,
-    style: {
-      '--width': blocksWidth ?? 600
-    }
+    style: cellWidth ? {
+      '--cell-width': `${cellWidth}px`
+    } : undefined
   }, groups === null || groups === void 0 ? void 0 : groups.map((_ref6, i) => {
     let {
       name,

package/dist/fontdue.css

@@ -1083,10 +1083,12 @@ div[data-component=TypeTesters] {
   margin-left: 1px;
 }
 
+.character-viewer__block__character-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+}
 .character-viewer__block__character-list > div {
-  --size: 1;
-  --item-size: calc(var(--size) / (var(--width) / 60) * 100%);
-  --height: calc(var(--item-size) / var(--size));
+  min-height: var(--cell-width, 60px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1096,25 +1098,20 @@ div[data-component=TypeTesters] {
   text-align: center;
   cursor: default;
   white-space: pre;
-  width: var(--item-size);
-  height: 0;
-  padding-top: calc(var(--height) / 2);
-  padding-bottom: calc(var(--height) / 2);
-  float: left;
   z-index: 0;
   position: relative;
 }
 .character-viewer__block__character-list > div[data-size="2"] {
-  --size: 2;
+  grid-column: span 2;
 }
 .character-viewer__block__character-list > div[data-size="3"] {
-  --size: 3;
+  grid-column: span 3;
 }
 .character-viewer__block__character-list > div[data-size="4"] {
-  --size: 4;
+  grid-column: span 4;
 }
 .character-viewer__block__character-list > div[data-size="5"] {
-  --size: 5;
+  grid-column: span 5;
 }
 @media screen and (min-width: 600px) {
   .character-viewer__block__character-list > div:hover, .character-viewer__block__character-list > div[data-selected=true] {
@@ -1260,7 +1257,7 @@ body[data-fontdue-store-modal=open] {
 @media (min-width: 900px) {
   .store-modal__cart__review {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     grid-auto-rows: min-content;
     grid-gap: 20px;
     align-items: baseline;
@@ -1418,6 +1415,12 @@ body[data-fontdue-store-modal=open] {
   }
 }
 
+@media (max-width: 899px) {
+  .store-modal__cart__coupon-code-input + .store-modal__cart__share {
+    margin-top: 20px;
+  }
+}
+
 .store-modal__container__overlay {
   position: fixed;
   top: 0;
@@ -1653,6 +1656,11 @@ body[data-fontdue-store-modal=open] {
 .store-modal__family__group {
   display: flex;
 }
+@media (max-width: 899px) {
+  .store-modal__family__group {
+    flex-direction: column;
+  }
+}
 
 .store-modal__family__style-button,
 .store-modal__family__family-button,
@@ -1736,11 +1744,6 @@ body[data-fontdue-store-modal=open] {
   grid-column-gap: 10px;
   grid-row-gap: 10px;
 }
-@media (max-width: 899px) {
-  .store-modal__family-button__container {
-    grid-template-columns: auto auto;
-  }
-}
 
 .store-modal__family-button__price,
 .store-modal__family-button__checked {
@@ -1748,11 +1751,12 @@ body[data-fontdue-store-modal=open] {
   display: inline-block;
 }
 
-@media (max-width: 899px) {
-  .store-modal__family-button__label,
-  .store-modal__family-button__price {
-    grid-row: 2;
-  }
+.store-modal__family-button__label {
+  white-space: nowrap;
+}
+
+.store-modal__family-button__price:empty {
+  display: none;
 }
 
 .store-modal__family-button__name {
@@ -1761,7 +1765,7 @@ body[data-fontdue-store-modal=open] {
 }
 @media (max-width: 899px) {
   .store-modal__family-button__name {
-    grid-column: 1/span 2;
+    font-size: 24px;
   }
 }
 
@@ -2330,6 +2334,7 @@ body[data-fontdue-store-modal=open] {
 
 .cart-additions__form {
   display: flex;
+  width: 100%;
 }
 .cart-additions__button {
   white-space: nowrap;
@@ -2379,6 +2384,8 @@ body[data-fontdue-store-modal=open] {
 }
 .cart-additions__field-wrapper {
   z-index: 1;
+  flex: 1;
+  margin-right: -1px;
 }
 .cart-additions__state-icon {
   position: absolute;
@@ -2430,10 +2437,10 @@ body[data-fontdue-store-modal=open] {
   line-height: normal;
 }
 .cart-additions__field {
-  margin-right: -1px;
   padding-right: 35px;
   font-family: inherit;
   min-width: 0;
+  width: 100%;
 }
 .cart-additions[data-status=error] .cart-additions__field {
   color: var(--error_color);
@@ -2475,6 +2482,19 @@ body[data-fontdue-store-modal=open] {
   border-top: 1px solid var(--horizontal_rule_color);
   padding-top: 40px;
 }
+@media (max-width: 899px) {
+  .cart-item {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    column-gap: 20px;
+    align-items: baseline;
+  }
+}
+@media (max-width: 899px) {
+  > div:has(> .cart-item__licenses) {
+    grid-column: 1/-1;
+  }
+}
 @media (min-width: 900px) {
   .cart-item {
     display: grid;
@@ -2504,6 +2524,12 @@ body[data-fontdue-store-modal=open] {
 .cart-item__label {
   color: var(--styles-count-color, var(--secondary_text_color));
 }
+@media (max-width: 899px) {
+  .cart-item__product {
+    grid-column: 1;
+    margin-bottom: 20px;
+  }
+}
 .cart-item__name {
   font-size: 1em;
   margin-top: 30px; /* line up to the baseline of next column */
@@ -2667,11 +2693,12 @@ body[data-fontdue-store-modal=open] {
 .cart-item__license-variable__loading {
   padding: 10px;
 }
-.cart-item__price {
-  margin-top: 20px;
-}
-.cart-item:first-child .cart-item__price {
-  margin-top: 0;
+@media (max-width: 899px) {
+  .cart-item__price {
+    grid-column: 2;
+    grid-row: 1;
+    text-align: right;
+  }
 }
 @media (min-width: 900px) {
   .cart-item__price {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.23.1",
+  "version": "2.23.2",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",