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

Frontend improvements

Browse Source 
1. Simplify template css to use grid always and use ABCD for area names
2. Add 3 new templates
3. Set data attribute dynamically for templates
4. Minor reformatting in js files
5. Fix URL path
This commit is contained in:
Balakrishnan Balasubramanian
2024-08-09 01:51:52 -04:00
parent c009c01a3f
commit 12b4386f14
4 changed files with 106 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
web/index.html
View File

@ -16,7 +16,7 @@
<label>
<span>Paper size</span>
<select id="page_size_selector" size=8>
<select id="page_size_selector" size=6>
<option value="letter-portrait" > Letter (Portrait) </option>
<option selected value="letter-landscape" > Letter (Landscape) </option>
<option value="fiveseven-portrait" > 5 × 7 (Portrait) </option>
@ -29,31 +29,31 @@
<ul class="templates">
<li>
<div id="default_template" class="template single" data-collage-template="single">
<div id="default_template" class="template single">
<div class="img img1"></div>
</div>
</li>
<li>
<div class="template one-two" data-collage-template="one-two">
<div class="template one-two">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
</div>
</li>
<li>
<div class="template half-leftright" data-collage-template="half-leftright">
<div class="template two-row">
<div class="img img1"></div>
<div class="img img2"></div>
</div>
</li>
<li>
<div class="template half-topbottom" data-collage-template="half-topbottom">
<div class="template half-topbottom">
<div class="img img1"></div>
<div class="img img2"></div>
</div>
</li>
<li>
<div class="template two-one-two-leftright" data-collage-template="two-one-two-leftright">
<div class="template two-one-two-leftright">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
@ -62,13 +62,56 @@
</div>
</li>
<li>
<div class="template two-one-two-topbottom" data-collage-template="two-one-two-topbottom">
<div class="template two-one-two-topbottom">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
</div>
<li>
<div class="template four-row">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
</div>
</li>
<li>
<div class="template four-row">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
<div class="img img9"></div>
<div class="img img10"></div>
<div class="img img11"></div>
<div class="img img12"></div>
</div>
</li>
<li>
<div class="template three-row">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
<div class="img img5"></div>
<div class="img img6"></div>
<div class="img img7"></div>
<div class="img img8"></div>
<div class="img img9"></div>
<div class="img img10"></div>
<div class="img img11"></div>
<div class="img img12"></div>
</div>
</li>
</ul>
<button id="snapper" class="showbuton">Snap Collage</button>