Buttons haben Rahmen nach installation als PWA

[eMKa]

Hallo Zusammen,

ich bin grad an nem PWA Projekt für eine Berufsfeuerwehr. Ziel ist, ein Kalender, der die 3 Schichten farbig darstellt, welche man aus- und einblenden kann. Zusätzlich soll noch eine Notizfunktion entstehen. Aber so weit bin ich noch nicht ;)

Zu meinem Problem: Soweit funktioniert alles und sieht auch so aus wie ich es will. Aber, wenn ich die Webseite auf dem Iphone aufrufe und als PWA auf dem Homescreen ablege, haben die drei Buttons mit denen man die Schichtfarben ausblenden kann, auf einmal Rahmen? Im Browser stimmt noch alles, sobalds auf dem Homescreen liegt haben die Buttons Rahmen und sind verrutscht.

Hab leider keine Idee woran das liegen kann.

Ich häng mal mein js an, kann gern auch noch css und html nachliefern. Am besten ihr schaut euch den Fall einfach mal live an, vielleicht hat jemand eine Idee: Dienstplan

var onOffA = 0;
var onOffB = 0;
var onOffC = 0;

function schichtA(){
    
    var a = document.getElementsByClassName("schichtA");
    var b = document.getElementById("buttonSa");
        if(onOffA === 0) {
            for (var i=0; i<a.length; i++) {
            a[i].style.backgroundColor = "white";
            }
            b.style.color="black";
            onOffA = 1;
            return onOffA;
            console.log(onOffA)
        }else if(onOffA === 1) {
            for (i=0; i<a.length; i++) {
            a[i].style.backgroundColor = "#f9c0ce";
            }
            b.style.color="#f9c0ce";
            onOffA = 0;
            return onOffA;
            console.log(onOffA)
        }
    
    console.log("Schicht A gedrueckt");
}

function schichtB(){
    
    var a = document.getElementsByClassName("schichtB");
    var b = document.getElementById("buttonSb");
        if(onOffB === 0) {
            for (var i=0; i<a.length; i++) {
            a[i].style.backgroundColor = "white";
            }
            b.style.color="black";
            onOffB = 1;
        }else if(onOffB === 1) {
            for (i=0; i<a.length; i++) {
            a[i].style.backgroundColor = "#c1f3cf";
            }
            b.style.color="#c1f3cf";
            onOffB = 0;
        }
    console.log("Schicht B gedrueckt");
    
}

function schichtC(){
    
    var a = document.getElementsByClassName("schichtC");
    var b = document.getElementById("buttonSc");
        if(onOffC === 0) {
            for (var i=0; i<a.length; i++) {
            a[i].style.backgroundColor = "white";
            }
            b.style.color="black";
            onOffC = 1;
        }else if(onOffC === 1) {
            for (i=0; i<a.length; i++) {
            a[i].style.backgroundColor = "#91d1fc";
            }
            b.style.color="#91d1fc";
            onOffC = 0;
        }
    
    console.log("Schicht C gedrueckt; onOffC = " );
}

let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
let selectYear = document.getElementById("year");
let selectMonth = document.getElementById("month");

let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

let monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);


function next() {
    currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
    currentMonth = (currentMonth + 1) % 12;
    showCalendar(currentMonth, currentYear);
}

function previous() {
    currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
    currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
    showCalendar(currentMonth, currentYear);
}

function jump() {
    currentYear = parseInt(selectYear.value);
    currentMonth = parseInt(selectMonth.value);
    showCalendar(currentMonth, currentYear);
}

function showCalendar(month, year) {

    let firstDay = (new Date(year, month)).getDay();
    let daysInMonth = 32 - new Date(year, month, 32).getDate();

    let tbl = document.getElementById("calendar-body"); // body of the calendar

    // clearing all previous cells
    tbl.innerHTML = "";

    let today = new Date();
let currentMonth = today.getMonth();
let currentYear = today.getFullYear();
let selectYear = currentYear;
let selectMonth = currentMonth;

let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];

