Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Kehys

 
  • Yläpalkki (header)
    • sovellus brändäys, tausta
    • käyttäjän tiedot ja toiminnot
    • päänavigaatio

Päänavigaatio (topbar)

  • Päänavigaatioon Bootstrap-pohjainen ikoninavigaatio
  • Maksimaalinen tilan käyttö
  • Mukautuvuus (voi olla myös sidemenu!)

Alapalkki (footer)

  • [Takaisin ylös] mobiilissa

...

  1. palvelun työpöytä (dashboard) 
    1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#desktop
  2. alaosion työpöytä
    1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#sub-desktop
    2. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#sub-desktop-left
    3. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#sub-desktop-help-visible
  3. listausnäkymä
    1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#listing
  4. yksittäisen katselu (avain arvo-tietolistan näyttäminen esimerkiksi. Esim peppi > henkilö > profiili)
    1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#view-single-item
    2. Palstajaottelu, jotta pysyy ryhdissä
      1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#items
  5. lomake / muokkaus 
    1. modal
      1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#dialog-ajax
      2. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#form-items
      3. Valittuna yksipalstainen oletuksena
    2. muokkauksen sisäinen navigointi eri osioihin view-näkymästä (sidebar)
    3. jos sivu tyhjä eikä dataa: tarjoa ensimmäinen toimenpide
  6. Näkymän sisäinen navigaatiorakenne
    1. dynaamiset valinnat vasemmalla, esim. Pepin tallennetut haut
    2. valintojen väliotsikot
    3. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#left-navi
  7. kompleksi tietojen muokkaus, ops-editori muokkaa opsia, miten huomioidaan tallennus eri välilehdillä > jokainen oma modaali
  8. haku + hakutulos. Erilaisia malleja erilaisiin/erimääräisiin hakukriteereihin ja tuloksiin. Hakutuloksesta paluu hakuun/listaukseen.
    1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#search
    2. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#search-simple
    3. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#search-complicated
  9. Excel-tyyppinen inline editointi (mass edit)
  10. Perus "sisältö"sivu. Eli otsikko/teksti/kuva-tyyppinen sisältö
    1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#basic-page
  11. Palstat perustuvat Bootstrapin Gridiin. 
    1. Sisällössä http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#grid-content
  12. Lomakkeiden validointi
    1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#form-validation-2
  13. Palautteet toiminnoista
    1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#form-feedback
  14. Latausikoni 
    1. http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.php#loader

...

  • taso 1 - päätason välilehdet (horisontaalinen). Esim HOPS
  • taso 2 - vasemman laidan välilehdet (vertikaalinen)
  • taso 3 - sisältöalueen (oikea palsta) välilehdet (horisontaalinen)"sticky" navigaatio (optiona tulevaisuudessa)
    vieritettäessä sivun yläreunaan jäävä navigaatio

Ensisijaisesti käytetään pystynavigaatiota, perustelut tabinavigaatioon oltava:
sivuvalinnat http://espdev.eduix.fi/eduplangui/latest/demo/version2/demo/demo-service.phpEsim. Pepissä ongelmana tilankäyttö kun monta välilehteä

Murupolku

  • sovittu että yleisperiaatteena tulee kaikkialle, myös Liferayn sisällä

...

  • kun siirrytään työpöydältä eteenpäin

Komponentit

...

  • sovittu että katselu pyritään toteuttamaan aina (eli ei suoraan lomakenäkymälomakenäkymiä)
    • jos katselua ei toteuteta, tähän vaaditaan hyväksyntä ja perustelu (yhteneväisyys!)
  • muokkaus modal-ikkunassa ikkunassa (egdialog)
    • hyödyt: samaa muokkausta voidaan hyödyntää eri kautta, eri paikoissa
    • modal perustuu laajennettuun bootstrapin modaaliin. Scrollaa näkymässä jos yli selainikkunan korkeuden
  • jos näkymässä on kokonaisuuksia (esim 3 listaa) ne pitää visuaalisesti erottaa (peppi > yksikko > kustannuspaikat), erotin, panel tms
  • Painikkeiden sijainnit
    • Modaali: oikea laita
    • Perusnäkymissä vasemmalla. 
    • "Sulje/Peruuta" linkkimäinen (btn-link)

Yleinen sommittelu

...