From 26fccf932bdd10dadff9865ecc77c6af322ce5c1 Mon Sep 17 00:00:00 2001 From: Lukas Winkler Date: Wed, 20 Sep 2017 20:30:41 +0200 Subject: [PATCH] style issue page --- src/helpers/Markdown.php | 3 ++- src/helpers/Twig.php | 30 ++++++++++++++++++------ src/package.json | 4 ++-- src/public/index.php | 1 + src/scss/style.scss | 48 ++++++++++++++++++++++++++++++++++++++- src/templates/issue.twig | 43 ++++++++++++++++++++++++----------- src/templates/macros.twig | 7 ++++-- 7 files changed, 110 insertions(+), 26 deletions(-) diff --git a/src/helpers/Markdown.php b/src/helpers/Markdown.php index e30a269..196f008 100755 --- a/src/helpers/Markdown.php +++ b/src/helpers/Markdown.php @@ -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); diff --git a/src/helpers/Twig.php b/src/helpers/Twig.php index 252f5d7..d1341b4 100755 --- a/src/helpers/Twig.php +++ b/src/helpers/Twig.php @@ -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'; + }); + + } } \ No newline at end of file diff --git a/src/package.json b/src/package.json index a1cee20..fecb720 100644 --- a/src/package.json +++ b/src/package.json @@ -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" diff --git a/src/public/index.php b/src/public/index.php index 8fd06a2..da04caf 100644 --- a/src/public/index.php +++ b/src/public/index.php @@ -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); diff --git a/src/scss/style.scss b/src/scss/style.scss index da66ece..1dc7446 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -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; } \ No newline at end of file diff --git a/src/templates/issue.twig b/src/templates/issue.twig index e930401..5f93c9b 100755 --- a/src/templates/issue.twig +++ b/src/templates/issue.twig @@ -2,7 +2,7 @@ {% import "macros.twig" as macro %} {% block title %} - {{ projectName }} Issue {{number}} - {{ title }} + {{ projectName }} Issue {{ number }} - {{ title }} {% endblock %} {% block content %} @@ -10,30 +10,45 @@

{{ title }} - #{{number}} + #{{ number }}

{% if labels and labels|length %} {% for label in labels %} - {{ label.name }} + {{ label.name }} {% endfor %} {% endif %} + + {% if milestone %} + {{ milestone.title }} + {% endif %}
- +
-
-
{{ macro.username(user) }} opened this issue on {{ created_at|date }}
-
+
+
+ {{ macro.user(user) }} opened this issue on {{ created_at|date }} + {% if author_association != "NONE" %} + {{ author_association | capitalize }} + {% endif %} +
+
{{ body|markdown|raw }}
{% if comments|length %} {% for comment in comments %} -
-
{{ macro.username(comment.user) }} commented on {{ comment.created_at|date }}
-
+
+
{{ macro.user(comment.user) }} commented + on {{ comment.created_at|date }} + {% if comment.author_association != "NONE" %} + {{ comment.author_association | capitalize }} + {% endif %} +
+
{{ comment.body|markdown|raw }}
@@ -41,8 +56,10 @@ {% endif %} {% if state == 'closed' %} -
- This issue was closed on {{ closed_at|date }} +
+
+ This issue was closed on {{ closed_at|date }} +
{% endif %}
@@ -51,7 +68,7 @@
Home | - Back + Back
diff --git a/src/templates/macros.twig b/src/templates/macros.twig index 1cec2ce..f84145e 100755 --- a/src/templates/macros.twig +++ b/src/templates/macros.twig @@ -1,3 +1,6 @@ -{% macro username(user) %} - @{{ user.login }} +{% macro user(user) %} + + @{{ user.login }} + {% endmacro %} \ No newline at end of file