let monthAndYear = document.getElementById("monthAndYear");
showCalendar(currentMonth, currentYear);


function next() {
    currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
    currentMonth = (currentMonth + 1) % 12;
    showCalendar(currentMonth, currentYear);
}

function previous() {
    currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
    currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
    showCalendar(currentMonth, currentYear);
}

function jump() {
    currentYear = parseInt(currentYear.value);
    currentMonth = parseInt(currentMonth.value);
    showCalendar(currentMonth, currentYear);
}

function showCalendar(month, year) {

    let firstDay = (new Date(year, month)).getDay();
    let daysInMonth = 32 - new Date(year, month, 32).getDate();

    let tbl = document.getElementById("calendar-body"); // body of the calendar

    // clearing all previous cells
    tbl.innerHTML = "";

    // filing data about month and in the page via DOM.
    monthAndYear.innerHTML = months[month] + " " + year;
    selectYear.value = year;
    selectMonth.value = month;


}
    
    //filing data about month and in the page via DOM.
    monthAndYear.innerHTML = months[month] + " " + year;
    selectYear.value = year;
    selectMonth.value = month;
    
    
    // Variablen für Schichtberechnung festlegen
    var heute = new Date(year, month, 00);
    var start = new Date(2010, 00, 00, 00, 00, 00, 0);
    
    var check1 = new Date(heute.getFullYear(), heute.getMonth(), heute.getDate());
    var check2 = new Date(start.getFullYear(), start.getMonth(), start.getDate());
    var unterschied = Math.round((check1 - check2)/(1000 * 60 * 60 * 24));
    //console.log("Starttag: " + start);
    //console.log("Erster Tag des Monats: " + heute);
    //console.log("Unterschied: " + unterschied);
    
      
    
    // creating all cells
    let date = 1;
//alert(unterschied-date)
    for (let i = 0; i < 5; i++) {
        // creates a table row
        let row = document.createElement("tr");

        //creating individual cells, filing them up with data.
        for (let j = 0; j < 7; j++) {
            if (i === 0 && j < firstDay -1) {
                let cell = document.createElement("td");
                let cellText = document.createTextNode("");   
                cell.appendChild(cellText);
                row.appendChild(cell);
            }
            else if (date > daysInMonth) {
                console.log("Zähler i: " + i);
                console.log("Zähler j: " + j);
                if (i === 6 && j === 7){
                    break;
                } else {
                let cell = document.createElement("td");
                let cellText = document.createTextNode("");   
                cell.appendChild(cellText);
                row.appendChild(cell);
                i++;
                }
            }

            else {
                let cell = document.createElement("td");
                let cellText = document.createTextNode(date);
                if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
                    cell.classList.add("bg-info");
                } // color today's date
                switch((unterschied + date) % 9){
                    case 0:
                        cell.classList.add("schichtC"); 
                        break;
                    case 1:
                        cell.classList.add("schichtB"); 
                        break;
                    case 2:
                        cell.classList.add("schichtA");
                        break;
                    case 3:
                        cell.classList.add("schichtB"); // 1.1.                   
                        break;
                    case 4:
                        cell.classList.add("schichtA"); // 2.1.
                        break;
                    case 5:
                       cell.classList.add("schichtC");
                        break;
                    case 6:
                       cell.classList.add("schichtA");
                        break;
                    case 7:
                       cell.classList.add("schichtC");
                        break;
                    case 8:
                       cell.classList.add("schichtB");
                        break;
                }
                
                cell.appendChild(cellText);
                row.appendChild(cell);
                date++;
            }
        }

        tbl.appendChild(row); // gibt eine Reihe aus.
        console.log("onOffA: " + onOffA);
    }
    
    // SchichtA initialisieren
    var aA = document.getElementsByClassName("schichtA");
    var bA = document.getElementById("buttonSa");
        if(onOffA === 1) {
            for (var i=0; i<aA.length; i++) {
            aA[i].style.backgroundColor = "white";
            }
            bA.style.color="black";
        }else if(onOffA === 0) {
            for (i=0; i<aA.length; i++) {
            aA[i].style.backgroundColor = "#f9c0ce";
            }
            bA.style.color="#f9c0ce";
        }
    // SchichtB initialisieren
    var aB = document.getElementsByClassName("schichtB");
    var bB = document.getElementById("buttonSb");
        if(onOffB === 1) {
            for (var i=0; i<aB.length; i++) {
            aB[i].style.backgroundColor = "white";
            }
            bB.style.color="black";
        }else if(onOffB === 0) {
            for (i=0; i<aB.length; i++) {
            aB[i].style.backgroundColor = "#c1f3cf";
            }
            bB.style.color="#c1f3cf";
        }
    // SchichtC initialisieren
    var aC = document.getElementsByClassName("schichtC");
    var bC = document.getElementById("buttonSc");
        if(onOffC === 1) {
            for (var i=0; i<aC.length; i++) {
            aC[i].style.backgroundColor = "white";
            }
            bC.style.color="black";
        }else if(onOffC === 0) {
            for (i=0; i<aC.length; i++) {
            aC[i].style.backgroundColor = "#91d1fc";
            }
            bC.style.color="#91d1fc";
        }
    
    document.getElementsByClassName("buttonS").borderColor = "white";
}

