Try to unfuck some chart related CSS.

This commit is contained in:
Mario Zechner 2023-06-20 00:22:22 +02:00
parent 18fcf6497e
commit 55b8a79107
2 changed files with 20 additions and 16 deletions

View File

@ -1,6 +1,6 @@
const { STORE_KEYS } = require("../model/stores");
const { settings } = require("../model");
const { today, log, deltaTime } = require("../js/misc");
const { today, log, deltaTime, isMobile } = require("../js/misc");
const { View } = require("./view");
require("./custom-checkbox");
const moment = require("moment");
@ -14,9 +14,9 @@ class ItemsChart extends View {
this.unitPrice = false;
this.innerHTML = /*html*/ `
<div class="bg-stone-200 p-4 mx-auto">
<div class="w-full h-[calc(100vw*0.66)] md:h-[calc(100vw*0.5)] lg:h-[calc(100vw*0.30)]" style="position: relative;">
<canvas x-id="canvas" class="bg-white rounded-lg py-4"></canvas>
<div class="bg-stone-200 p-4 mx-auto md:rounded-none md:mb-0 rounded-xl mb-4">
<div class="w-full h-[calc(100vh*0.50)] md:h-[calc(100vh*0.60)] lg:h-[calc(100vh*0.60)]" style="position: relative;">
<canvas x-id="canvas" class="bg-white rounded-lg"></canvas>
<div x-id="noData" class="hidden flex items-center justify-center h-full">Keine Daten ausgewählt</div>
</div>
<div class="filters flex items-center flex-wrap justify-center gap-2 pt-2">
@ -144,7 +144,7 @@ class ItemsChart extends View {
},
options: {
layout: {
padding: 20,
padding: 16,
},
animation: false,
responsive: true,

View File

@ -22,6 +22,7 @@ class ItemsList extends View {
<div x-id="options" class="hidden flex flex-col md:flex-row gap-4 px-4 py-2 my-4 justify-between items-center text-sm border rounded-xl md:mt-8 md:rounded-b-none md:mb-0 bg-gray-100 ">
<div>
<div class="flex flex-col md:flex-row gap-2 items-center">
<div class="flex flex-row gap-2 items-center">
<span x-id="numItemsLabel">Resultate</span><span x-id="numItems"></span>
<span>
<a x-id="json" class="hidden text-primary font-medium hover:underline" href="">JSON</a>
@ -29,12 +30,15 @@ class ItemsList extends View {
<custom-checkbox x-id="enableChart" x-change x-state label="Diagramm" class="${
this._chart ? "" : "hidden"
}"></custom-checkbox>
</div>
<div class="flex flex-row gap-2 items-center">
<label><input x-id="salesPrice" x-change x-state type="radio" name="priceType${
ItemsList.priceTypeId
}" checked> Verkaufspreis</label>
<label><input x-id="unitPrice" x-change x-state type="radio" name="priceType${ItemsList.priceTypeId++}"> Mengenpreis</label>
</div>
</div>
</div>
<label class="${hideSort}">
Sortieren
<select x-id="sort" x-change x-state>