Improve print dashboard css (#3754)

* Improve print dashboard CSS

* More improvements
This commit is contained in:
hq1 2024-02-07 08:57:39 +01:00 committed by GitHub
parent 03e1224693
commit 9ad5ecebc2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 12 additions and 5 deletions

View File

@ -9,6 +9,13 @@
[x-cloak] { display: none; }
@media print {
canvas {
width: 100% !important;
height: auto !important;
}
}
.button {
@apply inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md leading-5 transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
}

View File

@ -349,7 +349,7 @@ class LineGraph extends React.Component {
<IntervalPicker site={site} query={query} graphData={graphData} metric={metric} updateInterval={updateInterval} />
</div>
<FadeIn show={graphData}>
<div className="relative h-96 w-full z-0">
<div className="relative h-96 print:h-auto print:pb-8 w-full z-0">
<canvas id="main-graph-canvas" className={canvasClass}></canvas>
</div>
</FadeIn>

View File

@ -39,7 +39,7 @@
<% end %>
</div>
<div class="grid grid-cols-2 gap-8 xl:col-span-2">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div class="md:grid md:grid-cols-2 md:gap-8 print:hidden">
<div>
<h4 class="text-sm font-semibold tracking-wider text-gray-400 uppercase leading-5">
Why Plausible?
@ -154,7 +154,7 @@
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div class="md:grid md:grid-cols-2 md:gap-8 print:hidden">
<div>
<h4 class="text-sm leading-5 font-semibold tracking-wider text-gray-400 uppercase">
Community

View File

@ -1,5 +1,5 @@
<nav class="relative z-20 py-8">
<div class="container">
<div class="container print:max-w-full">
<nav class="relative flex items-center justify-between sm:h-10 md:justify-center">
<div class="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">
<a href={home_dest(@conn)}>

View File

@ -44,7 +44,7 @@ defmodule PlausibleWeb.StatsView do
cond do
conn.assigns[:embedded] && conn.assigns[:width] == "manual" -> ""
conn.assigns[:embedded] -> "max-w-screen-xl mx-auto px-6"
!conn.assigns[:embedded] -> "container"
!conn.assigns[:embedded] -> "container print:max-w-full"
end
end