Update linkedin sizes

Ratio fixes
bardziej opisowe copy na guidsach
2022-03-24 09:40:43 +01:00 · 2022-01-20 17:18:12 +01:00 · 2022-01-15 21:56:11 +01:00 · 2022-01-15 21:54:40 +01:00 · 2022-01-04 19:58:25 +01:00
1 changed files with 145 additions and 44 deletions
--- a/generator.html
+++ b/generator.html
@ -10,24 +10,35 @@
      }

      * {
-        font-family: 'Noto Sans', sans-serif;
+        font-family: "Noto Sans", sans-serif;
      }
-  
+
      p {
        font-family: Poppins;
      }

+      #container {
+        box-sizing: border-box;
+        display: flex;
+        flex-flow: column;
+        width: calc(var(--scale) * var(--width));
+        height: calc(var(--scale) * var(--height));
+        position: relative;
+      }
+
      #container.overflow {
        display: grid !important;
-        grid-template-columns:
-          1fr calc(
-            (
-                var(--width) / var(--height) * var(--overflow-height) - 2 *
-                  var(--padding)
-              ) * var(--scale)
-          )
-          1fr;
-        width: calc(var(--scale) * var(--overflow-width)) !important;
+        --ratio: calc(var(--width-int) / var(--height-int));
+        --thumbnail-width: calc(
+          (var(--ratio) * var(--overflow-height)) * var(--scale)
+        );
+        --full-width: calc(var(--scale) * var(--overflow-width));
+        --margin: calc((var(--full-width) - var(--thumbnail-width)) / 2);
+        grid-template-columns: var(--margin) var(--thumbnail-width) var(
+            --margin
+          );
+        grid-template-areas: "margin-left thumbnail margin-right" "margin-left thumbnail margin-right";
+        width: var(--full-width) !important;
        height: calc(var(--scale) * var(--overflow-height)) !important;
        grid-template-rows: 1fr 10fr;
        background-color: var(--yellow);
@ -35,24 +46,78 @@

      #container.overflow #text_box {
        grid-column: 2;
+        grid-row: 1;
+      }
+
+      #text_target {
+        margin: 0;
+        margin-top: calc(var(--scale) * var(--padding));
+        margin-bottom: calc(var(--scale) * var(--padding));
      }

      #container.overflow #image_box {
        grid-column: 1/4;
+        grid-row: 2;
      }

      #text_box {
-        background-color: var(--yellow);
-        color: #fff;
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        background-color: black;
+        color: white;
+        border-top: var(--padding) solid var(--yellow);
+        border-bottom: var(--padding) solid var(--yellow);
      }

-      #text_target {
-        background-color: #000;
+      #logo {
+        float: right;
+        border-left: var(--padding) solid var(--yellow);
+        border-right: var(--padding) solid var(--yellow);
+        height: calc(var(--scale) * 4 * var(--padding));
+        width: auto;
+        margin: calc(var(--scale) * var(--padding)) 0;
      }

+      .overlay {
+        border: 1px solid red;
+        z-index: 1;
+        text-align: center;
+        opacity: 60%;
+        display: none;
+      }

+      .overlay--margin {
+        display: none;
+        background-image: repeating-linear-gradient(
+          45deg,
+          #ccc,
+          #ccc 30px,
+          #dbdbdb 30px,
+          #dbdbdb 60px
+        );
+      }
+
+      .guides .overflow .overlay--margin,
+      .guides .overlay--thumbnail {
+        display: block;
+      }
+
+      .overlay--margin-right {
+        grid-area: margin-right;
+      }
+
+      .overlay--margin-left {
+        grid-area: margin-left;
+      }
+
+      .overlay--thumbnail {
+        grid-area: thumbnail;
+        color: blue;
+      }
+
+      .guides #container:not(.overflow) .overlay--thumbnail {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+      }
    </style>
  </head>
  <body
@ -63,9 +128,10 @@
      --width: 100px;
      --height: 100px;
      --overflow-width: 150px;
-      --overflow--height: 150px;
+      --overflow-height: 150px;
      display: flex;
    "
+    class="guides"
  >
    <section style="margin-right: 20px">
      <h1>Generator kart na social media</h1>
@ -86,40 +152,28 @@ Treść komunikatu</textarea
      >
        Tryb overflow
      </label>
+      <input type="checkbox" id="guides" onchange="reguides()" checked /><label
+        for="guides"
+      >
+        Pokaż prowadnice
+      </label>
+      <pre id="stats"></pre>
    </section>
    <section>
      <h2>Twitter</h2>
-      <div
-        id="container"
-        style="
-          box-sizing: border-box;
-          border: calc(var(--padding) * var(--scale)) solid var(--yellow);
-          border-top: calc(var(--padding) * var(--scale)/3) solid var(--yellow);
-          display: flex;
-          flex-flow: column;
-          width: calc(var(--scale) * var(--width));
-          height: calc(var(--scale) * var(--height));
-        "
-      >
+      <div id="container" style="">
        <div id="text_box">
