p/pukram-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use a canvas for the text boxes

Browse Source
This commit is contained in:
p11 2025-04-09 01:31:53 +02:00
parent 191ffa7d57
commit a3cb04f213
1 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/main.rs
View File

@ -614,19 +614,23 @@ fn handle_relative_connection(
let html = html! {
div id="story-container" {
div class="textbox-container" {
div class="textbox-content" {
@for (index, section) in sections.iter().enumerate() {
div class="story-section" data-section-index=(index)
style=(format!("display: {};", if index == 0 { "block" } else { "none" })) {
(maud::PreEscaped(section))
}
}
}
}
div class="nav-controls" {
button class="nav-button" onclick="prev()" { "←" }
span id="section-counter" { "1/" (sections.len()) }
button class="nav-button" onclick="next()" { "→" }
}
@for (index, section) in sections.iter().enumerate() {
div class="story-section" data-section-index=(index)
style=(format!("display: {};", if index == 0 { "block" } else { "none" })) {
(maud::PreEscaped(section))
}
}
style {
(maud::PreEscaped(r"
.nav-controls {
@ -671,6 +675,28 @@ fn handle_relative_connection(
.nav-button:active {
transform: scale(0.95);
}
.textbox-container {
width: 75%;
margin: 0 auto;
position: relative;
padding-top: 42.1875%; /* 16:9 Aspect Ratio */
background: #f8f8f8;
border-radius: 8px;
overflow: hidden;
}
.textbox-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
padding: 1rem;
justify-content: flex-end;
}
"))
}