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

Add overflow mode

Browse Source
This commit is contained in:
Kuba Orlik 2022-01-02 20:41:44 +01:00
parent 19b04a89cf
commit 6d2e3034fe
1 changed files with 87 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
generator.html
View File

@ -7,9 +7,49 @@
* {
font-family: sans-serif;
}
#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;
height: calc(var(--scale) * var(--overflow-height)) !important;
grid-template-rows: 1fr 10fr;
background-color: var(--yellow);
}
#container.overflow #text_box {
grid-column: 2;
}
#container.overflow #image_box {
grid-column: 1/4;
}
#text_box {
background-color: white;
padding-top: var(--padding);
}
</style>
</head>
<body style="--yellow: #ffee2c; --scale: 2; --padding: 20px; display: flex">
<body
style="
--yellow: #ffee2c;
--scale: 2;
--padding: 20px;
--width: 100px;
--height: 100px;
--overflow-width: 150px;
--overflow--height: 150px;
display: flex;
"
>
<section style="margin-right: 20px">
<h1>Generator kart na social media</h1>
<textarea id="text" style="width: 600px; height: 120px">
@ -24,6 +64,11 @@ Treść komunikatu</textarea
<option value="2" selected>2x</option>
<option value="3">3x</option>
</select>
<input type="checkbox" id="overflow" onchange="reoverflow()" /><label
for="overflow"
>
Tryb overflow
</label>
</section>
<section>
<h2>Twitter</h2>
@ -32,14 +77,13 @@ Treść komunikatu</textarea
style="
box-sizing: border-box;
border: calc(var(--padding) * var(--scale)) solid var(--yellow);
padding: calc(var(--padding) * var(--scale))
calc(var(--padding) * var(--scale)) 0
calc(var(--padding) * var(--scale));
display: flex;
flex-flow: column;
width: calc(var(--scale) * var(--width));
height: calc(var(--scale) * var(--height));
"
>
<div>
<div id="text_box">
<img
src="./logo.png"
width="80"
@ -49,8 +93,7 @@ Treść komunikatu</textarea
height: calc(var(--scale) * 80px);
width: calc(var(--scale) * 80px);
padding-right: var(--padding);
margin-top: calc(-1 * var(--scale) * var(--padding));
margin-left: calc(-1 * var(--scale) * var(--padding));
margin-top: calc(-1 * var(--padding));
"
/>
<p
@ -61,13 +104,8 @@ Treść komunikatu</textarea
</p>
</div>
<div
style="
flex-grow: 1;
position: relative;
overflow: hidden;
margin-left: calc(-1 * var(--scale) * var(--padding));
margin-right: calc(-1 * var(--scale) * var(--padding));
"
id="image_box"
style="flex-grow: 1; position: relative; overflow: hidden"
>
<div
id="image_blur"
@ -97,11 +135,24 @@ Treść komunikatu</textarea
</section>
</body>
<script>
const body = document.querySelector("body");
const sizes = {
"Twitter - 1 zdjęcie": [512, 313],
"Twitter - 2 zdjęcia": [377, 434],
"LinkedIn - 1 zdjęcie": [540, 346],
"LinkedIn - 2 zdjęcia": [270, 552],
"Twitter - 1 zdjęcie": {
thumbnail_size: [512, 313],
overflow_size: [1024, 768],
},
"Twitter - 2 zdjęcia": {
thumbnail_size: [377, 434],
overflow_size: [1024, 768],
},
"LinkedIn - 1 zdjęcie": {
thumbnail_size: [540, 346],
overflow_size: [733, 723],
},
"LinkedIn - 2 zdjęcia": {
thumbnail_size: [270, 552],
overflow_size: [733, 723],
},
};
for (const value of Object.keys(sizes)) {
@ -132,12 +183,13 @@ Treść komunikatu</textarea
};
const resize = () => {
const scale = parseInt(
document.querySelector("body").style.getPropertyValue("--scale")
);
const [width, height] = sizes[size.value];
container.style.width = scale * width + "px";
container.style.height = scale * height + "px";
const scale = parseInt(body.style.getPropertyValue("--scale"));
const [width, height] = sizes[size.value].thumbnail_size;
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("--overflow-width", overflow_width + "px");
body.style.setProperty("--overflow-height", overflow_height + "px");
};
function rescale() {
@ -147,12 +199,23 @@ Treść komunikatu</textarea
resize();
}
function reoverflow() {
const should_overflow = overflow.checked;
if (should_overflow) {
container.classList.add("overflow");
} else {
container.classList.remove("overflow");
}
}
refreshText();
refreshImage();
resize();
rescale();
reoverflow();
text.oninput = refreshText;
file.onchange = refreshImage;
/* [1014, 723] -- linked in */
</script>
</html>