openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: modernize modal styling and align two-column modal boxes

Browse Source 
Agent-Logs-Url: https://github.com/ulsklyc/oikos/sessions/7153de23-b6c6-423d-974c-cf3b961cbbad

Co-authored-by: ulsklyc <108589275+ulsklyc@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-04-06 10:31:54 +00:00
committed by GitHub
parent d4f72f426f
commit 26919e2ee3
4 changed files with 52 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/pages/calendar.js
+3 -3
View File
@@ -803,7 +803,7 @@ function buildEventModalContent({ mode, event, date }) {
</div>
<div id="time-fields">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
<div class="modal-grid modal-grid--2">
<div class="form-group">
<label class="form-label" for="modal-start-date">${t('calendar.startDateLabel')}</label>
<input type="date" class="form-input" id="modal-start-date" value="${startDate}">
@@ -813,7 +813,7 @@ function buildEventModalContent({ mode, event, date }) {
<input type="time" class="form-input" id="modal-start-time" value="${startTime}">
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
<div class="modal-grid modal-grid--2">
<div class="form-group">
<label class="form-label" for="modal-end-date">${t('calendar.endDateLabel')}</label>
<input type="date" class="form-input" id="modal-end-date" value="${endDate}">
@@ -826,7 +826,7 @@ function buildEventModalContent({ mode, event, date }) {
</div>
<div id="allday-fields" style="display:none;">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
<div class="modal-grid modal-grid--2">
<div class="form-group">
<label class="form-label" for="modal-allday-start">${t('calendar.fromLabel')}</label>
<input type="date" class="form-input" id="modal-allday-start" value="${startDate}">
public/pages/meals.js
+3 -3
View File
@@ -560,12 +560,12 @@ function buildModalContent({ mode, date, mealType, meal }) {
const hasIngOpen = isEdit && meal.ingredients?.some((i) => !i.on_shopping_list);
return `
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
<div class="form-group" style="margin-bottom:0">
<div class="modal-grid modal-grid--2">
<div class="form-group">
<label class="form-label" for="modal-date">${t('meals.dateLabel')}</label>
<input type="date" class="form-input" id="modal-date" value="${date}">
</div>
<div class="form-group" style="margin-bottom:0">
<div class="form-group">
<label class="form-label" for="modal-type">${t('meals.mealTypeLabel')}</label>
<select class="form-input" id="modal-type">${typeOpts}</select>
</div>
public/pages/tasks.js
+6 -6
View File
@@ -286,14 +286,14 @@ function renderModalContent({ task = null, users = [] } = {}) {
style="resize:vertical">${esc(task?.description)}</textarea>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
<div class="form-group" style="margin-bottom:0">
<div class="modal-grid modal-grid--2">
<div class="form-group">
<label class="label" for="task-priority">${t('tasks.priorityLabel')}</label>
<select class="input" id="task-priority" name="priority" style="min-height:44px">
${priorityOptions}
</select>
</div>
<div class="form-group" style="margin-bottom:0">
<div class="form-group">
<label class="label" for="task-category">${t('tasks.categoryLabel')}</label>
<select class="input" id="task-category" name="category" style="min-height:44px">
${categoryOptions}
@@ -301,13 +301,13 @@ function renderModalContent({ task = null, users = [] } = {}) {
</div>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-4)">
<div class="form-group" style="margin-bottom:0">
<div class="modal-grid modal-grid--2" style="margin-top:var(--space-4)">
<div class="form-group">
<label class="label" for="task-due-date">${t('tasks.dueDateLabel')}</label>
<input class="input" type="date" id="task-due-date" name="due_date"
value="${task?.due_date ?? ''}">
</div>
<div class="form-group" style="margin-bottom:0">
<div class="form-group">
<label class="label" for="task-due-time">${t('tasks.dueTimeLabel')}</label>
<input class="input" type="time" id="task-due-time" name="due_time"
value="${task?.due_time ?? ''}">