Event-Kalender mit SQLite

PHP, CSS und JavaScript lernen. Anwendungen für Webseiten
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Und die index.htm heißt nun demo.htm :) das hatte ich vergessen zu erwähnen.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

so weit scheint alles zu funzen :tu:

https://www.mobirise-tutorials.com/Even ... er-SQLite/

Das habe ich geändert:

Navi wird am SAMSUNG (Android-Browser) zu breit:

Code: Alles auswählen

/* Navigation */
.navLink {
  cursor: pointer;
  display: inline-block;
  /* EDIT Tommy 
  padding: 5px 10px 5px 10px; */
  padding: 5px;
  transition: all 0.3s;
}
z-index wieder auf 1500 gesetzt, da die Box sonst bei Mobirise hinter der Navi (1200) verschwindet und kein "sticky" mehr wirken kann.

Code: Alles auswählen

form#form {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  font-optical-sizing: Auto;
  color: var(--color);
  background-color: var(--bgcolor-even);
  border-radius: 5px;
  outline: Solid 1px #999999;
  box-shadow: 0px 0px 15px 8px rgb(190 190 190 / 55%);
  position: absolute;
  /* EDIT Tommy von 500 auf 1500 gesetzt */
  z-index: 1500;
  user-select: none;
}
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Werner,

warum ist jetzt am Desktop die Navigation bei mir so klein geworden :eek:

... finde es gerade nicht :(


P.S.:

... ich habe es. Ich habe jetzt 2 x aus dem "td":

table#tabelle td#navigation

ein "th" gemacht:

Code: Alles auswählen

table#tabelle th#navigation {
  font-size: 1.3rem !important;
  text-align: center;
  white-space: nowrap;
  background-image: linear-gradient(var(--bgcolor-scheme), var(--bgcolor-odd));
}

/* Media */
@media screen and (max-width: 48rem) {
  table#tabelle,
  div#aktiv form {
    font-size: 0.8rem;
  }

  table#tabelle th#navigation {
    /* EDIT Tommy
    font-size: 1.1rem !important; */
    font-size: 1rem !important;   
    font-weight: normal;
  }

  span.abbrWochentag {
    display: None;
  }

  div.event {
    font-size: 0.8rem;
  }
}
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Ich muss mir das mal noch eine Weile angucken - aber - ich glaube, dass ich die immer gleich großen Tage schöner fand als die jetzt komplett verschieden großen Tage (je nach Inhalt). Insbesondere am Handy sieht das echt komisch aus. Die Einträge sind zwar besser lesbar aber die Optik (das Design) hat dadurch mächtig verloren. Weiterhin werden Tage mit nur Hintergrundbildern sehr viel breiter angezeigt als zuvor.


Desktop (warum wird durch Eintrag "Normalzeit" das Feld fast doppelt so breit dargestellt als nötig):


Desktop.JPG


Handy - sieht komisch aus:


Screenshot_20220118-170304_Samsung Internet.jpg
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Oh Gott, das sieht schrecklich aus, und ich dachte man darf die Angabe width="" in einer Tabellenspalte nicht mehr verwenden! Ich hatte das in der CSS-Datei ausgelagert:

Code: Alles auswählen

table#tabelle th {
  text-align: Center !important;
  font-weight: normal;
  width: 14.285714%;
}
Wird wieder rückgängig gemacht :D

Am Handy bei mir auf deiner Seite konnte ich den Fehler nicht sehen :confused:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

also nein - das war es nicht, denn ich habe diese Class noch genau so drinnen:

Code: Alles auswählen

table#tabelle th {
  text-align: Center !important;
  font-weight: normal;
  width: 14.285714%;
}
Das ist doch nur 100 / 7 und dürfte doch richtig sein :confused:



Ich habe jetzt eine Version am Server, die so funktioniert - auch am Handy in allen Browsern:

https://www.mobirise-tutorials.com/Even ... er-SQLite/

Leider muss ich sagen, dass ich den Durchblick verloren habe und wahrscheinlich auch irgendwo selbst gestern etwas falsch gemacht hatte. Ich weiß nicht mehr was diese variable Spaltenbreite verursacht hatte. Ich muss auch beim Sichern neuerer Änderungen versehentlich ältere Änderungen überschrieben haben - bei mir herrscht da gerade etwas Chaos :angst:

Bitte sei doch so lieb und gucke Dir meine Änderungen mal an, die ich alle mit "EDIT Tommy" markiert habe. Vergleiche diese doch auch mit Deiner aktuellen CSS von gestern morgen, die bei mir nicht (zum ersten Mal) funktioniert hat.

