Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: make payload example collapsible #34

Merged
merged 5 commits into from
Jun 1, 2020
Merged

feat: make payload example collapsible #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7f357ba
feat: make payload example collapsible
WaleedAshraf May 22, 2020
d6aff63
fix: fix colors in css and div class
WaleedAshraf May 27, 2020
5cbe5ed
fix: always show headers and payload
WaleedAshraf May 27, 2020
f6a2778
fix: adjust margins and text color
WaleedAshraf May 27, 2020
8a15a76
fix: only show headers/payload when available
WaleedAshraf May 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 50 additions & 30 deletions partials/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,56 @@
{% macro example(msg, channelName) %}
{% macro example(msg, channelName, open=false) %}

<form>
<input type="radio" checked id="example-payload-{{channelName}}-{{msg.uid()}}" name="tab" class="examples-payload-tab hidden" {% if not msg.payload() %}disabled{% endif %}/>
<label for="example-payload-{{channelName}}-{{msg.uid()}}" class="py-1 px-2 mr-2 mb-4 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer {% if not msg.payload() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.payload() %}title="This message does not have a payload"{% endif %}>Payload</label>
<h5 class="examples-uid text-orange mt-4">{{msg.uid()}}</h5>
{% if msg.payload() %}
<div class="payload-examples mb-4 {% if open %}is-open{% endif %}">
<div class="{% if msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
<span class="px-2 mr-2 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer">Payload</span>
{% if msg.payload() | isExpandable %}
<svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
xmlns="http://www.w3.org/2000/svg" y="0">
<polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
</svg>
{% endif %}
</div>
<div class="children payload-examples mt-4">
{% if msg | getPayloadExamples | length %}
{% for ex in msg | getPayloadExamples %}
<h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
<pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ex | dump(2) | safe }}</code></pre>
{% endfor %}
{% elif msg.payload() %}
<pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.payload().json() | generateExample | safe }}</code></pre>
<h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
{% endif %}
</div>
</div>
{% endif %}

<input type="radio" id="example-headers-{{channelName}}-{{msg.uid()}}" name="tab" class="examples-headers-tab hidden" {% if not msg.headers() %}disabled{% endif %} />
<label for="example-headers-{{channelName}}-{{msg.uid()}}"
class="py-1 px-2 mr-2 mb-4 text-sm border rounded focus:outline-none cursor-pointer {% if not msg.headers() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.headers() %}title="This message does not have headers"{% endif %}>Headers</label>

<div class="payload-examples mt-4">
{% if msg | getPayloadExamples | length %}
{% for ex in msg | getPayloadExamples %}
<h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
<pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ex | dump(2) | safe }}</code></pre>
{% endfor %}
{% elif msg.payload() %}
<pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.payload().json() | generateExample | safe }}</code></pre>
<h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
{% endif %}
</div>

<div class="headers-examples mt-4">
{% if msg | getHeadersExamples | length %}
{% for ex in msg | getHeadersExamples %}
<h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
<pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ ex | dump(2) | safe }}</code></pre>
{% endfor %}
{% elif msg.headers() %}
<pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.headers().json() | generateExample | safe }}</code></pre>
<h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
{% endif %}
</div>
{% if msg.headers() %}
<div class="headers-examples mb-4 {% if open %}is-open{% endif %}">
<div class="{% if msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
<span class="px-2 mr-2 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer">Headers</span>
{% if msg.payload() | isExpandable %}
<svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
xmlns="http://www.w3.org/2000/svg" y="0">
<polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
</svg>
{% endif %}
</div>
<div class="children headers-examples mt-4">
{% if msg | getHeadersExamples | length %}
{% for ex in msg | getHeadersExamples %}
<h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
<pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ ex | dump(2) | safe }}</code></pre>
{% endfor %}
{% elif msg.headers() %}
<pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.headers().json() | generateExample | safe }}</code></pre>
<h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
{% endif %}
</div>
</div>
{% endif %}
</form>

{% endmacro %}
13 changes: 8 additions & 5 deletions template/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,6 @@ a:hover {

/* EXAMPLES */

.payload-examples,
.headers-examples {
display: none;
}

.examples-payload-tab:checked + label {
background-color: #38a89d;
border-color: #38a89d;
Expand All @@ -100,6 +95,14 @@ a:hover {
display: block;
}

.payload-examples polygon, .headers-examples polygon {
fill: #fff;
}

.payload-examples .text-grey-lightest, .headers-examples .text-grey-lightest {
align-self: center;
}

/* PANELS */

.sidebar-panel {
Expand Down