WWW-sivujen kännyversiolle käyttöliittymä

Liittynyt
18.10.2016
Viestejä
62
Laitoin mustan reunan ajatellen, että erottuu - mutta näemmä erottuu vähän liiankin terävästi. Toi punertava on teeman linkin korostusväri, joka on aktiivisessa välilehdessä samana kuin linkin korostuksessa ja ei-aktiivisessa vaaleampana. Jos vaihtaa sitä, pitäisi ehkä vaihtaa linkin korostusväriäkin? Voihan ne toki itsenäisestikin määrittää.

En tiedä, miten taustan skrollaamista voisi hallita. Auttaisiko valikolle ja apuvalikoille fokuksen asettaminen? :focus liittyy ymmärtääkseni vain linkkeihin eli taidetaan mennä JS:n puolelle?
Yksi tapa estää taustan scrollaus on asettaa <body> elementille overflow:hidden kun valikko on auki.

Esimerkiksi sen voisi tehdä laittamalla theme.js tiedostoon riville n.170 jQuery('#nav-toggle').on('click', function(event){}) funktioon että lisää luokan <body> elementille (ja vastaava rivi missä luokka poistetaan kun valikko suljetaan) ja sitten tälle luokalle että overflow:hidden. Joku valmiiksi määritelty luokka jolla on overflow:hidden saatta myös löytyä valmiiksi.

En kokeillut että hajoaako jokin muu asia tuolla ja varmaan täytyy syystä X tehdä pikkasen eritavalla mutta ideana näyttäisi nopealla testillä toimivan.
 
