Revert to native background colour control

This commit is contained in:
Uku Taht 2021-03-16 10:40:25 +02:00
parent 8964780d8c
commit 3ff97d27ad
9 changed files with 23 additions and 23 deletions

View File

@ -104,9 +104,8 @@ if (embedButton) {
const embedLink = new URL(document.getElementById('embed-link').value)
embedLink.searchParams.set('embed', 'true')
embedLink.searchParams.set('theme', theme)
let backgroundAttr = ''
if (background) {
backgroundAttr = `background="${background}"`
embedLink.searchParams.set('background', background)
}
embedCode.value = `<iframe plausible-embed ${backgroundAttr} src="${embedLink.toString()}" scrolling="no" frameborder="0" loading="lazy" style="width: 1px; min-width: 100%; height: 1600px;"></iframe>

View File

@ -24,10 +24,12 @@ class Historical extends React.Component {
}
render() {
const navClass = this.props.site.embedded ? 'relative' : 'sticky'
return (
<div className="mb-12">
<div id="stats-container-top"></div>
<div className={`sticky top-0 sm:py-3 py-1 z-9 ${this.props.stuck && !this.props.site.embedded ? 'z-10 fullwidth-shadow bg-gray-50 dark:bg-gray-850' : ''}`}>
<div className={`${navClass} top-0 sm:py-3 py-1 z-9 ${this.props.stuck && !this.props.site.embedded ? 'z-10 fullwidth-shadow bg-gray-50 dark:bg-gray-850' : ''}`}>
<div className="items-center w-full sm:flex">
<div className="flex items-center w-full mb-2 sm:mb-0">
<SiteSwitcher site={this.props.site} loggedIn={this.props.loggedIn} />

View File

@ -14,7 +14,8 @@ if (container) {
offset: container.dataset.offset,
hasGoals: container.dataset.hasGoals === 'true',
insertedAt: container.dataset.insertedAt,
embedded: container.dataset.embedded
embedded: container.dataset.embedded,
background: container.dataset.background
}
const loggedIn = container.dataset.loggedIn === 'true'

View File

@ -16,7 +16,7 @@ class Realtime extends React.Component {
renderConversions() {
if (this.props.site.hasGoals) {
return (
<div className="w-full block md:flex items-start justify-between mt-6">
<div className="items-start justify-between block w-full mt-6 md:flex">
<Conversions site={this.props.site} query={this.props.query} title="Goal Conversions (last 30 min)" />
</div>
)
@ -24,12 +24,14 @@ class Realtime extends React.Component {
}
render() {
const navClass = this.props.site.embedded ? 'relative' : 'sticky'
return (
<div className="mb-12">
<div id="stats-container-top"></div>
<div className={`sticky top-0 bg-gray-50 dark:bg-gray-850 sm:py-3 py-1 z-9 ${this.props.stuck ? 'z-10 fullwidth-shadow' : ''}`}>
<div className="w-full sm:flex justify-between items-center">
<div className="w-full flex items-center mb-2 sm:mb-0">
<div className={`${navClass} top-0 sm:py-3 py-1 z-9 ${this.props.stuck && !this.props.site.embedded ? 'z-10 fullwidth-shadow bg-gray-50 dark:bg-gray-850' : ''}`}>
<div className="items-center justify-between w-full sm:flex">
<div className="flex items-center w-full mb-2 sm:mb-0">
<SiteSwitcher site={this.props.site} loggedIn={this.props.loggedIn} />
<Filters query={this.props.query} history={this.props.history} />
</div>
@ -37,11 +39,11 @@ class Realtime extends React.Component {
</div>
</div>
<VisitorGraph site={this.props.site} query={this.props.query} timer={this.props.timer} />
<div className="w-full block md:flex items-start justify-between">
<div className="items-start justify-between block w-full md:flex">
<Sources site={this.props.site} query={this.props.query} timer={this.props.timer} />
<Pages site={this.props.site} query={this.props.query} timer={this.props.timer} />
</div>
<div className="w-full block md:flex items-start justify-between">
<div className="items-start justify-between block w-full md:flex">
<Countries site={this.props.site} query={this.props.query} timer={this.props.timer} />
<Devices site={this.props.site} query={this.props.query} timer={this.props.timer} />
</div>

View File

@ -25,11 +25,14 @@ export default class CurrentVisitors extends React.Component {
render() {
if (countFilters(this.props.query) !== 0) { return null }
const query = new URLSearchParams(window.location.search)
query.set('period', 'realtime')
const { currentVisitors } = this.state;
if (currentVisitors !== null) {
return (
<Link to={`/${encodeURIComponent(this.props.site.domain)}?period=realtime`} className="block text-sm font-bold text-gray-500 dark:text-gray-300 mr-auto ml-2">
<svg className="w-2 mr-2 fill-current text-green-500 inline" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<Link to={{search: query.toString()}} className="block ml-2 mr-auto text-sm font-bold text-gray-500 dark:text-gray-300">
<svg className="inline w-2 mr-2 text-green-500 fill-current" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="8"/>
</svg>
{currentVisitors} current visitor{currentVisitors === 1 ? '' : 's'}

View File

@ -1,11 +1,3 @@
import iframeResize from 'iframe-resizer/js/iframeResizer'
const iframe = document.querySelector('[plausible-embed]')
const options = {
heightCalculationMethod: 'taggedElement'
}
if (iframe.getAttribute('background')) {
options.bodyBackground = iframe.getAttribute('background')
}
iframeResize(options, '[plausible-embed]')
iframeResize({heightCalculationMethod: 'taggedElement'}, '[plausible-embed]')

View File

@ -139,6 +139,7 @@ defmodule PlausibleWeb.StatsController do
skip_plausible_tracking: true,
shared_link_auth: shared_link.slug,
embedded: conn.params["embed"] == "true",
background: conn.params["background"],
theme: conn.params["theme"]
)
end

View File

@ -12,7 +12,7 @@
<%= render("_tracking.html", assigns) %>
<script type="text/javascript" data-pref="<%= @conn.assigns[:theme] || (@conn.assigns[:current_user] && @conn.assigns[:current_user].theme) %>" src="<%= Routes.static_path(@conn, "/js/applyTheme.js") %>"></script>
</head>
<body class="flex flex-col bg-gray-50 dark:bg-gray-850" style="<%= if !@conn.assigns[:embedded], do: "height: 100%" %>">
<body class="flex flex-col bg-gray-50 dark:bg-gray-850" style="<%= if !@conn.assigns[:embedded], do: "height: 100%;" %> <%= if @conn.assigns[:background], do: "background-color: #{@conn.assigns[:background]}" %>">
<%= if !@conn.assigns[:embedded] do %>
<%= render("_header.html", assigns) %>
<%= render("_notice.html", assigns) %>

View File

@ -5,7 +5,7 @@
</div>
<% end %>
<div class="pt-6"></div>
<div id="stats-react-container" data-domain="<%= @site.domain %>" data-offset="<%= Timex.Timezone.total_offset(Timex.Timezone.get(@site.timezone)) %>" data-has-goals="<%= @has_goals %>" data-logged-in="<%= !!@conn.assigns[:current_user] %>" data-inserted-at="<%= @site.inserted_at %>" data-shared-link-auth="<%= assigns[:shared_link_auth] %>" data-embedded="<%= @conn.assigns[:embedded] %>"></div>
<div id="stats-react-container" data-domain="<%= @site.domain %>" data-offset="<%= Timex.Timezone.total_offset(Timex.Timezone.get(@site.timezone)) %>" data-has-goals="<%= @has_goals %>" data-logged-in="<%= !!@conn.assigns[:current_user] %>" data-inserted-at="<%= @site.inserted_at %>" data-shared-link-auth="<%= assigns[:shared_link_auth] %>" data-embedded="<%= @conn.assigns[:embedded] %>" data-background="<%= @conn.assigns[:background] %>"></div>
<div id="modal_root"></div>
<%= if !@conn.assigns[:current_user] && @conn.assigns[:demo] do %>
<div class="bg-gray-50 dark:bg-gray-850">