ergo

src/Gist/Resources/views/View/view.html.twig

@@ -1,9 +1,9 @@
 {% extends 'base.html.twig' %}
 
 {% block css %}
-    {{ parent() }}
+    <link rel="stylesheet" href="{{ web_path }}app/css/geshi/vibrant-ink.css" />
 
-    <link rel="stylesheet" href="{{ web_path }}app/css/geshi/twilight.css" />
+    {{ parent() }}
 {% endblock %}
 
 {% block body %}
@@ -70,24 +70,26 @@
                                 {% for commit in history %}
                                     <div class="commit">
                                         <p>
-                                            Commit <strong class="text-warning">{{ commit.commit }}</strong>
-                                            
-                                            {% if loop.first %}(init){% endif %}
+                                            <a href="{{ path('view', {gist: gist.file, commit: commit.commit}) }}" class="btn btn-warning btn-sm">
+                                                {{ commit.commit|slice(0, 10) }}
+                                            </a>
 
-                                            <br/>
-                                            Date: {{ commit.date|date('date.format'|trans) }}
+                                            {% if loop.first %}<span class="btn btn-info btn-sm">init</span>{% endif %}
+                                            
+                                            {% if not loop.first %}
+                                                <a href="#diff-{{ loop.index }}" data-target="#diff-{{ loop.index }}" class="btn btn-default btn-sm show-diff">
+                                                    diff
+                                                </a>
+                                            {% endif %}
+                                        </p>
+                                        <p>
+                                            {{ commit.date|date('date.format'|trans) }}
                                         </p>
                                         <div>
-                                            <a href="{{ path('view', {gist: gist.file, commit: commit.commit}) }}" class="btn btn-primary">
-                                                Afficher
-                                            </a>
                                             {% if not loop.first %}
-                                                <a href="#diff-{{ loop.index }}" id="diff-{{ loop.index }}" class="btn btn-default show-diff">
-                                                    DIFF
-                                                </a>
 
-                                                <div class="diff">
-                                                    <pre>{{ commit.diff }}</pre>
+                                                <div class="diff" id="diff-{{ loop.index }}">
+                                                    {{ commit.diff|raw }}
                                                 </div>
                                             {% endif %}
                                         </div>

src/Gist/Service/GistService.php

@@ -45,7 +45,7 @@ class GistService
         for ($i = count($commits) - 1; $i >= 0; $i--) {
             $commit = trim($commits[$i][1]);
 
-            $command = GitCommand::getInstance('show', $commit);
+            $command = GitCommand::getInstance('show', '--no-color', $commit);
             $command->setDirectory($this->gistPath);
             $command->bypass(false);
 
@@ -55,7 +55,7 @@ class GistService
             $data = array(
                 'commit' => trim($commits[$i][1]),
                 'date' => new \DateTime(trim($dates[$i][1])),
-                'diff' => $diff,
+                'diff' => $this->highlight('diff', $diff),
             );
 
             $history[] = $data;

web/app/css/app.css

@@ -30,6 +30,11 @@ pre {
 	background: #222;
 	border: #222;
 	color: #ddd;
+	white-space: pre-wrap;
+	white-space: -moz-pre-wrap;
+	white-space: -pre-wrap;
+	white-space: -o-pre-wrap;
+	word-wrap: break-word;
 }
 
 pre ol {
@@ -37,13 +42,30 @@ pre ol {
 }
 
 pre li:hover {
-	background: #222;
+	background: #444;
 }
 
 .panel-heading .actions {
 	margin-top: -5px;
 }
 
-.diff {
+div.diff {
 	display: none;
 }
+
+.de1 {
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+.li1 {
+	background: #333;
+}
+
+.re8 {
+	color: #52F700;
+}
+
+.kw3 {
+	color: #C6C765;
+}

web/app/js/app.js

@@ -67,7 +67,7 @@ var editorEvents = function() {
     });
 
 	$('.show-diff').click(function() {
-		$(this).next().toggle();
+		$($(this).data('target')).toggle();
 	});
 }