Improve formatting of results

Change to use the 'info' template with some custom css and handlebars
to get it to display properly.

Should now wrap correctly with sentences and words, and display 'lines'
on separate lines.

lib/DDG/Goodie/GibberishGenerator.pm

@@ -71,19 +71,25 @@ handle query_lc => sub {
     my $fmodifier = $modifier =~ s/^\w/\u$&/r;
     # E.g, "3 words of Swedish gibberish"
     my $formatted_input = "$amount @{[pluralise $amount, $type]} of $fmodifier gibberish";
+    my @paragraphs = split "\n", $result;
 
     return $result, structured_answer => {
         id   => 'gibberish_generator',
         name => 'Answer',
         data => {
-            title    => $result,
-            subtitle => $formatted_input,
+            title                => "$formatted_input",
+            gibberish_paragraphs => \@paragraphs,
+            use_paragraphs       => $#paragraphs,
         },
         templates => {
-            group  => 'text',
-            moreAt => 0,
+            group   => 'info',
+            options => {
+                moreAt       => 0,
+                content      => 'DDH.gibberish_generator.content',
+                chompContent => 1,
+            }
         }
-    }
+    };
 };
 
 1;

share/goodie/gibberish_generator/content.handlebars

@@ -0,0 +1,9 @@
+{{#if use_paragraphs}}
+    {{#each gibberish_paragraphs}}
+        <p>{{this}}</p>
+    {{/each}}
+{{else}}
+    <div class="c-info__content chomp js-ellipsis">
+        {{{gibberish_paragraphs}}}
+    </div>
+{{/if}}

share/goodie/gibberish_generator/gibberish_generator.css

@@ -0,0 +1,3 @@
+.zci--gibberish_generator .c-info__title {
+    font-size: 1.143em;
+}

t/GibberishGenerator.t

@@ -12,11 +12,15 @@ sub build_result {
     return $result, structured_answer => {
         id   => 'gibberish_generator',
         name => 'Answer',
-        data => '-ANY-',
-        templates  => {
-            group  => 'text',
-            moreAt => 0,
-        },
+        data => "-ANY-",
+        templates => {
+            group   => 'info',
+            options => {
+                moreAt       => 0,
+                content      => 'DDH.gibberish_generator.content',
+                chompContent => 1,
+            }
+        }
     };
 }