Wichtig ist auch der höhere "z-index" (1500) für die Mobirise-Navi, und die etwas kleinere Schrift in der Kalender-Navigation am Handy, sonst wird der Kalender dort etwas zu breit und erzeugt einen Querscroller von wenigen Pixeln.

Hier meine CSS:

Code: Alles auswählen

/*
 *  Event-Kalender (SQLite) - style.css (utf-8)
 * - https://werner-zenk.de
 * - EDIT Tommy 18.01.2022
 */

/* Hauptfarben */
:root {
  --color: rgb(55, 55, 55);
  --bgcolor-even: rgb(250, 250, 250);
  --bgcolor-odd: rgb(240, 240, 240);
  --bgcolor-scheme: rgb(255, 255, 255);
  --highlight-color: rgb(34, 132, 230);
  --highlight-bgcolor: rgb(222, 238, 252);
  /* EDIT Tommy 
  --highlight-outlinecolor: rgb(134, 201, 255); */
  --highlight-outlinecolor: rgb(75, 147, 198);
  color-scheme: light dark;
}

/* Tabelle */
table#tabelle {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  font-optical-sizing: Auto;
  color: var(--color);
  table-layout: Auto;
  border-collapse: Separate;
  border-spacing: 1px;
  width: 100%;
  z-index: 1;
  cursor: Default;
  user-select: none;
}

/* Tabelle (nth-child even/odd) */
table#tabelle th:nth-child(even) {
  background-color: var(--bgcolor-even);
}
table#tabelle th:nth-child(odd) {
  background-color: var(--bgcolor-odd);
}

table#tabelle td:nth-child(even) {
  background-color: var(--bgcolor-even);
}
table#tabelle td:nth-child(odd) {
  background-color: var(--bgcolor-odd);
}

table#tabelle th {
  text-align: Center !important;
  font-weight: normal;
  width: 14.285714%;
}

table#tabelle td.eintag {
  vertical-align: top;
  height: 65px;
}

table#tabelle td.eintag:hover {
  color: var(--highlight-color);
}

table#tabelle td.keintag {
  color: rgb(202, 201, 201);
  vertical-align: top;
}

table#tabelle td.heute {
  border: Solid 1.5px var(--highlight-outlinecolor);
  border-radius: 3px;
}

/* EDIT Tommy td#navigation changed to th#navigation */
table#tabelle th#navigation {
  font-size: 1.3rem !important;
  text-align: center;
  white-space: nowrap;
  background-image: linear-gradient(var(--bgcolor-scheme), var(--bgcolor-odd));
}

table#tabelle td#menue {
  text-align: right;
  padding-right: 5px;
  word-spacing: 3px;
  background-image: linear-gradient(var(--bgcolor-odd), var(--bgcolor-scheme));
}

/* Navigation */
.navLink {
  cursor: pointer;
  display: inline-block;
  padding: 5px 10px 5px 10px;
  transition: all 0.3s;
}

.navLink:hover {
  color: var(--highlight-color);
  background-color: var(--highlight-bgcolor);
  outline: Solid 1px var(--highlight-outlinecolor);
}

div#titelleiste > .navLink:hover {
  color: #ffffff;
  background-color: #d71526;
  border-top-right-radius: 5px;
  outline: 0px;
}

.keineAuswahl {
  padding: 5px 10px 5px 10px;
}

div#aktiv a:link,
div#aktiv a:visited {
  color: var(--highlight-color);
}

form#form {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  font-optical-sizing: Auto;
  color: var(--color);
  background-color: var(--bgcolor-even);
  border-radius: 5px;
  outline: Solid 1px #999999;
  box-shadow: 0px 0px 15px 8px rgb(190 190 190 / 55%);
  position: absolute;
  /* EDIT Tommy von 500 auf 1500 gesetzt */
  z-index: 1500;
  user-select: none;
}

div#titelleiste {
  font-size: 0.8rem;
  background-color: var(--bgcolor-odd);
  padding: 5px 0px 5px 10px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: Solid 0.1px rgba(144, 144, 144, 0.5);
  position: sticky;
  top: 0px;
  scroll-margin-top: 0;
  cursor: move;
}

span#schliessen {
  float: right;
  vertical-align: top;
  margin-top: -5px;
}

div#ueberschrift {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(1.1rem, 1.2vw, 1.3rem);
  font-variant: small-caps;
  font-optical-sizing: Auto;
  color: var(--highlight-color);
  letter-spacing: 2px;
  user-select: text;
  cursor: text;
}

