mirror of
https://github.com/rabbibotton/clog.git
synced 2025-12-07 03:00:49 -08:00
68 lines
3.2 KiB
Common Lisp
68 lines
3.2 KiB
Common Lisp
;; In this tutorial we use clog-web to create a dynamic modern mobile
|
|
;; compatible web page. (In progress)
|
|
|
|
(defpackage #:clog-user
|
|
(:use #:cl #:clog #:clog-web)
|
|
(:export start-tutorial))
|
|
|
|
(in-package :clog-user)
|
|
|
|
(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-left w3-card"))
|
|
(main (create-web-main body)))
|
|
;; Setup sidebar:
|
|
(setf (display side) :none)
|
|
(set-on-click (create-web-sidebar-item side :content "Close ×"
|
|
:class "w3-teal")
|
|
(lambda (obj)
|
|
(setf (display side) :none)))
|
|
(set-on-click (create-web-sidebar-item side :content "Google")
|
|
(lambda (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:
|
|
;;
|
|
;; Button to open sidebar
|
|
(set-on-click (create-button main :content "☰" :class "w3-button")
|
|
(lambda (obj)
|
|
(setf (display side) :block)))
|
|
;; Panels
|
|
(create-web-panel main :content "<h3>Note:</h3><p>This is a Panel</p>" :class "w3-yellow")
|
|
(create-section (create-web-content main :class "w3-teal")
|
|
:p :content "This is come content. I am centered and set to a maximum-width.")
|
|
;; Using containers and the 12 column grid
|
|
;; These containers not in a row and no setting for how main grid columns so are stacked
|
|
(create-web-container main :content "Container 1" :class "w3-border")
|
|
(create-web-container main :content "Container 2" :class "w3-border")
|
|
(create-web-container main :content "Container 3" :class "w3-border")
|
|
;; These are in a row and each is a third of the 12 column grid
|
|
(let ((row (create-web-row main)))
|
|
(create-web-container row :content "Container 1" :column-size :third :class "w3-border")
|
|
(create-web-container row :content "Container 2" :column-size :third :class "w3-border")
|
|
(create-web-container row :content "Container 3" :column-size :third :class "w3-border"))
|
|
;; As before with padding added between columns and some color
|
|
(let ((row (create-web-row main :padding t)))
|
|
(create-web-container row :content "Container 1" :column-size :third :class "w3-border w3-red")
|
|
(create-web-container row :content "Container 2" :column-size :third :class "w3-border w3-orange")
|
|
(create-web-container row :content "Container 3" :column-size :third :class "w3-border w3-blue"))
|
|
;; Using the auto layout that adjusts for content sizes automaticly
|
|
(let ((row (create-web-auto-row main)))
|
|
(create-web-auto-column row :content "Container 1<br>Container 1<br>Container 1"
|
|
:vertical-align :middle :class "w3-border")
|
|
(create-web-auto-column row :content "Container 2" :vertical-align :top :class "w3-border")
|
|
(create-web-auto-column row :content "Container 3" :vertical-align :bottom :class "w3-border"))
|
|
;; A "code" block
|
|
(create-web-code main :content
|
|
"(defun start-tutorial ()<br>
|
|
\"Start turtorial.\"<br>
|
|
(initialize #'on-new-window)<br>
|
|
(open-browser))")
|
|
(run body)))
|
|
|
|
(defun start-tutorial ()
|
|
"Start turtorial."
|
|
(initialize #'on-new-window)
|
|
(open-browser))
|