Skip to content

v0.2.0

Latest

Choose a tag to compare

@ateszdn ateszdn released this 04 Aug 13:57

Teljes front-end UI ráncfelvarrás a négy shortcode-on. Három nagy blokkban:
(1) vizuális polish + design nyelv illesztés, (2) az imos kalkulátor
összehasonlító táblázata újratervezve delta oszloppal, (3) diagramok
kitisztítva. Az admin beállítás oldal, a shortcode API és a számítási
logika változatlan — a [anest_*] shortcode-okat használó oldalak a
frissítés után is ugyanúgy renderelődnek, csak jobban néznek ki.

Módosítva

1) Vizuális polish + design nyelv illesztés

  • A design token-készlet igazodik az anest.cegem360.hu hub kártyáihoz
    (Advanced Material, Szoftver megoldások): közös #18576F teal, közös
    #e5e7eb keret, közös #f3f5f7 softbg, közös hover shadow, közös
    uppercase pill (10px / letter-spacing: 0.05em / radius: 99px) és
    gomb (14px 600 / letter-spacing: 0.05em / radius: 4px) formula.
  • Csoportosítás tónussal, nem árnyékkal: minden shortcode instance egy
    halvány #f3f5f7 burokba kerül. A belső kártyák elvesztik a nyugalmi
    árnyékot — a tónuskontraszt viszi a szeparációt, kevesebb vizuális
    zaj. Hoveren visszatér a hub-jellegű shadow (interakció visszajelzés).
  • Baloldali szövegigazítás root szinten (.anest-calc alatt minden
    h1-h4, p, label, ul, ol, dl elem), hogy a Flatsome text-align: center
    öröklődése ne rendezze középre a kártyák tartalmát.
  • text-transform: none a dt, dd, th, td, caption és kártya-
    címekre — a Flatsome uppercase kényszere („KISZÁLLÁSI DÍJ",
    „RÁFORDÍTOTT IDŐ [H]") olvashatatlan hosszú magyar szövegben, most
    vegyes betűben marad. A szándékos verzálbetűs elemek (pill jelvények,
    CTA gomb) saját text-transform: uppercase szabályt kapnak.
  • Kiszállás kalkulátor 2 oszlopos elrendezése: a bal oldalon a beviteli
    mezők (géptípus + cím), jobb oldalon az „Összesen" tealbeli
    eredménykártya. grid-template-areas-szel, 640px alatt automatikusan
    1 oszlop.
  • Szerviz árkártyák sor-igazítása CSS subgrid-del: a MUNKADÍJ,
    KISZÁLLÁSI DÍJ, KM DÍJ sorok egy vonalban vannak mind a négy kártyán
    keresztül, akkor is, ha az „Advanced material megmunkáló gép" cím
    2 sorra tör. A Távsupport hiányzó (kiszállási, km) sorai üresen
    maradnak, de a helyet lefoglalják.
  • Csomagválasztó kiválasztott állapot: halvány teal háttér + jobb felső
    sarokban jelvény (adat-URI SVG, nincs webfont függés).
  • Beüzemelési kártyák: az „óra" jelvény flex-wrap-pel a cím jobb szélén
    áll, hosszabb címeknél (pl. „Speciális CNC-k") automatikusan új sorra
    tör — nem kényszeríti a magyar szót csúnya kötőjeles törésre.
  • Ár-cellák (<dd>) margin-left: auto révén akkor is a jobb szélhez
    tapadnak, ha új sorra fordulnak: a justify-content: space-between
    egysoros esetet oldott meg, kétsorosat nem.
  • Egységes number-input + mértékegység horgony a Munkabérek / Gyártási
    paraméterek rácsban: a wrapper flex-column, a <input> margin-top: auto-val a cella aljára tapad. A mértékegység (Ft/óra, db, Ft/€) az
    új .anest-calc__unit <span>-be került, hogy a flex column ne
    tördelje szét az inputtól.
  • Szekció fejlécek: aláhúzás helyett bal 4px teal accent bar, 1.35rem
    betűméret. Ár-kiolvasás és összefoglaló szövegek (readout,
    summary) softbg + bal accent bar.

2) Egységes összehasonlító táblázat (imos kalkulátor)

  • A két külön táblázat (Hagyományos gyártás / imos iX gyártás)
    helyett egy egységes 6 oszlopos táblázat, oszlopcsoport-fejlécekkel:
    Kiadás / bevétel | Hagyományos (Idő + Összeg) | imos iX (Idő + Összeg)
    | Megspórolt. A Megspórolt oszlop cellái színkódoltak:
    • zöld (.is-savings) — pozitív delta (imos olcsóbb, megtakarítás),
    • piros (.is-cost) — negatív delta (imos drágább, pl. nyomonkövetés),
    • semleges gondolatjel — nincs különbség vagy nincs adat.
      A színkód mellett jel prefix (+/−) is jár, hogy színvakoknak is
      egyértelmű legyen (a11y).
  • Új setDeltaCell() az imos.js-ben, ami hozzáadja a .is-savings / .is-cost / .is-zero osztályokat és formázza az előjelet — a
    renderTables() a hagyomanyos - imos különbséget minden sorra
    automatikusan kiszámolja.

3) Diagramok kitisztítva

  • Vonal-diagramokon (ROI, Termelésnövekedés) kikapcsolt per-pont
    dataLabels: az összes pontnál kilógó szám ráfeküdt a trendvonalra,
    olvashatatlanná téve. Helyette markers + tooltip: a felhasználó
    hoverre / mobiltapintásra kapja az értéket.
  • Minden diagram alcímet kapott (roiSubtitle, timeSubtitle,
    growthSubtitle), hogy egyértelmű legyen, mit mutat és milyen
    egységben — a puszta címek („Gyártási idő (h/év)") kontextus nélkül
    álltak.
  • Éves gyártási idő diagramon a „megspórolt" oszlop most a táblázat
    delta zöldjét kapja (#059669) — vizuális kapocs a lenti Megspórolt
    oszloppal. Rounded corners + 55% column width, kevésbé bulky.
  • Termelésnövekedés diagram: a hagyományos gyártás pontozott, halvány
    vonal, az imos vastag, tömör teal — a szem gyorsan látja, melyik
    trajektória a győztes.
  • Diagram-panelek fehér burokban a szürke csoport-tónuson belül,
    hogy a vizualizációk megkülönböztetett kártyákként olvassanak.

Hozzáadva

  • Design token-készlet a .anest-calc root alatt: --anest-accent,
    --anest-accent-soft, --anest-accent-hover, --anest-text,
    --anest-text-muted, --anest-border, --anest-bg-soft,
    --anest-radius, --anest-radius-btn, --anest-shadow-sm/-md/-accent,
    --anest-transition. Egy helyen hangolhatók.
  • .anest-calc__unit — mértékegység-<span> az <input> után az imos
    kalkulátor számmezői mellett.
  • Megspórolt oszlop az imos összehasonlító táblázatban delta
    értékekkel + színkódolt osztályokkal.
  • roiSubtitle, timeSubtitle, growthSubtitle string kulcsok a
    shortcode config strings tömbjében a diagram alcímekhez.