Liittynyt
27.03.2018
Viestejä
742
Tuo on ihan hyvä idea, kiitos. Yritin muuten kuin muuttamalla theme.js-tiedostoa, mutta en saanut toimimaan. Kun muutin tuota theme.js-funktiota homma pelasi. Kiitti, oikein toimiva, hyvä ehdotus. Lisäsin luokan poiston myös sisältöalueille. En voinut lisätä header-osaan, sillä valikko avataan sieltä.
Koodi:
    jQuery('#nav-toggle').on('click', function(event){
        event.preventDefault();
        jQuery('.header-layout-fixed').toggleClass('set-hidden');
        jQuery('#nav-toggle').toggleClass('nav-is-visible');
        jQuery('.main-navigation .nav-menu').toggleClass("nav-menu-mobile");
        jQuery('.header-widget').toggleClass("header-widget-mobile");...
    
    

$('.extra-content-wrapper').click(function() {
if($('.header-layout-fixed').hasClass('set-hidden'))
    $('.header-layout-fixed').removeClass('set-hidden');
});

$('. site-footer').click(function() {
if($('.header-layout-fixed').hasClass('set-hidden'))
    $('.header-layout-fixed').removeClass('set-hidden');
});
Tietokoneella toimii täysin ja mobiilissakin melkein. Toimii niin kauan kuin selaimen käyttöliittymä pysyy näkyvissä. Kun se häipyy horisontin taakse, sisällön rullautuminen tapahtuu. Selkeä parannus kuitenkin mobiiliinkiin. Minusta on erittäin huono idea Googlelta laittaa selaimen käyttöliittymä häipymään horisonttin taakse. Siitä aiheutuu suunnitteluun ja käyttöön vain ja ainoastaan harmia minun mielestäni.

Tämä sivusto toimii samaan tapaan kapeilla leveyksillä. Pikku parannuksena voisi laittaa sen, että kun avaa valikon, vasemman reunan vierityspalkki häviäisi näkyvistä. Näyttäisi hitusen paremmalta.

Sisällön harmaannutus tällä sivustolla mobiilivalikon kanssa oli niin hyvä idea, että toteutin sen (!important oli tässä tapauksessa välttämätön, koska jatkossa tuli body.luokka {overflow:auto}, joka olisi ilman !important-sääntöä kumonnut merkityksen):
Koodi:
body.set-hidden{overflow-y:hidden!important;overflow-x:hidden!important}
body.set-hidden .extra-content-wrapper{background-color:lightgray;opacity:0.3}
body.set-hidden .site-footer,body.set-hidden #breadcrumblistTop{opacity:0.3}
 
Viimeksi muokattu:
Liittynyt
21.10.2016
Viestejä
2 954
Eräs koodaaja suositti, että niin paljon kuin mahdollista käyttäisin relatiivisia polkuja. CSS:n kanssa se onnistuu muidenkin luoman CSS osalta, jos vain CSS-tiedostossa on id="css-nimi-css", mutta ei onnistu JS:n kanssa jos yrittää poistaa tietyn JS:n käytöstä ja määrittää sille relatiivisen polun wp_head()..., . Konsoli huomauttaa aina virheestä jos niin tekee. WP luulee, että niitä ei ole käytössä vaikka onkin.
Relatiiviset polut tulee kyseseen, ku koodissa/tyylitiedostoissa viittaat toiseen tiedostoon, joka on about samassa polussa ja liittyy suoraan tiedostoon, jota viitataan. Jos muu polku muuttuu, niin ei tarvi joka tiedostoon polkuja uusiksi kirjoittaa (varsinkaan, kun et taida näppärimpiä työkaluja käyttää). Juuri-tasolla toi on vähä se ja sama.
 
Liittynyt
27.03.2018
Viestejä
742
Eli minun ei kannata enempää asiaa pohtia ja sinunkin mielestäni muutokseni olivat turhia?

No päivittyi sentään lopulta #1051 ehdotukseen pohjautuva koodi. Tyhjensin moneen kertaan selaimen välimuistin, mutta ei ollut heti vaikutusta. theme.js muutos ja seuraava CSS toimivat todella hyvin kännykässäkin. Parantaa käytettävyyttä selvästi.
Koodi:
body.set-hidden{overflow-y:hidden!important;overflow-x:hidden!important;}
body.set-hidden .extra-content-wrapper{background-color:lightgray;opacity:0.3}
body.set-hidden .site-footer,body.set-hidden #breadcrumblistTop{opacity:0.3}
Tietokoneessa välimuistin tyhjennys toimii paremmin. Yksin näppäinkomennus ja on tuore sivuversio käytössä.
 
Viimeksi muokattu:
Liittynyt
17.10.2016
Viestejä
1 501
Ei varmaan kannattaisi tiivistää tuota CSS:ää, on helpompi etsiä virheitä järkevästi muotoillusta kuin tuollaisesta tiivistetystä. Herkästi joku aaltosulkeen tai puolipisteen puuttuminen tai väärässä paikassa olo jää tuollaisesta mössöstä huomaamatta. Itse en oikein luottaisi tuohon että kaikki on kirjoitettu yhteen pötköön ilman välejä, luultavasti kaikki selaimet eivät tulkitse sitä oikein. Se, että tuossa tiivistyksessä säästää pari tavua ei vaikuta nopeuteen mitenkään. Vähän meinaan epäilen tuollaisten hidden!important -kohtien ja vastaavien toimivuutta. Tuolla vaan turhaan kaivaa verta nenästään.
 
Liittynyt
21.10.2016
Viestejä
2 954
Ei varmaan kannattaisi tiivistää tuota CSS:ää, on helpompi etsiä virheitä järkevästi muotoillusta kuin tuollaisesta tiivistetystä. Herkästi joku aaltosulkeen tai puolipisteen puuttuminen tai väärässä paikassa olo jää tuollaisesta mössöstä huomaamatta. Itse en oikein luottaisi tuohon että kaikki on kirjoitettu yhteen pötköön ilman välejä, luultavasti kaikki selaimet eivät tulkitse sitä oikein. Se, että tuossa tiivistyksessä säästää pari tavua ei vaikuta nopeuteen mitenkään. Vähän meinaan epäilen tuollaisten hidden!important -kohtien ja vastaavien toimivuutta. Tuolla vaan turhaan kaivaa verta nenästään.
?? Tottakai tuotannossa kaikki on tiivistettyä. Se mitä devaaja työstää on eri asia. edit: ja selaimet ei rivinvaihdoista ja turhista välilyönneistä välitä. Ei kyl tähän liity, mut yleensä kaikki devaajan koodi menee babelin ym. läpi eikä sitä ole ihmissilmin tarkoitus lukea.
 
Viimeksi muokattu:
Liittynyt
17.10.2016
Viestejä
1 501
?? Tottakai tuotannossa kaikki on tiivistettyä. Se mitä devaaja työstää on eri asia. edit: ja selaimet ei rivinvaihdoista ja turhista välilyönneistä välitä.
Juu, varsinkin devatessa (kuten nyt ollaan tekemässä) on fiksumpi pitää tuo vähän luettavampana. Joskus silloin aikanaan vuosia sitten kun itse enemmän nettisivuja tein niin jotkut selaimet eivät tykänneet jos aivan kaikki oli yhtä pötköä vaan esimerkiksi juuri tuossa hidden!important -kohdassa ainakin jollekin selaimelle piti olla välilyönti tuon n-kirjaimen ja huutomerkin välissä, muuten tuollainen kohta jäi tulkitsematta. En sitten tiedä kuinka paljon paremmin nykyselaimet selviävät noista. Tottakai tuotantoon voi maltillisesti tiivistää tuota mutta vasta sitten kun homma alkaa olemaan "valmis".

edit:
Piti oikein kokeilla tuota esimerkkipätkää muutamaan validaattoriin ja näköjään nykyään noinkin paljon tiivistetty kelpaa validiksi. Aikanaan, joskus CSS1 -aikoihin tuo oli vähän tarkempaa mutta siitä onkin jo aikaa, tosin silloin selaimet muutenkin ymmärsivät tuota css:ää vähän vaihtelevammin. Muutamia warningejahan tuo antaa mutta pääosin id-määritteestä ja important-määreistä eli ei mitään fataalia.
 
Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
742
Jos joudun editoimaan, puran pakkauksen
tuo tekee vähän rumaa jälkeä kun }@media jää yhteen, mutta se on helppo korvausajona muuttaa. Ihan pikkaisen parempi se saisi olla. Jos joku tietää hitusen paremman vastaavan palvelun, olisi kiva tieto.
Jos koen, että koodi on kunnossa, pakkaan sen
Validoin aina pakkaamattomana
Se ei teeman kaikkea swiper-koodia pidä oikeana, joten swiper osalta jopa virheilmoitukset pitää ohittaa.
Muuten se on hyvä validaattori, johon voi luottaa. Huomautuksista en välitä. Se ei siedä sitä, että laitetaan sisennettyjä lohkoja, esim. seuraavaa (teemassa oli yksi tämän tyylinen):
Koodi:
@media{
    #sidebar{
     .wigdet {margin...}
     .muu{...}
    }
}
Olisiko netissä sellaista palvelua, että se osaisi etsiä mahdollisia duplikaatteja ja osaisi yhdistellä mahdollisesti samoille elementeille tulevaa koodia yhteen. En onnistunut siistimään manuaalisesti koodiani.

