Ratio fixes
This commit is contained in:
parent
bce498561f
commit
0ed1e5b6f0
103
generator.html
103
generator.html
|
|
@ -17,6 +17,15 @@
|
|||
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;
|
||||
--ratio: calc(var(--width-int) / var(--height-int));
|
||||
|
|
@ -40,20 +49,31 @@
|
|||
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: 1fr min-content;
|
||||
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 {
|
||||
|
|
@ -64,11 +84,8 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.guides .overlay {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.overlay--margin {
|
||||
display: none;
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
#ccc,
|
||||
|
|
@ -78,6 +95,11 @@
|
|||
);
|
||||
}
|
||||
|
||||
.guides .overflow .overlay--margin,
|
||||
.guides .overlay--thumbnail {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.overlay--margin-right {
|
||||
grid-area: margin-right;
|
||||
}
|
||||
|
|
@ -90,6 +112,12 @@
|
|||
grid-area: thumbnail;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.guides #container:not(.overflow) .overlay--thumbnail {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body
|
||||
|
|
@ -129,40 +157,23 @@ Treść komunikatu</textarea
|
|||
>
|
||||
Pokaż prowadnice
|
||||
</label>
|
||||
<pre id="stats"></pre>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Twitter</h2>
|
||||
<div
|
||||
id="container"
|
||||
style="
|
||||
box-sizing: border-box;
|
||||
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);
|
||||
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;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
id="image_box"
|
||||
|
|
@ -242,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])}")`;
|
||||
|
|
@ -260,6 +272,7 @@ Treść komunikatu</textarea
|
|||
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() {
|
||||
|
|
@ -267,6 +280,7 @@ Treść komunikatu</textarea
|
|||
.querySelector("body")
|
||||
.style.setProperty("--scale", scale_picker.value);
|
||||
resize();
|
||||
restats();
|
||||
}
|
||||
|
||||
function reoverflow() {
|
||||
|
|
@ -276,6 +290,7 @@ Treść komunikatu</textarea
|
|||
} else {
|
||||
container.classList.remove("overflow");
|
||||
}
|
||||
restats();
|
||||
}
|
||||
|
||||
function reguides() {
|
||||
|
|
@ -285,6 +300,29 @@ Treść komunikatu</textarea
|
|||
} 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();
|
||||
|
|
@ -293,6 +331,7 @@ Treść komunikatu</textarea
|
|||
rescale();
|
||||
reoverflow();
|
||||
reguides();
|
||||
restats();
|
||||
|
||||
text.oninput = refreshText;
|
||||
file.onchange = refreshImage;
|
||||
|
|
|
|||
Loading…
Reference in New Issue