div#beschreibung {
  margin-bottom: 15px;
  user-select: text;
  cursor: text;
}

div#formblock {
  padding: 15px 10px 10px 10px;
  width: fit-content;
  min-width: 330px;
  max-width: 660px;
  height: fit-content;
  min-height: 120px;
  resize: both;
  overflow-x: hidden;
}

p#submit {
  text-align: center;
  margin-block-start: 1.5em;
}

div.event {
  font-family: Arial, Tahoma, Verdana, sans-serif;
  font-size: clamp(0.8rem, 1vw, 1.2rem);
  padding: 2px;
  border-radius: 3px;
  box-shadow: 1px 1px 2px 0px #707070;
  margin: 0px 1px 3px 0px;
  /* -ms-hyphens: Auto;
  -webkit-hyphens: Auto;
  hyphens: Auto; */
  word-break: break-all;
  user-select: text;
  cursor: pointer;
}

form div.event {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  line-height: 22px;
  cursor: text;
}

/* EDIT Tommy */
figure :is(img, video) {
  margin-left: auto;
  margin-right: auto;  
  display: block;
  max-width: 90%;
  height: Auto;
  object-fit: fill;
  margin: 20px 0px 20px 15px;
  /*border: Solid 1px #202020;*/
  box-shadow: 5px 5px 5px #999999;
  border-radius: 5px;
  cursor: default;
}

/* EDIT Tommy - used Bootstrap instead
a:link.link,
a:visited.link {
  color: var(--highlight-color);
}
*/

span.bbcode {
  cursor: help;
}

/* Formularfelder */
textarea {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 3px;
  width: 100%;
  max-width: 98%;
  min-width: 320px;
  height: 120px;
  min-height: 120px;
  max-height: 450px;
  /* EDIT Tommy - changed from resize: vertical */
  resize: both;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="checkbox"],
input[type="number"],
button[type="button"],
textarea,
select {
  border: Solid 1px #767676;
  font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 0.95rem;
  caret-color: #ff0000;
}

:focus-visible {
  outline: Solid 1px var(--highlight-color);
}

button[type="button"]:hover {
  color: var(--highlight-color);
  background-color: var(--highlight-bgcolor);
  outline: Solid 1px var(--highlight-outlinecolor);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--highlight-color);
}

input[type="checkbox"]:checked + label {
  color: var(--highlight-color);
}

input[type="checkbox"]:checked + label#delete {
  color: #ee0000;
}

input[type="checkbox"]:checked + label#copy {
  color: #00ac00;
}

input[type="text"].eventfeld {
  width: 270px;
}

input[type="number"] {
  width: 90px;
}

input[type="time"] {
  width: 82px;
}

label {
  transition: color 0.3s;
}

label:hover {
  color: var(--highlight-color);
}

summary {
  cursor: pointer;
  transition: color 0.3s;
}

summary:hover {
  color: var(--highlight-color);
}

summary::marker {
  color: var(--highlight-color);
}

/* Media */
@media screen and (max-width: 48rem) {
  table#tabelle td.eintag {
    height: 45px;
  }

  table#tabelle,
  div#aktiv form {
    font-size: 0.8rem;
  }

  /* EDIT Tommy td#navigation changed to th#navigation */
  table#tabelle th#navigation {
    /* EDIT Tommy
    font-size: 1.1rem !important; */
    font-size: 1rem !important;   
    font-weight: normal;
  }

  span.abbrWochentag {
    display: None;
  }

  div.event {
    font-size: 0.6rem;
    line-height: 12px;
  }
}

@media screen and (min-width: 90rem) {
  table#tabelle td.eintag {
    height: 85px;
  }
  div.event {
    line-height: 20px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: rgb(245, 245, 245) !important;
    --bgcolor-even: rgb(0, 0, 0);
    --bgcolor-odd: rgb(61, 61, 61);
    --bgcolor-scheme: rgb(18, 18, 18);
  }

  div.event {
    box-shadow: 1px 1px 2px 0px #ffffff;
  }
}

/* Tag hervorheben */
td[data-tag="05.07.2022"],
td[data-tag="09.08.2022"] {
  background-color: #c6e3fd !important;
}

/* Tag mit einem Bild hervorheben */
td[data-tag="14.02.2022"],
td[data-tag="01.07.2022"],
td[data-tag="14.02.2023"] {
  background-image: url("https://www.mobirise-tutorials.com/images/Blumen.jpg");
  background-size: Cover;
}

/* Ostern mit einem Bild hervorheben */
td[data-tag="17.04.2022"],
td[data-tag="18.04.2022"] {
  background-image: url("https://www.mobirise-tutorials.com/images/Ostereier.png");
  background-size: Cover;
}

