diff --git a/scipost_django/production/forms.py b/scipost_django/production/forms.py
index 10a9585fa84cf2628726e0e2a6c4c3b6e0be1923..cf8cfa4f8884c46d70b564a19e123887633a98ca 100644
--- a/scipost_django/production/forms.py
+++ b/scipost_django/production/forms.py
@@ -304,33 +304,33 @@ class ProductionStreamSearchForm(forms.Form):
self.helper = FormHelper()
self.helper.layout = Layout(
Div(
- Div(FloatingField("identifier"), css_class="col-lg-3"),
- Div(FloatingField("author"), css_class="col-lg-3"),
- Div(FloatingField("title"), css_class="col-lg-6"),
+ Div(FloatingField("identifier"), css_class="col-md-3 col-4"),
+ Div(FloatingField("author"), css_class="col-md-3 col-8"),
+ Div(FloatingField("title"), css_class="col-md-6"),
css_class="row mb-0 mt-2",
),
Div(
Div(
Div(
- Div(Field("accepted_in", size=3), css_class="col-lg-8"),
- Div(Field("proceedings", size=3), css_class="col-lg-4"),
+ Div(Field("accepted_in", size=3), css_class="col-12 col-sm-7"),
+ Div(Field("proceedings", size=3), css_class="col-12 col-sm-5"),
css_class="row mb-0",
),
Div(
- Div(Field("supervisor"), css_class="col-lg-6"),
- Div(Field("officer"), css_class="col-lg-6"),
+ Div(Field("supervisor"), css_class="col-6"),
+ Div(Field("officer"), css_class="col-6"),
css_class="row mb-0",
),
Div(
- Div(Field("orderby"), css_class="col-lg-6"),
- Div(Field("ordering"), css_class="col-lg-6"),
+ Div(Field("orderby"), css_class="col-6"),
+ Div(Field("ordering"), css_class="col-6"),
css_class="row mb-0",
),
- css_class="col-lg-7",
+ css_class="col-md-7",
),
Div(
Field("status", size=len(constants.PRODUCTION_STREAM_STATUS)),
- css_class="col-lg-5",
+ css_class="col-md-5",
),
css_class="row mb-0",
),
diff --git a/scipost_django/production/templates/production/_hx_productionstream_details.html b/scipost_django/production/templates/production/_hx_productionstream_details.html
index a78ef59ea7d6c7cac8fd8272ecb3c29a5b285600..2e51ab633cda7337e6d7b40ba0bcd0f0b1c63399 100644
--- a/scipost_django/production/templates/production/_hx_productionstream_details.html
+++ b/scipost_django/production/templates/production/_hx_productionstream_details.html
@@ -1,26 +1,14 @@
<details id="productionstream-{{ productionstream.id }}-details"
- class="border border-2 mx-3 p-2 bg-primary bg-opacity-10"
->
- <summary style="list-style: none;"
- class="p-2"
- >
+ class="border border-2 mx-3 p-2 bg-primary bg-opacity-10">
+ <summary class="summary-unstyled p-2">
{% include "production/_productionstream_details_summary_contents.html" with productionstream=productionstream %}
</summary>
- <button id="indicator-productionstream-{{ productionstream.id }}-details-contents"
- class="htmx-indicator btn btn-sm btn-warning p-2"
- type="button"
- >
- <small><strong>Loading...</strong></small>
- <div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div>
- </button>
<div id="productionstream-{{ productionstream.id }}-details-contents"
class="m-2 p-2 bg-white"
hx-get="{% url 'production:_hx_productionstream_details_contents' productionstream_id=productionstream.id %}"
hx-trigger="toggle once from:#productionstream-{{ productionstream.id }}-details"
- hx-indicator="#indicator-productionstream-{{ productionstream.id }}-details-contents"
- >
- </div>
+ hx-indicator="#indicator-productionstream-{{ productionstream.id }}-details-contents"></div>
</details>
diff --git a/scipost_django/production/templates/production/_hx_productionstream_details_contents.html b/scipost_django/production/templates/production/_hx_productionstream_details_contents.html
index abfb59c8eb56f207f90541bc62ff4fddcc6995e9..41ebacf5b616a60058af9eec9fa54c261f259320 100644
--- a/scipost_django/production/templates/production/_hx_productionstream_details_contents.html
+++ b/scipost_django/production/templates/production/_hx_productionstream_details_contents.html
@@ -6,8 +6,8 @@
<strong class="text-warning">While the new production page is being built</strong>: go the the <a href="{{ productionstream.get_absolute_url }}" target="_blank">(old) stream detail page</a> to manage this stream.
</p>
-<div class="row overflow-hidden" style="height: min(50vh, 40em)">
- <div class="col-lg-6 h-100 overflow-scroll">
+<div class="row">
+ <div class="col-12 col-md-6">
<h3>Actions</h3>
{% if "can_perform_supervisory_actions" in sub_perms %}
<div class="container">
@@ -32,10 +32,12 @@
</div>
<div id="productionstream-{{ productionstream.id }}-event-container"
- class="col-lg-6 h-100 overflow-scroll">
+ class="col-12 col-md-6 d-flex flex-column">
{% comment %} This might be better to refactor with an OOB response on each event addition {% endcomment %}
<h3>Events</h3>
<div id="productionstream-{{ productionstream.id }}-event-list"
+ class="overflow-scroll mb-4"
+ style="max-height: max(50vh, 40em)"
hx-get="{% url 'production:render_stream_events' productionstream.id %}"
hx-trigger="load, submit from:#productionstream-{{ productionstream.id }}-details target:form delay:500">
</div>
diff --git a/scipost_django/production/templates/production/_hx_productionstream_summary_assignees_status.html b/scipost_django/production/templates/production/_hx_productionstream_summary_assignees_status.html
index ab5d5849e9b036f92d077095ad76a4c663d399ef..78e5d14f5ca598c651f1807bcccdf6c2b654bf0d 100644
--- a/scipost_django/production/templates/production/_hx_productionstream_summary_assignees_status.html
+++ b/scipost_django/production/templates/production/_hx_productionstream_summary_assignees_status.html
@@ -1,38 +1,58 @@
-<table class="table">
- <tr>
- <td>
- <small class="text-muted">Latest activity</small>
- </td>
- <td>
- {{ productionstream.latest_activity|timesince }} ago
- <br>
- <span class="text-muted">(opened {{ productionstream.opened|timesince }} ago)</span>
- </td>
- </tr>
- <tr>
- <td>
- <small class="text-muted">Supervisor</small>
- </td>
- <td>
- {% if productionstream.supervisor %}
- <span class="text-success">{% include 'bi/check-circle-fill.html' %}</span>
- {{ productionstream.supervisor }}
- {% else %}
- <span class="text-danger">{% include 'bi/x-circle-fill.html' %}</span>
- {% endif %}
- </td>
- </tr>
- <tr>
- <td>
- <small class="text-muted">Production officer</small>
- </td>
- <td>
- {% if productionstream.officer %}
- <span class="text-success">{% include 'bi/check-circle-fill.html' %}</span>
- {{ productionstream.officer }}
- {% else %}
- <span class="text-danger">{% include 'bi/x-circle-fill.html' %}</span>
- {% endif %}
- </td>
- </tr>
-</table>
+{% load scipost_extras %}
+
+<div class="row mb-0">
+ <div class="order-3 order-sm-1 order-md-3 order-xl-1 col-sm-6 col-md-12 col-xl-6">
+ <div class="row justify-content-between">
+ <small class="col text-muted text-nowrap">Stream opened</small>
+ <div class="col-auto">{{ productionstream.opened|timesince }} ago</div>
+ </div>
+ </div>
+ <div class="order-2 order-sm-4 order-md-2 order-xl-4 col-sm-6 col-md-12 col-xl-6">
+ <div class="row justify-content-between">
+ <small class="col text-muted text-nowrap">Officer</small>
+ <div class="col-auto text-nowrap text-truncate">
+ {% if productionstream.officer %}
+ <span class="text-success ">{% include 'bi/check-circle-fill.html' %}</span>
+ {{ productionstream.officer }}
+ {% else %}
+ <span class="text-danger">{% include 'bi/x-circle-fill.html' %}</span>
+ {% endif %}
+ </div>
+ </div>
+ </div>
+ <div class="order-4 order-sm-3 order-md-4 order-xl-3 col-sm-6 col-md-12 col-xl-6">
+ <div class="row justify-content-between">
+ <small class="col text-muted text-nowrap">Latest activity</small>
+ <div class="col-auto">{{ productionstream.latest_activity|timesince }} ago</div>
+ </div>
+ </div>
+ <div class="order-1 order-sm-2 order-md-1 order-xl-2 col-sm-6 col-md-12 col-xl-6">
+ <div class="row justify-content-between">
+ <small class="col text-muted text-nowrap">Supervisor</small>
+ <div class="col-auto text-nowrap text-truncate">
+ {% if productionstream.supervisor %}
+ <span class="text-success">{% include 'bi/check-circle-fill.html' %}</span>
+ {{ productionstream.supervisor }}
+ {% else %}
+ <span class="text-danger">{% include 'bi/x-circle-fill.html' %}</span>
+ {% endif %}
+ </div>
+ </div>
+ </div>
+ <div class="order-5 order-sm-5 order-md-5 order-xl-5 col-sm-6 col-md-12 col-xl-6">
+ <div class="row mb-0 justify-content-between align-items-center">
+ <small class="col text-muted text-nowrap">Stream Status</small>
+ <div class="col-auto">
+ <div class="p-2 badge bg-{% if productionstream.status == 'initiated' %}danger{% else %}primary{% endif %}">
+ {{ productionstream.status|readable_str|title }}
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="indicator-productionstream-{{ productionstream.id }}-details-contents"
+ class="order-last col-sm-6 col-md-12 col-xl d-none d-sm-flex d-md-none d-xl-flex htmx-indicator justify-content-end">
+ <small class="text-white bg-warning px-2 py-1 ">
+ <strong>Loading...</strong>
+ <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
+ </small>
+ </div>
diff --git a/scipost_django/production/templates/production/_productionstream_details_summary_contents.html b/scipost_django/production/templates/production/_productionstream_details_summary_contents.html
index f9152db56225f21bc798795eabc29123557f4ab6..daffded1a393b671f7c90b589424a3da6e9952ef 100644
--- a/scipost_django/production/templates/production/_productionstream_details_summary_contents.html
+++ b/scipost_django/production/templates/production/_productionstream_details_summary_contents.html
@@ -1,6 +1,6 @@
<div class="row mb-0">
- <div class="col col-md-8">
- <table>
+ <div class="col mb-2">
+ <table class="mb-0">
<tbody>
<tr>
@@ -27,28 +27,14 @@
<br>
{{ productionstream.submission.editorial_decision.taken_on|date:'Y-m-d' }}
</div>
- <div class="col">
- <small class="text-muted">Stream Status</small>
- <br>
- <div class="p-2 label label-{% if stream.status == 'initiated' %}outline-danger{% else %}secondary{% endif %}">
- {{ productionstream.get_status_display }}
- </div>
-
- {% if productionstream.submission.editorial_decision.status == productionstream.submission.editorial_decision.AWAITING_PUBOFFER_ACCEPTANCE %}
- <br>
- <strong class="text-danger">Wait! author
- <br>
- acceptance of puboffer
- <br>
- required!</strong>
- {% endif %}
-
- </div>
</div>
</div>
+
+ <div class="d-none d-md-block vr p-0 me-2"></div>
+
<div id="productionstream-{{ productionstream.id }}-summary-assignees"
- class="col col-md-4 border-start"
+ class="col-md-6"
hx-get="{% url 'production:render_stream_assignees_status' productionstream.id %}"
hx-trigger="load, submit from:#productionstream-{{ productionstream.id }}-details target:form delay:500">
</div>
diff --git a/scipost_django/production/templates/production/_productionstream_events.html b/scipost_django/production/templates/production/_productionstream_events.html
index 4976228fc2841894ac70a0fa3c194e98a8b123b3..28b1ed7d2fb9dadef06ba3d8d6142cfe57d03147 100644
--- a/scipost_django/production/templates/production/_productionstream_events.html
+++ b/scipost_django/production/templates/production/_productionstream_events.html
@@ -1,7 +1,7 @@
{% load scipost_extras %}
{% load automarkup %}
-<table class="table table-bordered table-striped">
+<table class="table table-bordered table-striped overflow-scroll mb-0">
<thead>
<tr>
<th>Date</th>
@@ -13,69 +13,73 @@
<tbody>
{% for event in events %}
<tr>
- <td>
+
+ <td>
{{ event.noted_on }}
{% if event.duration %}
<br>
<strong>Duration: {{ event.duration|duration }}</strong>
{% endif %}
- </td>
- <td>
- {{ event.get_event_display|linebreaksbr }}
- </td>
- <td>
+ </td>
+
+ <td>{{ event.get_event_display|linebreaksbr }}</td>
+
+ <td>
<strong>{{ event.noted_by.user.first_name }} {{ event.noted_by.user.last_name }}</strong>
- </td>
- <td>
+ </td>
+
+ <td>
{% if not non_editable %}
{% if event.noted_by == request.user.production_user and event.editable %}
<div class="ps-2">
- <a hx-get="{% url 'production:_hx_event_form' productionstream_id=productionstream.id event_id=event.id %}"
- hx-target="#productionstream-{{ productionstream.id }}-event-{{ event.id }}-form"
- >
- <span aria-hidden="true">
- {% include 'bi/pencil-square.html' %}
- </span>
- </a>
- <a class="text-danger"
- hx-get="{% url 'production:_hx_event_delete' productionstream_id=productionstream.id event_id=event.id %}"
- hx-target="#productionstream-{{ productionstream.id }}-details-contents"
- hx-confirm="Delete this Event?"
- >
- <span aria-hidden="true">
- {% include 'bi/trash-fill.html' %}
- </span>
- </a>
+ <a hx-get="{% url 'production:_hx_event_form' productionstream_id=productionstream.id event_id=event.id %}"
+ hx-target="#productionstream-{{ productionstream.id }}-event-{{ event.id }}-form">
+ <span aria-hidden="true">{% include 'bi/pencil-square.html' %}</span>
+ </a>
+ <a class="text-danger"
+ hx-get="{% url 'production:_hx_event_delete' productionstream_id=productionstream.id event_id=event.id %}"
+ hx-target="#productionstream-{{ productionstream.id }}-details-contents"
+ hx-confirm="Delete this Event?">
+ <span aria-hidden="true">{% include 'bi/trash-fill.html' %}</span>
+ </a>
</div>
{% endif %}
{% endif %}
- </td>
+ </td>
+
</tr>
<tr>
- <td colspan="4" class="ps-4 pb-4">
- {% if event.comments %}
+
+ <td colspan="4" class="ps-4 pb-4">
+ {% if event.comments %}
<p class="mt-2 mb-0">
{% if event.noted_to %}
- <strong>To: {{ event.noted_to.user.first_name }} {{ event.noted_to.user.last_name }}</strong>
- <br>
+ <strong>To: {{ event.noted_to.user.first_name }} {{ event.noted_to.user.last_name }}</strong>
+ <br>
{% endif %}
- {% automarkup event.comments %}
+ {% automarkup event.comments %}
</p>
- {% endif %}
+ {% endif %}
- {% if event.attachments.exists %}
+
+ {% if event.attachments.exists %}
<ul>
{% for attachment in event.attachments.all %}
- <li><a href="{{ attachment.get_absolute_url }}" target="_blank">Download Attachment {{ forloop.counter }}</a></li>
+ <li>
+ <a href="{{ attachment.get_absolute_url }}" target="_blank">Download Attachment {{ forloop.counter }}</a>
+ </li>
{% endfor %}
</ul>
- {% endif %}
- <div id="productionstream-{{ productionstream.id }}-event-{{ event.id }}-form"></div>
- </td>
+
+ {% endif %}
+
+ <div id="productionstream-{{ productionstream.id }}-event-{{ event.id }}-form"></div>
+ </td>
+
</tr>
{% empty %}
<tr>
- <td>No events found</td>
+ <td>No events found</td>
</tr>
{% endfor %}
</tbody>
diff --git a/scipost_django/production/templates/production/production_new.html b/scipost_django/production/templates/production/production_new.html
index d8f6ab4dd6726949c1d045586c099d209d50994f..c62be4a3e62f1fec0823cc3567868a80a22016f2 100644
--- a/scipost_django/production/templates/production/production_new.html
+++ b/scipost_django/production/templates/production/production_new.html
@@ -2,11 +2,11 @@
{% load crispy_forms_tags %}
-{% block breadcrumb_items %}
- <span class="breadcrumb-item">Production streams</span>
-{% endblock %}
+{% block breadcrumb_items %}<span class="breadcrumb-item">Production streams</span>{% endblock %}
-{% block pagetitle %}: Production page{% endblock pagetitle %}
+{% block pagetitle %}
+ : Production page
+{% endblock pagetitle %}
{% block content %}
@@ -14,33 +14,40 @@
<h1>Production Streams</h1>
<div class="card my-4">
- <div class="card-header">
- Search / filter
- </div>
+ <div class="card-header">Search / filter</div>
<div class="card-body">
- <form
- hx-post="{% url 'production:_hx_productionstream_list' %}"
- hx-trigger="load, keyup delay:500ms, change, click from:#refresh-button"
- hx-target="#search-productionstreams-results"
- hx-indicator="#indicator-search-productionstreams"
- >
- <div id="search-productionstreams-form">{% crispy search_productionstreams_form %}</div>
+ <form hx-post="{% url 'production:_hx_productionstream_list' %}"
+ hx-trigger="load, keyup delay:500ms, change, click from:#refresh-button"
+ hx-target="#search-productionstreams-results"
+ hx-indicator="#indicator-search-productionstreams">
+
+ <div id="search-productionstreams-form">{% crispy search_productionstreams_form %}</div>
</form>
</div>
</div>
<div class="row">
+
<div class="col">
- <em>The list should update automatically. Feels stuck?</em> <a id="refresh-button" class="m-2 btn btn-primary">{% include "bi/arrow-clockwise.html" %} Refresh</a>
+ <em class="d-none d-md-inline">The list should update automatically. Feels stuck?</em> <a id="refresh-button" class="m-2 btn btn-primary">
+ {% include "bi/arrow-clockwise.html" %}
+ Refresh</a>
</div>
- <div class="col">
+
+ <div class="col-auto">
<div id="indicator-search-productionstreams" class="htmx-indicator">
- <button class="btn btn-sm btn-warning" type="button" disabled>
- <strong>Loading...</strong>
- <div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div>
- </button>
+
+ <button class="btn btn-sm btn-warning" type="button" disabled>
+ <strong>Loading...</strong>
+
+ <div class="spinner-grow spinner-grow-sm ms-2"
+ role="status"
+ aria-hidden="true"></div>
+
+ </button>
</div>
</div>
+
</div>
<div id="search-productionstreams-results" class="mt-2"></div>
diff --git a/scipost_django/scipost/static/scipost/assets/config/preconfig.scss b/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
index c57b7db8d35bb2d19a6de42a747307b3045f7bdc..290e4e39c0dd630a8e0038313d467f752555668e 100644
--- a/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
+++ b/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
@@ -200,3 +200,13 @@ $theme-colors: (
);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
+
+
+// Browser specific fixes
+// Select summary in details with list-style: none and remove triangle for safari
+.summary-unstyled {
+ list-style: none;
+ &::-webkit-details-marker {
+ display: none;
+ }
+}
\ No newline at end of file