Re-do the menu bar and the alternates button

Make them more responsive, and make the alternates smaller.
aliftype · Nov 10, 2024 · d852877 · d852877
1 parent 469f1d8
commit d852877
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 50 deletions.
diff --git a/_layouts/app.html b/_layouts/app.html
@@ -55,7 +55,9 @@ <h1>{{ messages.foundry }}</h1>
           <div class="left">
             {% for option in config.app.toolbar %}
                 <input type="checkbox" class="opts" id="{{ option }}">
-                <label for="{{ option }}" title="{{ messages.app[option] }}"></label>
+                <label for="{{ option }}" title="{{ messages.app[option] }}">
+                    <img src="/assets/images/app/{{ option }}.svg" alt="{{ messages.app[option] }}">
+                </label>
             {% endfor %}
           </div>
         </div>

diff --git a/_sass/button.scss b/_sass/button.scss
@@ -10,18 +10,31 @@
   height: 50px;
   padding: 12px 16px;
   text-align: center;
+}
+
+.left label {
+  position: relative;
+}
+
+label img {
+  height: 50%;
+  max-width: revert;
   vertical-align: middle;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
 }
 
 input[type=checkbox]+label {
   display: inline-block;
   cursor: pointer;
-  padding: 12px 16px;
+  padding-left: 12px;
+  padding-right: 12px;
   width: 25px;
-  height: 25px;
-  background-repeat: no-repeat;
-  background-size: 50%;
-  background-position: center;
+  height: 100%;
   transition: 0.3s;
   opacity: 0.4;
 }
diff --git a/app/TextView.js b/app/TextView.js
@@ -158,12 +158,15 @@ class Layout {
       let extents = this._font.getGlyphExtents(glyph)
       let ns = "http://www.w3.org/2000/svg";
       let svg = document.createElementNS(ns, "svg");
+
+      let height = this.clipAscender + this.clipDescender;
       svg.setAttribute("xmlns", ns);
       svg.setAttributeNS(ns, "version", '1.1');
       svg.setAttributeNS(ns, "width", extents.width);
-      svg.setAttributeNS(ns, "height", this.clipAscender + this.clipDescender);
+      svg.setAttributeNS(ns, "height", height);
 
-      let x = -extents.x_bearing, y = this.ascender;
+      let x = -extents.x_bearing
+      let y = extents.y_bearing + (height + extents.height) / 2;
       let path = document.createElementNS(ns, "path");
       path.setAttributeNS(ns, "transform", `translate(${x},${y})`);
       path.setAttributeNS(ns, "d", this._font.getGlyphOutline(glyph));
@@ -554,19 +557,26 @@ export class View {
       let div = document.createElement("div");
       div.className = "alternates-group"
       alternates.appendChild(div);
+
+      const style = getComputedStyle(div);
+      const cellSize = style.getPropertyValue("--cell-size");
+      const columns = Math.floor((parseInt(style.width) + parseInt(style.columnGap)) / (parseInt(cellSize) + parseInt(style.columnGap)));
+
+      div.style.gridTemplateColumns = `repeat(${columns}, ${cellSize}px)`;
       for (let i = 0; i < alts.length; i++) {
         let alt = alts[i];
         let button = document.createElement("a");
         let setting = feature + "=" + i;
 
         button.title = setting;
         button.href = "#";
+        button.style.width = button.style.height = `${cellSize}px`;
+        div.appendChild(button);
 
         let img = document.createElement('img');
-        img.height = 70;
         img.src = this._layout.getGlyphSVG(alt);
+        img.height = cellSize * .9;
         button.appendChild(img);
-        div.appendChild(button);
 
         button.onclick = e => {
           e.preventDefault();

diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -141,10 +141,8 @@ footer
   font-family: var(--latin-font);
 }
 
-// App styles
 section {
   overflow: scroll;
-  //height: 100vh;
 }
 
 #toolbar {
@@ -193,58 +191,39 @@ input[type=checkbox]:checked + label {
   opacity: 1;
 }
 
-#nocolor-dots + label {
-  background-image: url(/assets/images/app/nocolor-dots.svg);
-}
-
-#remove-dots + label {
-  background-image: url(/assets/images/app/remove-dots.svg);
-}
-
-#small-dots + label {
-  background-image: url(/assets/images/app/small-dots.svg);
-}
-
-#adjust-dots + label {
-  background-image: url(/assets/images/app/adjust-dots.svg);
-}
-
-#onum + label {
-  background-image: url(/assets/images/app/onum.svg);
-}
-
-#round-dots + label {
-  background-image: url(/assets/images/app/round-dots.svg);
-}
-
 .alternates-header {
   font-family: var(--ui-family);
 }
 
 .alternates-group {
+  --cell-size: 35;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 5px;
   margin-bottom: 5px;
+  width: 100%;
 }
 
 .alternate {
   background-color: var(--button-background-color);
   color: var(--button-color);
-  text-align: center;
   border: none;
-  padding: 5px;
-  display: inline-block;
-  //opacity: 0.7;
   transition: 0.3s;
-}
-
-.alternate.selected img {
-    opacity: 1;
+  position: relative;
 }
 
 .alternate img {
+  vertical-align: middle;
   opacity: 0.4;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.alternate.selected img {
+  opacity: 1;
 }
 
 .alternate:hover,
@@ -290,7 +269,6 @@ input[type=range]::-moz-range-thumb {
   text-align: center;
   border: none;
   border-radius: 25px;
-  height: 25px;
   background: var(--button-background-color);
   color: var(--button-color);
   width: 4ch;
@@ -302,7 +280,7 @@ input[type=range]::-moz-range-thumb {
   -webkit-appearance: none;
 }
 
-@media (max-width: 1100px) {
+@media (max-width: 1200px) {
   footer
   {
     display: revert;
@@ -315,7 +293,7 @@ input[type=range]::-moz-range-thumb {
 
   body {
     grid-template-columns: auto;
-    grid-template-rows: auto;
+    grid-template-rows: auto auto 50px auto auto auto;
     max-width: 700px;
     padding: 0 20px;
     grid-template-areas:
@@ -362,9 +340,7 @@ input[type=range]::-moz-range-thumb {
     margin: revert;
     padding-block-start: 20px;
   }
-}
 
-@media (max-width: 650px) {
   #toolbar {
     flex-direction: column;
   }