Skip to content

Commit 9017777

Browse files
vouillonvouillon
authored
Merge pull request #591 from ocsigen/tongue
Add Ot_tongue example in template
2 parents 408a785 + bc81e0d commit 9017777

File tree

7 files changed

+210
-126
lines changed

7 files changed

+210
-126
lines changed

‎opam‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
opam-version: "2.0"
22
name: "ocsigen-start"
3-
version: "2.17.1"
3+
version: "2.18.0"
44
authors: "[email protected]"
55
maintainer: "[email protected]"
66
synopsis: "An Eliom application skeleton ready to use to build your own application with users, (pre)registration, notifications, etc"

‎template.distillery/Makefile.options‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ SHAREDIR_OT_CSS := $(SHAREDIR)/ocsigen-toolkit/css
116116
# These files are copied with every run of make so they must not be modified.
117117
EXTERNAL_CSS_FILES := $(SHAREDIR_OT_CSS)/ot_buttons.css \
118118
$(SHAREDIR_OT_CSS)/ot_carousel.css \
119+
$(SHAREDIR_OT_CSS)/ot_tongue.css \
119120
$(SHAREDIR_OT_CSS)/ot_sticky.css \
120121
$(SHAREDIR_OT_CSS)/ot_datetime.css \
121122
$(SHAREDIR_OT_CSS)/ot_drawer.css \

‎template.distillery/assets!PROJECT_NAME_i18n.tsv‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,8 @@ demo_timepicker_back_to_hours Back to hours Revenir aux heures
131131
demo_timepicker_description This page shows the Ocsigen Toolkit's time picker. Cette page montre le sélecteur d'heure d'Ocsigen Toolkit.
132132
demo_tips Tips Astuces
133133
change_profile_picture Change profile picture Changer votre photo de profil.
134+
demo_tongue_1 Tongue Languette
135+
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.
134136
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.
135137
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.
136138
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.

‎template.distillery/demo_tongue.eliom‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
(* This file was generated by Ocsigen Start.
2+
Feel free to use it, modify it, and redistribute it as you wish. *)
3+
4+
(* Tongue demo *)
5+
6+
open%client Eliom_content.Html
7+
open%shared Eliom_content.Html.F
8+
9+
(* Service for this demo *)
10+
let%server service =
11+
Eliom_service.create
12+
~path:(Eliom_service.Path ["demo-tongue"])
13+
~meth:(Eliom_service.Get Eliom_parameter.unit)
14+
()
15+
16+
(* Make service available on the client *)
17+
let%client service = ~%service
18+
19+
(* Name for demo menu *)
20+
let%shared name () = [%i18n S.demo_tongue_1]
21+
22+
(* Class for the page containing this demo (for internal use) *)
23+
let%shared page_class = "os-page-demo-tongue"
24+
25+
(* Page for this demo *)
26+
let%shared page () =
27+
let content = [ div ~a:[a_class ["demo-tongue-1"]] []
28+
; div ~a:[a_class ["demo-tongue-2"]] []
29+
; div ~a:[a_class ["demo-tongue-3"]] []
30+
; div ~a:[a_class ["demo-tongue-4"]] []
31+
; div ~a:[a_class ["demo-tongue-5"]] []
32+
; div ~a:[a_class ["demo-tongue-6"]] []
33+
]
34+
in
35+
let tongue =
36+
Ot_tongue.tongue
37+
~side:`Bottom
38+
~stops:[`Px 70; `Interval (`Percent 100, `Full_content)]
39+
~init:(`Px 70)
40+
content
41+
in
42+
Lwt.return
43+
[ h1 [%i18n demo_tongue_1]
44+
; p [%i18n ot_tongue_1]
45+
; div ~a:[a_class ["demo-tongue"]]
46+
[ tongue.Ot_tongue.elt ]
47+
]

‎template.distillery/demo_tools.eliom‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ let demos =
4040
; (module Demo_carousel1)
4141
; (module Demo_carousel2)
4242
; (module Demo_carousel3)
43+
; (module Demo_tongue)
4344
; (module Demo_calendar)
4445
; (module Demo_timepicker)
4546
; (module Demo_notif)