Muuten pitää antaa vain olla CSS hieman epäjärjestyksessä. Eipä sitä epäjärjestystä kukaan muu katsele kuin itse ja joku kehittelijä. Tavis selaaja ei siitä tiedä mitään. En voi testata ja kokeilla testisivustolla, sillä se ei toimi oikein. Jostakin oudosta syystä valikko on kokonaan valkoinen, vaikka siinä pitäisi olla täsmälleen sama CSS. Kopioin kaikki tiedostot ja yhden CodeSnippet tietueen, joka liittyy CSS:ään. Kun testisivusto ei toimi pitää kai joskus pystyttää paikallinen palvelin.
 
Viimeksi muokattu:

jad

Liittynyt
22.10.2016
Viestejä
470
Jos joudun editoimaan, puran pakkauksen
tuo tekee vähän rumaa jälkeä kun }@media jää yhteen, mutta se on helppo korvausajona muuttaa. Ihan pikkaisen parempi se saisi olla. Jos joku tietää hitusen paremman vastaavan palvelun, olisi kiva tieto.
Jos koen, että koodi on kunnossa, pakkaan sen
Validoin aina pakkaamattomana
Se ei teeman kaikkea swiper-koodia pidä oikeana, joten swiper osalta jopa virheilmoitukset pitää ohittaa.
Muuten se on hyvä validaattori, johon voi luottaa. Huomautuksista en välitä.
Kuulostaa kokoajan enemmän siltä, että teet ihan hirvittävän määrän ylimääräistä työtä ja näet vaivaa validoinneista, minifioinneista ja vieläpä näiden purkamisista. Kaikki tämä olisi täysin automatisoitavissa kunhan suostuisit käyttämään edes vähän modernimpia menetelmiä ja työkaluja näiden muutostesi kanssa.

Lupaan kirjoittaa sinulle step-by-step ohjeen Loacalin käyttöönotosta ja siitä kuinka pääset sen kanssa devauksessa kokonaan toiselle tasolle, jos sinä lupaat kokeilla kehitystä sen avulla :D

Se ei siedä sitä, että laitetaan sisennettyjä lohkoja, esim. seuraavaa (teemassa oli yksi tämän tyylinen):
Koodi:
@media{
    #sidebar{
     .wigdet {margin...}
     .muu{...}
    }
}
Olisiko netissä sellaista palvelua, että se osaisi etsiä mahdollisia duplikaatteja ja osaisi yhdistellä mahdollisesti samoille elementeille tulevaa koodia yhteen. En onnistunut siistimään manuaalisesti koodiani.
Tämä näyttää kääntämättömältä SASS/SCSS koodilta. Tuo aiemmin postaamasi SourceMap virhe liittyy juuri tähän. Kun käytetään sassia ja siitä käännetään css, tekee kääntäjä .map päätteisen tiedoston, jonka tarkoitus on antaa selaimen dev-toolsille riittävä määrä tietoa, jotta se osaa siitä käännetystä css tiedostosta viitata alkuperäiseen sass lähdekoodin ja sen oikeisiin rivinumeroihin. Tuotantosivustollahan tuollaisia .map tiedostoje ei kuulukaan olla.
 
Liittynyt
27.03.2018
Viestejä
742
Mukava huomata että valikon osalta on tapahtunut edistystä. Noihin nappien väreihin voisin melkeimpä suositella palettien googlailua jos ei ketään visuaalisesti lahjakasta kaveria löydy lähipiiristä. Tuo valkoinen fontti mustalla reunalla pistää ikävästi silmään (valikossa). Ihan rehellisesti valkoinen voisi toimia...
Valkoisen reunustavan mustan vaihdoin harmaaseen. Se terävöittää valkoisia kirjaimia, mutta ei terävöitys ei pistä silmään - tai niin ainakin ajattelen.