+          <img src="./logo.png" id="logo" />
          <p
            id="text_target"
-            style="font-size: calc(var(--scale) * 16px); padding: var(--padding); grid-column: 1/3;"
+            style="
+              font-size: calc(var(--scale) * 16px);
+              padding: 0 calc(var(--padding) * var(--scale));
+              line-height: calc(var(--padding) * var(--scale));
+            "
          >
            Treść komunikatu
          </p>
-          <img
-            src="./logo.png"
-            width="80"
-            height="80"
-            style="
-              height: calc(var(--scale) * 80px);
-              width: calc(var(--scale) * 80px);
-              padding-left: var(--padding);
-              justify-self: flex-end;
-              grid-column: 3;
-            "
-          />
        </div>
        <div
          id="image_box"
@ -149,6 +203,13 @@ Treść komunikatu</textarea
            "
          ></div>
        </div>
+        <div class="overlay overlay--margin overlay--margin-left">
+          ucięte z lewej, widoczne tylko po kliknięciu
+        </div>
+        <div class="overlay overlay--margin overlay--margin-right">
+          ucięte z prawej, widoczne tylko po kliknięciu
+        </div>
+        <div class="overlay overlay--thumbnail">widoczne na miniaturce</div>
      </div>
    </section>
  </body>
@ -168,7 +229,7 @@ Treść komunikatu</textarea
        overflow_size: [733, 723],
      },
      "LinkedIn - 2 zdjęcia": {
-        thumbnail_size: [270, 552],
+        thumbnail_size: [250, 355],
        overflow_size: [733, 723],
      },
    };
@ -192,6 +253,7 @@ Treść komunikatu</textarea

    function refreshText() {
      text_target.innerHTML = text.value.replace(/\n/, "<br/>");
+      restats();
    }
    const refreshImage = async () => {
      image.style.backgroundImage = `url("${await toBase64(file.files[0])}")`;
@ -206,8 +268,11 @@ Treść komunikatu</textarea
      const [overflow_width, overflow_height] = sizes[size.value].overflow_size;
      body.style.setProperty("--width", width + "px");
      body.style.setProperty("--height", height + "px");
+      body.style.setProperty("--width-int", width);
+      body.style.setProperty("--height-int", height);
      body.style.setProperty("--overflow-width", overflow_width + "px");
      body.style.setProperty("--overflow-height", overflow_height + "px");
+      restats();
    };

    function rescale() {
@ -215,6 +280,7 @@ Treść komunikatu</textarea
        .querySelector("body")
        .style.setProperty("--scale", scale_picker.value);
      resize();
+      restats();
    }

    function reoverflow() {
@ -224,6 +290,39 @@ Treść komunikatu</textarea
      } else {
        container.classList.remove("overflow");
      }
+      restats();
+    }
+
+    function reguides() {
+      const should_guides = guides.checked;
+      if (should_guides) {
+        body.classList.add("guides");
+      } else {
+        body.classList.remove("guides");
+      }
+      restats();
+    }
+
+    function restats() {
+      const containerRect = container.getBoundingClientRect();
+      const thumbnailRect = document
+        .querySelector(".overlay--thumbnail")
+        .getBoundingClientRect();
+      const should_overflow = overflow.checked;
+      const overflowWidth = body.style.getPropertyValue("--overflow-width");
+      const overflowHeight = body.style.getPropertyValue("--overflow-height");
+      const basicWidth = body.style.getPropertyValue("--width-int");
+      const basicHeight = body.style.getPropertyValue("--height-int");
+
+      stats.textContent = `szerokość całej grafiki: ${containerRect.width}
+    wysokość całej grafiki: ${containerRect.height}
+    propocje szer/wys całej grafiki:  ${
+      containerRect.width / containerRect.height
+    }
+    zamierzone proporcje miniaturki (szer/wys): ${basicWidth / basicHeight}
+    proporcje obszaru thumbnaila (szer/wys): ${
+      thumbnailRect.width / thumbnailRect.height
+    }`;
    }

    refreshText();
@ -231,6 +330,8 @@ Treść komunikatu</textarea
    resize();
    rescale();
    reoverflow();
+    reguides();
+    restats();

    text.oninput = refreshText;
    file.onchange = refreshImage;
Author	SHA1	Message	Date
Kuba Orlik	c02cb97002	Update linkedin sizes	2022-03-24 09:40:43 +01:00
Kuba Orlik	0ed1e5b6f0	Ratio fixes	2022-01-20 17:18:12 +01:00
Kuba Orlik	bce498561f	bardziej opisowe copy na guidsach	2022-01-15 21:56:11 +01:00
Kuba Orlik	e5adf4449d	Dodanie prowadnic pokazujących, jak wygladają cięcia thumbnaili. Trochę zbugowane, ale jest krok do przodu	2022-01-15 21:54:40 +01:00
Arkadiusz Wieczorek	db6ab4fc19	Merge branch 'poppins-font' into master	2022-01-04 19:58:25 +01:00