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; } [x-cloak] { display: none; }
@media print {
canvas {
width: 100% !important;
height: auto !important;
}
}
.button { .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; @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} /> <IntervalPicker site={site} query={query} graphData={graphData} metric={metric} updateInterval={updateInterval} />
</div> </div>
<FadeIn show={graphData}> <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> <canvas id="main-graph-canvas" className={canvasClass}></canvas>
</div> </div>
</FadeIn> </FadeIn>

View File

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

View File

@ -1,5 +1,5 @@
<nav class="relative z-20 py-8"> <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"> <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"> <div class="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">
<a href={home_dest(@conn)}> <a href={home_dest(@conn)}>

View File

@ -44,7 +44,7 @@ defmodule PlausibleWeb.StatsView do
cond do cond do
conn.assigns[:embedded] && conn.assigns[:width] == "manual" -> "" conn.assigns[:embedded] && conn.assigns[:width] == "manual" -> ""
conn.assigns[:embedded] -> "max-w-screen-xl mx-auto px-6" 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
end end