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): ...@@ -304,33 +304,33 @@ class ProductionStreamSearchForm(forms.Form):
self.helper = FormHelper() self.helper = FormHelper()
self.helper.layout = Layout( self.helper.layout = Layout(
Div( Div(
Div(FloatingField("identifier"), css_class="col-lg-3"), Div(FloatingField("identifier"), css_class="col-md-3 col-4"),
Div(FloatingField("author"), css_class="col-lg-3"), Div(FloatingField("author"), css_class="col-md-3 col-8"),
Div(FloatingField("title"), css_class="col-lg-6"), Div(FloatingField("title"), css_class="col-md-6"),
css_class="row mb-0 mt-2", css_class="row mb-0 mt-2",
), ),
Div( Div(
Div( Div(
Div( Div(
Div(Field("accepted_in", size=3), css_class="col-lg-8"), Div(Field("accepted_in", size=3), css_class="col-12 col-sm-7"),
Div(Field("proceedings", size=3), css_class="col-lg-4"), Div(Field("proceedings", size=3), css_class="col-12 col-sm-5"),
css_class="row mb-0", css_class="row mb-0",
), ),
Div( Div(
Div(Field("supervisor"), css_class="col-lg-6"), Div(Field("supervisor"), css_class="col-6"),
Div(Field("officer"), css_class="col-lg-6"), Div(Field("officer"), css_class="col-6"),
css_class="row mb-0", css_class="row mb-0",
), ),
Div( Div(
Div(Field("orderby"), css_class="col-lg-6"), Div(Field("orderby"), css_class="col-6"),
Div(Field("ordering"), css_class="col-lg-6"), Div(Field("ordering"), css_class="col-6"),
css_class="row mb-0", css_class="row mb-0",
), ),
css_class="col-lg-7", css_class="col-md-7",
), ),
Div( Div(
Field("status", size=len(constants.PRODUCTION_STREAM_STATUS)), Field("status", size=len(constants.PRODUCTION_STREAM_STATUS)),
css_class="col-lg-5", css_class="col-md-5",
), ),
css_class="row mb-0", 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" <details id="productionstream-{{ productionstream.id }}-details"
class="border border-2 mx-3 p-2 bg-primary bg-opacity-10" class="border border-2 mx-3 p-2 bg-primary bg-opacity-10">
> <summary class="summary-unstyled p-2">
<summary style="list-style: none;"
class="p-2"
>
{% include "production/_productionstream_details_summary_contents.html" with productionstream=productionstream %} {% include "production/_productionstream_details_summary_contents.html" with productionstream=productionstream %}
</summary> </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" <div id="productionstream-{{ productionstream.id }}-details-contents"
class="m-2 p-2 bg-white" class="m-2 p-2 bg-white"
hx-get="{% url 'production:_hx_productionstream_details_contents' productionstream_id=productionstream.id %}" hx-get="{% url 'production:_hx_productionstream_details_contents' productionstream_id=productionstream.id %}"
hx-trigger="toggle once from:#productionstream-{{ productionstream.id }}-details" hx-trigger="toggle once from:#productionstream-{{ productionstream.id }}-details"
hx-indicator="#indicator-productionstream-{{ productionstream.id }}-details-contents" hx-indicator="#indicator-productionstream-{{ productionstream.id }}-details-contents"></div>
>
</div>
</details> </details>
scipost_django/production/templates/production/_hx_productionstream_details_contents.html
+ 5
− 3
View file @ f1031d68
...@@ -6,8 +6,8 @@ ...@@ -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. <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> </p>
<div class="row overflow-hidden" style="height: min(50vh, 40em)"> <div class="row">
<div class="col-lg-6 h-100 overflow-scroll"> <div class="col-12 col-md-6">
<h3>Actions</h3> <h3>Actions</h3>
{% if "can_perform_supervisory_actions" in sub_perms %} {% if "can_perform_supervisory_actions" in sub_perms %}
<div class="container"> <div class="container">
...@@ -32,10 +32,12 @@ ...@@ -32,10 +32,12 @@
</div> </div>
<div id="productionstream-{{ productionstream.id }}-event-container" <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 %} {% comment %} This might be better to refactor with an OOB response on each event addition {% endcomment %}
<h3>Events</h3> <h3>Events</h3>
<div id="productionstream-{{ productionstream.id }}-event-list" <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-get="{% url 'production:render_stream_events' productionstream.id %}"
hx-trigger="load, submit from:#productionstream-{{ productionstream.id }}-details target:form delay:500"> hx-trigger="load, submit from:#productionstream-{{ productionstream.id }}-details target:form delay:500">
</div> </div>
......
scipost_django/production/templates/production/_hx_productionstream_summary_assignees_status.html
+ 58
− 38
View file @ f1031d68
<table class="table"> {% load scipost_extras %}
<tr>
<td> <div class="row mb-0">
<small class="text-muted">Latest activity</small> <div class="order-3 order-sm-1 order-md-3 order-xl-1 col-sm-6 col-md-12 col-xl-6">
</td> <div class="row justify-content-between">
<td> <small class="col text-muted text-nowrap">Stream opened</small>
{{ productionstream.latest_activity|timesince }} ago <div class="col-auto">{{ productionstream.opened|timesince }} ago</div>
<br> </div>
<span class="text-muted">(opened {{ productionstream.opened|timesince }} ago)</span> </div>
</td> <div class="order-2 order-sm-4 order-md-2 order-xl-4 col-sm-6 col-md-12 col-xl-6">
</tr> <div class="row justify-content-between">
<tr> <small class="col text-muted text-nowrap">Officer</small>
<td> <div class="col-auto text-nowrap text-truncate">
<small class="text-muted">Supervisor</small> {% if productionstream.officer %}
</td> <span class="text-success ">{% include 'bi/check-circle-fill.html' %}</span>
<td> {{ productionstream.officer }}
{% if productionstream.supervisor %} {% else %}
<span class="text-success">{% include 'bi/check-circle-fill.html' %}</span> <span class="text-danger">{% include 'bi/x-circle-fill.html' %}</span>
{{ productionstream.supervisor }} {% endif %}
{% else %} </div>
<span class="text-danger">{% include 'bi/x-circle-fill.html' %}</span> </div>
{% endif %} </div>
</td> <div class="order-4 order-sm-3 order-md-4 order-xl-3 col-sm-6 col-md-12 col-xl-6">
</tr> <div class="row justify-content-between">
<tr> <small class="col text-muted text-nowrap">Latest activity</small>
<td> <div class="col-auto">{{ productionstream.latest_activity|timesince }} ago</div>
<small class="text-muted">Production officer</small> </div>
</td> </div>
<td> <div class="order-1 order-sm-2 order-md-1 order-xl-2 col-sm-6 col-md-12 col-xl-6">
{% if productionstream.officer %} <div class="row justify-content-between">
<span class="text-success">{% include 'bi/check-circle-fill.html' %}</span> <small class="col text-muted text-nowrap">Supervisor</small>
{{ productionstream.officer }} <div class="col-auto text-nowrap text-truncate">
{% else %} {% if productionstream.supervisor %}
<span class="text-danger">{% include 'bi/x-circle-fill.html' %}</span> <span class="text-success">{% include 'bi/check-circle-fill.html' %}</span>
{% endif %} {{ productionstream.supervisor }}
</td> {% else %}
</tr> <span class="text-danger">{% include 'bi/x-circle-fill.html' %}</span>
</table> {% 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="row mb-0">
<div class="col col-md-8"> <div class="col mb-2">
<table> <table class="mb-0">
<tbody> <tbody>
<tr> <tr>
...@@ -27,28 +27,14 @@ ...@@ -27,28 +27,14 @@
<br> <br>
{{ productionstream.submission.editorial_decision.taken_on|date:'Y-m-d' }} {{ productionstream.submission.editorial_decision.taken_on|date:'Y-m-d' }}
</div> </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> </div>
<div class="d-none d-md-block vr p-0 me-2"></div>
<div id="productionstream-{{ productionstream.id }}-summary-assignees" <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-get="{% url 'production:render_stream_assignees_status' productionstream.id %}"
hx-trigger="load, submit from:#productionstream-{{ productionstream.id }}-details target:form delay:500"> hx-trigger="load, submit from:#productionstream-{{ productionstream.id }}-details target:form delay:500">
</div> </div>
......
scipost_django/production/templates/production/_productionstream_events.html
+ 42
− 38
View file @ f1031d68
{% load scipost_extras %} {% load scipost_extras %}
{% load automarkup %} {% load automarkup %}
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped overflow-scroll mb-0">
<thead> <thead>
<tr> <tr>
<th>Date</th> <th>Date</th>
...@@ -13,69 +13,73 @@ ...@@ -13,69 +13,73 @@
<tbody> <tbody>
{% for event in events %} {% for event in events %}
<tr> <tr>
<td>
<td>
{{ event.noted_on }} {{ event.noted_on }}
{% if event.duration %} {% if event.duration %}
<br> <br>
<strong>Duration: {{ event.duration|duration }}</strong> <strong>Duration: {{ event.duration|duration }}</strong>
{% endif %} {% endif %}
</td> </td>
<td>
{{ event.get_event_display|linebreaksbr }} <td>{{ event.get_event_display|linebreaksbr }}</td>
</td>
<td> <td>
<strong>{{ event.noted_by.user.first_name }} {{ event.noted_by.user.last_name }}</strong> <strong>{{ event.noted_by.user.first_name }} {{ event.noted_by.user.last_name }}</strong>
</td> </td>
<td>
<td>
{% if not non_editable %} {% if not non_editable %}
{% if event.noted_by == request.user.production_user and event.editable %} {% if event.noted_by == request.user.production_user and event.editable %}
<div class="ps-2"> <div class="ps-2">
<a hx-get="{% url 'production:_hx_event_form' productionstream_id=productionstream.id event_id=event.id %}" <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" hx-target="#productionstream-{{ productionstream.id }}-event-{{ event.id }}-form">
> <span aria-hidden="true">{% include 'bi/pencil-square.html' %}</span>
<span aria-hidden="true"> </a>
{% include 'bi/pencil-square.html' %} <a class="text-danger"
</span> hx-get="{% url 'production:_hx_event_delete' productionstream_id=productionstream.id event_id=event.id %}"
</a> hx-target="#productionstream-{{ productionstream.id }}-details-contents"
<a class="text-danger" hx-confirm="Delete this Event?">
hx-get="{% url 'production:_hx_event_delete' productionstream_id=productionstream.id event_id=event.id %}" <span aria-hidden="true">{% include 'bi/trash-fill.html' %}</span>
hx-target="#productionstream-{{ productionstream.id }}-details-contents" </a>
hx-confirm="Delete this Event?"
>
<span aria-hidden="true">
{% include 'bi/trash-fill.html' %}
</span>
</a>
</div> </div>
{% endif %} {% endif %}
{% endif %} {% endif %}
</td> </td>
</tr> </tr>
<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"> <p class="mt-2 mb-0">
{% if event.noted_to %} {% if event.noted_to %}
<strong>To: {{ event.noted_to.user.first_name }} {{ event.noted_to.user.last_name }}</strong> <strong>To: {{ event.noted_to.user.first_name }} {{ event.noted_to.user.last_name }}</strong>
<br> <br>
{% endif %} {% endif %}
{% automarkup event.comments %} {% automarkup event.comments %}
</p> </p>
{% endif %} {% endif %}
{% if event.attachments.exists %}
{% if event.attachments.exists %}
<ul> <ul>
{% for attachment in event.attachments.all %} {% 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 %} {% endfor %}
</ul> </ul>
{% endif %}
<div id="productionstream-{{ productionstream.id }}-event-{{ event.id }}-form"></div> {% endif %}
</td>
<div id="productionstream-{{ productionstream.id }}-event-{{ event.id }}-form"></div>
</td>
</tr> </tr>
{% empty %} {% empty %}
<tr> <tr>
<td>No events found</td> <td>No events found</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
......
scipost_django/production/templates/production/production_new.html
+ 27
− 20
View file @ f1031d68
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
{% load crispy_forms_tags %} {% load crispy_forms_tags %}
{% block breadcrumb_items %} {% block breadcrumb_items %}<span class="breadcrumb-item">Production streams</span>{% endblock %}
<span class="breadcrumb-item">Production streams</span>
{% endblock %}
{% block pagetitle %}: Production page{% endblock pagetitle %} {% block pagetitle %}
: Production page
{% endblock pagetitle %}
{% block content %} {% block content %}
...@@ -14,33 +14,40 @@ ...@@ -14,33 +14,40 @@
<h1>Production Streams</h1> <h1>Production Streams</h1>
<div class="card my-4"> <div class="card my-4">
<div class="card-header"> <div class="card-header">Search / filter</div>
Search / filter
</div>
<div class="card-body"> <div class="card-body">
<form <form hx-post="{% url 'production:_hx_productionstream_list' %}"
hx-post="{% url 'production:_hx_productionstream_list' %}" hx-trigger="load, keyup delay:500ms, change, click from:#refresh-button"
hx-trigger="load, keyup delay:500ms, change, click from:#refresh-button" hx-target="#search-productionstreams-results"
hx-target="#search-productionstreams-results" hx-indicator="#indicator-search-productionstreams">
hx-indicator="#indicator-search-productionstreams"
> <div id="search-productionstreams-form">{% crispy search_productionstreams_form %}</div>
<div id="search-productionstreams-form">{% crispy search_productionstreams_form %}</div>
</form> </form>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <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>
<div class="col">
<div class="col-auto">
<div id="indicator-search-productionstreams" class="htmx-indicator"> <div id="indicator-search-productionstreams" class="htmx-indicator">
<button class="btn btn-sm btn-warning" type="button" disabled>
<strong>Loading...</strong> <button class="btn btn-sm btn-warning" type="button" disabled>
<div class="spinner-grow spinner-grow-sm ms-2" role="status" aria-hidden="true"></div> <strong>Loading...</strong>
</button>
<div class="spinner-grow spinner-grow-sm ms-2"
role="status"
aria-hidden="true"></div>
</button>
</div> </div>
</div> </div>
</div> </div>
<div id="search-productionstreams-results" class="mt-2"></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: ( ...@@ -200,3 +200,13 @@ $theme-colors: (
); );
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value"); $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