Compare commits

...

2 Commits

3 changed files with 64 additions and 5 deletions

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; }

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>