style issue page
This commit is contained in:
Lukas Winkler
parent
c4db4c06dd
commit
26fccf932b
7 changed files with 110 additions and 26 deletions
|
|
@ -27,7 +27,8 @@ class Markdown extends \Parsedown {
|
|||
private function purifyHtml($html) {
|
||||
$config = \HTMLPurifier_Config::createDefault();
|
||||
$config->set('HTML.Doctype', 'XHTML 1.0 Transitional');
|
||||
$config->set('HTML.Allowed', 'p,strong,em,b,a[href],i,span,ul,ol,li,cite,code,pre,br,blockquote');
|
||||
$config->set('HTML.Allowed', 'p,strong,em,b,a[href],i,span,ul,ol,li,cite,code,pre,br,blockquote,img');
|
||||
$config->set('HTML.AllowedAttributes', 'src, height, width, alt, href');
|
||||
$config->set('URI.AllowedSchemes', array('http' => true, 'https' => true, 'mailto' => true, 'ftp' => true));
|
||||
$config->set('HTML.TargetBlank', true);
|
||||
|
||||
|
|
|
|||
|
|
@ -8,23 +8,39 @@
|
|||
|
||||
namespace helpers;
|
||||
|
||||
class Twig {
|
||||
class Twig
|
||||
{
|
||||
|
||||
public static function setDateFormat(\Twig_Environment $environment)
|
||||
{
|
||||
public static function setDateFormat(\Twig_Environment $environment) {
|
||||
$environment->getExtension("Twig_Extension_Core")->setDateFormat('F jS Y');
|
||||
}
|
||||
|
||||
public static function registerFilter(\Twig_Environment $environment)
|
||||
{
|
||||
public static function registerFilter(\Twig_Environment $environment) {
|
||||
$environment->addFilter(static::getMarkdownFilter());
|
||||
$environment->addFilter(static::getColorFilter());
|
||||
}
|
||||
|
||||
private static function getMarkdownFilter()
|
||||
{
|
||||
private static function getMarkdownFilter() {
|
||||
return new \Twig_SimpleFilter('markdown', function ($text) {
|
||||
$parser = new Markdown();
|
||||
return $parser->text($text);
|
||||
});
|
||||
}
|
||||
|
||||
private static function getColorFilter() {
|
||||
return new \Twig_SimpleFilter(
|
||||
/**
|
||||
* modified from https://24ways.org/2010/calculating-color-contrast/
|
||||
* @param $colorstring "#ffffff"
|
||||
* @return string
|
||||
*/
|
||||
'textcolor', function ($hexcolor) {
|
||||
$r = hexdec(substr($hexcolor, 0, 2));
|
||||
$g = hexdec(substr($hexcolor, 2, 2));
|
||||
$b = hexdec(substr($hexcolor, 4, 2));
|
||||
$yiq = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
return ($yiq >= 128) ? 'black' : 'white';
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
"compileCSS": "node-sass --recursive --output public/css --source-map true --source-map-contents scss",
|
||||
"watchSCSS": "node-sass --watch --recursive --output public/css --source-map true --source-map-contents scss"
|
||||
"compileCSS": "node-sass --recursive --output-style compressed --output public/css --source-map true --source-map-contents scss",
|
||||
"watchSCSS": "node-sass --watch --recursive --output-style compressed --output public/css --source-map true --source-map-contents scss"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ $container['view'] = function ($container) {
|
|||
// Instantiate and add Slim specific extension
|
||||
$basePath = rtrim(str_ireplace('index.php', '', $container['request']->getUri()->getBasePath()), '/');
|
||||
$view->addExtension(new Slim\Views\TwigExtension($container['router'], $basePath));
|
||||
$view->addExtension(new \Twig_Extension_Debug());
|
||||
$twig = $view->getEnvironment();
|
||||
helpers\Twig::setDateFormat($twig);
|
||||
helpers\Twig::registerFilter($twig);
|
||||
|
|
|
|||
|
|
@ -31,9 +31,55 @@ h1 a {
|
|||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 6px 10px;
|
||||
&.text-black {
|
||||
color: $gray-800;
|
||||
}
|
||||
&.text-white {
|
||||
color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 2rem;
|
||||
.avatar {
|
||||
margin-right: 3px;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.authorAssociation {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
font-size: smaller;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote { // bootstrap 3 like styling
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 20px;
|
||||
font-size: 17.5px;
|
||||
border-left: 5px solid #eee;
|
||||
border-left: 5px solid $gray-300;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
display: block;
|
||||
padding: 9.5px;
|
||||
margin: 0 0 10px;
|
||||
color: $gray-800;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background-color: $gray-200;
|
||||
border: 1px solid $gray-400;
|
||||
border-radius: $border-radius;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
{% import "macros.twig" as macro %}
|
||||
|
||||
{% block title %}
|
||||
<title>{{ projectName }} Issue {{number}} - {{ title }}</title>
|
||||
<title>{{ projectName }} Issue {{ number }} - {{ title }}</title>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
|
@ -10,30 +10,45 @@
|
|||
<div class="page-header">
|
||||
<h1>{{ title }}
|
||||
<a href="https://github.com/{{ githubOrganization }}/{{ githubRepository }}/issues/{{ number }}">
|
||||
<small>#{{number}}</small>
|
||||
<small>#{{ number }}</small>
|
||||
</a>
|
||||
</h1>
|
||||
{% if labels and labels|length %}
|
||||
{% for label in labels %}
|
||||
<span class="label label-default">{{ label.name }}</span>
|
||||
<span class="badge text-{{ label.color | textcolor }}"
|
||||
style="background: {{ '#' ~ label.color }}">{{ label.name }}</span>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% if milestone %}
|
||||
<span class="badge badge-secondary" title="{{ milestone.description }}">{{ milestone.title }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="container">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">{{ macro.username(user) }} opened this issue on {{ created_at|date }}</div>
|
||||
<div class="panel-body">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{ macro.user(user) }} opened this issue on {{ created_at|date }}
|
||||
{% if author_association != "NONE" %}
|
||||
<span class="authorAssociation">{{ author_association | capitalize }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{ body|markdown|raw }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if comments|length %}
|
||||
{% for comment in comments %}
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">{{ macro.username(comment.user) }} commented on {{ comment.created_at|date }}</div>
|
||||
<div class="panel-body">
|
||||
<div class="card">
|
||||
<div class="card-header">{{ macro.user(comment.user) }} commented
|
||||
on {{ comment.created_at|date }}
|
||||
{% if comment.author_association != "NONE" %}
|
||||
<span class="authorAssociation">{{ comment.author_association | capitalize }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{{ comment.body|markdown|raw }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,8 +56,10 @@
|
|||
{% endif %}
|
||||
|
||||
{% if state == 'closed' %}
|
||||
<div class="well well-sm">
|
||||
This issue was closed on {{ closed_at|date }}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
This issue was closed on {{ closed_at|date }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -51,7 +68,7 @@
|
|||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<a href="/">Home</a> |
|
||||
<a onclick="window.history.back();" style="cursor: pointer;">Back</a>
|
||||
<a href="javascript:window.history.back();">Back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
{% macro username(user) %}
|
||||
<a href="{{ user.html_url }}" target="_blank">@{{ user.login }}</a>
|
||||
{% macro user(user) %}
|
||||
<a href="{{ user.html_url }}" target="_blank">
|
||||
<img class="avatar" src="{{ user.avatar_url }}&s=44" role="presentation" aria-hidden="true" width="44"
|
||||
height="44">@{{ user.login }}
|
||||
</a>
|
||||
{% endmacro %}
|
||||
Reference in a new issue