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 +88 -86
3 changed files with 88 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9dceae06a7 - Show all commits

5
main.go
View File

@@ -53,7 +53,10 @@ func main() {
if localAssets {
httpFileServer := http.FileServer(http.Dir("web"))
http.Handle("/", httpFileServer)
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
w.Header().Add("Cache-Control", "no-cache")
httpFileServer.ServeHTTP(w, r)
})
} else {
fs, err := fs.Sub(webFS, "web")

83
web/index.css Normal file
View File

@@ -0,0 +1,83 @@
.container {
display: flex;
background-color: lightyellow;
height: calc(100vh - 20px);
}
.controls {
background-color: lightgrey;
display: flex;
align-items: center;
justify-content: center;
flex: 30%;
}
.imagebox {
padding: 2rem;
flex: 70%;
}
.image-surface {
overflow: hidden;
margin: auto;
border: 1px solid;
height: 100%;
width: 100%;
}
.showbuton {
font-size: 2rem;
}
// paper sizes
.letter-portrait {
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%;
}
.letter-landscape-2 {
display:flex;
// width: 80vh;
height: 100%;
// margin: auto;
aspect-ratio: 110 / 85;
// aspect-ratio: 7 / 5;
gap: 1rem;
}
.letter-landscape-2 .img1 {
flex: 60%;
}
.letter-landscape-2 .img2 {
flex: 40%;
}

86
web/index.html
View File

@@ -6,97 +6,13 @@
<script src="http://localhost:35729/livereload.js"></script>
<script src="croppie.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="index.css" />
<!--
width: 3264px;
height: 4224px;
width: 8.5in;
height: 11in;
-->
<style>
.container {
display: flex;
background-color: lightyellow;
height: calc(100vh - 20px);
}
.controls {
background-color: lightgrey;
display: flex;
align-items: center;
justify-content: center;
flex: 30%;
}
.imagebox {
padding: 2rem;
flex: 70%;
}
.image-surface {
overflow: hidden;
margin: auto;
border: 2px solid;
height: 100%;
width: 100%;
}
.showbuton {
font-size: 2rem;
}
// paper sizes
.letter-portrait {
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%;
}
.letter-landscape-2 {
display:flex;
// width: 80vh;
height: 100%;
// margin: auto;
aspect-ratio: 110 / 85;
// aspect-ratio: 7 / 5;
gap: 1rem;
}
.letter-landscape-2 .img1 {
flex: 60%;
}
.letter-landscape-2 .img2 {
flex: 40%;
}
</style>
</head>
<body onload="main()">
<div class="container">