Author: Pedro Lucas Porcellis <porcellis@eletrotupi.com>
views: thrown a basic layout to render the story
views/index.erb | 26 ++++++++++++++++++++++++ views/layout.erb | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++
diff --git a/views/index.erb b/views/index.erb new file mode 100644 index 0000000000000000000000000000000000000000..371e905373de01146fb769d668022c9d133a238d --- /dev/null +++ b/views/index.erb @@ -0,0 +1,26 @@ +<section class="pt-10"> + <h1> + <%= @story["title"] %> + </h1> + + <div class="flex col"> + <h2> + Characters that are featured in this story: + </h2> + + <ul> + <% @characters.each do |character| %> + <li> + <div class="flex col align-center justify-center mb-10"> + <% thumbnail = character['thumbnail'] %> + <% src = "#{thumbnail['path']}.#{thumbnail['extension']}" %> + <img src="<%= src %>" style="width: 250px; height: auto;"> + <strong> + <%= character["name"] %> + </strong> + </div> + </li> + <% end %> + </ul> + </div> +</section> diff --git a/views/layout.erb b/views/layout.erb new file mode 100644 index 0000000000000000000000000000000000000000..bbc7ace53c18c8aad1759025669a0d2cc7774cbf --- /dev/null +++ b/views/layout.erb @@ -0,0 +1,54 @@ +<!doctype html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title>Marvel</title> + <style> + body { + background-color: #FFFFFF; + color: #111111; + text-align: center; + max-width: 960px; + margin: 0 auto; + padding: 0 1rem; + font-family: sans-serif; + } + + .pt-10 { + padding-top: 10px; + } + + .flex { + display: flex; + } + + .col { + flex-direction: column; + } + + .align-center { + align-items: center; + } + + .justify-center { + justify-content: center; + } + + .w-100 { + width: 100%; + } + + .mb-10 { + margin-bottom: 10px; + } + + ul { + list-style: none; + } + </style> + </head> + <body> + <%= yield %> + </body> +</html>