/* Weihnachten mit einem Bild hervorheben */
td[data-tag="24.12.2022"],
td[data-tag="25.12.2022"],
td[data-tag="26.12.2022"] {
  background-image: url("https://www.mobirise-tutorials.com/images/Weihnachtskugeln.jpg");
  background-size: Cover;
}

/* Tag mit einem Farbverlauf (Querstreifen) hervorheben */
td[data-tag="28.07.2022"],
td[data-tag="06.12.2022"] {
  background-image: repeating-linear-gradient(45deg, Lightsteelblue, Lightsteelblue 5px, White 5px, White 10px);
}

/* Wochentag hervorheben */
td[data-wochentag="Samstag"],
td[data-wochentag="Sonntag"] {
  /* EDIT Tommy 
  background-color: #ffcece !important;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=); */
  background-color: #e1e1e1 !important;
}

/* Woche hervorheben */
tr[data-woche="10"],
tr[data-woche="29"] {
  outline: Solid 2px #FF0000;
  border-radius: 3px;
}




In Deiner jetzigen (Download heute früh) style.css steht das hier (meiner Meinung) noch falsch:

... im @media Bereich:
table#tabelle caption#navigation {
font-size: 1.1rem !important;
Ich habe das jetzt so erfolgreich angepasst - und auch auf 1rem verkleinert, da Navi sonst zu breit ist:

Code: Alles auswählen

/* EDIT Tommy td#navigation changed to th#navigation */
  table#tabelle th#navigation {
    /* EDIT Tommy
    font-size: 1.1rem !important; */
    font-size: 1rem !important;   
    font-weight: normal;
  }
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Moin Tommy,

ich habe das mal mit <th width="14.285714%" class="spalten">
wieder in die Tabelle hinzugefügt. Das sieht doch niemand vom falschen Html 5 Attribut. Die class="spalten" wurde neu gesetzt, um Anzeigefehler auszubügeln, falls diese mal auftreten sollten.

Den z-index: 1500; werde ich so übernehmen, mir egal wie hoch dieser ist, jedenfalls über 100!

Code: Alles auswählen

  table#tabelle th#navigation {
    font-size: 1rem !important;
  }
Habe ich auch übernommen.

Die aktualisierte Version ist auf dem Server
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

prima - vielen Dank :tu:

Ich habe aus der Version vom 19.01.2022 alles erfolgreich übernehmen können :)

https://www.mobirise-tutorials.com/Even ... er-SQLite/
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Bei den Tastatur-Optionen stimmt jetzt nicht mehr alles:

Im Titel bei Anmelden steht Taste "L" (anstatt "A") - ich habe es bereits selbst im "title" geändert.

Strg + Pfeiltasten "Ab" oder "Auf" funktioniert bei mir am Firefox nicht mehr (auch nicht Strg + Fn + Pfeiltaste), das aber wieder nur am Firefox (am Edge geht es). Das hatten wir doch schon mal. Bitte schreibe mir, wenn Du das änderst und ob es dann nur die Datei "javascript.js" betrifft.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Danke Tommy :tu:

Also wissentlich habe ich da nichts geändert, muss wohl gestern beim Testen passiert sein :eek:
Ist gut, dass du den Firefox verwendest :)

Es betrifft die Dateien: kalender.php und javascript.js, eine fehlerbereinigte Version liegt auf dem Server.

Ich habe mir gerade eine neue Tastatur (Cherry, kabellos) bei Amazon bestellt. In der Farbe Weiß, würde mir nie wieder eine schwarze Tastatur kaufen.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Prima :tu:

... jetzt funzt alles "nice & easy" :)

... danke :hurra:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... sorry :verlegen:

Ich vergaß zuvor zu erwähnen, dass das Framework "Bootstrap" per Default eine "textarea" immer nur vertikal in der Größe ändern lässt - "resize: vertical;" ist voreingestellt - daher hatte ich das auch für mich noch in "resize: both;" geändert. Sonst ist im Editor das Feld manchmal zum Eintragen/Ändern für den Admin ziemlich schmal. Das tut Dir ja nicht weh und lässt alle Mobirise ("Bootstrap") Benutzer ohne Probleme damit.

Code: Alles auswählen

/* Formularfelder */
textarea {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin-top: 3px;
  width: 100%;
  max-width: 98%;
  min-width: 320px;
  height: 120px;
  min-height: 120px;
  max-height: 450px;
  /* EDIT Tommy - changed from resize: vertical */
  resize: both;
}
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Moin Tommy,