[Linuchs]

Ich habe gerade kein IDings zum Vergleichen.

Aber auf dem Smartphone sieht es entschieden anders aus als auf dem Laptop.

Hast du dich mal mit CSS befasst und wie man die Elemente nach Größe des Viewports unterschiedlich einstellen kann?

/* **************************
 * schmale Anzeige
 * ************************** */
@media screen and (max-width: 400px) {
  h1 { font-size: 1.3em; }
  h2 { font-size: 1.2em; }
  h3 { font-size: 1em; }
}
/* **************************
 * breite Anzeige
 * ************************** */
@media screen and (min-width: 400.1px) {
  h1 { font-size: 1.8em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.1em;  }
}

[Matthias Apsel]

Hallo Linuchs,

dieser Vorschlag ist nicht so doll. Später vielleicht mehr, wenn mir nicht schon jemand zuvor kommt. Stichwort: mobile first.

Bis demnächst
Matthias

[Linuchs]

Stichwort: mobile first.

Uups, ist die CSS-Möglichkeit, zwischen verschiedenen Breiten zu unterscheiden, schon wieder veraltet?

Ich habe kürzlich noch alte Seiten wiedergefunden, wie ich trickreich gerundete Ecken gemacht habe ;-)

Mein Gott, was haben wir uns früher ins Zeug gelegt und inzwischen ist es nur ein Kommando. Eigentlich bräuchten Web-Entwickler jährlich ein Update-Seminar.

[Matthias Apsel]

Hallo Linuchs,

Uups, ist die CSS-Möglichkeit, zwischen verschiedenen Breiten zu unterscheiden, schon wieder veraltet?

Nein, nur so wie du es vorschlägst, ist es Murks.

/* **************************
 * alle Anzeigen
 * ************************** */
  h1 { font-size: 1.3em; }
  h2 { font-size: 1.2em; }
  h3 { font-size: 1em; }

/* **************************
 * breite Anzeige
 * ************************** */
@media screen and (min-width: 30em) {
  h1 { font-size: 1.8em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.1em;  }
}

Es ist besser, eine Variante zu haben, die ohne eine Medienabfrage funktioniert. Für breitere Viewports werden diese Einstellungen dann überschrieben. Bei dir könnte die Breite rein zufällig 400,05px sein. Welche Vorgaben gelten dann? Richtig - keine.

Außerdem sollten sich die Breakpoints nach dem Inhalt richten. Deshalb die Angabe in em.

Bis demnächst
Matthias