Värijuttuja täytyy vielä pohtia. Kun otin bbPressin edellisen version CSS:n jotensakin muuttumattomana käyttöön, se muutti suurimman osan painikkeiden värin. Yksi tai kaksi punertavaa painiketta piti erikseen muuttaa.

Huomasin, että eräälle artikkelisivulle jäi teeman mukainen punertava painike. Sekin pitäisi yhtenäisyysyistä vaihtaa.

Kun punertavaa sävyä teemasta on alkuperäisen CSS:n pohjalta lähinnä vain linkeissä , voisi ajatella, että teeman alkuperäisvärejä voisi ajatella muuttavansa siinäkin. Näin teeman väreistä ei jäisi jäljelle juuri mitään. Värimuutoksia saa ehdottaa. Aiemmin aktiivinen välilehti ja sivu korostettiin värillä "gold".

Teema olisi lähinnä runko. Sellaisena kyllä minä nämä WordPressin teemat itselleni näenkin. Kun en itse tee kokonaan, puran teemaa ja muutan rajullakin tavalla. Onhan siinä toki se ongelma, jos teemaan tulee merkittäviä CSS-päivityksiä, niistä en tiedä mitään. JS-päivityksistä theme.js jää päivittämättä. Minulla oli joskus HTML-Kit tai jokin muu ohjelma, jossa sai rinnakkain kaksi tiedostoa. Kun tiedostot laittoin rinnakkain, oli toiminto, jolla ohjelma näytti tiedostojen erot. Erot korostettiin. Tällainen olisi nytkin kiva olla.

Suurin muuttamaton teeman komponentti on swiper. Jos sitä päivitetään, sen päivitykset jäävät tekemättä. Mutta nykyinen swiper koodi toimii ihan ok, joten tuskin kai sen mahdollisista muutoksista pois jääminen olisi merkittävä asia.

Swiperin otsikon luontia ei voi käyttää foorumiosiolla, koska teema lykkää väärän otsikon. Mietin, heivaisiko swiperin pois kokonaan foorumiosiosta? Voisi heivata samalla siihen liittyvän JS-tiedostot sekä teeman CSS:stä swiperin CSS vain muille sivuille. Foorumiin voisi swiperin tilalle tulla maksimissaan n. 100px suuruinen otsakekuva, jolle tulee taustaväri. Iso swiper saattaa foorumissa olla pidemmän päälle ärsyttävä.

Swiperin JS ei näy lähdekoodissa, joten sitä ei voi heivata tyyliin
wp_deregister_script('screenr-wiper');

Jos haluan visuaalisesti heivat pois vain osittain toimivan swiper-efektin foorumiosiosta, mikä olisi järkevä tapa päästä eroon myös sen JS:tä?
 
Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
742
Olikos se living_death, joka on tämän sivuston värisuunnittelun takana. Sen punertavan voisi jotenkin korvata jollakin muulla. Mitä living_death ehdottaa?

En poistanut swiperia foorumiosiolta, mutta pienensin kokoa. Laitoin yleiseksi maksimikorkeudeksi 150px ja kännykälle 100px.

Vaihdoin välilehtien ja linkkien värejä täältä kopsatuilla väreillä. Punertava nyt vaan ei istunut. En tiedä, onko nykyinenkään hyvä sivustolleni.
Jos antaa hex-arvoina, ne on helppo vaihtaa etsi- ja korvaa -toiminnolla.
 

Liitteet

Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
742
Lataan sen localin. Valikko pitää kyllä luoda uusiksi, sillä https//-alkuisista omista linkeistä pitää päästä eroon, jotta voi testata asioita. Foorumitkin voi merkitä WP:n omilla mekinnöillä. Ei minulla kyllä mitään akuutteja kehitysajatuksia ole. Tähän projektiin voi nyt pistää taas tauon.

Tutkin CSS organisoijia. En nyt tiedä, mikä olisi paras, mitä ilmaiseksi tarjotaan.
Tuolla tutkin päällekkäisyyksiä. Prosentuaalisesti päällekkäisyys osoittautui merkityksettömäksi selaimen kannalta.

Yritin yhdistää kaiken yleisen CSS:n, mutta yhdistetty CSS ei toiminut suunnitellusti. Yhdistämisellä olisin saanut vain 14kB:n vähennyksen, mikä on muuhun verrattuna täysin merkityksetöntä.

Päällekkäisyys ja siitä johtuva !important liikakäyttö haittaa vain omaa CSS:n hallintaani. Siirsin väliaikaiseksi tarkoitetut muutokset pakattuna vain tiedostojen loppuun. Näyttää ainakin koodin katsojille siistimmältä suunnittelulta kuin onkaan. Huiputus.


Kiitos saamistani kehittelyvinkeistä.
 
Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
742
Tosin olisihan tässä vielä kehitettävää. Edellisen version kanssa minulla oli evästetiedote + muutamia asetuksia. Ne liittyivät yhteen, joten homma täytyisi miettiä uudestaan, koska yhtä paljon asetuksia kuin oli ennen, ei tule.

