SciPost Code Repository

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

add placeholders to prod page

parent 2cf2df83
No related branches found
No related tags found
1 merge request!43Polish up new production page
Hide whitespace changes
Inline Side-by-side
scipost_django/production/templates/production/_hx_productionstream_details_contents.html
+ 125
− 27
View file @ 15dbe1a5
...@@ -36,7 +36,27 @@ ...@@ -36,7 +36,27 @@
aria-labelledby="productionstream-{{ productionstream.id }}-change-stream-properties-header" aria-labelledby="productionstream-{{ productionstream.id }}-change-stream-properties-header"
data-bs-parent="#productionstream-{{ productionstream.id }}-actions-accordion"> data-bs-parent="#productionstream-{{ productionstream.id }}-actions-accordion">
<div class="accordion-body"> <div class="accordion-body">
<div id="productionstream-{{ productionstream.id }}-change-stream-properties-body"></div> <div id="productionstream-{{ productionstream.id }}-change-stream-properties-body">
{% comment %} Placeholder before HTMX content loads {% endcomment %}
<div class="placeholder-glow">
{% for i_repeat in '1234' %}
<div class="row ">
<div class="col-2">
<div class="w-100 py-1 placeholder"></div>
</div>
<div class="col-8">
<div class="w-100 pb-4 pt-2 placeholder"></div>
</div>
<div class="col-2">
<div class="w-100 pb-4 pt-2 placeholder"></div>
</div>
</div>
{% endfor %}
</div>
{% comment %} End placeholder {% endcomment %}
</div>
<div id="productionstream-{{ productionstream.id }}-actions-message"></div> <div id="productionstream-{{ productionstream.id }}-actions-message"></div>
</div> </div>
</div> </div>
...@@ -62,7 +82,28 @@ ...@@ -62,7 +82,28 @@
aria-labelledby="productionstream-{{ productionstream.id }}-upload-proofs-header" aria-labelledby="productionstream-{{ productionstream.id }}-upload-proofs-header"
data-bs-parent="#productionstream-{{ productionstream.id }}-actions-accordion"> data-bs-parent="#productionstream-{{ productionstream.id }}-actions-accordion">
<div id="productionstream-{{ productionstream.id }}-upload-proofs-body" <div id="productionstream-{{ productionstream.id }}-upload-proofs-body"
class="accordion-body"></div> class="accordion-body">
{% comment %} Placeholder before HTMX content loads {% endcomment %}
<div class="placeholder-glow">
<h3>
<span class="placeholder">Proofs</span>
</h3>
<div class="w-100 mb-2 py-4 placeholder"></div>
<div class="w-100 mb-2 py-4 placeholder"></div>
<div class="row">
<div class="col-3">
<div class="w-100 py-3 placeholder"></div>
</div>
<div class="col-9">
<div class="w-100 py-3 placeholder"></div>
</div>
</div>
<div class="w-25 px-1 py-3 placeholder"></div>
</div>
{% comment %} End placeholder {% endcomment %}
</div>
</div> </div>
</div> </div>
{% endif %} {% endif %}
...@@ -77,19 +118,61 @@ ...@@ -77,19 +118,61 @@
aria-expanded="false" aria-expanded="false"
aria-controls="productionstream-{{ productionstream.id }}-work-log" aria-controls="productionstream-{{ productionstream.id }}-work-log"
hx-get="{% url 'production:_hx_productionstream_actions_work_log' productionstream_id=productionstream.id %}" hx-get="{% url 'production:_hx_productionstream_actions_work_log' productionstream_id=productionstream.id %}"
hx-trigger="load, htmx:trigger from:#productionstream-{{ productionstream.id }}-work-log-body target:a.work_log_delete_btn delay:1000" hx-trigger="click once, htmx:trigger from:#productionstream-{{ productionstream.id }}-work-log-body target:a.work_log_delete_btn delay:1000"
hx-target="#productionstream-{{ productionstream.id }}-work-log-body">Work Log</button> hx-target="#productionstream-{{ productionstream.id }}-work-log-body"
hx-swap="innerHTML">Work Log</button>
</h2> </h2>
<div id="productionstream-{{ productionstream.id }}-work-log" <div id="productionstream-{{ productionstream.id }}-work-log"
class="accordion-collapse collapse" class="accordion-collapse collapse"
aria-labelledby="productionstream-{{ productionstream.id }}-work-log-header" aria-labelledby="productionstream-{{ productionstream.id }}-work-log-header"
data-bs-parent="#productionstream-{{ productionstream.id }}-actions-accordion"> data-bs-parent="#productionstream-{{ productionstream.id }}-actions-accordion">
<div id="productionstream-{{ productionstream.id }}-work-log-body" <div id="productionstream-{{ productionstream.id }}-work-log-body"
class="accordion-body"></div> class="accordion-body">
{% comment %} Placeholder before HTMX content loads {% endcomment %}
<div class="placeholder-glow">
<div class="row">
<div class="col-3">
<div class="w-100 placeholder"></div>
</div>
</div>
{% for i_repeat in '12' %}
<div class="row">
<div class="col-9">
<div class="g-2">
<div class="col-6 placeholder"></div>
<div class="col-8 placeholder"></div>
</div>
</div>
<div class="col-3">
<div class="g-2">
<div class="col-12 placeholder"></div>
<div class="offset-4 col-8 placeholder"></div>
</div>
</div>
</div>
{% endfor %}
<div class="w-75 py-1 mb-3 placeholder"></div>
{% for i_repeat in '123' %}
<div class="row">
<div class="col-2">
<div class="w-100 py-1 placeholder"></div>
</div>
<div class="col-10">
<div class="w-100 pb-4 placeholder"></div>
</div>
</div>
{% endfor %}
</div>
{% comment %} End placeholder {% endcomment %}
</div>
</div> </div>
</div> </div>
</div> </div>
{% if perms.scipost.can_draft_publication or perms.scipost.can_publish_accepted_submission %} {% if perms.scipost.can_draft_publication or perms.scipost.can_publish_accepted_submission %}
...@@ -124,27 +207,6 @@ ...@@ -124,27 +207,6 @@
</div> </div>
{% endif %} {% endif %}
{% comment %} <h3>Actions</h3>
<ul>
<li>Worklog</li>
{% if "can_work_for_stream" in sub_perms %}
{% if perms.scipost.can_upload_proofs and upload_proofs_form %}
<div class="row">
<div class="col-12 col-sm-auto col-md-12 col-lg-auto h-100 d-none-empty">
<div class="row m-0 d-none-empty">
<button class="btn btn-sm btn-primary text-white" hx-post="{% url 'production:upload_proofs' stream_id=productionstream.id %}" hx-target="#productionstream-{{ productionstream.id }}-details">Upload Proofs</button>
</div>
</div>
</div>
{% endif %}
{% endif %}
<li>Accessibility</li>
<li>Send Proofs</li>
</ul> {% endcomment %}
</div> </div>
<div id="productionstream-{{ productionstream.id }}-event-container" <div id="productionstream-{{ productionstream.id }}-event-container"
...@@ -156,7 +218,43 @@ ...@@ -156,7 +218,43 @@
style="max-height: max(50vh, 40em)" 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, click from:#productionstream-{{ productionstream.id }}-details target:.proof-action-button delay:500"> hx-trigger="load, submit from:#productionstream-{{ productionstream.id }}-details target:form delay:500, click from:#productionstream-{{ productionstream.id }}-details target:.proof-action-button delay:500">
{% comment %} Placeholder before HTMX content loads {% endcomment %}
<table class="table table-bordered table-striped overflow-scroll mb-0"
aria-hidden="true">
<tr>
<th>Date</th>
<th>Event</th>
<th>Noted by</th>
<th>Actions</th>
</tr>
{% for p in '12345' %}
<tr class="placeholder-glow">
<td>
<div class="placeholder w-100 bg-secondary"></div>
</td>
<td>
<div class="placeholder w-75 bg-secondary"></div>
</td>
<td>
<div class="placeholder w-75 bg-secondary"></div>
</td>
<td>
<div class="placeholder w-100 bg-secondary"></div>
</td>
</tr>
<tr>
<td colspan="4" class="placeholder-wave">
<div class="placeholder w-25 bg-secondary"></div>
<div class="placeholder w-75 bg-secondary"></div>
</td>
</tr>
{% endfor %}
</table>
{% comment %} End placeholder {% endcomment %}
</div> </div>
<div id="productionstream-{{ productionstream.id }}-event-new-comment-form"> <div id="productionstream-{{ productionstream.id }}-event-new-comment-form">
<button hx-get="{% url 'production:_hx_event_form' productionstream_id=productionstream.id %}" <button hx-get="{% url 'production:_hx_event_form' productionstream_id=productionstream.id %}"
hx-target="#productionstream-{{ productionstream.id }}-event-new-comment-form" hx-target="#productionstream-{{ productionstream.id }}-event-new-comment-form"
......
scipost_django/production/templates/production/_productionstream_details_summary_contents.html
+ 50
− 2
View file @ 15dbe1a5
...@@ -53,6 +53,54 @@ ...@@ -53,6 +53,54 @@
<div id="productionstream-{{ productionstream.id }}-summary-assignees" <div id="productionstream-{{ productionstream.id }}-summary-assignees"
class="col-md-6" 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, click from:#productionstream-{{ productionstream.id }}-details target:.proof-action-button delay:500"> hx-trigger="intersect, submit from:#productionstream-{{ productionstream.id }}-details target:form delay:500, click from:#productionstream-{{ productionstream.id }}-details target:.proof-action-button delay:500">
{% comment %} Placeholder while HTMX is loading {% endcomment %}
<div class="row mb-0 placeholder-glow">
<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-4 text-muted text-nowrap placeholder">Stream opened</small>
<div class="col-8">
<div class="w-100 placeholder"></div>
</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-4 text-muted text-nowrap placeholder">Officer</small>
<div class="col-8 text-nowrap text-truncate">
<div class="w-100 placeholder"></div>
</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-4 text-muted text-nowrap placeholder">Latest activity</small>
<div class="col-8">
<div class="w-100 placeholder"></div>
</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-4 text-muted text-nowrap placeholder">Supervisor</small>
<div class="col-8 text-nowrap text-truncate">
<div class="w-100 placeholder"></div>
</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-4 text-muted text-nowrap placeholder">Stream Status</small>
<div class="col-8">
<div class="badge bg-secondary w-50">
<div class="w-100 placeholder"></div>
</div>
</div>
</div>
</div>
{% comment %} End placeholder {% endcomment %}
</div>
</div> </div>
</div>
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