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

Compare commits

base: balki:3d044b5076f817af0d268863bcea7f86f7de55b0
Branches Tags
balki:main
balki:photoprism-fetch
balki:uploadexp
balki:v0.1.1
balki:v0.1.0
balki:expdone
...
compare: balki:36e07b98366208d12b9da63286825bb8e2e97249
Branches Tags
balki:main
balki:photoprism-fetch
balki:uploadexp
balki:v0.1.1
balki:v0.1.0
balki:expdone

2 Commits
3d044b5076 ... 36e07b9836

Author SHA1 Message Date
Balakrishnan Balasubramanian
36e07b9836 Make buttons and photos bigger and easier to hit 2024-08-13 17:54:02 -04:00
Balakrishnan Balasubramanian
e67fa7b279 add tenspl template 2024-08-13 17:18:10 -04:00
3 changed files with 64 additions and 5 deletions
Show Stats Expand all files Collapse all files

32
web/index.css
View File

@ -33,7 +33,7 @@
#image-chooser-controls { #image-chooser-controls {
display: none; display: none;
width: 100%; width: 80%;
} }
#image-preview-box { #image-preview-box {
@ -44,16 +44,19 @@
} }
#image-preview-box img { #image-preview-box img {
width: 50px; width: 30%;
height: 50px; aspect-ratio: 1 / 1;
} }
.main-controls { .main-controls {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
width: 80%;
} }
.main-controls button { .main-controls * {
width: 100%;
height: 4rem;
font-size: 1.2rem; font-size: 1.2rem;
} }
@ -167,6 +170,27 @@
"A A A" "A A A"
"B C D"; "B C D";
} }
.one-three-topbottom .img1 { .one-three-topbottom .img1 {
grid-area: A; grid-area: A;
} }
.ten-spl {
display: grid;
grid-template-areas:
"A A A B B B"
"C D D E E F"
"G D D E E H"
"I I I J J J";
}
.ten-spl .img1 { grid-area: A; }
.ten-spl .img2 { grid-area: B; }
.ten-spl .img3 { grid-area: C; }
.ten-spl .img4 { grid-area: D; }
.ten-spl .img5 { grid-area: E; }
.ten-spl .img6 { grid-area: F; }
.ten-spl .img7 { grid-area: G; }
.ten-spl .img8 { grid-area: H; }
.ten-spl .img9 { grid-area: I; }
.ten-spl .img10 { grid-area: J; }

15
web/index.html
View File

@ -26,7 +26,6 @@
</select> </select>
<div class="main-controls"> <div class="main-controls">
<a href="choose.html"><button>Select</button></a> <a href="choose.html"><button>Select</button></a>
<button id="snapper" class="showbuton">Snap</button> <button id="snapper" class="showbuton">Snap</button>
<a href="/collages/?sort=time&order=desc&layout=grid" target="_blank" ><button>All</button></a> <a href="/collages/?sort=time&order=desc&layout=grid" target="_blank" ><button>All</button></a>
<button id="reorder_btn">Reorder</button> <button id="reorder_btn">Reorder</button>
@ -156,6 +155,20 @@
<div class="img img4"></div> <div class="img img4"></div>
</div> </div>
</li> </li>
<li>
<div class="template ten-spl">
<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>
</li>
</ul> </ul>
</div> </div>

22
web/splgrid.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<!-- DEVONLY --> <script src="http://localhost:35729/livereload.js"></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="template ten-spl">
<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>
</body>
</html>