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