{% extends 'keylighter.html.twig' %} {% set current = 'about' %} {% import _self as macros %} {% block content %} <div class="snippet"> <div class="d-flex dual"> <div class="form-group"> <a href="#" class="btn btn-outline-primary" id="snippet-edit"> <i class="{{ fa('pen') }}"></i> edit </a> </div> <div class="form-group"> {% if snippet.id is empty %} <a href="#" class="btn btn-primary" id="snippet-save" data-toggle="modal" data-target="#save-modal"> <i class="{{ fa('share') }}"></i> share </a> {% endif %} <a href="#" class="btn btn-outline-danger"> <i class="{{ fa('github', 'brand') }}"></i> open issue </a> </div> </div> <pre class="keylighter" id="snippet" data-language="{{ snippet.language }}" data-source="{{ snippet.code }}">{{ source|raw }}</pre> <aside> <span class="entry"> <span class="label"><i class="{{ fa('code') }}"></i></span> {{ snippet.language }} </span> <span class="entry"> <span class="label"><i class="{{ fa('clock') }}"></i></span> {{ (all*1000)|number_format(3) }}ms </span> <span class="entry"> <span class="label"><i class="{{ fa('cubes', 'solid') }}"></i></span> {{ snippet.size|number_format }} bytes </span> <span class="entry float-right"> {% if snippet.showcase %} <strong class="text-success"><i class="{{ fa('lightbulb') }}"></i> showcase</strong> {% else %} <strong class="text-muted"><i class="{{ fa('lock-alt') }}"></i> hidden</strong> {% endif %} </span> </aside> <section id="timing"> <div class="progress timing"> {{ macros.time(timing.parsing, all, 'info') }} {{ macros.time(timing.tokenization, all, 'primary') }} {{ macros.time(timing.formatting, all, 'secondary') }} </div> </section> </div> {% endblock %} {% block modals %} <div class="fade modal" tabindex="-1" role="dialog" id="save-modal"> <div class="modal-dialog modal-lg" role="document"> <form action="{{ url('snippet_save') }}" method="post"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Save your snippet</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="save-title">Title:</label> <input type="text" class="form-control" id="save-title" name="title"/> <small class="form-text text-muted">Title is required only if you want to share snippet in showcase.</small> </div> <div class="form-group"> <input type="hidden" value="{{ snippet.code }}" name="code"/> <input type="hidden" value="{{ snippet.language }}" name="language"/> <pre class="keylighter">{{ source|raw }}</pre> <aside> <span class="entry"> <span class="label"><i class="{{ fa('code') }}"></i></span> {{ snippet.language }} </span> </aside> </div> <div class="form-group"> <label><input type="checkbox" name="showcase"> show that snippet in showcase gallery</label> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">cancel</button> <button type="submit" class="btn btn-outline-primary"><i class="{{ fa('save') }}"></i> save</button> </div> </div> </form> </div> </div> {% endblock %} {% macro time(time, all, class) %} {% set milliseconds = time * 1000 %} <div class="progress-bar bg-{{ class }} has-tooltip" role="progressbar" style="width: {{ (time / all) * 100 }}%" aria-valuenow="{{ milliseconds|number_format(2) }}" aria-valuemin="0" aria-valuemax="{{ (all * 1000)|number_format(2) }}" title="{{ milliseconds|number_format(2) }}ms" data-placement="bottom" data-toggle="tooltip" > </div> {% endmacro %}