icd/social-media-cards
2
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

Ratio fixes

Browse Source
This commit is contained in:
Kuba Orlik 2022-01-20 17:18:12 +01:00
parent bce498561f
commit 0ed1e5b6f0
1 changed files with 71 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
generator.html
View File

@ -17,6 +17,15 @@
font-family: Poppins; 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 { #container.overflow {
display: grid !important; display: grid !important;
--ratio: calc(var(--width-int) / var(--height-int)); --ratio: calc(var(--width-int) / var(--height-int));
@ -40,20 +49,31 @@
grid-row: 1; 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 { #container.overflow #image_box {
grid-column: 1/4; grid-column: 1/4;
grid-row: 2; grid-row: 2;
} }
#text_box { #text_box {
background-color: var(--yellow); background-color: black;
color: #fff; color: white;
display: grid; border-top: var(--padding) solid var(--yellow);
grid-template-columns: 1fr min-content; border-bottom: var(--padding) solid var(--yellow);
} }
#text_target { #logo {
background-color: #000; 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 { .overlay {
@ -64,11 +84,8 @@
display: none; display: none;
} }
.guides .overlay {
display: block;
}
.overlay--margin { .overlay--margin {
display: none;
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(
45deg, 45deg,
#ccc, #ccc,
@ -78,6 +95,11 @@
); );
} }
.guides .overflow .overlay--margin,
.guides .overlay--thumbnail {
display: block;
}
.overlay--margin-right { .overlay--margin-right {
grid-area: margin-right; grid-area: margin-right;
} }
@ -90,6 +112,12 @@
grid-area: thumbnail; grid-area: thumbnail;
color: blue; color: blue;
} }
.guides #container:not(.overflow) .overlay--thumbnail {
position: absolute;
height: 100%;
width: 100%;
}
</style> </style>
</head> </head>
<body <body
@ -129,40 +157,23 @@ Treść komunikatu</textarea
> >
Pokaż prowadnice Pokaż prowadnice
</label> </label>
<pre id="stats"></pre>
</section> </section>
<section> <section>
<h2>Twitter</h2> <h2>Twitter</h2>
<div <div id="container" style="">
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="text_box"> <div id="text_box">
<img src="./logo.png" id="logo" />
<p <p
id="text_target" id="text_target"
style=" style="
font-size: calc(var(--scale) * 16px); 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 Treść komunikatu
</p> </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>
<div <div
id="image_box" id="image_box"
@ -242,6 +253,7 @@ Treść komunikatu</textarea
function refreshText() { function refreshText() {
text_target.innerHTML = text.value.replace(/\n/, "<br/>"); text_target.innerHTML = text.value.replace(/\n/, "<br/>");
restats();
} }
const refreshImage = async () => { const refreshImage = async () => {
image.style.backgroundImage = `url("${await toBase64(file.files[0])}")`; 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("--height-int", height);
body.style.setProperty("--overflow-width", overflow_width + "px"); body.style.setProperty("--overflow-width", overflow_width + "px");
body.style.setProperty("--overflow-height", overflow_height + "px"); body.style.setProperty("--overflow-height", overflow_height + "px");
restats();
}; };
function rescale() { function rescale() {
@ -267,6 +280,7 @@ Treść komunikatu</textarea
.querySelector("body") .querySelector("body")
.style.setProperty("--scale", scale_picker.value); .style.setProperty("--scale", scale_picker.value);
resize(); resize();
restats();
} }
function reoverflow() { function reoverflow() {
@ -276,6 +290,7 @@ Treść komunikatu</textarea
} else { } else {
container.classList.remove("overflow"); container.classList.remove("overflow");
} }
restats();
} }
function reguides() { function reguides() {
@ -285,6 +300,29 @@ Treść komunikatu</textarea
} else { } else {
body.classList.remove("guides"); 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(); refreshText();
@ -293,6 +331,7 @@ Treść komunikatu</textarea
rescale(); rescale();
reoverflow(); reoverflow();
reguides(); reguides();
restats();
text.oninput = refreshText; text.oninput = refreshText;
file.onchange = refreshImage; file.onchange = refreshImage;