SciPost Code Repository

Skip to content
Snippets Groups Projects
Commit f1031d68 authored by George Katsikas's avatar George Katsikas :goat:
Browse files

make new production page more responsive 

move status change element to summary
parent 0c43869b
No related branches found
No related tags found
1 merge request!43Polish up new production page
Hide whitespace changes
Inline Side-by-side
Showing
with 162 additions and 145 deletions
scipost_django/production/forms.py
+ 11
− 11
View file @ f1031d68
......@@ -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",
),
......
scipost_django/production/templates/production/_hx_productionstream_details.html
+ 3
− 15
View file @ f1031d68
<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>
scipost_django/production/templates/production/_hx_productionstream_details_contents.html
+ 5
− 3
View file @ f1031d68
......@@ -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>
......
scipost_django/production/templates/production/_hx_productionstream_summary_assignees_status.html
+ 58
− 38
View file @ f1031d68
<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>
scipost_django/production/templates/production/_productionstream_details_summary_contents.html
+ 6
− 20
View file @ f1031d68
<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>
......
scipost_django/production/templates/production/_productionstream_events.html
+ 42
− 38
View file @ f1031d68
{% 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>
......
scipost_django/production/templates/production/production_new.html
+ 27
− 20
View file @ f1031d68
......@@ -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>&nbsp;<a id="refresh-button" class="m-2 btn btn-primary">{% include "bi/arrow-clockwise.html" %}&nbsp;Refresh</a>
<em class="d-none d-md-inline">The list should update automatically. Feels stuck?</em>&nbsp;<a id="refresh-button" class="m-2 btn btn-primary">
{% include "bi/arrow-clockwise.html" %}
&nbsp;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>
......
scipost_django/scipost/static/scipost/assets/config/preconfig.scss
+ 10
− 0
View file @ f1031d68
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

SciPost Code Repository