Java(script) ? Modul für MagicMirror anpassen

[meph!sto]

Hi,
ich benutze auf meinem MagicMirror ein Modul um mir Feiertage anzeigen zu lassen.

https://github.com/cowboysdude/MMM-Holiday

Konkret geht es um die MMM-Holiday.js (https://github.com/cowboysdude/MMM-Holiday/blob/master/MMM-Holiday.js)

In der Anzeige wird die 2. Zeile anders dargestellt (s. Bild + Markierung).

Dieses Leerzeichen treibt mich in den Wahnsinn.

Wie kann o.g. *.js anpassen um das Leerzeichen verschwinden zu lassen ?

Danke

 

[ReignInBlo0d]

Ohne jetzt allzu genau in den Code geschaut zu haben:
Wo kommen die deutschen Bezeichnungen denn her? Ich tippe auf einen Tippfehler an der Quelle.

Edit: in Zeile 57 siehst du, welcher Dienst für die Feiertage angefragt wird. Du könntest dich dort mal melden und um eine Überprüfung/Korrektur bitten.

 

[sandreas]

Ich vermute das Problem irgendwo im Code ab hier:
https://github.com/cowboysdude/MMM-...33738b6c00c4d1aae3863c315/MMM-Holiday.js#L133

Ich vermute, dass hier ein "Template" zusammen gestellt wird, dass später wieder ersetzt wird. Problem dabei ist, dass man aufgrund des Templates nicht sehen kann, wo das leerzeichen genau herkommt. Von der API ist es nicht (siehe http://kayaposoft.com/enrico/json/v1.0/?action=getPublicHolidaysForYear&year=2022&country=de&region=).

Verdächtig finde ich:

document.createElement("span1"); // span1 Elemente gibt es nicht.

Probieren könntest du mal in Zeile 164:

// diese Zeile ist neu!
holidayDate.innerHTML = holidayDate.innerHTML.replace(/^\s+|\s+$/g, ""); // trimmt leerzeichen weg

HolidayTable.appendChild(holidayDate);

Wenn das nicht klappt, liegt es entweder am CSS oder das Template wird nachher ersetzt und das leerzeichen in währenddessen erzeugt... da wirst du dann nicht so viel machen können.

 

[eweu]

table td {
    display: inline-block;
}

dann gehts.

 

[meph!sto]

danke, Danke, DANKE

ich probiere es aus

Edit:
o.g. Lösung funktioniert tatsächlich, leider zerschießt es mir alle weiteren Tabellen.
Ohne Ahnung von CSS zu haben, erscheint mir die o.g. Lösung eine globale Einstellung zu sein.

Ich habe eine MMM-Holiday.css. Was muss ich dort einstellen, sodass

display: inline-block;

nur für das Modul "MMM-Holiday" greift und nicht global ?

 

[eweu]

Hab ich nicht bedacht, sry. Ich verwende Magic Mirror nicht und hab es nur fix installiert zum Testen und da war es die einzige Tabelle.

Diese Zeile ändern auf

HolidayTable.className = "small mmm-holiday-table";

und in MMM-Holiday.css die Lösung oben ändern auf:

.mmm-holiday-table {
    display: inline-block;
}

 

[floq0r]

Und dann aber nur für td Sieht aber nach einer hässlichen Lösung aus die wieder andere Probleme verursachen könnte

 

[meph!sto]

Danke für deine Hilfe & Geduld,
bisher sah das immer so aus (mit besagtem Leerzeichen)

Nach der o.g. Änderung sieht es nun leider so aus:

Seid gnädig mit mir, ich habe von CSS 0 Ahnung.
Danke

 

[eweu]

ich habe von CSS 0 Ahnung

same.

.module-content {
    max-width: 400px;
}

Spiel dich bisschen herum mit der Breite bis es passt. Ist halt der ultra Hack.

Ansonsten Projekt so wie es ist zippen und hochladen, sonst kann man wirklich nur schwer nachvollziehen was man ändern muss

 

[sandreas]

Nur so aus Interesse: Hast du meinen Fix auch mal probiert?

// diese Zeile ist neu!
holidayDate.innerHTML = holidayDate.innerHTML.replace(/^\s+|\s+$/g, ""); // trimmt leerzeichen weg

HolidayTable.appendChild(holidayDate);

 

[meph!sto]

Ups,
Bisher nicht, sorry.
Ich check das im Verlauf des Tages und meld mich.

Sorry, ist mir irgendwie durchgerutscht.

 

[sandreas]

Sorry, ist mir irgendwie durchgerutscht.

kein problem, funktioniert ohnehin nur sehr unwahrscheinlich, ich dachte nur, weil die css lösungen seiteneffekte haben...

 

[eweu]

funktioniert ohnehin nur sehr unwahrscheinlich

Tatsächlich ist dort kein Leerzeichen, das ist ein alignment Problem und abhängig von der Länge des Texts. Schaut nur zufällig so aus, weil der zweite Eintrag um einiges kürzer ist als die anderen beiden.