Bellsworne/critterfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

starting work on a confirmation dialog

Browse Source
This commit is contained in:
chris bell
2026-08-06 23:59:57 -05:00
parent b3945d9d0e
commit d9a3e8914b
4 changed files with 51 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
assets/main.rml
View File

@@ -11,7 +11,7 @@
<body data-model="app_data">
<div id="header">
<h1>Critterfolio</h1>
<button id="new-critter-btn" data-event-click="is_dialog_open = true"><div>+</div></button>
<button id="new-critter-btn" data-event-click="is_add_critter_dialog_open = true"><div>+</div></button>
</div>
@@ -41,7 +41,7 @@
<!-- Add Critter Modal Dialog Overlay -->
<div class="modal-overlay" data-visible="is_dialog_open">
<div class="modal-overlay" data-visible="is_add_critter_dialog_open">
<div class="modal-content">
<h2>Add New Critter</h2>
@@ -67,7 +67,24 @@
<div class="modal-buttons">
<button data-event-click="submit_add_critter">Save</button>
<button data-event-click="is_dialog_open = false">Cancel</button>
<button data-event-click="is_add_critter_dialog_open = false">Cancel</button>
</div>
</div>
</div>
<!-- Confirmation Dialog -->
<div class="modal-overlay" data-visible="confirmation_dialog_open">
<div class="modal-content">
<h2>Confirmation</h2>
<p>{{confirmation_dialog_text}}</p>
<!-- <p class="error" data-visible="error_message != ''">{{error_message}}</p> -->
<div class="modal-buttons">
<button data-event-click="confimation_dialog_result = false">Cancel</button>
<button data-event-click="confimation_dialog_result = true">Yes</button>
</div>
</div>
</div>

9
assets/styles/main.rcss
View File

@@ -6,8 +6,8 @@
box-sizing: border-box;
font-family: "Hubballi";
--background-color: #f5e8df;
--foreground-color: #0a1347;
--background-color: #54703f;
--foreground-color: #000000;
}
body {
@@ -285,7 +285,7 @@ progress-value {
#new-critter-btn {
height: 50px;
width: 50px;
/* border-radius: 50px; */
border-radius: 10px;
font-size: 30pt;
display: flex;
text-align: center;
@@ -319,6 +319,7 @@ progress-value {
color: var(--foreground-color);
border: 2px var(--foreground-color);
text-align: left;
border-radius: 10px;
}
.critter-card:hover {
@@ -406,7 +407,7 @@ progress-value {
border-color: var(--foreground-color);
border-width: 2px;
padding: 20px;
border-radius: 0px;
border-radius: 10px;
width: 80%;
height: 80%;
}