Implement selecting template for collage #14

Merged
balki merged 6 commits from template-chooser into main 2023-09-06 23:59:07 -04:00
2 changed files with 56 additions and 24 deletions
Showing only changes of commit a8f9d87b47 - Show all commits

View File

@ -13,19 +13,6 @@
height: 11in; height: 11in;
--> -->
<style> <style>
.image-surface {
overflow: hidden;
margin: auto;
background-color: lightgreen;
}
.imagebox {
grid-area: image;
display:flex;
align-items: center;
justify-content: center;
padding: 50px;
flex: 70%;
}
.container { .container {
display: flex; display: flex;
background-color: lightyellow; background-color: lightyellow;
@ -34,18 +21,63 @@
.controls { .controls {
background-color: lightgrey; background-color: lightgrey;
display: flex; display: flex;
grid-area: controls;
align-items: center; align-items: center;
balki marked this conversation as resolved Outdated
Outdated
Review

remove onChange

remove onChange
justify-content: center; justify-content: center;
flex: 30%; flex: 30%;
} }
.imagebox {
padding: 2rem;
flex: 70%;
}
.image-surface {
overflow: hidden;
margin: auto;
border: 2px solid;
height: 100%;
width: 100%;
}
balki marked this conversation as resolved Outdated
Outdated
Review

Remove empty line inside div

Remove empty line inside div
.showbuton { .showbuton {
font-size: 2rem; font-size: 2rem;
} }
// paper sizes
.letter-portrait { .letter-portrait {
height: 100%;
aspect-ratio: 85 / 110; aspect-ratio: 85 / 110;
} }
.letter-landscape {
aspect-ratio: 110 / 85;
}
.fiveseven-portrait {
aspect-ratio: 5 / 7;
}
.fiveseven-landscape {
aspect-ratio: 7 / 5;
}
.foursix-portrait {
aspect-ratio: 4 / 6;
}
.foursix-landscape {
aspect-ratio: 6 / 4;
}
.half-landscape {
display:flex;
}
.half-landscape .collage-img {
flex: 50%;
}
.one-two {
display: grid;
grid-template-areas:
"one two"
"one three";
}
.one-two .img1{
grid-area: one;
}
.letter-portrait .collage-img { .letter-portrait .collage-img {
height: 50%; height: 50%;
} }
@ -75,12 +107,12 @@
</div> </div>
</div> </div>
<div class="imagebox"> <div class="imagebox">
<div id="collage" class="image-surface letter-landscape-2"> <div id="collage" class="image-surface fiveseven-landscape one-two">
<div class="collage-img img1" data-collage-image-url="images/img1.jpg"> <div class="collage-img img1" data-collage-image-url="images/img1.jpg">
<!-- <img src="img1.jpg"> -->
</div> </div>
<div class="collage-img img2" data-collage-image-url="images/img2.jpg"> <div class="collage-img img2" data-collage-image-url="images/img2.jpg">
<!-- <img src="img2.jpg"> --> </div>
<div class="collage-img img3" data-collage-image-url="images/img3.jpg">
</div> </div>
</div> </div>
</div> </div>

View File

@ -63,8 +63,8 @@ function snap() {
req = { req = {
background_image: "", background_image: "",
aspect: { aspect: {
width: 528 * 4 * 2, width: 3150,
height: 816 * 4, height: 2250,
}, },
dimension: { dimension: {
width: collageDiv.clientWidth, width: collageDiv.clientWidth,