balki/collage-maker
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

Implement selecting template for collage #14

Merged
balki merged 6 commits from template-chooser into main 2023-09-06 23:59:07 -04:00
Conversation 1 Commits 6 Files Changed 4 +56 -24
2 changed files with 56 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a8f9d87b47 - Show all commits

68
web/index.html
View File

@@ -13,19 +13,6 @@
height: 11in;
-->
<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 {
display: flex;
background-color: lightyellow;
@@ -34,18 +21,63 @@
.controls {
background-color: lightgrey;
display: flex;
grid-area: controls;
align-items: center;
balki marked this conversation as resolved Outdated
balki commented 2023-09-06 23:48:58 -04:00
Outdated
Review
Copy Link

remove onChange

remove onChange
justify-content: center;
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
balki commented 2023-09-06 23:49:54 -04:00
Outdated
Review
Copy Link

Remove empty line inside div

Remove empty line inside div
.showbuton {
font-size: 2rem;
}
// paper sizes
.letter-portrait {
height: 100%;
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 {
height: 50%;
}
@@ -75,12 +107,12 @@
</div>
</div>
<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">
<!-- <img src="img1.jpg"> -->
</div>
<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>

4
web/index.js
View File

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