[Linuchs]

Bei dir könnte die Breite rein zufällig 400,05px sein. Welche Vorgaben gelten dann? Richtig - keine.

Hää? Du meinst, Displays haben hundertstel Pixel? Dann haben wohl auch Atome hundertstel Protone?

Noch nie was von Quanten-Theorie gehört? Ich dachte, ein Pixel wäre ein Quant. Schlimmstenfalls noch unterteilt in rote, grüne, blaue Quarks?

Oh ja - bei OLED noch ein weißes.

[Der Martin]

Hi,

Bei dir könnte die Breite rein zufällig 400,05px sein. Welche Vorgaben gelten dann? Richtig - keine.

Hää? Du meinst, Displays haben hundertstel Pixel?

das vielleicht nicht, war wohl ein schlechtes Beispiel. HTML-Elemente im Dokument können aber durchaus "krumme" Abmessungen mit gebrochenen Pixelwerten haben - wenn ihre Breite und/oder Höhe sich aus anderen Maßen ergibt, bei denen womöglich noch Schriftgrößen mit einfließen.

Dann haben wohl auch Atome hundertstel Protone?

Joachim Bublath hat in einer Folge seiner Knoff-Hoff-Show mal erklärt:
"Wenn man ein Proton aufmacht, sind drei Quarks drin."

Noch nie was von Quanten-Theorie gehört? Ich dachte, ein Pixel wäre ein Quant.

Technisch ja, logisch nein.

Ciao,
 Martin

[Gunnar Bittersmann]

@@Linuchs

Hää? Du meinst, Displays haben hundertstel Pixel?

CSS-Pixel haben so gut wie gar nichts mit Device-Pixeln zu tun.

LLAP 🖖

[eMKa]

Erstmal vielen Dank für die Antworten.

Ja, hab Media Querys in Verwendung,.. allerdings bis jetzt erst den portrait Mode fürs Iphone Designed, weil mit die Funktion erstmal wichtiger ist.

Ich häng auch mal css an.

Was hald echt komisch ist, wenn ich die Seite auf dem Handy im Safari öffne, haben die buttons keine Rahmen. Sobald ich die Webseite auf dem Desktop speichere, sind da Rahmen ;(

/*#########################################################################*/
/*################################   MAIN   ###############################*/
/*#########################################################################*/

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0px;
    overflow: hidden;
}

.grid-box{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows:  15% 20% 20% 20% 25%;
    grid-template-areas: 
        "header header  header  header  header"
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
}
/* Header */
.box-1{
    background: white;
    grid-area: header;
    padding: 5px;
}
/* Kalender */
.box-2{
    margin: 5px;
    background: white;
    grid-area: main;
    vertical-align: bottom;
    overflow: hidden;
}

.box-2 .container .card{
    width: 100%;
    
}

.form-inline{
    margin: 0 auto;
    margin-top: 2px;
    padding: auto;
}
.btn {
    margin: 5px 0 0 10px;
}
/* Notizen */
.box-3{
    grid-area: foto;
    background-size: cover;
}
/* Footer */
.box-4{
    background: white;
    grid-area: footer;
    text-align: center;
}

/*#########################################################################*/
/*################################ KALENDER  ##############################*/
/*#########################################################################*/

table{
    width: 100%;
    height: 10%;

}
table, thead, tr,tbody, td, th{
    border:  solid black;
    border-collapse: collapse;
    padding: 0.4em;
    text-align: center;	
    font-family: 'Maven Pro', sans-serif;
    font-weight: bolder;
}
th{
    background-color: #e7e5e7;
    margin: 0 0 0 0;
    width: calc(100vw/7);
}



button{
    width: 25%;
    font-size: 450%;
    background-color: white;
    border: solid;
    float: left;
    margin-left: -1px;
    padding: 0;
    line-height: 0.8;
}

