From 3b3a464ce904450d9dde117ccd0338c472e252c2 Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 29 Jan 2017 20:21:46 +0100 Subject: Ameliore mobile utilization --- .../scala/reading/component/index/BookDetail.scala | 25 ++--- .../scala/reading/component/index/Header.scala | 7 +- src/main/scala/reading/component/index/Menu.scala | 66 ++++++++---- .../reading/component/index/style/BookDetail.scala | 41 ++++---- .../reading/component/index/style/Books.scala | 2 +- .../reading/component/index/style/Count.scala | 20 ---- .../reading/component/index/style/Header.scala | 18 +--- .../scala/reading/component/index/style/Menu.scala | 112 +++++++++++++++------ .../scala/reading/component/style/Button.scala | 22 ++++ src/main/scala/reading/component/style/Count.scala | 27 +++++ .../scala/reading/component/style/Global.scala | 3 +- .../scala/reading/component/widget/Popup.scala | 5 +- .../reading/component/widget/style/Cross.scala | 4 +- .../reading/component/widget/style/Popup.scala | 18 ++-- 14 files changed, 230 insertions(+), 140 deletions(-) delete mode 100644 src/main/scala/reading/component/index/style/Count.scala create mode 100644 src/main/scala/reading/component/style/Button.scala create mode 100644 src/main/scala/reading/component/style/Count.scala (limited to 'src/main') diff --git a/src/main/scala/reading/component/index/BookDetail.scala b/src/main/scala/reading/component/index/BookDetail.scala index 80280ac..f2d0d5d 100644 --- a/src/main/scala/reading/component/index/BookDetail.scala +++ b/src/main/scala/reading/component/index/BookDetail.scala @@ -20,30 +20,31 @@ object BookDetail { ), div( - div(BookStyle.title, book.title), - div(BookStyle.author, s", ${book.author}"), if (book.programs.nonEmpty) { - div( - item("classe", book.programs.map(Program.grade(_).prettyPrint).distinct.sorted.mkString(", ")), - item("programme", book.programs.map(p => "« " ++ p.prettyPrint ++ " »").sorted.mkString(", ")) - ) + item("classe", book.programs.map(Program.grade(_).prettyPrint).distinct.sorted) + }, + if (book.programs.nonEmpty) { + item("programme", book.programs.map(p => "« " ++ p.prettyPrint ++ " »").sorted) }, if (book.themes.nonEmpty) { - item("thème", book.themes.sorted.map(_.prettyPrint).mkString(", ")) + item("thème", book.themes.sorted.map(_.prettyPrint)) }, if (book.genres.nonEmpty) { - item("genre", book.genres.sorted.map(_.prettyPrint).mkString(", ")) + item("genre", book.genres.sorted.map(_.prettyPrint)) }, book.period.map { period => - item("période", period.prettyPrint) + item("période", Seq(period.prettyPrint)) } ) ) - private def item(key: String, value: String): Frag = + private def item(key: String, values: Seq[String]): Frag = div( BookStyle.item, - span(BookStyle.itemKey, key), - span(BookStyle.itemValue, value) + div(BookStyle.itemName, key), + ul( + BookStyle.itemValues, + values.map(value => li(BookStyle.itemValue, value.capitalize)) + ) ) } diff --git a/src/main/scala/reading/component/index/Header.scala b/src/main/scala/reading/component/index/Header.scala index 7e29b4c..cf078ad 100644 --- a/src/main/scala/reading/component/index/Header.scala +++ b/src/main/scala/reading/component/index/Header.scala @@ -1,7 +1,5 @@ package reading.component.index -import org.scalajs.dom - import rx._ import Ctx.Owner.Unsafe._ @@ -28,10 +26,7 @@ object Header { div( div( HeaderStyle.showFiltersMenu, - RxAttr(onclick, Rx(() => { - showFiltersMenu() = true - dom.document.body.style.overflowY = "hidden" - })), + RxAttr(onclick, Rx(() => showFiltersMenu() = true)), "Filtrer", if (filtersCount() > 0) span(HeaderStyle.filtersCount, filtersCount()) else span("") ), diff --git a/src/main/scala/reading/component/index/Menu.scala b/src/main/scala/reading/component/index/Menu.scala index 5ffbd25..6a9bcef 100644 --- a/src/main/scala/reading/component/index/Menu.scala +++ b/src/main/scala/reading/component/index/Menu.scala @@ -1,7 +1,5 @@ package reading.component.index -import org.scalajs.dom - import rx._ import Ctx.Owner.Unsafe._ @@ -24,29 +22,27 @@ object Menu { header(showFiltersMenu, filters().length), - filters().find(_.kind == FilterKind.Grade) match { - case None => group(books, filters, "Classe", Grade.values.map(Filter.apply(_))) - case Some(grade) => group(books, filters, grade.name, Program.values.map(Filter.apply(_)), Some(grade)) - }, - group(books, filters, "Theme", Theme.values.map(Filter.apply(_))), - group(books, filters, "Genre", Genre.values.map(Filter.apply(_))), - group(books, filters, "Niveau", Level.values.map(Filter.apply(_))), - group(books, filters, "Période", Period.values.map(Filter.apply(_))) + div( + MenuStyle.groups, + filters().find(_.kind == FilterKind.Grade) match { + case None => group(books, filters, "Classe", Grade.values.map(Filter.apply(_))) + case Some(grade) => group(books, filters, grade.name, Program.values.map(Filter.apply(_)), Some(grade)) + }, + group(books, filters, "Theme", Theme.values.map(Filter.apply(_))), + group(books, filters, "Genre", Genre.values.map(Filter.apply(_))), + group(books, filters, "Niveau", Level.values.map(Filter.apply(_))), + group(books, filters, "Période", Period.values.map(Filter.apply(_))) + ), + + footer(Rx(books().length), filters, showFiltersMenu) ) } def header(showFiltersMenu: Var[Boolean], count: Int): HtmlTag = div( MenuStyle.header, - span( - MenuStyle.close, - RxAttr(onclick, Rx(() => { - showFiltersMenu() = false - dom.document.body.style.overflowY = "scroll" - })) - ), "Filtrer", - if (count > 0) span(MenuStyle.count, count) else span("") + if (count > 0) span(MenuStyle.filtersCount, count) else span("") ) def group( @@ -72,10 +68,15 @@ object Menu { MenuStyle.filterGroup, div( MenuStyle.filterTitle, - parentFilter.map(filter => - RxAttr(onclick, Rx(() => updateFilters(filters, Filter.remove(filters(), filter))))).getOrElse(""), + parentFilter.map { filter => + RxAttr(onclick, Rx(() => updateFilters(filters, Filter.remove(filters(), filter)))) + }.getOrElse(""), if (parentFilter.isDefined) MenuStyle.activeFilter else "", - name + name, + RxTag { implicit context => + val count = filters().filter(f => groupFilters.exists(Filter.equals(f, _))).length + if (count > 0) span(MenuStyle.filterTitleCount, count) else span("") + } ), div( filtersWithCount().map { @@ -89,7 +90,10 @@ object Menu { filters, if (isActive) Filter.remove(filters(), filter) else filter +: filters() ))), - span(s"${filter.name.capitalize} ($count)") + span( + span(filter.name.capitalize), + span(MenuStyle.filterCount, count) + ) ) } } @@ -101,4 +105,22 @@ object Menu { filters() = newFilters Route.push(Route.Books(newFilters)) } + + def footer(bookCount: Rx[Int], filters: Var[Seq[Filter]], showFiltersMenu: Var[Boolean]): HtmlTag = + div( + MenuStyle.footer, + div( + MenuStyle.clear, + RxAttr(onclick, Rx(() => filters() = Nil)), + "Effacer" + ), + div( + MenuStyle.returnToBooks, + RxAttr(onclick, Rx(() => showFiltersMenu() = false)), + "Afficher", + RxTag { implicit context => + span(MenuStyle.bookCount, bookCount()) + } + ) + ) } diff --git a/src/main/scala/reading/component/index/style/BookDetail.scala b/src/main/scala/reading/component/index/style/BookDetail.scala index 6e79113..e8f970e 100644 --- a/src/main/scala/reading/component/index/style/BookDetail.scala +++ b/src/main/scala/reading/component/index/style/BookDetail.scala @@ -2,45 +2,44 @@ package reading.component.index.style import scalacss.Defaults._ -import reading.Media import reading.component.style.{ Color => C } object BookDetail extends StyleSheet.Inline { import dsl._ - val title = style( - display.inlineBlock, - fontSize(18.px), - fontWeight.bold, - marginBottom(20.px), - color(C.congoBrown.value) - ) - - val author = style( - display.inlineBlock - ) - val detail = style( display.flex, flexWrap.wrap, - justifyContent.center + justifyContent.spaceAround ) val cover = style( - height(300.px), - marginRight(30.px), - Media.mobile(marginBottom(30.px)) + height(400.px), + marginBottom(30.px) ) val item = style( lineHeight(25.px), - marginBottom(4.px) + margin(0.px, 15.px, 15.px), + &.lastChild(marginBottom(0.px)) ) - val itemKey = style( + val itemName = style( fontWeight.bold, - marginRight(10.px) + textTransform.uppercase, + marginBottom(10.px) + ) + + val itemValues = style( + marginLeft(15.px) ) - val itemValue = style() + val itemValue = style( + marginBottom(5.px), + &.before( + content := "\"•\"", + color(C.stiletto.value), + marginRight(10.px) + ) + ) } diff --git a/src/main/scala/reading/component/index/style/Books.scala b/src/main/scala/reading/component/index/style/Books.scala index 33e1cb3..f5deb53 100644 --- a/src/main/scala/reading/component/index/style/Books.scala +++ b/src/main/scala/reading/component/index/style/Books.scala @@ -10,7 +10,7 @@ object Books extends StyleSheet.Inline { val books = style( display.flex, flexWrap.wrap, - justifyContent.center + justifyContent.spaceAround ) val book = style( diff --git a/src/main/scala/reading/component/index/style/Count.scala b/src/main/scala/reading/component/index/style/Count.scala deleted file mode 100644 index cc1eb80..0000000 --- a/src/main/scala/reading/component/index/style/Count.scala +++ /dev/null @@ -1,20 +0,0 @@ -package reading.component.index.style - -import scalacss.Defaults._ - -import reading.component.style.{ Color => C } - -object Count extends StyleSheet.Inline { - import dsl._ - - val count = style( - display.flex, - alignItems.center, - justifyContent.center, - backgroundColor(C.stiletto.value), - width(25.px), - height(25.px), - borderRadius(50.%%), - marginLeft(20.px) - ) -} diff --git a/src/main/scala/reading/component/index/style/Header.scala b/src/main/scala/reading/component/index/style/Header.scala index 643dd8e..c29bd56 100644 --- a/src/main/scala/reading/component/index/style/Header.scala +++ b/src/main/scala/reading/component/index/style/Header.scala @@ -3,7 +3,7 @@ package reading.component.index.style import scalacss.Defaults._ import reading.Media -import reading.component.style.{ Color => C } +import reading.component.style.{ Color => C, Button, Count } object Header extends StyleSheet.Inline { import dsl._ @@ -16,22 +16,14 @@ object Header extends StyleSheet.Inline { val showFiltersMenu = style( Media.desktop(display.none), Media.mobile( - display.flex, - justifyContent.center, - alignItems.center, - width(100.%%), - backgroundColor(C.englishWalnut.value), - color(C.white.value), - border(1.px, solid, C.congoBrown.value), - borderRadius(4.px), - marginBottom(20.px), - padding(10.px, 0.px), - cursor.pointer + Button.simple, + marginBottom(20.px) ) ) val filtersCount = style( - Count.count + Count.major, + marginLeft(20.px) ) val filters = style( diff --git a/src/main/scala/reading/component/index/style/Menu.scala b/src/main/scala/reading/component/index/style/Menu.scala index 38620e8..fca2bce 100644 --- a/src/main/scala/reading/component/index/style/Menu.scala +++ b/src/main/scala/reading/component/index/style/Menu.scala @@ -3,7 +3,7 @@ package reading.component.index.style import scalacss.Defaults._ import reading.Media -import reading.component.style.{ Color => C } +import reading.component.style.{ Color => C, Count } object Menu extends StyleSheet.Inline { import dsl._ @@ -28,24 +28,13 @@ object Menu extends StyleSheet.Inline { textTransform.uppercase, fontWeight.bold, letterSpacing(1.px), - marginBottom(20.px), + Media.desktop(marginBottom(20.px)), Media.mobile(boxShadow := "0px 3px 5px -1px rgba(0, 0, 0, 0.2)") ) - val close = style( - Media.desktop(display.none), - Media.mobile( - position.absolute, - top(0.px), - left(0.px), - width(100.%%), - height(100.%%), - cursor.pointer - ) - ) - - val count = style( - Count.count + val filtersCount = style( + Count.major, + marginLeft(20.px) ) val show = style( @@ -63,35 +52,100 @@ object Menu extends StyleSheet.Inline { ) ) - val filterGroup = style() - - private val filterCommon = style( - display.flex, - alignItems.center, - width(100.%%), - padding(5.px, 30.px), - textAlign.left + val groups = style( + Media.mobile( + height :=! "calc(100% - 120px)", + overflowY.auto + ) ) + val filterGroup = style() + val filterTitle = style( - filterCommon, + Commons.filter(), minHeight(50.px), fontWeight.bold, textTransform.uppercase, letterSpacing(1.px), - marginBottom(10.px) + Media.desktop(marginBottom(10.px)) ) - val filter = style( - filterCommon, + val filterTitleCount = style( + Count.major, marginLeft(10.px), + color.white, + fontSize(12.px), + width(20.px), + height(20.px) + ) + + val filter = style( + Commons.filter(additionalLeftPadding = 10), minHeight(40.px), color.inherit, - &.lastChild(marginBottom(30.px)) + &.lastChild( + Media.desktop(marginBottom(30.px)), + Media.mobile(marginBottom(15.px)) + ), + &.hover(color(C.stiletto.value)) ) val activeFilter = style( color(C.stiletto.value), + fontWeight.bold, + cursor.pointer + ) + + val filterCount = style( + Count.minor + ) + + val footer = style( + Media.desktop(display.none), + Media.mobile( + display.flex, + width(100.%%), + height(60.px) + ) + ) + + val clear = style( + Commons.footerButton, + border(2.px, solid, C.gray.value) + ) + + val returnToBooks = style( + Commons.footerButton, + backgroundColor(C.stiletto.value), + color(C.white.value) + ) + + val bookCount = style( + Count.minor, + color(C.white.value) + ) +} + +object Commons extends StyleSheet.Inline { + import dsl._ + + def filter(additionalLeftPadding: Int = 0) = style( + display.flex, + alignItems.center, + width(100.%%), + padding(5.px, 15.px, 5.px, (15 + additionalLeftPadding).px), + textAlign.left + ) + + val footerButton = style( + display.flex, + width(50.%%), + justifyContent.center, + alignItems.center, + margin(5.px), + textTransform.uppercase, + fontSize(14.px), + fontWeight.bold, cursor.pointer ) } diff --git a/src/main/scala/reading/component/style/Button.scala b/src/main/scala/reading/component/style/Button.scala new file mode 100644 index 0000000..de02b1a --- /dev/null +++ b/src/main/scala/reading/component/style/Button.scala @@ -0,0 +1,22 @@ +package reading.component.style + +import scalacss.Defaults._ + +import reading.component.style.{ Color => C } + +object Button extends StyleSheet.Inline { + import dsl._ + + val simple = style( + display.flex, + justifyContent.center, + alignItems.center, + width(100.%%), + backgroundColor(C.englishWalnut.value), + color(C.white.value), + border(1.px, solid, C.congoBrown.value), + borderRadius(4.px), + padding(12.px, 0.px), + cursor.pointer + ) +} diff --git a/src/main/scala/reading/component/style/Count.scala b/src/main/scala/reading/component/style/Count.scala new file mode 100644 index 0000000..e036bce --- /dev/null +++ b/src/main/scala/reading/component/style/Count.scala @@ -0,0 +1,27 @@ +package reading.component.style + +import scalacss.Defaults._ + +import reading.component.style.{ Color => C } + +object Count extends StyleSheet.Inline { + import dsl._ + + val major = style( + display.flex, + alignItems.center, + justifyContent.center, + backgroundColor(C.stiletto.value), + width(25.px), + height(25.px), + borderRadius(50.%%) + ) + + val minor = style( + color(C.gray.value), + marginLeft(5.px), + fontWeight.normal, + &.before(content := "\"(\""), + &.after(content := "\")\"") + ) +} diff --git a/src/main/scala/reading/component/style/Global.scala b/src/main/scala/reading/component/style/Global.scala index db7ef34..8c70b45 100644 --- a/src/main/scala/reading/component/style/Global.scala +++ b/src/main/scala/reading/component/style/Global.scala @@ -39,6 +39,7 @@ object Global extends StyleSheet.Standalone { display.flex, backgroundColor(initial), color(C.black.value), - border.none + border.none, + fontSize.inherit ) } diff --git a/src/main/scala/reading/component/widget/Popup.scala b/src/main/scala/reading/component/widget/Popup.scala index f47bc1c..86b47bf 100644 --- a/src/main/scala/reading/component/widget/Popup.scala +++ b/src/main/scala/reading/component/widget/Popup.scala @@ -10,7 +10,6 @@ import scalacss.Defaults._ import scalacss.ScalatagsCss._ import reading.component.widget.style.{ Popup => PopupStyle } -import reading.component.style.{ Color => C } import reading.utils.{ RxAttr } object Popup { @@ -30,9 +29,9 @@ object Popup { PopupStyle.content, content, button( - PopupStyle.cross, + PopupStyle.close, RxAttr(onclick, Rx(() => close(onClose))), - Cross(20.px, C.stiletto.value) + "Fermer" ) ) ) diff --git a/src/main/scala/reading/component/widget/style/Cross.scala b/src/main/scala/reading/component/widget/style/Cross.scala index 485e1e9..2e4b990 100644 --- a/src/main/scala/reading/component/widget/style/Cross.scala +++ b/src/main/scala/reading/component/widget/style/Cross.scala @@ -15,7 +15,7 @@ object Cross extends StyleSheet.Inline { content := "\"\"", position.absolute, left(40.%%), - width(20.%%), + width(30.%%), height(100.%%), transform := "rotate(45deg)" @@ -25,7 +25,7 @@ object Cross extends StyleSheet.Inline { content := "\"\"", position.absolute, left(40.%%), - width(20.%%), + width(30.%%), height(100.%%), transform := "rotate(-45deg)" diff --git a/src/main/scala/reading/component/widget/style/Popup.scala b/src/main/scala/reading/component/widget/style/Popup.scala index ea67d9e..8b77e98 100644 --- a/src/main/scala/reading/component/widget/style/Popup.scala +++ b/src/main/scala/reading/component/widget/style/Popup.scala @@ -3,7 +3,7 @@ package reading.component.widget.style import scalacss.Defaults._ import reading.Media -import reading.component.style.{ Color => C } +import reading.component.style.{ Color => C, Button } object Popup extends StyleSheet.Inline { import dsl._ @@ -46,17 +46,15 @@ object Popup extends StyleSheet.Inline { ), Media.mobile( width(100.%%), - height(100.%%) + height(100.%%), + overflowY.auto ), - padding(30.px) + padding(30.px, 30.px, 0.px, 30.px) ) - val cross = style( - position.absolute, - top(30.px), - right(30.px), - width(20.px), - height(20.px), - cursor.pointer + val close = style( + Button.simple, + marginTop(20.px), + marginBottom(30.px) ) } -- cgit v1.2.3