style issue page
This commit is contained in:
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) {
|
private function purifyHtml($html) {
|
||||||
$config = \HTMLPurifier_Config::createDefault();
|
$config = \HTMLPurifier_Config::createDefault();
|
||||||
$config->set('HTML.Doctype', 'XHTML 1.0 Transitional');
|
$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('URI.AllowedSchemes', array('http' => true, 'https' => true, 'mailto' => true, 'ftp' => true));
|
||||||
$config->set('HTML.TargetBlank', true);
|
$config->set('HTML.TargetBlank', true);
|
||||||
|
|
||||||
|
|
|
@ -8,23 +8,39 @@
|
||||||
|
|
||||||
namespace helpers;
|
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');
|
$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::getMarkdownFilter());
|
||||||
|
$environment->addFilter(static::getColorFilter());
|
||||||
}
|
}
|
||||||
|
|
||||||
private static function getMarkdownFilter()
|
private static function getMarkdownFilter() {
|
||||||
{
|
|
||||||
return new \Twig_SimpleFilter('markdown', function ($text) {
|
return new \Twig_SimpleFilter('markdown', function ($text) {
|
||||||
$parser = new Markdown();
|
$parser = new Markdown();
|
||||||
return $parser->text($text);
|
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": {},
|
"devDependencies": {},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"compileCSS": "node-sass --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 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": "",
|
"author": "",
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
|
|
|
@ -31,6 +31,7 @@ $container['view'] = function ($container) {
|
||||||
// Instantiate and add Slim specific extension
|
// Instantiate and add Slim specific extension
|
||||||
$basePath = rtrim(str_ireplace('index.php', '', $container['request']->getUri()->getBasePath()), '/');
|
$basePath = rtrim(str_ireplace('index.php', '', $container['request']->getUri()->getBasePath()), '/');
|
||||||
$view->addExtension(new Slim\Views\TwigExtension($container['router'], $basePath));
|
$view->addExtension(new Slim\Views\TwigExtension($container['router'], $basePath));
|
||||||
|
$view->addExtension(new \Twig_Extension_Debug());
|
||||||
$twig = $view->getEnvironment();
|
$twig = $view->getEnvironment();
|
||||||
helpers\Twig::setDateFormat($twig);
|
helpers\Twig::setDateFormat($twig);
|
||||||
helpers\Twig::registerFilter($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
|
blockquote { // bootstrap 3 like styling
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
margin: 0 0 20px;
|
margin: 0 0 20px;
|
||||||
font-size: 17.5px;
|
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 %}
|
{% import "macros.twig" as macro %}
|
||||||
|
|
||||||
{% block title %}
|
{% block title %}
|
||||||
<title>{{ projectName }} Issue {{number}} - {{ title }}</title>
|
<title>{{ projectName }} Issue {{ number }} - {{ title }}</title>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
@ -10,30 +10,45 @@
|
||||||
<div class="page-header">
|
<div class="page-header">
|
||||||
<h1>{{ title }}
|
<h1>{{ title }}
|
||||||
<a href="https://github.com/{{ githubOrganization }}/{{ githubRepository }}/issues/{{ number }}">
|
<a href="https://github.com/{{ githubOrganization }}/{{ githubRepository }}/issues/{{ number }}">
|
||||||
<small>#{{number}}</small>
|
<small>#{{ number }}</small>
|
||||||
</a>
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
{% if labels and labels|length %}
|
{% if labels and labels|length %}
|
||||||
{% for label in labels %}
|
{% 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 %}
|
{% endfor %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
{% if milestone %}
|
||||||
|
<span class="badge badge-secondary" title="{{ milestone.description }}">{{ milestone.title }}</span>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<hr>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="panel panel-default">
|
<div class="card">
|
||||||
<div class="panel-heading">{{ macro.username(user) }} opened this issue on {{ created_at|date }}</div>
|
<div class="card-header">
|
||||||
<div class="panel-body">
|
{{ 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 }}
|
{{ body|markdown|raw }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% if comments|length %}
|
{% if comments|length %}
|
||||||
{% for comment in comments %}
|
{% for comment in comments %}
|
||||||
<div class="panel panel-default">
|
<div class="card">
|
||||||
<div class="panel-heading">{{ macro.username(comment.user) }} commented on {{ comment.created_at|date }}</div>
|
<div class="card-header">{{ macro.user(comment.user) }} commented
|
||||||
<div class="panel-body">
|
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 }}
|
{{ comment.body|markdown|raw }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -41,8 +56,10 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if state == 'closed' %}
|
{% if state == 'closed' %}
|
||||||
<div class="well well-sm">
|
<div class="card">
|
||||||
This issue was closed on {{ closed_at|date }}
|
<div class="card-header">
|
||||||
|
This issue was closed on {{ closed_at|date }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
@ -51,7 +68,7 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<a href="/">Home</a> |
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,3 +1,6 @@
|
||||||
{% macro username(user) %}
|
{% macro user(user) %}
|
||||||
<a href="{{ user.html_url }}" target="_blank">@{{ user.login }}</a>
|
<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 %}
|
{% endmacro %}
|
Reference in a new issue