Merkittävin asetus oli ikoneja käyttävä pikavalikko. Siinä oli seuraavat toiminno silloin kun oltiin yksittäisessä säikeessä:
  1. Siirry aihelistaukseen.
  2. Luo uusi aihe
  3. Luo uusi aihe foorumi valiten (avasi apuvalikon)
  4. Luo uusi kommentti
  5. Näytä/piilota toimintopalkki
  6. Lataa sivu uudestaan
Tuolla palkille oli neljä sijoittelupaikkaa. Mutta jos viitisi, voisiha siihen sisällyttää vaikka mitä. Voisin halutessani luoda siitä netin eniten käyttäjän itsensä säädettävissä olevan. Idea olisi sama kuin itse asiassa tämän säikeen alussa esitin, mutta käyttäjän itsensä päätettävin toiminnoin.

Siihen voisi sijoittaa seuraavia asioita:
  1. Kirjaudu/kirjaudu ulos (kirjautuminen siirtäisi eri sivulle)
  2. Kirjaudu somen kautta (avaisi apuikkunan)
  3. Näytä profiili (siirtäisi eri sivulle)
  4. Siirry aihelistaukseen (siirtäisi eri sivulle)
  5. Luo uusi aihe ( (siirtäisi eri sivulle, jos muokataan yksittäistä säiettä)
  6. Luo uusi aihe foorumi valiten (avasi apuvalikon)
  7. Luo uusi kommentti foorumiin (siirtäisi sivun loppuun)
  8. Näytä foorumin pikaopas (avaisi apuikkunan)
  9. Näytä säännöt (avaisi apuikkunan)
  10. Vaihda listauksen järjestystä (avaisi apuvalikon)
  11. Näytä/piilota toimintopalkki
  12. Lataa sivu uudestaan
  13. Sirry edelliseen kohtaan
Valikko Pikavalikko sisältää nyt mielekkään kokonaisuuden, sitä käyttäen toimintopolku on joillekin asioille turhan pitkä. Käyttäjän itsensä määrittelemissä ja haluamaansa paikkaan laitettavassa pikavalikossa, kaikki, mitä käyttäjä itse haluaa, olisivat todellisia pikavalintoja.

Kun kaikki nyt eivät kumminkaan kompaktista pikavalinnasta tykkäisi, mikä tuli varsin pian selväksi, ei oletusasetuksilla olevaa pikavalikko voi oikein vakionakaan olla. Tai sitten sen piilotus pitäisi olla helppoa, jos se jotakuta ärsyttää.
Sijoittelumahdollisuudet:
  • Yhäällä keskellä
  • Oikealla ylhäällä
  • Oikealla keskellä
  • Vasemmalla keskellä
  • Vasemmalla alhaalla
  • Keskellä alhaalla

Pystyn siis luomaan foorumin, joka on hyvinkin käyttäjän mieltymykset huomioiva. Mutta jos siihen ryhdyn siitä tulisi vain kehittelydemo jollekulle muulle - vaikka tämän sivuston koodaajalle, sillä ei sellaisen luominen vain omaa foorumia ajatellen ole mitään järkeä. Nettiin voisin laittaa täydellisen paketin bbPressille. Sitä voisi kuka tahansa kehittelijä kokeilla. Silloin sitä voisi joku muukin kehitellä.

Monipuolinen asetussivu vaatisi aika lailla evästekoodausta. Runko evästeille minulla on olemassa.

Ongelmana on toki, että foorumilistaus liittyisi vain foorumiini. Foorumilista pitäisi tyhjentää ja kertoa, että se pitää itse täydentää.

Tosin bbPressistä puuttuu ominaisuuksia, joita on XenForossa, joten ei bbPressistä omin viritelminkään kunnon kilpailijaa XenForolle tule, se täytyy myöntää. Vain jos osaa lisätä ne puuttuvat ominaisuudet, se voisi oilla kilpailukykyinen.
 
Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
742
Katsoin Ylilauta-foorumin valikkoa. Se on lähes yhtä leveä kuin omani, viewport-arvona n. 460px. Minusta se on järkevämmin mitoitettu kuin tämän sivuston mobiilivalikko. Laitoin seuraavaan kommenttiin vähän vertailua omani ja tämän sivuston mobiilivalikon välillä.
 
Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
742
Asetin valikot rinnakkain. Minusta siis
  1. Vasemmanpuoleinen on liian kapea ja monet valikkokohdat rivittyvät ikävän näköisesti monelle riville. Valikko saisi olla sen verran leveä, että rivittymistä ei tapahtuisi. Oikeanpuoleisessa valikossa ei ole rumalta näyttävää rivittymistä.
  2. Vasemmalla valikko ei näytä hyvältä koska se on pitkä. Avautuva/sulkeutuva näyttäisi paremmalta. Oikeanpuoleinen päävalikko näyttää paremmalta. Mutta se vaatii enemmän klikkejä, jos haluaa käydä sitä lävitse. Asioilla on aina etunsa ja haittansa.
  3. Vasemmanpuoleisessa valikossa oikeassa reunassa vain hälytyskello ja haku on tarpeen olla aina esillä. Muut voisi olla päävalikossa. Haku siksi, että sillä on lisävalintoja. Minun valikossani haku voi olla valikon yhteydessä, koska lisäominaisuuksia siinä ei ole. Jos olisi hälytyskellotoiminto, se olisi hyvä olla tarpeen tullen esille tuleva komponentti oikeassa reunassa. Kiinteää elementtiä en siitä tekisi. Sellaisena se on ihan turha.
  4. Jos vasemman puoleinen valikko olisi leveämpi, osa kohdista voisi laittaa välilehteen. Se lyhentäisi valikon pituutta. Toki tulisi yksi klikki enemmän, joten sr ei ole ongelmaton ratkaisu.
  5. Valikon sulkupainike saisi vasemmanpuoleisessa olla kiinteä, ettei "häipyisi horsontin taakse". Oikeanpuoleisessa valikossa avauspainike on myös sulkupainike, joten erillistä sulkupainiketta ei tarvita. Avaus/sulku toimivat mielestäni fiksummin.
 

Liitteet

Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
742
Katsoin muuten äsken paria muuta XenForo-sivustoa (After Dawn ja Matkapuhelinfoorumi). Niissä näemmä ei ole kiinteää yläpalkkia. Täällä on tehty enemmän töitä sivuston kanssa. Jos yläpalkin joku haluaa rullautuvan ja vaihtoehto löytyy asetuksista, tämä sivusto on selvästi kehittyneempi.

Koska alue Pikanavigaatio puuttuu, valikko on siistimpi. Samalla leveydellä ei tule tekstien rivittymistä.
 
Liittynyt
30.10.2016
Viestejä
3 580
Katsoin muuten äsken paria muuta XenForo-sivustoa (After Dawn ja Matkapuhelinfoorumi). Niissä näemmä ei ole kiinteää yläpalkkia. Täällä on tehty enemmän töitä sivuston kanssa. Jos yläpalkin joku haluaa rullautuvan ja vaihtoehto löytyy asetuksista, tämä sivusto on selvästi kehittyneempi.

Koska alue Pikanavigaatio puuttuu, valikko on siistimpi. Samalla leveydellä ei tule tekstien rivittymistä.
Kyse on siitä että esim. matkapuhelinfoorumilla ei varmaan ole haluttu mitään kiinteää yläpalkkia koska sille ei ole nähty olevan tarvetta.
 
Liittynyt
27.03.2018
Viestejä
742
Pidän pääosin tämän foorumin tyylistä. Muutaman pikku huomautuksen tein, mutta kyse ei ole vakavista seikoista.
Ylilauta laittaa massiivisen valikon, jossa on yhdessä paikassa hirveän paljon kaikenlaista "sälää". Onko sekään hyvä.

Ainahan systeemien kanssa joutuu tekemään kompromisseja. Toisen mielestä joku kompromissi on toista parempi.

No parin vuoden takaisesta tämän foorumin toteutus ja oma toteutukseni ovat kovasti lähentyneet toisiaan ja niissä on nykyisin paljon samaa.
Kumpiakin voi verrata esim. Suomi24 ja Ylilauta toteutuksiin.

Silti kiehtoo vieläkin luoda ihan kokeilumielessä alkuperäistä ideaani toteuttava pikavalikko. Se ei olisi oletusarvo, mutta sen voisi joko valikosta Pikavalinnat ottaa kiinteämuotoisena käyttöön tai sitten rakentaa ihan harrastemielessä asetussivu.

Minusta nyt oli hieman tyhmää nostaa esille tämän foorumin toteutukseen liittyvät huomautukseni. Säie, jossa asia nostettiin esille, on poistettu. Kun säie poistettiin, asia unohtunee, mutta jatkossa jos asia liittyy tähän foorumiin, se on hyvä pitää tämän foorumin sisällä.

Tuli selväksi, että pientenkin muutosten tekeminen tämäntyyppisellä sivustolla ei ole niin yksinkertainen juttu kuin omalla sivustollani. Jos tämä sivusto näyttää joiltakin osin liian erilaiselta kuin muut XenForo-foorumit, se voi tuntua oudolta. Muutoksilla tämänkaltaisilla sivuilla voi olla kumulatiivisia seurauksia. Vaikka niitä olisikin, koen silti ehdotukseni kommentissa #1066 mielekkäinä. Niistä ei pidä loukkaantua, mutta nyt on taidettu loukkaantua.
 
Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
742
Joku haukkui pystyyn seuraavan sivun:


Säie, jossa sivu haukuttiin perusteellisesti on poistettu. Tein sivulle suuriakin muutoksia, jotta olisi vähemmän kritisoitavaa. Tiivistin myös säikeiden esitystapaa, kun foorumiosiota arvosteltiin liiallisesta väljyydestä. Tarkistin joitakin marginaaleja ja korjasin etenkin numeroitujen listojen margin- ja padding-arvoja.

Vaikka toimin joidenkin asioiden suhteen jääräpäisesti, otan kyllä huomioon esitettyä kritiikkiä milloin katson kritiikin olevan sellaista, että edellyttää toimenpiteitä.
 
Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
742
Voisinkohan kopioida täältä omaan foorumiini WordPress-vinkkejä? Laittaisin vaikka otsikoksi Saamiani WordPress-vinkkejä. Näin vinkit olivat jossakin kootusti esillä. Kiitos saamistani vinkeistä. Niistä on ollut paljon apua. Tosin mielestäni annetut vinkit ovat WordPressin kooditietoa, joten en lupaa ymmärtääkseni tarvitse.

Fiksumpaa kyllä olisi, jos tästä säikeestä poimisi spesiaalisti WordPressiä koskevia koodivinkkejä WordPress-säikeeseen.
 
Viimeksi muokattu:
Liittynyt
27.03.2018
Viestejä
742
Kuulostaa kokoajan enemmän siltä, että teet ihan hirvittävän määrän ylimääräistä työtä ja näet vaivaa validoinneista, minifioinneista ja vieläpä näiden purkamisista. Kaikki tämä olisi täysin automatisoitavissa kunhan suostuisit käyttämään edes vähän modernimpia menetelmiä ja työkaluja näiden muutostesi kanssa.

Lupaan kirjoittaa sinulle step-by-step ohjeen Loacalin käyttöönotosta ja siitä kuinka pääset sen kanssa devauksessa kokonaan toiselle tasolle, jos sinä lupaat kokeilla kehitystä sen avulla :D


Tämä näyttää kääntämättömältä SASS/SCSS koodilta. Tuo aiemmin postaamasi SourceMap virhe liittyy juuri tähän. Kun käytetään sassia ja siitä käännetään css, tekee kääntäjä .map päätteisen tiedoston, jonka tarkoitus on antaa selaimen dev-toolsille riittävä määrä tietoa, jotta se osaa siitä käännetystä css tiedostosta viitata alkuperäiseen sass lähdekoodin ja sen oikeisiin rivinumeroihin. Tuotantosivustollahan tuollaisia .map tiedostoje ei kuulukaan olla.
Voisiko vähän selittää SASS ideaa. Tuntuu vain melkoisen turhalta lisältä.Jos pitää voida vertailla SASS-koodia ja lopullista CSS:ää, silloihan ei teeman CSS:ään saisi koskea. Se ei oikein tunnu mielekkäältä. Jos teeman CSS:n olisin jättänyt, olisi hirveän paljon turhaa CSS:ää ja todella paljon uudelleen määrittelyjä. Siinä viimeistään olisi vaikea hallita kokonaisuutta. Turhaa CSS:ää on toki vieläkin, mutta paljon sitä poistin.

Onko millään mahdollista päästä eroon valituksesta, että map-tiedistoa ei saada luotua tai sitä ei löydy? Kai SASS-vertailun voisi jotenkin kokonaan ohittaa?

Muuta valitusta konsoli ei anna.

Silti yksi lisäosa ei nyt toimi. Onneksi ei kyse ole kovin törkeästä lisäosasta.

Editori (TinyMCE) hieman oikkuilee välillä (laittaa näkyviin <p>...</p>).
 
Viimeksi muokattu:

jad

Liittynyt
22.10.2016
Viestejä
470
Voisinkohan kopioida täältä omaan foorumiini WordPress-vinkkejä? Laittaisin vaikka otsikoksi Saamiani WordPress-vinkkejä.
Omasta puolestani saat kopioida niin paljon kuin huvittaa, kunhan jätät lähdeviittauksen ja nimimerkkini pois.
Voisiko vähän selittää SASS ideaa. Tuntuu vain melkoisen turhalta lisältä.Jos pitää voida vertailla SASS-koodia ja lopullista CSS:ää, silloihan ei teeman CSS:ään saisi koskea. Se ei oikein tunnu mielekkäältä. Jos teeman CSS:n olisin jättänyt, olisi hirveän paljon turhaa CSS:ää ja todella paljon uudelleen määrittelyjä. Siinä viimeistään olisi vaikea hallita kokonaisuutta. Turhaa CSS:ää on toki vieläkin, mutta paljon sitä poistin.

Onko millään mahdollista päästä eroon valituksesta, että map-tiedistoa ei saada luotua tai sitä ei löydy? Kai SASS-vertailun voisi jotenkin kokonaan ohittaa?
SASS:ia käyttämällä saat organisoitua koodin paremmin vaikka eri tiedostoihin, voit käyttää muuttujia (esim. värien määrittelyyn), luoda erilaisia uudelleenkäytettäviä komponentteja (Mixins), tehdä laskutoimituksia (sekä väreille, että mitoille) ja paljon muuta. SASS on oikeasti kätevä, kun siihen vähän syventyy. Katsele täältä nuo esimerkit lävitse, noissa on kivasti rinnakkain SASS ja käännöksestä syntyvä CSS, niin päässet hieman kärryille mahdollisuuksista.

SASS:ssa idea onkin, että et sen jälkeen enää ikinä koske käsin varsinaiseen css-koodiin.

Se, että selaimen dev-konsolissa näkyy tuo map- virheilmoitus on vain kosmeettinen ongelma. Selain ei normaalisti sivuja ladatessa noita .map tiedostoja yritä ladata, ainoastaan silloin kun avaat dev-konsolin. Toki siitä eroonkin pääsee, jossain selaimen dev-konsolin asetuksissa on mahdollisuus kieltää .map tiedostojen lataus. Mutta jatkoa ajatellen tuota ei kannata tehdä.

Käyttämäsi Screenr teeman tekijät ovat näköjään senverran mukavaa porukkaa, että jakavat teeman SASS kooditkin. Teepä nopea harjoitus, mieluusti sivuston kopioon (ota varmuuskopiot ensin!)

1. Kopioi screenr/assets/sass/ hakemiston sisältö aliteemaasi screenr-child/assets/sass/ hakemistoon.
2. Muokkaa tiedostoa screenr-child/assets/sass/style.scss poista tiedoston alusta Screenr:n omat teeman kuvauskommentti ja lisää tilalle aliteeman tiedot:
Koodi:
/**
Theme Name: Screenr Child Theme
Version: 1.2.3
Template: screenr
*/
Pienen yhteensopivusongelman takia pitää muokata vielä paria muutakin tiedostoa:
screenr-child/assets/sass/_variables.scss noin riviltä 130 lähtien, korvaa mixin tällä versiolla:
Koodi:
@mixin rem($property, $px-values) {
        $baseline-rem: $baseline-px;
        #{$property}: $px-values;
        @if type-of($px-values) == "number" {
                #{$property}: $px-values / $baseline-rem + rem; }
        @else {
                $rem-values: unquote("");
                @each $value in $px-values {
                        @if $value == 0 {
                                $rem-values: append($rem-values, $value + rem); }
                        @else {
                                $rem-values: append($rem-values, $value / $baseline-rem + rem); } }
                #{$property}: $rem-values; }
}
Tiedostossa screenr-child/assets/sass/_sections.scss noin rivillä 371 poista välilyönti miinusmerkin jälkeen.
@include rem('margin-left', - (60px / 2) ); => @include rem('margin-left', -(60px / 2) );

3. varmista, että lapsiteeman functions.php:ssa on koodit:
PHP:
add_action('wp_enqueue_scripts', function(){
    wp_dequeue_style('screenr-style');
}, 99);

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('screenr-child', get_stylesheet_directory_uri() . '/style.css', [], wp_get_theme()->get('Version') );
}, 10);
4. Asenna lisäosa wp-scss ja lisäosan asetukset näin:
1622908978384.png

5. Lataa etusivu uudelleen.

Nyt pitäisi tapahtua seuraavaa:

screenr-child/style.css generoituu uudelleen sass koodista käännettynä. Samalla syntyy style.css.map tiedosto. Nyt kun avaat selaimessa devel toolin, ei sen enää pitäisi valittaa puuttuvasta .map tiedostosta ja dev-konsolin css- viitteet kertovat missä scss tiedostossa ja millä rivillä näytettävä css koodi on.

Tämä tietysti hävittää kaikki style.css tekemäsi muutokset ja joudut ne tekemään uudelleen, mutta tällä kertaa teetkin ne tuonne assets/sass/ alla oleviin tiedostoihin. wp-scss lisäosan Compiling modea vaihtamalla saat määritettyä minkälaista css koodia scss tiedostoista synnytetään. Tuotannossa 'Crunched' ja devaillessa 'Expanded'
 
Liittynyt
27.03.2018
Viestejä
742
Ok. Perusidea tuli selväksi. Olen niin paljon poistanut CSS:ää, että ehkä tällä kertaa en ala muutostyöhön. Kun yritin siistiä foorumiosan CSS-tiedostoa, ei siitä oikein tullut mitään.

Sisäkkäiset lohkot CSS teeman style.css-tiedostossa ovat kaiketi käännösvirheitä?

Teeman CSS ei tosin niin paljon lisäyksiä sisällä kuin foorumin CSS. Kyse on lähinnä poistoista.

Tätä pitäisi testata testisivustolla, mutta jostakin syystä se ei toimi oikein, joten sillä ei saa kaikkea testattua.
 
Viimeksi muokattu:
Toggle Sidebar

Statistiikka

Viestiketjut
131 533
Viestejä
2 555 488
Jäsenet
50 524
Uusin jäsen
zezzil

Hinta.fi

Ylös Bottom