Skip to content

Commit 412951a

Browse files
agjohnsonagjohnson
authored
Build detail page fixes (#492)
* Improve build detail field listing - Add field labels - Condense commit/type/PR fields - Fixes #46, make date and length field update as the build progresses * Lint * Support hour, minute, seconds in duration * Fixes for usage of inline styles and removing old output style * Make output scrollable to avoid error in wide lines Also adds a "Wrap output" checkbox to the detail view. * Don't stack on mobile This fixes all leftover display issues on mobile
1 parent 494f89b commit 412951a

File tree

7 files changed

+163
-130
lines changed

7 files changed

+163
-130
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ __pycache__/
77
*.DS_Store
88
docs/_build/
99
docs/out/
10-
build/
10+
/build/
1111
.python-version
1212
.node-version
1313
.tool-versions

‎readthedocsext/theme/static/readthedocsext/theme/css/site.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎readthedocsext/theme/static/readthedocsext/theme/js/site.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎readthedocsext/theme/templates/builds/build_detail.html‎

Lines changed: 53 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% extends "projects/base.html" %}
22

3-
{% load trans from i18n %}
3+
{% load blocktrans trans from i18n %}
44
{% load is_admin from privacy_tags %}
55

66
{% block title %}
@@ -68,44 +68,46 @@
6868
{# Build metadata on the right #}
6969
{% block build_detail_metadata_right %}
7070
<div class="ui five wide middle aligned column">
71-
<div class="ui relaxed list">
71+
<div class="ui relaxed list ko hidden"
72+
data-bind="css: { hidden: is_loading() }">
7273
<div class="item">
7374
<i class="grey fa-duotone fa-calendar icon"></i>
74-
<div class="content" data-bind="if: !is_loading()">
75-
<div data-bind="attr: { 'data-tooltip': date_display() }, text: '{% trans "Build started" %} ' + date_display_since()">
76-
</div>
75+
<div class="content">
76+
<span class="sub header">{% trans "Started" %}</span>
77+
<time data-bind="attr: { 'data-tooltip': date_display() }, text: date_display_since"></time>
7778
</div>
7879
</div>
7980

8081
<div class="item">
8182
<i class="grey fa-duotone fa-clock icon"></i>
82-
<div class="content" data-bind="if: is_finished">
83-
<div data-bind="text: '{% trans "Build took %d" %}'.replace('%d', length_display())">
84-
</div>
83+
<div class="content">
84+
<span class="sub header">{% trans "Duration" %}</span>
85+
<span data-bind="text: length_display"></span>
8586
</div>
8687
</div>
8788

88-
{# Version type is static, so we can skip some KO code #}
89+
{# Version type is static, and some of these attributes are not in the APIv2 response #}
8990
<div class="item">
90-
<i class="grey fa-duotone {{ build.is_external | yesno:"fa-code-pull-request,fa-tag" }} icon"></i>
91-
<div class="content" data-bind="if: !is_loading()">
91+
<i class="grey fa-duotone {{ build.is_external | yesno:"fa-code-pull-request,fa-code-branch" }} icon"></i>
92+
<div class="content">
9293
{% if build.is_external %}
93-
{{ build.external_version_name | lower | capfirst }}
94+
<span class="sub header">
95+
{{ build.external_version_name | lower | capfirst }}
96+
</span>
9497
<a href="{{ build.version.vcs_url }}"><code>#{{ build.get_version_name }}</code></a>
9598
{% else %}
96-
<code>
97-
<a href="{% url "builds_project_list" build.project.slug %}?version__slug={{ build.get_version_slug }}">
98-
{{ build.get_version_name }}
99-
</a>
100-
</code>
99+
<span class="sub header">{{ build.get_version_type | lower | capfirst }}</span>
100+
{{ build.get_version_name }}
101101
{% endif %}
102-
</div>
103-
</div>
104-
105-
<div class="item" data-bind="visible: commit_short">
106-
<i class="grey fa-duotone fa-code-branch icon"></i>
107-
<div class="content" data-bind="if: !is_loading()">
108-
<a data-bind="attr: {href: commit_url}"><code data-bind="text: commit_short"></code></a>
102+
<code class="ko hidden" data-bind="css: { hidden: !commit() }">
103+
<a data-bind="attr: {href: commit_url}">
104+
{% spaceless %}
105+
<span>(</span>
106+
<span data-bind="text: commit_short">{{ build.commit }}</span>
107+
<span>)</span>
108+
{% endspaceless %}
109+
</a>
110+
</code>
109111
</div>
110112
</div>
111113

@@ -131,6 +133,12 @@
131133
<i class="fa-duotone fa-microscope icon"></i>
132134
{% trans "Debug" %}
133135
</a>
136+
<div class="item">
137+
<div class="ui small checkbox">
138+
<input type="checkbox" data-bind="checked: is_wrapped" />
139+
<label>Wrap output</label>
140+
</div>
141+
</div>
134142
<div class="right menu">
135143

136144
{% if request.user|is_admin:project %}
@@ -169,37 +177,23 @@
169177
</div>
170178
</div>
171179

172-
{# TODO: remove this `build.output block completely #}
173180
{% if build.output %}
174-
{# djlint: off H021 #}
175-
{# If we have build output, this is an old build #}
176-
<p>
177-
<button data-bind="visible: !legacy_output(), click: show_legacy_output">
178-
{% trans "Show full build output" %}
179-
</button>
180-
</p>
181-
182-
<div data-bind="visible: legacy_output" style="display: none;">
183-
<h3>{% trans "Build Output" %}</h3>
184-
<pre class="build-output"><span id="build-output">{{ build.output }}</span></pre>
185-
186-
{% if build.setup %}
187-
<h3>{% trans "Setup Output" %}</h3>
188-
<pre class="build-output"><span id="build-setup">{{ build.setup }}</span></pre>
189-
{% endif %}
190-
191-
{% if build.setup_error %}
192-
<h3>{% trans "Environment Standard Error" %}</h3>
193-
<pre class="ui negative message"><span id="build-setup_error">{{ build.setup_error }}</span></pre>
194-
{% endif %}
181+
{% comment %}
182+
This is a very old build type, before we supported individual build
183+
commands. It is very not supported anymore so we'll just throw an error
184+
so we're not silently failing.
185+
{% endcomment %}
186+
<div class="ui inverted notification error message">
187+
<div class="header">
188+
<i class="fas fa-exclamation-circle icon"></i>
189+
{% trans "Build output unavailable" %}
190+
</div>
191+
<p>
192+
{% blocktrans %}
193+
Due to the age of this build, the output of this build is no longer available.
194+
{% endblocktrans %}
195+
</p>
195196
</div>
196-
197-
{% if build.error %}
198-
<h3>{% trans "Build Errors" %}</h3>
199-
<pre class="ui negative message"><span id="build-error">{{ build.error }}</span></pre>
200-
{% endif %}
201-
202-
{# djlint: on H021 #}
203197
{% else %}
204198

205199
{% block build_detail_notifications %}
@@ -238,7 +232,7 @@ <h3>{% trans "Build Errors" %}</h3>
238232
</div>
239233
{% endblock build_detail_notifications %}
240234

241-
<div class="ui inverted bottom attached segment transition slide">
235+
<div class="ui inverted bottom attached horizontally scrolling segment transition slide">
242236

243237
{% comment %}
244238
This is a loading placeholder. The extra element is to fill out the
@@ -250,8 +244,8 @@ <h3>{% trans "Build Errors" %}</h3>
250244
<div class="ui basic segment very padded"
251245
data-bind="visible: is_loading()"></div>
252246

253-
<table class="ko hidden ui small very basic compact inverted selectable command table"
254-
data-bind="css: { hidden: !commands() }, foreach: commands">
247+
<table class="ko hidden ui small very basic compact inverted selectable command unstackable table"
248+
data-bind="css: { hidden: !commands(), 'single line': !is_wrapped() }, foreach: commands">
255249
<tbody>
256250
<tr class="top aligned command"
257251
data-bind="visible: is_visible() || $parent.show_debug()">
@@ -261,7 +255,7 @@ <h3>{% trans "Build Errors" %}</h3>
261255
data-bind="class: is_expanded() ? 'fa-angle-down' : 'fa-angle-right'"></i>
262256
</a>
263257
</td>
264-
<td>
258+
<td class="command">
265259
<code class="ui text"
266260
data-bind="text: command, class: command_class, click: toggle_expanded"></code>
267261
<a class="ui mini inverted label" data-bind="text: run_time() + 's'"></a>
@@ -286,15 +280,12 @@ <h3>{% trans "Build Errors" %}</h3>
286280
</tbody>
287281
</table>
288282

289-
{# djlint: off H021 #}
290-
{# TODO replace with `class="ko hidden"` #}
291-
<div data-bind="visible: is_polling() && !is_loading()"
292-
style="display: none">
283+
<div class="ko hidden"
284+
data-bind="css: { hidden: is_loading() || !is_polling() }">
293285
<div data-bind="visible: is_polling"
294286
class="ui active inverted mini centered inline text loader">
295287
</div>
296288
</div>
297-
{# djlint: on H021 #}
298289

299290
</div>
300291
{% endif %}

0 commit comments

Comments
 (0)