#schicht{
    margin: 15px 25px 0 25px;
    width: 35vw;
    float: left;
    font-family: 'Maven Pro', sans-serif; 
    font-weight: bolder;
}

#schicht p{
    text-align: center;
    margin-top: -5px;
}

#schicht .buttonS{
    border: none;
    width: 11vw;
    margin-top: -5px;
    margin-left: 2px;
    font-size: 220%;
}

#buttonSa{
    border: none;
    color: #f9c0ce;
}

#buttonSb{
    border: none;
    color: #c1f3cf;
}

#buttonSc{
    border: none;
    color: #91d1fc;
}

h1{
    font-family: 'Maven Pro', sans-serif; 
    text-align: left;
    font-weight: 1100;
    font-size: 425%;
    letter-spacing: 1px;
    font-stretch: expanded;
    line-height: 0.8;
    margin-top: 12px;
    margin-left: -2px;
}

h2{
    font-family: 'Maven Pro', sans-serif;
    font-size: 278%;
    margin-top: -8px;
    margin-bottom: 15px;
}
.bg-info{
    font-family: 'Bowlby One SC', cursive; 
    background-image: url("../images/heuteQuer.png");
    background-size: cover;
    margin-top: 25px;
}
.schichtA{
    font-weight: bolder;
    background-color: #f9c0ce;
    color: black;
}
.schichtB{
    font-weight: bolder;
    background-color: #c1f3cf;
    color: black;
}
.schichtC{
    font-weight: bolder;
    background-color: #91d1fc;
    color: black;
}

/*#########################################################################*/
/*################################ PORTRAIT  ##############################*/
/*#########################################################################*/

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : portrait){  

tr{
    height: calc(100vw/7);
}
        
.grid-box{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows:  6% 10% 14% 10% 14% 6% 10% 10% 16% 4%;
    grid-template-areas: 
        "header header  header  header  header"
        "header header  header  header  header"
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "notes  notes   notes   notes   notes "
        "footer footer  footer  footer  footer"
}
        
        .form-inline{
            margin: 5px auto;
        }
        
        .btn {
            margin-left: 0px;
            margin-top: 15px;
        }
        
        .bg-info{
            font-weight: bolder; 
            background-image: url("../images/heute.png");
            background-size: cover;
        }
        /* Foto*/
        .box-3{
            background: white;
            background-size: cover;
            margin: 5px;
            border: solid;
            grid-area: notes;
        }
        /* Footer */
        .box-4{
            background: white;
            grid-area: footer;
            font-size: 70%;
            color: gray;
        }
        
        #buttonSa{
            border: none;
            color: #f9c0ce;
        }

        #buttonSb{
            border: none;
            color: #c1f3cf;
        }

        #buttonSc{
            border: none;
            color: #91d1fc;
        }
}

/*#########################################################################*/
/*###############################  LANDSCPAE  #############################*/
/*#########################################################################*/

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) 
    and (orientation : landscape){       

.grid-box{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows:  10% 10% 10% 10% 15% 5% 10% 10% 10% 10%;
    grid-template-areas: 
        "header header  header  header  header"
        "header header  header  header  header"
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "main   main    main    main    main  "
        "footer footer  footer  footer  footer"
}
        h3{
            margin -25px;
            font-family: 'Open Sans', sans-serif;
        }
        .card .card-header #monthAndYear{
            margin-top: -35px;
        }
        .card{
            height: 100%;
        }
        .form-inline{
            margin: 20px auto;
        }
        
        tr{
            height: calc(100vw/28);
        }
        .bg-info{
            font-weight: bolder; 
            background-image: url("../images/heute.png");
            background-size: cover;
        }
        /* Foto*/
        .box-3{
            visibility: collapse;
        }
        /* Footer */
        .box-4{
            visibility: collapse;
        }
}

Das Problem betrifft die 3 Buttons #buttonSa #buttonSb und #buttonSc

[user]

iPad iOS 12.3.1 hier gibt es keinen Unterschied zwischen den Umgebungen.