mirrors/clog
1
Fork 0
mirror of https://github.com/rabbibotton/clog.git synced 2025-12-06 10:40:45 -08:00
Code Issues Projects Releases Wiki Activity

sidebars

Browse source
This commit is contained in:
David Botton 2021-03-02 19:10:57 -05:00
parent 90e77e97c8
commit 5082229ea4
3 changed files with 163 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

74
tutorial/24-tutorial.lisp
View file

@ -10,29 +10,57 @@
(defun on-new-window (body)
(clog-web-initialize body)
(setf (title (html-document body)) "Tutorial 24")
(create-web-panel body :content "<h3>Note:</h3><p>This is a Panel</p>" :class "w3-yellow")
(create-section (create-web-content body :class "w3-teal")
:p :content "This is come content. I am centered and set to a maximum-width.")
;; These containers not in a row and no setting for how main grid columns so are stacked
(create-web-container body :content "Container 1" :class "w3-border")
(create-web-container body :content "Container 2" :class "w3-border")
(create-web-container body :content "Container 3" :class "w3-border")
;; These are in a row and each is a third for the 12 grid columns
(let ((row (create-web-row body)))
(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 body :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"))
(let ((row (create-web-auto-row body)))
(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"))
(run body))
(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 &times;"
: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 "&#9776;" :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."