app/views/layouts/application.html.erb


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Esoterra</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="turbolinks-cache-control" content="no-cache">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body class="flex flex-col min-h-screen text-base text-gray-400 bg-gray-800">
    <%= render "header" %>

    <div class="flex-1 bg-gray-900 rounded flex-grow">
      <div class="mx-auto p-2 grid gap-2 grid-cols-12 px-2">
        <% if user_signed_in? %>
          <%= render "navbar" %>
        <% end %>
        <div class="flex flex-col game-container-column col-span-12 sm:col-span-8 xl:col-span-9">
          <div class="game-container-box mb-2 overflow-y-auto flex-grow">
            <%= render "flash_messages" %>
            <%= yield %>
          </div>
          <% if user_signed_in? %>
            <div id="chat" class="overflow-y-auto"
                 style="min-height: 10%; max-height: 20%"
                 data-turbolinks-permanent>
              <%= render "chat" %>
            </div>
          <% end %>
        </div>
        <% if user_signed_in? %>
          <div class="flex flex-col game-container-column col-span-12 sm:col-span-4 xl:col-span-3">
            <div class="game-container-box mb-2 overflow-y-auto" id="activity_controls"
                 style="min-height: 40%" data-turbolinks-permanent>
              <%= render "timer" %>
            </div>
            <div class="game-container-box overflow-auto text-sm p-2 flex-grow" id="result_output"
                 style="max-height: 60%"
                 data-turbolinks-permanent>
            </div>
          </div>
        <% else %>
          <div id="game_info" class="game-container-box game-container-column col-span-12 sm:col-span-4 xl:col-span-3"
               data-turbolinks-permanent>
            <%= render "game_info" %>
          </div>
        <% end %>
      </div>
    </div>

    <div class="flex-shrink bg-gray-800 p-2 text-display text-center text-xs text-gray-400">
      Esoterra &copy; 2020-2021
    </div>
  </body>
</html>