From bc81e0de173c85aea7c73dad4058670596c3f804 Mon Sep 17 00:00:00 2001 From: Vincent Balat Date: Wed, 29 Apr 2020 14:58:58 +0200 Subject: [PATCH] Add Ot_tongue example in template --- opam | 2 +- template.distillery/Makefile.options | 1 + .../assets!PROJECT_NAME_i18n.tsv | 2 + template.distillery/demo_tongue.eliom | 47 +++ template.distillery/demo_tools.eliom | 1 + template.distillery/sass!PROJECT_NAME.scss | 1 + template.distillery/sass!demo.scss | 282 ++++++++++-------- 7 files changed, 210 insertions(+), 126 deletions(-) create mode 100644 template.distillery/demo_tongue.eliom diff --git a/opam b/opam index 9774564a5..cc084f53c 100644 --- a/opam +++ b/opam @@ -1,6 +1,6 @@ opam-version: "2.0" name: "ocsigen-start" -version: "2.17.1" +version: "2.18.0" authors: "dev@ocsigen.org" maintainer: "dev@ocsigen.org" synopsis: "An Eliom application skeleton ready to use to build your own application with users, (pre)registration, notifications, etc" diff --git a/template.distillery/Makefile.options b/template.distillery/Makefile.options index 1af9cea30..e6bca18e3 100644 --- a/template.distillery/Makefile.options +++ b/template.distillery/Makefile.options @@ -116,6 +116,7 @@ SHAREDIR_OT_CSS := $(SHAREDIR)/ocsigen-toolkit/css # These files are copied with every run of make so they must not be modified. EXTERNAL_CSS_FILES := $(SHAREDIR_OT_CSS)/ot_buttons.css \ $(SHAREDIR_OT_CSS)/ot_carousel.css \ + $(SHAREDIR_OT_CSS)/ot_tongue.css \ $(SHAREDIR_OT_CSS)/ot_sticky.css \ $(SHAREDIR_OT_CSS)/ot_datetime.css \ $(SHAREDIR_OT_CSS)/ot_drawer.css \ diff --git a/template.distillery/assets!PROJECT_NAME_i18n.tsv b/template.distillery/assets!PROJECT_NAME_i18n.tsv index d1b726d1b..d0c88a461 100644 --- a/template.distillery/assets!PROJECT_NAME_i18n.tsv +++ b/template.distillery/assets!PROJECT_NAME_i18n.tsv @@ -131,6 +131,8 @@ demo_timepicker_back_to_hours Back to hours Revenir aux heures demo_timepicker_description This page shows the Ocsigen Toolkit's time picker. Cette page montre le sélecteur d'heure d'Ocsigen Toolkit. demo_tips Tips Astuces change_profile_picture Change profile picture Changer votre photo de profil. +demo_tongue_1 Tongue Languette +ot_tongue_1 This is an example of page with a tongue coming from the bottom of the screen. try to slide it with your finger on a mobile screen. Ceci est un exemple de page avec une languette partant du bas de l'écran. Essayez de la faire glisser vers le haut avec le doigt sur un téléphone mobile. demo_widget_ot This app also contains demos for some widgets from Ocsigen Toolkit. Cette application contient également des démonstrations de quelques widgets d'Ocsigen Toolkit. demo_widget_see_drawer The different demos are accessible through the drawer menu. To open it click the top left button on the screen. Les différentes démonstrations sont accessibles à travers le menu. Pour l'ouvrir, cliquez sur le bouton en haut à gauche de l'écran. demo_widget_feel_free Feel free to modify the generated code and use it or redistribute it as you want. Vous êtes libres de modifier le code généré et de l'utiliser ou de le redistribuer comme vous souhaitez. diff --git a/template.distillery/demo_tongue.eliom b/template.distillery/demo_tongue.eliom new file mode 100644 index 000000000..678088e63 --- /dev/null +++ b/template.distillery/demo_tongue.eliom @@ -0,0 +1,47 @@ +(* This file was generated by Ocsigen Start. + Feel free to use it, modify it, and redistribute it as you wish. *) + +(* Tongue demo *) + +open%client Eliom_content.Html +open%shared Eliom_content.Html.F + +(* Service for this demo *) +let%server service = + Eliom_service.create + ~path:(Eliom_service.Path ["demo-tongue"]) + ~meth:(Eliom_service.Get Eliom_parameter.unit) + () + +(* Make service available on the client *) +let%client service = ~%service + +(* Name for demo menu *) +let%shared name () = [%i18n S.demo_tongue_1] + +(* Class for the page containing this demo (for internal use) *) +let%shared page_class = "os-page-demo-tongue" + +(* Page for this demo *) +let%shared page () = + let content = [ div ~a:[a_class ["demo-tongue-1"]] [] + ; div ~a:[a_class ["demo-tongue-2"]] [] + ; div ~a:[a_class ["demo-tongue-3"]] [] + ; div ~a:[a_class ["demo-tongue-4"]] [] + ; div ~a:[a_class ["demo-tongue-5"]] [] + ; div ~a:[a_class ["demo-tongue-6"]] [] + ] + in + let tongue = + Ot_tongue.tongue + ~side:`Bottom + ~stops:[`Px 70; `Interval (`Percent 100, `Full_content)] + ~init:(`Px 70) + content + in + Lwt.return + [ h1 [%i18n demo_tongue_1] + ; p [%i18n ot_tongue_1] + ; div ~a:[a_class ["demo-tongue"]] + [ tongue.Ot_tongue.elt ] + ] diff --git a/template.distillery/demo_tools.eliom b/template.distillery/demo_tools.eliom index 30027ac5a..8633ea457 100644 --- a/template.distillery/demo_tools.eliom +++ b/template.distillery/demo_tools.eliom @@ -40,6 +40,7 @@ let demos = ; (module Demo_carousel1) ; (module Demo_carousel2) ; (module Demo_carousel3) + ; (module Demo_tongue) ; (module Demo_calendar) ; (module Demo_timepicker) ; (module Demo_notif) diff --git a/template.distillery/sass!PROJECT_NAME.scss b/template.distillery/sass!PROJECT_NAME.scss index b9e6bc2a5..9e8ae87a5 100644 --- a/template.distillery/sass!PROJECT_NAME.scss +++ b/template.distillery/sass!PROJECT_NAME.scss @@ -9,5 +9,6 @@ @import "ot_popup.css"; @import "ot_spinner.css"; @import "ot_page_transition.css"; +@import "ot_tongue.css"; @import "os"; @import "demo"; diff --git a/template.distillery/sass!demo.scss b/template.distillery/sass!demo.scss index 754e8b9b2..ef5d49db2 100644 --- a/template.distillery/sass!demo.scss +++ b/template.distillery/sass!demo.scss @@ -2,145 +2,177 @@ Feel free to use it, modify it, and redistribute it as you wish. */ .demo-carousel1 { - display: flex; - justify-content: center; - .demo-carousel1-box { - position: relative; - margin: auto; - } - .ot-carousel { - width: 300px; - height: 200px; - } - .demo-carousel1-page { - width: 100%; - height: 100%; - padding: 16px; - color: white; - } - .demo-carousel1-page-1 { - background-color: #49b2cc; - } - .demo-carousel1-page-2 { - background-color: #dddd55; - } - .demo-carousel1-page-3 { - background-color: #c14768; - } - .demo-carousel1-page-4 { - background-color: #45bf7d; - } - .ot-bullet-nav { - position: absolute; - bottom: 16px; - right: 16px; - margin: 0; - } - .ot-car-prev, .ot-car-next { - position: absolute; - top: 75px; - width: 50px; - height: 50px; - color: white; - outline: none; - } - .ot-car-prev { - left: 0; - } - .ot-car-next { - right: 0; - } + display: flex; + justify-content: center; + .demo-carousel1-box { + position: relative; + margin: auto; + } + .ot-carousel { + width: 300px; + height: 200px; + } + .demo-carousel1-page { + width: 100%; + height: 100%; + padding: 16px; + color: white; + } + .demo-carousel1-page-1 { + background-color: #49b2cc; + } + .demo-carousel1-page-2 { + background-color: #dddd55; + } + .demo-carousel1-page-3 { + background-color: #c14768; + } + .demo-carousel1-page-4 { + background-color: #45bf7d; + } + .ot-bullet-nav { + position: absolute; + bottom: 16px; + right: 16px; + margin: 0; + } + .ot-car-prev, + .ot-car-next { + position: absolute; + top: 75px; + width: 50px; + height: 50px; + color: white; + outline: none; + } + .ot-car-prev { + left: 0; + } + .ot-car-next { + right: 0; + } } .os-page-demo-carousel2 { - .demo-carousel2 { - margin: 0 -16px; - } - .ot-carousel { - width: 100%; - height: auto; - } - .demo-carousel2-page { - padding: 16px; - p { text-align: justify; } - } - .demo-carousel2-page-1 { - background-color: white; - } - .demo-carousel2-page-2 { - background-color: #ffffee; - } - .demo-carousel2-page-3 { - background-color: #ffddee; - } - .demo-carousel2-page-4 { - background-color: #ddffee; - } - .demo-carousel2-tabs { - position: sticky; - background-color: white; - z-index: 1; - top: 50px; - } + .demo-carousel2 { + margin: 0 -16px; + } + .ot-carousel { + width: 100%; + height: auto; + } + .demo-carousel2-page { + padding: 16px; + p { + text-align: justify; + } + } + .demo-carousel2-page-1 { + background-color: white; + } + .demo-carousel2-page-2 { + background-color: #ffffee; + } + .demo-carousel2-page-3 { + background-color: #ffddee; + } + .demo-carousel2-page-4 { + background-color: #ddffee; + } + .demo-carousel2-tabs { + position: sticky; + background-color: white; + z-index: 1; + top: 50px; + } } .os-page-demo-carousel3 { - .demo-prev, .demo-next { - width: 20px; - height: 20px; - background-color: #6ae; - color: white; - } + .demo-prev, + .demo-next { + width: 20px; + height: 20px; + background-color: #6ae; + color: white; + } } .os-page-demo-notif, .os-page-demo-react { - input:not([type]) { - background-color: #eee; - } + input:not([type]) { + background-color: #eee; + } } .os-page-demo-links .demo-static-img { - width: 300px; + width: 300px; } .os-page-demo-transition { - .demo-list{ - padding-left: 0; - list-style-type: none; - } + .demo-list { + padding-left: 0; + list-style-type: none; + } - .demo-list-item { - width: 100%; - height: 150px; - font-size: 20px; - padding-top: 65px; - text-align: center; - } + .demo-list-item { + width: 100%; + height: 150px; + font-size: 20px; + padding-top: 65px; + text-align: center; + } - .demo-list-item>a:visited, - .demo-list-item>a { - color: white; - } + .demo-list-item > a:visited, + .demo-list-item > a { + color: white; + } - .demo-list-item.demo-list-item-0 { - background-color: #B1EB00 - } - .demo-list-item.demo-list-item-1 { - background-color: #53BAF3 - } - .demo-list-item.demo-list-item-2 { - background-color: #FF85CB - } - .demo-list-item.demo-list-item-3 { - background-color: #F4402C - } - .demo-list-item.demo-list-item-4 { - background-color: #FFAC00 - } + .demo-list-item.demo-list-item-0 { + background-color: #b1eb00; + } + .demo-list-item.demo-list-item-1 { + background-color: #53baf3; + } + .demo-list-item.demo-list-item-2 { + background-color: #ff85cb; + } + .demo-list-item.demo-list-item-3 { + background-color: #f4402c; + } + .demo-list-item.demo-list-item-4 { + background-color: #ffac00; + } - .demo-button { - margin: 0 auto; - padding: 20px; - width: 200px; - font-size: 20px; - text-align: center; - background-color: #ffffee; - } + .demo-button { + margin: 0 auto; + padding: 20px; + width: 200px; + font-size: 20px; + text-align: center; + background-color: #ffffee; + } +} +.demo-tongue { + display: flex; + flex-direction: column; + .demo-tongue-1 { + background-color: #ffffee; + height: 100px; + } + .demo-tongue-2 { + background-color: #ffddee; + height: 150px; + } + .demo-tongue-3 { + background-color: #ddffee; + height: 80px; + } + .demo-tongue-4 { + background-color: #ddeeff; + height: 200px; + } + .demo-tongue-5 { + background-color: #eeccff; + height: 130px; + } + .demo-tongue-6 { + background-color: #ffeeaa; + height: 300px; + } }