‎template.distillery/sass!PROJECT_NAME.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@
99
@import "ot_popup.css";
1010
@import "ot_spinner.css";
1111
@import "ot_page_transition.css";
12+
@import "ot_tongue.css";
1213
@import "os";
1314
@import "demo";

‎template.distillery/sass!demo.scss‎

Lines changed: 157 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -2,145 +2,177 @@
22
Feel free to use it, modify it, and redistribute it as you wish.
33
*/
44
.demo-carousel1 {
5-
display: flex;
6-
justify-content: center;
7-
.demo-carousel1-box {
8-
position: relative;
9-
margin: auto;
10-
}
11-
.ot-carousel {
12-
width: 300px;
13-
height: 200px;
14-
}
15-
.demo-carousel1-page {
16-
width: 100%;
17-
height: 100%;
18-
padding: 16px;
19-
color: white;
20-
}
21-
.demo-carousel1-page-1 {
22-
background-color: #49b2cc;
23-
}
24-
.demo-carousel1-page-2 {
25-
background-color: #dddd55;
26-
}
27-
.demo-carousel1-page-3 {
28-
background-color: #c14768;
29-
}
30-
.demo-carousel1-page-4 {
31-
background-color: #45bf7d;
32-
}
33-
.ot-bullet-nav {
34-
position: absolute;
35-
bottom: 16px;
36-
right: 16px;
37-
margin: 0;
38-
}
39-
.ot-car-prev, .ot-car-next {
40-
position: absolute;
41-
top: 75px;
42-
width: 50px;
43-
height: 50px;
44-
color: white;
45-
outline: none;
46-
}
47-
.ot-car-prev {
48-
left: 0;
49-
}
50-
.ot-car-next {
51-
right: 0;
52-
}
5+
display: flex;
6+
justify-content: center;
7+
.demo-carousel1-box {
8+
position: relative;
9+
margin: auto;
10+
}
11+
.ot-carousel {
12+
width: 300px;
13+
height: 200px;
14+
}
15+
.demo-carousel1-page {
16+
width: 100%;
17+
height: 100%;
18+
padding: 16px;
19+
color: white;
20+
}
21+
.demo-carousel1-page-1 {
22+
background-color: #49b2cc;
23+
}
24+
.demo-carousel1-page-2 {
25+
background-color: #dddd55;
26+
}
27+
.demo-carousel1-page-3 {
28+
background-color: #c14768;
29+
}
30+
.demo-carousel1-page-4 {
31+
background-color: #45bf7d;
32+
}
33+
.ot-bullet-nav {
34+
position: absolute;
35+
bottom: 16px;
36+
right: 16px;
37+
margin: 0;
38+
}
39+
.ot-car-prev,
40+
.ot-car-next {
41+
position: absolute;
42+
top: 75px;
43+
width: 50px;
44+
height: 50px;
45+
color: white;
46+
outline: none;
47+
}
48+
.ot-car-prev {
49+
left: 0;
50+
}
51+
.ot-car-next {
52+
right: 0;
53+
}
5354
}
5455
.os-page-demo-carousel2 {
55-
.demo-carousel2 {
56-
margin: 0 -16px;
57-
}
58-
.ot-carousel {
59-
width: 100%;
60-
height: auto;
61-
}
62-
.demo-carousel2-page {
63-
padding: 16px;
64-
p { text-align: justify; }
65-
}
66-
.demo-carousel2-page-1 {
67-
background-color: white;
68-
}
69-
.demo-carousel2-page-2 {
70-
background-color: #ffffee;
71-
}
72-
.demo-carousel2-page-3 {
73-
background-color: #ffddee;
74-
}
75-
.demo-carousel2-page-4 {
76-
background-color: #ddffee;
77-
}
78-
.demo-carousel2-tabs {
79-
position: sticky;
80-
background-color: white;
81-
z-index: 1;
82-
top: 50px;
83-
}
56+
.demo-carousel2 {
57+
margin: 0 -16px;
58+
}
59+
.ot-carousel {
60+
width: 100%;
61+
height: auto;
62+
}
63+
.demo-carousel2-page {
64+
padding: 16px;
65+
p {
66+
text-align: justify;
67+
}
68+
}
69+
.demo-carousel2-page-1 {
70+
background-color: white;
71+
}
72+
.demo-carousel2-page-2 {
73+
background-color: #ffffee;
74+
}
75+
.demo-carousel2-page-3 {
76+
background-color: #ffddee;
77+
}
78+
.demo-carousel2-page-4 {
79+
background-color: #ddffee;
80+
}
81+
.demo-carousel2-tabs {
82+
position: sticky;
83+
background-color: white;
84+
z-index: 1;
85+
top: 50px;
86+
}
8487
}
8588
.os-page-demo-carousel3 {
86-
.demo-prev, .demo-next {
87-
width: 20px;
88-
height: 20px;
89-
background-color: #6ae;
90-
color: white;
91-
}
89+
.demo-prev,
90+
.demo-next {
91+
width: 20px;
92+
height: 20px;
93+
background-color: #6ae;
94+
color: white;
95+
}
9296
}
9397
.os-page-demo-notif,
9498
.os-page-demo-react {
95-
input:not([type]) {
96-
background-color: #eee;
97-
}
99+
input:not([type]) {
100+
background-color: #eee;
101+
}
98102
}
99103
.os-page-demo-links .demo-static-img {
100-
width: 300px;
104+
width: 300px;
101105
}
102106

