Layout and styling for the status change dialog

diff --git a/media/css/sessionvotes.css b/media/css/sessionvotes.css
index 4cb983bdaba91e38aa6161d01512da8072e79c66..b9d1b99ce706c68a28f38473b348c4756bd6f17b 100644 (file)
--- a/media/css/sessionvotes.css
+++ b/media/css/sessionvotes.css
@@ -91,3 +91,12 @@ a.sortheader[data-sorted="-1"]::after {
 dialog::backdrop {
     backdrop-filter: blur(4px);
 }
+
+#dlgStatus div.buttons {
+    display: flex;
+    justify-content: space-around;
+}
+
+#dlgStatus div.buttons button {
+    margin: 0.7rem;
+}

diff --git a/media/js/sessionvotes.js b/media/js/sessionvotes.js
index fe0a47152535f9723f5d6b28cf45e6a5152c9611..bb7ca75fade83d959c30a065fd9074a90c5a8fc4 100644 (file)
--- a/media/js/sessionvotes.js
+++ b/media/js/sessionvotes.js
@@ -243,7 +243,7 @@ function changeStatus(id) {
   const currentstatus = document.querySelector('tr.sessionrow[data-sid="' + id + '"]').dataset.status;
   const dialog = document.getElementById('dlgStatus');
   dialog.dataset.sid = id;
-  dialog.getElementsByTagName('h3')[0].innerText = "Change status [id: " + id + "]";
+  dialog.getElementsByTagName('h3')[0].innerText = "Change status for id " + id;
   const buttonDiv = dialog.getElementsByTagName('div')[0];
   buttonDiv.querySelectorAll('button').forEach((btn) => {
     btn.style.display = (btn.dataset.statusid in valid_status_transitions[currentstatus]) ? "inline-block": "none";

diff --git a/template/confreg/sessionvotes.html b/template/confreg/sessionvotes.html
index 25d52c00094edc463b9a9b83da67f449fdda0e52..995b9a58973cf365721b373420a65493601e1324 100644 (file)
--- a/template/confreg/sessionvotes.html
+++ b/template/confreg/sessionvotes.html
@@ -212,13 +212,14 @@ body:has(input#col_{{fc.class}}:checked) tr.headerrow th.flt-{{fc.class}} {
 
 <dialog id="dlgStatus">
   <h3>Change status</h3>
-  <p>Change status to:</p>
-  <div>
+  <div class="buttons">
 {%for statusid, status in status_choices %}
    <button class="btn" data-statusid="{{statusid}}">{{status}}</button>
 {%endfor%}
   </div>
-  <button class="btn">Cancel</button>
+  <div class="buttons">
+    <button class="btn">Cancel</button>
+  </div>
 </dialog>
 
 <dialog id="dlgComment">