aboutsummaryrefslogtreecommitdiff
path: root/src/main
diff options
context:
space:
mode:
Diffstat (limited to 'src/main')
-rw-r--r--src/main/scala/reading/component/index/BookDetail.scala25
-rw-r--r--src/main/scala/reading/component/index/Header.scala7
-rw-r--r--src/main/scala/reading/component/index/Menu.scala66
-rw-r--r--src/main/scala/reading/component/index/style/BookDetail.scala41
-rw-r--r--src/main/scala/reading/component/index/style/Books.scala2
-rw-r--r--src/main/scala/reading/component/index/style/Header.scala18
-rw-r--r--src/main/scala/reading/component/index/style/Menu.scala112
-rw-r--r--src/main/scala/reading/component/style/Button.scala22
-rw-r--r--src/main/scala/reading/component/style/Count.scala (renamed from src/main/scala/reading/component/index/style/Count.scala)15
-rw-r--r--src/main/scala/reading/component/style/Global.scala3
-rw-r--r--src/main/scala/reading/component/widget/Popup.scala5
-rw-r--r--src/main/scala/reading/component/widget/style/Cross.scala4
-rw-r--r--src/main/scala/reading/component/widget/style/Popup.scala18
13 files changed, 214 insertions, 124 deletions
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/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/index/style/Count.scala b/src/main/scala/reading/component/style/Count.scala
index cc1eb80..e036bce 100644
--- a/src/main/scala/reading/component/index/style/Count.scala
+++ b/src/main/scala/reading/component/style/Count.scala
@@ -1,4 +1,4 @@
-package reading.component.index.style
+package reading.component.style
import scalacss.Defaults._
@@ -7,14 +7,21 @@ import reading.component.style.{ Color => C }
object Count extends StyleSheet.Inline {
import dsl._
- val count = style(
+ val major = style(
display.flex,
alignItems.center,
justifyContent.center,
backgroundColor(C.stiletto.value),
width(25.px),
height(25.px),
- borderRadius(50.%%),
- marginLeft(20.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)
)
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 16:26:17 +0000