Skip to content

Add Ot_tongue example in template #591

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 29, 2020
Merged

Add Ot_tongue example in template #591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion opam
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
1 change: 1 addition & 0 deletions template.distillery/Makefile.options
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 \
Expand Down
2 changes: 2 additions & 0 deletions template.distillery/assets!PROJECT_NAME_i18n.tsv
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
47 changes: 47 additions & 0 deletions template.distillery/demo_tongue.eliom
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ]
]
1 change: 1 addition & 0 deletions template.distillery/demo_tools.eliom
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
1 change: 1 addition & 0 deletions template.distillery/sass!PROJECT_NAME.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
282 changes: 157 additions & 125 deletions template.distillery/sass!demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}