103107
.os-page-demo-transition {
104-
.demo-list{
105-
padding-left: 0;
106-
list-style-type: none;
107-
}
108+
.demo-list {
109+
padding-left: 0;
110+
list-style-type: none;
111+
}
108112

109-
.demo-list-item {
110-
width: 100%;
111-
height: 150px;
112-
font-size: 20px;
113-
padding-top: 65px;
114-
text-align: center;
115-
}
113+
.demo-list-item {
114+
width: 100%;
115+
height: 150px;
116+
font-size: 20px;
117+
padding-top: 65px;
118+
text-align: center;
119+
}
116120

117-
.demo-list-item>a:visited,
118-
.demo-list-item>a {
119-
color: white;
120-
}
121+
.demo-list-item > a:visited,
122+
.demo-list-item > a {
123+
color: white;
124+
}
121125

122-
.demo-list-item.demo-list-item-0 {
123-
background-color: #B1EB00
124-
}
125-
.demo-list-item.demo-list-item-1 {
126-
background-color: #53BAF3
127-
}
128-
.demo-list-item.demo-list-item-2 {
129-
background-color: #FF85CB
130-
}
131-
.demo-list-item.demo-list-item-3 {
132-
background-color: #F4402C
133-
}
134-
.demo-list-item.demo-list-item-4 {
135-
background-color: #FFAC00
136-
}
126+
.demo-list-item.demo-list-item-0 {
127+
background-color: #b1eb00;
128+
}
129+
.demo-list-item.demo-list-item-1 {
130+
background-color: #53baf3;
131+
}
132+
.demo-list-item.demo-list-item-2 {
133+
background-color: #ff85cb;
134+
}
135+
.demo-list-item.demo-list-item-3 {
136+
background-color: #f4402c;
137+
}
138+
.demo-list-item.demo-list-item-4 {
139+
background-color: #ffac00;
140+
}
137141

138-
.demo-button {
139-
margin: 0 auto;
140-
padding: 20px;
141-
width: 200px;
142-
font-size: 20px;
143-
text-align: center;
144-
background-color: #ffffee;
145-
}
142+
.demo-button {
143+
margin: 0 auto;
144+
padding: 20px;
145+
width: 200px;
146+
font-size: 20px;
147+
text-align: center;
148+
background-color: #ffffee;
149+
}
150+
}
151+
.demo-tongue {
152+
display: flex;
153+
flex-direction: column;
154+
.demo-tongue-1 {
155+
background-color: #ffffee;
156+
height: 100px;
157+
}
158+
.demo-tongue-2 {
159+
background-color: #ffddee;
160+
height: 150px;
161+
}
162+
.demo-tongue-3 {
163+
background-color: #ddffee;
164+
height: 80px;
165+
}
166+
.demo-tongue-4 {
167+
background-color: #ddeeff;
168+
height: 200px;
169+
}
170+
.demo-tongue-5 {
171+
background-color: #eeccff;
172+
height: 130px;
173+
}
174+
.demo-tongue-6 {
175+
background-color: #ffeeaa;
176+
height: 300px;
177+
}
146178
}

0 commit comments

Comments
 (0)