analytics/lib/plausible_web/templates/layout/app.html.eex
Uku Taht e8f20e67cc
React (#17)
* Load dashboard with react

* Rename stast2 to dashboard

* Save timeframe on the frontend

* Implement current visitors

* Implement comparisons

* React to route changes

* Add modals

* Show number of visitors on hover

* Show 'Today' for today

* Add 30 days

* Show referrer drilldown

* Arrow keys to go back and forward

* Improve comparisons UI

* Fix dropdown when clicking on it

* Verify API access in a memoized fashion

* Test API access

* Test stats through controller

* Move map formatting from stats controller to stats

* Remove unused code

* Remove dead code from query

* Remove dead code from stats templates

* Add stats view test back in

* Render modal inside the modal component

* Implement google search terms

* Add explanation for screen sizes

* Separate dashboard JS from the app js
2019-11-19 12:30:42 +08:00

77 lines
4.4 KiB
Elixir

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Plausible is a simple, lightweight web analytics service. Monitor your website traffic while respecting your visitors' privacy."/>
<link rel="icon" type="image/png" sizes="32x32" href="<%= PlausibleWeb.Router.Helpers.static_path(@conn, "/images/icon/plausible_favicon.png") %>">
<title><%= assigns[:title] || "Plausible · Simple, open-source web analytics" %></title>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<%= render("_tracking.html", assigns) %>
</head>
<body class="flex flex-col h-full bg-grey-lightest">
<%= render("_svg_icons.html") %>
<nav class="container flex items-center justify-between flex-wrap py-8">
<div class="flex items-center flex-no-shrink">
<a href="/">
<%= img_tag(PlausibleWeb.Router.Helpers.static_path(@conn, "/images/icon/plausible_logo.png"), style: "height: 2.5rem;") %>
</a>
</div>
<%= cond do %>
<% @conn.assigns[:current_user] -> %>
<ul class="list-reset flex">
<%= if @conn.assigns[:current_user].subscription == nil do %>
<li class="mr-6 hidden sm:block">
<%= link(trial_notificaton(@conn.assigns[:current_user]), to: "/settings", class: "font-bold text-orange-darkest rounded py-2 px-3 bg-orange-lighter", style: "line-height: 34px;") %>
</li>
<% else %>
<li class="mr-6 hidden sm:block">
<%= link("Give feedback", to: "/feedback", class: "font-bold rounded py-2 px-3 hover:bg-grey-lighter", style: "line-height: 34px;") %>
</li>
<% end %>
<li>
<div class="relative font-bold rounded hover:bg-grey-lighter">
<div data-dropdown-trigger class="flex items-center hover:bg-grey-lighter rounded p-2 cursor-pointer">
<span class="mr-2"><%= @conn.assigns[:current_user].name || @conn.assigns[:current_user].email %></span>
<svg style="height: 18px; transform: translateY(2px); fill: #606f7b;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 640" enable-background="new 0 0 512 512" xml:space="preserve"><g><circle cx="256" cy="52.8" r="50.8"/><circle cx="256" cy="256" r="50.8"/><circle cx="256" cy="459.2" r="50.8"/></g></svg>
</div>
<div data-dropdown style="top: 42px; right: 0px; width: 185px;" class="dropdown-content hidden absolute pin-r bg-white border border-grey-light rounded shadow-md z-10">
<%= link("Settings", to: "/settings", class: "block py-3 px-2 border-b border-grey-light hover:bg-grey-lighter") %>
<%= link("Log out", to: "/logout", method: :post, class: "block py-3 px-2 hover:bg-grey-lighter") %>
</div>
</div>
</li>
</ul>
<% true -> %>
<ul class="list-reset flex">
<li>
<%= link("Login", to: "/login", class: "font-bold rounded py-2 px-3 hover:bg-grey-lighter", style: "line-height: 33px;") %>
<%= link("Start free trial", to: "/register", class: "button button-md hidden sm:inline") %>
</li>
</ul>
<% end %>
</nav>
<%= if get_flash(@conn, :success) do %>
<div id="flash" class="text-center bg-green text-green-lightest text-sm font-bold px-4 absolute w-full transition overflow-hidden" style="top: 91px" role="alert">
<p class="py-3 "><%= get_flash(@conn, :success) %></p>
</div>
<% end %>
<%= if get_flash(@conn, :error) do %>
<div id="flash" class="text-center bg-red-dark text-red-lightest text-sm font-bold px-4 absolute w-full transition overflow-hidden" style="top: 91px" role="alert">
<p class="py-3 "><%= get_flash(@conn, :error) %></p>
</div>
<% end %>
<main class="flex-1">
<%= render @view_module, @view_template, assigns %>
</main>
<%= render("_footer.html", assigns) %>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</body>
</html>