invidious-experimenting/src/views/search.ecr

<% content_for "header" do %>
<title><%= query.size > 30 ? query[0,30].rstrip(".") + "..." : query %> - Invidious</title>
<% end %>

<% videos.each_slice(4) do |slice| %>
<div class="pure-g">
    <% slice.each do |video| %>
    <div class="pure-u-1 pure-u-md-1-4">
        <div style="overflow-wrap:break-word; word-wrap:break-word;" class="h-box">
            <a style="width:100%;" href="/watch?v=<%= video["id"] %>">
                <img style="width:100%;" src="https://i1.ytimg.com/vi/<%= video["id"] %>/mqdefault.jpg"/>
                <p><%= video["title"] %></p>
            </a>
            <p>
                <b><a style="width:100%;" href="https://youtube.com<%= video["ucid_url"]%>"><%= video["author"] %></a></b>
            </p>
        </div>
    </div>
    <% end %>
</div>
<% end %>

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-5">
    <% if page > 2 %>
        <a href="/search?q=<%= query %>&page=<%= page - 1 %>">Previous page</a>
    <% else %>
        <a href="/search?q=<%= query %>">Previous page</a>
    <% end %>
    </div>
    <div class="pure-u-1 pure-u-md-3-5"></div>
    <div style="text-align:right;" class="pure-u-1 pure-u-md-1-5">
        <a href="/search?q=<%= query %>&page=<%= page + 1 %>">Next page</a>
    </div>
</div>