Tabel lihtsate vahenditega mobiilisõbralikuks

Paljud KOVTP kasutajad on kindlasti märganud, et veebisisusse loodud tabelid ei kohandu mobiilivaatega. Kontaktide kuva portletiga on veidi parem lugu, sellele tabelile ilmub väikesel ekraanil alla kerimisriba, kuid ka see lahendus pole tänapäevase kasutaja jaoks piisavalt hea, eriti arvestades, et tabelitena kuvatakse tihti kontaktandmeid, mida tõenäoliselt sageli just mobiiliseadmest otsitakse.

Pakume siinkohal välja üsna lihtsa ja universaalse lahenduse, kuidas KOVTP lehel tabeleid mobiilisõbralikumaks muuta. Iga tabeli puhul see automaatselt ei kehti (eriti kui tabel on keerukas ja selles on osaliselt ühendatud ridu), sest põhimõte on selles, et kuvatakse lihtsalt kõik tabeli ühes reas olevad lahtrid üksteise all. Et lõpptulemus oleks kindlasti kena ja korralik, tuleb proovida oma tabelit mõlemas vaates ja seda vajadusel kohendada, aga üldiselt piisab vastavale portletile kohandatud CSS-i lisamisest.

NB! Kõigepealt tuleks eemaldada tabeli senised vormingud ehk võtta kogu tabel aktiivseks ja vajutada kustukummimärki:

CSSi lisamiseks avage portleti ülalt paremast nurgast mutrivõtme alt „Välimus" ja „Täiustatud kujundus".

 

Avanenud aknas tuleks lahtrisse „Sisesta oma kohandatud CSS" sisestada järgnev kood:

/*Järgnev kood takistab väikesel ekraanil tabeli päise kuvamist ja kuvab ühe rea lahtrid üksteise all */
@media screen and (max-width: 700px) {
th {
display: none;
}
td {
display: block;
}
}

/*Järgnev kuvab tabeli iga teise rea hallil taustal */

tr:nth-child(even) {

  background: #e6e8eb;
}
/*Järgnev kuvab tabelis kursoriga üle liikudes reale helesinise taustavärvi (see koodirida toimib muidugi ainult arvutis ja on lisatud lihtsalt väikseks edevaks näiteks, et saab ka muid funktsioone kasutada)*/
tr:hover {background-color: #bde2f4;}
 

Miskipärast annab KOVTP salvestamisel ekslikult teate "Sinu seadeid ei olnud võimalik salvestada", aga seda ei tasu tähele panna, sest tegelikult muudatused salvestatakse.

Siin väike näidistabel (olen sellele portletile eelkirjeldatud CSSi lisanud):

Juhtkond

vallavanem 
Kadri Kaasik		 555 9142, 655 7100
xxx@vald.ee		 üldjuhtimine ja valla esindamine

Kantselei

vallasekretär 
Karl Kadakas		 555 6646
xxx@vald.ee		 kantselei juhtimine, vallavalitsuse ja -volikogu juriidiline nõustamine ning dokumentide õiguspädevuse tagamine 
dokumendihaldur 
Mari Maasikas		 555 6646
xxx@vald.ee		 dokumendihalduse korraldamine, valla kodulehe ja sotsiaalmeedia haldamine
registripidaja-sekretär 
Mart Mägi		 655 7319
xxx@vald.ee		 perekonnaseisutoimingute teostamine ja kommunikatsiooni korraldamine
sekretär
Liina Laasik

xxx@vald.ee

 volikogu assisteerimine ja istungite tehniline teenindamine

Finantsosakond

finantsjuht 
Pille Petersell		 655 7274
xxx@vald.ee		 eelarve ja strateegiate koostamine, majandusaasta aruandlus
raamatupidaja 
Peeter Peet		 655 7102
xxx@vald.ee		 raamatupidamine ja palgaarvestus

 

Portlet "Kontaktide kuva"

Sarnase võttega saab muuta ka portleti "Kontaktide kuva" kuvamist. Sel juhul tuleks portleti välimuse alla lisada järgmine kood:

@media screen and (max-width: 700px) {
th {
display: none;
}
td {
display: block;
}
}
.portlet-borderless.contacts-portlet table, .portlet-borderless.contacts-portlet td, .portlet-borderless.contacts-portlet th, .contacts-portlet table, .contacts-portlet td, .table-responsive {
border: 0px !important;
}
.portlet-borderless.contacts-portlet tr, .contacts-portlet  tr:nth-child(even) {
  background: #e6e8eb;
}
.csvDownload {
display: none;
}
 
Toimetaja: SIGNE RUMMO