forked from rabbibotton/clog
-
Notifications
You must be signed in to change notification settings - Fork 0
/
24-tutorial.lisp
107 lines (103 loc) · 5.67 KB
/
24-tutorial.lisp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
;; In this tutorial we use clog-web to create a dynamic modern mobile
;; compatible web page using various clog-web containers.
(defpackage #:clog-tut-24
(:use #:cl #:clog #:clog-web)
(:export start-tutorial))
(in-package :clog-tut-24)
(defun on-new-window (body)
(clog-web-initialize body)
(setf (title (html-document body)) "Tutorial 24")
(let ((side (create-web-sidebar body :class "w3-animate-right"
:hidden t))
(main (create-web-main body)))
;; Setup sidebar:
(setf (right side) (unit :px 0))
(add-card-look side)
(set-on-click (create-web-sidebar-item side :content "Close ×"
:class "w3-teal")
(lambda (obj)
(declare (ignore obj))
(setf (display side) :none)))
(set-on-click (create-web-sidebar-item side :content "Google")
(lambda (obj)
(declare (ignore obj))
(setf (url (location body)) "http://google.com")))
(create-web-sidebar-item side :content "item 2")
(create-web-sidebar-item side :content "item 3")
;; Setup main content:
(let* ((com (create-web-compositor main))
(img (create-img com :url-src "/img/kiarash-mansouri-fzoSNcxqtp8-unsplash.jpg"))
(btn (create-button com :content "☰"
:class "w3-button w3-text-white"))
(txt (create-div com :content "CLOG - Beyond Web Frameworks!"
:class "w3-center w3-text-white w3-cursive w3-xlarge"))
(txp (create-img com :url-src "/img/clogwicon.png"))
(url (create-div com :content "https://github.com/rabbibotton/clog"
:hidden t
:class "w3-text-white w3-large")))
;; composite main image
(setf (box-width img) "100%")
(setf (box-height img) "200")
;; composite top-right button to open sidebar
(composite-top-right btn)
(set-on-click btn
(lambda (obj)
(declare (ignore obj))
(setf (display side) :block)))
;; composite middle text
(composite-middle txt)
;; composite clog icon
(composite-position txp :top 20 :left 20)
(set-on-click txp (lambda (obj)
(declare (ignore obj))
(setf (url (location body)) "https://github.com/rabbibotton/clog")))
(composite-top-middle url :padding-class :padding-32)
(set-on-mouse-enter txp (lambda (obj)
(declare (ignore obj))
(setf (visiblep url) t)))
(set-on-mouse-leave txp (lambda (obj)
(declare (ignore obj))
(setf (visiblep url) nil)))
(composite-bottom-middle (create-div com :content "This is a 'compositor' container"
:class "w3-text-white")))
;; Panels
(create-web-panel main :content "<h3>Note:</h3><p>This is a 'panel' container</p>"
:class "w3-yellow")
(create-section (create-web-content main :class "w3-teal")
:p :content "This is a 'content' container.
The container is centered and set to a maximum-width.")
;; Using containers and the 12 column grid
(create-section (create-web-content main)
:p :content "Try and adjust size of browser to see reactions.<br>
These are in a row container and each is a third of the 12 column grid")
(let ((row (create-web-row main)))
(create-web-container row :content "Grid Container 1" :column-size :third :class "w3-border")
(create-web-container row :content "Grid Container 2" :column-size :third :class "w3-border")
(create-web-container row :content "Grid Container 3" :column-size :third :class "w3-border"))
;; As before with padding added between columns and some color
(create-section (create-web-content main)
:p :content "These are in a row container with padding turned on
and each is a third of the 12 column grid")
(let ((row (create-web-row main :padding t)))
(create-web-container row :content "Grid Container 1" :column-size :third :class "w3-border w3-red")
(create-web-container row :content "Grid Container 2" :column-size :third :class "w3-border w3-orange")
(create-web-container row :content "Grid Container 3" :column-size :third :class "w3-border w3-blue"))
;; Using the auto layout that adjusts for content sizes automaticly
(create-section (create-web-content main) :p :content "These are in an auto-row container")
(let ((row (create-web-auto-row main)))
(create-web-auto-column row :content "Auto Column 1<br>Auto Column 1<br>Auto Column 1"
:vertical-align :middle :class "w3-border")
(create-web-auto-column row :content "Auto Column 2" :vertical-align :top :class "w3-border")
(create-web-auto-column row :content "Auto Column 3" :vertical-align :bottom :class "w3-border"))
;; A "code" block
(create-section (create-web-content main) :p :content "This a code block")
(create-web-code main :content
";; This is a code block<br>
(defun start-tutorial ()<br>
\"Start turtorial.\"<br>
(initialize 'on-new-window)<br>
(open-browser))")))
(defun start-tutorial ()
"Start turtorial."
(initialize 'on-new-window)
(open-browser))