ich habe da mal wieder eine idee :D
Wie sieht es denn mit der Schriftart aus, momentan ist diese Verdana, Arial:
schriftart.png
Ich möchte diese gerne in eine Betriebssystem-Schriftart ändern. Unter Windows wäre das: Segoe UI
Diese ist im Schriftbild schmaler als Verdana und Arial. In der CSS-Anweisung sind noch andere Schriftarten für Betriebssysteme notiert:

Code: Alles auswählen

/* Schriftart und Farben */
:root {
  --font-family: system-ui, "Segoe UI", "Roboto", "Ubuntu",
  "Cantarell", "Noto Sans", "Verdana", "Arial", sans-serif;
  --color: rgb(55, 55, 55);
  --bgcolor-even: rgb(250, 250, 250);
  ...
Was ist deine Meinung dazu?

auswahlliste_jahr.png
ich verwende nun eine Auswahlliste für das Jahr, weil die Eingabe in ein Textfeld am Handy nicht so optimal ist.
Begrenzt ist diese Auswahl auf 10 Jahre in der Vergangenheit und 10 Jahre in der Zukunft. Damit bleibt der Fokus (siehe Bild) in der Mitte.

Diese Änderungen habe ich momentan nur auf dem PC vollzogen.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Moin Werner,

Du - das kann ich nicht beurteilen, keine Ahnung wieweit da die unterschiedlichen Geräte und Betriebssysteme (wie iOS) mit so einer Schrift zurecht kommen - ich denke die jetzige Standardschrift ist schon optimal.

... aber Du notierst ja auch diese Standardschriften - insofern sollte das doch egal sein.

Das mit dem Jahr finde ich OK - vielleicht sollte man das automatisieren - also heute -10 und +10 Jahre.

... aber eigentlich finde ich die Jahreseingabe, so wie sie jetzt ist und auch am Handy, vollkommen ausreichend. Wenn überhaupt, benutzt man das doch eigentlich nur um mal ein Jahr vor- oder zurückzuspringen. Und das geht auch am Handy sehr komfortabel.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Tommy hat geschrieben:Das mit dem Jahr finde ich OK - vielleicht sollte man das automatisieren - also heute -10 und +10 Jahre.
Genau, das habe ich jetzt gemacht. Aber als Grundlage habe ich nicht das heutige Datum verwendet, sondern das was im Kalender angezeigt wird. Ansonsten würde die Auswahlliste jedes Mal den Januar anzeigen oder das Jahr 2022.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

... :tu:

schreibst Du kurz, wenn Du es im Download hast ...
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Moin Tommy,

eine aktualisierte Version liegt auf dem Server.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

Hallo Werner,

der Wahnsinn :angst: Du hast ja quasi alles nochmals neu geschrieben. Jede Menge anders.

https://www.mobirise-tutorials.com/Even ... er-SQLite/

Es klappt so weit, nur musst ich zwingend für "Firefox" das:

width: min-content;

wieder ändern in:

width: fit-content;

... hatten wir schon mal.

Code: Alles auswählen

/* BEGINN EDIT Tommy min-content nicht am Firefox
div#formblock {
  padding: 15px 10px 10px 10px;
  width: min-content;
  min-width: 330px;
  max-width: 660px;
  height: fit-content;
  min-height: 120px;
  resize: both;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
*/

div#formblock {
  padding: 15px 10px 10px 10px;
  width: fit-content;
  min-width: 330px;
  max-width: 660px;
  height: fit-content;
  min-height: 120px;
  resize: both;
  overflow-x: hidden;
}

/*ENDE EDIT Tommy #formblock */

min-content.JPG


vielen Dank auch für die Nennung meiner Mithilfe :verlegen: Bitte ändere doch noch (bei Gelegenheit, habe ja eine Umleitung) das Protokoll "http" in ein "https" zu meiner Seite.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Werner-Zenk.de »

Und im Edge-Browser bei bestimmtem Inhalt, mit width: fit-content;

edge-fit-content.png
edge-handy-fit-content.png
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Event-Kalender mit SQLite

Ungelesener Beitrag von Tommy Herrmann »

das Komische ist - dass das auch noch irgendwie mit Bootstrap in Zusammenhang stehen muss :eek:

Wenn ich die Anwendung im Original von Dir (ohne Mobirise drum herum) auf den Server lade, dann geht es auch im Firefox und im Edge.

Ich kann keinen Eintrag bei mir feststellen, der mit "width: fit-content;" im Edge nicht passen würde.
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 13 Gäste