agenda-libre-ruby/app/assets/stylesheets/mobile.sass

@media all and (min-width: 1024px)
  header.top, header.calendar-header + table.table-striped
    width: calc(100% - 2em)
  header.top
    margin-top: 1em

  #banner
    margin-left: 3%
  .links
    margin-right: 3%

@media all and (max-width: 1024px)
  .links, a#banner
    margin: 0.6em auto

  table, table.list, table.dates, table.list.dates
    border-spacing: 1px
    tbody th
      overflow: hidden
      max-width: 3em

@media all and (max-width: 900px)
  body main ul
    margin-left: 0

  table.list.dates
    th, td
      &, a
        padding: 0 !important
        font-size: inherit

/* For small screen width */
@media all and (max-width: 34em)
  p
    padding-left: 0.4em
    padding-right: 0.4em

  header.top nav
    display: none

  body.index
    table thead
      display: none
    &.events table tr td
      clear: both
      width: auto
      height: auto
      margin: 1px
      display: block
      min-height: 1em
      border-width: 1px !important
      &.prev-month, &.next-month, &.current-month.past
        display: none
      .event a
        padding: 0.4em 1em
    header
      &:active, &:hover
        & + table tr td.current-month.past
          display: block

    &.versions, &.orgas
      table tbody
        tr td
          width: auto
          padding: 0 0.2em
          display: block
          &:first-child
            float: left
        td + td + td
          display: inline-block
        td:first-child + td
          width: 100%
          display: block

  dl
    dt
      min-width: auto
      text-align: left
    dd, dd.quantity
      padding-right: 1em

  #advises
    & > *
      display: none
    & > :first-child:after
      content: '... ↴'
    & > :first-child, &:hover > *
      display: block

  aside
    display: none

  .links, a#banner
    float: none
    padding: 0.4em 0

  fieldset
    padding-left: 0
    padding-right: 0

  .field
    & > label
      width: 100%
      display: block
      text-align: left
      margin-left: 1%
    &.region, &.locality, &.repeat, &.active
      label
        width: auto
    input
      width: 100%
      display: block
      &#event_repeat, &#orga_active
        width: auto
    .radios
      margin-left: auto

  #map section
    input, .awesome-marker
      display: none !important

  body.mce-content-body
    padding: 1px 0
  .mce-btn-group .mce-btn
    margin-left: 0 !important
Region filter moved on top of main banner map No more body border! 2019-06-27 22:17:40 +02:00			`@media all and (min-width: 1024px)`
			`header.top, header.calendar-header + table.table-striped`
			`width: calc(100% - 2em)`
			`header.top`
			`margin-top: 1em`

			`#banner`
			`margin-left: 3%`
			`.links`
			`margin-right: 3%`

Les écrans peu larges ne voient plus un tableau mensuel, mais une liste 2014-07-02 17:41:00 +02:00			`@media all and (max-width: 1024px)`
Separate page to manage a complete filter, presenting all available options 2016-10-21 13:46:32 +02:00			`.links, a#banner`
Travail sur affichage mobile 2014-11-29 19:48:10 +01:00			`margin: 0.6em auto`

			`table, table.list, table.dates, table.list.dates`
Nice looking serif fonts: palatino or URW Palladio L 2014-12-21 00:14:46 +01:00			`border-spacing: 1px`
Travail sur affichage mobile 2014-11-29 19:48:10 +01:00			`tbody th`
			`overflow: hidden`
			`max-width: 3em`
Le formulaire de recherche de lug est presque complet, la bannière april est descendue plus bas 2014-07-29 00:00:13 +02:00
Les écrans peu larges ne voient plus un tableau mensuel, mais une liste 2014-07-02 17:41:00 +02:00			`@media all and (max-width: 900px)`
Region filter moved on top of main banner map No more body border! 2019-06-27 22:17:40 +02:00			`body main ul`
			`margin-left: 0`
Les écrans peu larges ne voient plus un tableau mensuel, mais une liste 2014-07-02 17:41:00 +02:00
Tighter table display on small screens 2018-04-08 23:04:52 +02:00			`table.list.dates`
			`th, td`
			`&, a`
			`padding: 0 !important`
			`font-size: inherit`
Regions can now be organised into a hierarchy. The region selector is back on the top page, but right under the related country's flag 2017-05-20 16:02:07 +02:00
Le formulaire de recherche de lug est presque complet, la bannière april est descendue plus bas 2014-07-29 00:00:13 +02:00			`/* For small screen width */`
Largeur plus petite pour les téléphones portables 2014-07-02 18:14:53 +02:00			`@media all and (max-width: 34em)`
Travail sur affichage mobile 2014-11-29 19:48:10 +01:00			`p`
			`padding-left: 0.4em`
			`padding-right: 0.4em`
Essais pour améliorer usage sur petit écran 2014-11-08 19:08:48 +01:00
Country filter centered 2019-05-01 21:53:26 +02:00			`header.top nav`
Meilleure aide visuelle pour la sélection de région 2014-08-16 12:35:51 +02:00			`display: none`
Le formulaire de recherche de lug est presque complet, la bannière april est descendue plus bas 2014-07-29 00:00:13 +02:00
Cleaner tables, particularly for the tighest screens. Refs #14, #24 2016-02-27 18:54:57 +01:00			`body.index`
			`table thead`
