From 50fb68866d059c7db2c9440c80dc64dff42d54b6 Mon Sep 17 00:00:00 2001
From: George Katsikas <giorgakis.katsikas@gmail.com>
Date: Thu, 1 Jun 2023 15:37:06 +0200
Subject: [PATCH] improve responsivity stream action buttons
---
...roductionstream_change_action_buttons.html | 26 +++++++++----------
...hx_productionstream_change_invofficer.html | 9 +++----
...x_productionstream_change_prodofficer.html | 9 +++----
.../_hx_productionstream_change_status.html | 24 ++++++++---------
...hx_productionstream_change_supervisor.html | 9 +++----
.../scipost/assets/config/preconfig.scss | 6 +++++
6 files changed, 43 insertions(+), 40 deletions(-)
diff --git a/scipost_django/production/templates/production/_hx_productionstream_change_action_buttons.html b/scipost_django/production/templates/production/_hx_productionstream_change_action_buttons.html
index 708914205..8e965e85a 100644
--- a/scipost_django/production/templates/production/_hx_productionstream_change_action_buttons.html
+++ b/scipost_django/production/templates/production/_hx_productionstream_change_action_buttons.html
@@ -1,18 +1,18 @@
{% comment %} Only show something if the option is about to change {% endcomment %}
{% if not current_option == new_option %}
- {% comment %} If selected option is None, it is being removed {% endcomment %}
- {% if new_option == "None" %}
- <button type="submit" class="btn btn-danger">
- Remove
- </button>
- {% comment %} Otherwise differentiate between changing or adding based on current option {% endcomment %}
- {% else %}
- <button type="submit" class="btn btn-primary">
- {% if current_option == "None" %}
- Add
+ <div class="row m-0 d-none-empty">
+ {% comment %} If selected option is None, it is being removed {% endcomment %}
+ {% if new_option == "None" %}
+ <button type="submit" class="btn btn-danger">Remove</button>
+ {% comment %} Otherwise differentiate between changing or adding based on current option {% endcomment %}
{% else %}
- Change
+ <button type="submit" class="btn btn-primary">
+ {% if current_option == "None" %}
+ Add
+ {% else %}
+ Change
+ {% endif %}
+ </button>
{% endif %}
- </button>
- {% endif %}
+ </div>
{% endif %}
diff --git a/scipost_django/production/templates/production/_hx_productionstream_change_invofficer.html b/scipost_django/production/templates/production/_hx_productionstream_change_invofficer.html
index c8b688db5..90d327d97 100644
--- a/scipost_django/production/templates/production/_hx_productionstream_change_invofficer.html
+++ b/scipost_django/production/templates/production/_hx_productionstream_change_invofficer.html
@@ -1,17 +1,16 @@
{% load bootstrap %}
-{% if perms.scipost.can_take_decisions_related_to_proofs and form.fields.invitations_officer.choices|length > 0 %}
- <div id="productionstream-update-invitations_officer">
+{% if form.fields.invitations_officer.choices|length > 0 %}
+ <div id="productionstream-{{ stream.id }}-update-invitations_officer">
<form hx-post="{% url 'production:update_invitations_officer' stream.id %}"
- hx-target="#productionstream-update-invitations_officer"
+ hx-target="#productionstream-{{ stream.id }}-update-invitations_officer"
hx-swap="outerHTML"
class="row">
{% csrf_token %}
<div class="col">{{ form|bootstrap_purely_inline }}</div>
- <div class="col-auto h-100"
+ <div class="col-12 col-sm-auto col-md-12 col-lg-auto h-100 d-none-empty"
hx-post="{% url 'production:render_action_buttons' stream.id 'invitations_officer' %}"
hx-swap="innerHTML"
- class="col-auto"
hx-trigger="change from:select#productionstream_{{ stream.id }}_id_invitations_officer"
hx-target="this"></div>
<div class="text-primary">{{ message }}</div>
diff --git a/scipost_django/production/templates/production/_hx_productionstream_change_prodofficer.html b/scipost_django/production/templates/production/_hx_productionstream_change_prodofficer.html
index dbb665741..830e71430 100644
--- a/scipost_django/production/templates/production/_hx_productionstream_change_prodofficer.html
+++ b/scipost_django/production/templates/production/_hx_productionstream_change_prodofficer.html
@@ -1,17 +1,16 @@
{% load bootstrap %}
-{% if perms.scipost.can_take_decisions_related_to_proofs and form.fields.officer.choices|length > 0 %}
- <div id="productionstream-update-officer">
+{% if form.fields.officer.choices|length > 0 %}
+ <div id="productionstream-{{ stream.id }}-update-officer">
<form hx-post="{% url 'production:update_officer' stream.id %}"
- hx-target="#productionstream-update-officer"
+ hx-target="#productionstream-{{ stream.id }}-update-officer"
hx-swap="outerHTML"
class="row">
{% csrf_token %}
<div class="col">{{ form|bootstrap_purely_inline }}</div>
- <div class="col-auto h-100"
+ <div class="col-12 col-sm-auto col-md-12 col-lg-auto h-100 d-none-empty"
hx-post="{% url 'production:render_action_buttons' stream.id 'officer' %}"
hx-swap="innerHTML"
- class="col-auto"
hx-trigger="change from:select#productionstream_{{ stream.id }}_id_officer"
hx-target="this"></div>
<div class="text-primary">{{ message }}</div>
diff --git a/scipost_django/production/templates/production/_hx_productionstream_change_status.html b/scipost_django/production/templates/production/_hx_productionstream_change_status.html
index 20e51ec58..d90daf46f 100644
--- a/scipost_django/production/templates/production/_hx_productionstream_change_status.html
+++ b/scipost_django/production/templates/production/_hx_productionstream_change_status.html
@@ -1,21 +1,21 @@
{% load bootstrap %}
-{% if perms.scipost.can_take_decisions_related_to_proofs and form.fields.status.choices|length > 0 %}
+{% if form.fields.status.choices|length > 0 %}
- <form id="productionstream-update-status"
+ <form id="productionstream-{{ stream.id }}-update-status"
hx-post="{% url 'production:update_status' stream.id %}"
hx-target="this"
hx-swap="outerHTML"
- class="row">
+ hx-trigger="submit, submit from:#productionstream-{{ productionstream.id }}-details target:form delay:500">
{% csrf_token %}
- <div class="col">{{ form|bootstrap_purely_inline }}</div>
- <div class="col-auto h-100"
- hx-post="{% url 'production:render_action_buttons' stream.id 'status' %}"
- hx-swap="innerHTML"
- class="col-auto"
- hx-trigger="load, change from:select#productionstream_{{ stream.id }}_id_status"
- hx-target="this"></div>
- <div class="text-primary">{{ message }}</div>
+ <div class="row">
+ <div class="col">{{ form|bootstrap_purely_inline }}</div>
+ <div class="col-12 col-sm-auto col-md-12 col-lg-auto h-100 d-none-empty"
+ hx-post="{% url 'production:render_action_buttons' stream.id 'status' %}"
+ hx-swap="innerHTML"
+ hx-trigger="load, change from:select#productionstream_{{ stream.id }}_id_status"
+ hx-target="this"></div>
+ <div class="text-primary">{{ message }}</div>
+ </div>
</form>
-
{% endif %}
diff --git a/scipost_django/production/templates/production/_hx_productionstream_change_supervisor.html b/scipost_django/production/templates/production/_hx_productionstream_change_supervisor.html
index bd472b676..8fdb90c98 100644
--- a/scipost_django/production/templates/production/_hx_productionstream_change_supervisor.html
+++ b/scipost_django/production/templates/production/_hx_productionstream_change_supervisor.html
@@ -1,17 +1,16 @@
{% load bootstrap %}
-{% if perms.scipost.can_take_decisions_related_to_proofs and form.fields.supervisor.choices|length > 0 %}
- <div id="productionstream-update-supervisor">
+{% if form.fields.supervisor.choices|length > 0 %}
+ <div id="productionstream-{{ stream.id }}-update-supervisor">
<form hx-post="{% url 'production:update_supervisor' stream.id %}"
- hx-target="#productionstream-update-supervisor"
+ hx-target="#productionstream-{{ stream.id }}-update-supervisor"
hx-swap="outerHTML"
class="row">
{% csrf_token %}
<div class="col">{{ form|bootstrap_purely_inline }}</div>
- <div class="col-auto h-100"
+ <div class="col-12 col-sm-auto col-md-12 col-lg-auto h-100 d-none-empty"
hx-post="{% url 'production:render_action_buttons' stream.id 'supervisor' %}"
hx-swap="innerHTML"
- class="col-auto"
hx-trigger="load, change from:select#productionstream_{{ stream.id }}_id_supervisor"
hx-target="this"></div>
<div class="text-primary">{{ message }}</div>
diff --git a/scipost_django/scipost/static/scipost/assets/config/preconfig.scss b/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
index 290e4e39c..4d17958b3 100644
--- a/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
+++ b/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
@@ -209,4 +209,10 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
&::-webkit-details-marker {
display: none;
}
+}
+
+// Utilities for common display issues
+// Hide div
+.d-none-empty:empty {
+ display: none;
}
\ No newline at end of file
--
GitLab