Les écrans peu larges ne voient plus un tableau mensuel, mais une liste 2014-07-02 17:41:00 +02:00			`display: none`
Cleaner tables, particularly for the tighest screens. Refs #14, #24 2016-02-27 18:54:57 +01:00			`&.events table tr td`
Les écrans peu larges ne voient plus un tableau mensuel, mais une liste 2014-07-02 17:41:00 +02:00			`clear: both`
			`width: auto`
			`height: auto`
			`margin: 1px`
			`display: block`
Event calendar better displayed on small screens: past events only visible when hovering over the current month 2016-10-20 23:46:54 +02:00			`min-height: 1em`
Ajout d'un style destiné aux mobiles, manquait le fichier css lui même :) 2014-07-02 01:07:10 +02:00			`border-width: 1px !important`
Event calendar better displayed on small screens: past events only visible when hovering over the current month 2016-10-20 23:46:54 +02:00			`&.prev-month, &.next-month, &.current-month.past`
Adaptations supplémentaires pour petits écrans 2014-11-09 12:36:37 +01:00			`display: none`
Event calendar better displayed on small screens: past events only visible when hovering over the current month 2016-10-20 23:46:54 +02:00			`.event a`
			`padding: 0.4em 1em`
			`header`
			`&:active, &:hover`
			`& + table tr td.current-month.past`
			`display: block`
La liste de lugs d'une région est maintenant gérée comme une sidebar html5, et cachée sur les écrans de faible largeur 2014-07-07 20:53:24 +02:00
Cleaner tables, particularly for the tighest screens. Refs #14, #24 2016-02-27 18:54:57 +01:00			`&.versions, &.orgas`
			`table tbody`
			`tr td`
			`width: auto`
			`padding: 0 0.2em`
			`display: block`
			`&:first-child`
			`float: left`
			`td + td + td`
			`display: inline-block`
			`td:first-child + td`
			`width: 100%`
			`display: block`

Travail sur affichage mobile 2014-11-29 19:48:10 +01:00			`dl`
			`dt`
			`min-width: auto`
			`text-align: left`
			`dd, dd.quantity`
			`padding-right: 1em`

Small screen form display should be nicer. Less margins/paddings 2019-02-05 14:29:04 +01:00			`#advises`
			`& > *`
			`display: none`
			`& > :first-child:after`
Better small screen display 2019-04-20 19:10:14 +02:00			`content: '... ↴'`
Small screen form display should be nicer. Less margins/paddings 2019-02-05 14:29:04 +01:00			`& > :first-child, &:hover > *`
			`display: block`

Meilleure aide visuelle pour la sélection de région 2014-08-16 12:35:51 +02:00			`aside`
La liste de lugs d'une région est maintenant gérée comme une sidebar html5, et cachée sur les écrans de faible largeur 2014-07-07 20:53:24 +02:00			`display: none`
Meilleure aide visuelle pour la sélection de région 2014-08-16 12:35:51 +02:00
Separate page to manage a complete filter, presenting all available options 2016-10-21 13:46:32 +02:00			`.links, a#banner`
Meilleure aide visuelle pour la sélection de région 2014-08-16 12:35:51 +02:00			`float: none`
Création événement simplifiée et adaptée à petit écran 2014-11-09 15:23:04 +01:00			`padding: 0.4em 0`

Small screen form display should be nicer. Less margins/paddings 2019-02-05 14:29:04 +01:00			`fieldset`
			`padding-left: 0`
			`padding-right: 0`

Better looking forms 2017-05-22 16:42:21 +02:00			`.field`
Small screen form display should be nicer. Less margins/paddings 2019-02-05 14:29:04 +01:00			`& > label`
			`width: 100%`
Better form, much larger 2017-05-27 13:02:27 +02:00			`display: block`
			`text-align: left`
Small screen form display should be nicer. Less margins/paddings 2019-02-05 14:29:04 +01:00			`margin-left: 1%`
Work on the region selector display 2019-05-03 15:44:54 +02:00			`&.region, &.locality, &.repeat, &.active`
Small screen form display should be nicer. Less margins/paddings 2019-02-05 14:29:04 +01:00			`label`
			`width: auto`
Better form, much larger 2017-05-27 13:02:27 +02:00			`input`
			`width: 100%`
			`display: block`
Small screen form display should be nicer. Less margins/paddings 2019-02-05 14:29:04 +01:00			`&#event_repeat, &#orga_active`
			`width: auto`
			`.radios`
			`margin-left: auto`

Map should be better displayed on small screens, particularly legends 2019-04-20 15:16:21 +02:00			`#map section`
			`input, .awesome-marker`
			`display: none !important`

Small screen form display should be nicer. Less margins/paddings 2019-02-05 14:29:04 +01:00			`body.mce-content-body`
			`padding: 1px 0`
			`.mce-btn-group .mce-btn`
			`margin-left: 0 !important`