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

7
README.md
View file

@ -50,9 +50,10 @@ CLOG is developed on an M1 MacBook with ECL, it is tested fairly
regulary with SCBL on Linux, Windows and Intel MacBook. It should regulary with SCBL on Linux, Windows and Intel MacBook. It should
in theory work on any system Quicklisp and CLACK will load on to. in theory work on any system Quicklisp and CLACK will load on to.
CLOG will be in Quicklisp in the next update, but because I am still CLOG is in Quicklisp, but because I am still adding code daily,
adding code daily, it is currently preferable to clone the github repo it is currently preferable to clone the github repo into your
into your ~/common-lisp directory: ~/common-lisp directory (or other quicklisp/asdf findable
directory):
``` ```
cd ~/common-lisp cd ~/common-lisp

114
source/clog-web.lisp
View file

@ -27,11 +27,19 @@
(set-maximum-page-width-in-pixels function) (set-maximum-page-width-in-pixels function)
"CLOG-WEB - General Containers" "CLOG-WEB - General Containers"
(clog-web-panel class) (clog-web-panel class)
(create-web-panel generic-function) (create-web-panel generic-function)
(clog-web-content class) (clog-web-content class)
(create-web-content generic-function) (create-web-content generic-function)
(clog-web-code class)
(create-web-code generic-function)
(clog-web-main class)
(create-web-main generic-function)
(clog-web-sidebar class)
(create-web-sidebar generic-function)
(clog-web-sidebar-item class)
(create-web-sidebar-item generic-function)
"CLOG-WEB - Auto Layout System" "CLOG-WEB - Auto Layout System"
(clog-web-auto-row class) (clog-web-auto-row class)
(create-web-auto-row generic-function) (create-web-auto-row generic-function)
@ -140,7 +148,7 @@ screen size smaller then 601 pixels DP"))
;; Panel - Notes, Quote boxes, Notifications ;; Panel - Notes, Quote boxes, Notifications
;; Display-Container - Image text overlays ;; Display-Container - Image text overlays
;; Code - Code blocks ;; Code - Code blocks
;; Side-Bar - Sidebar to main content, optional collapsable ;; Sidebar - Sidebar to main content, optional collapsable
;; Main - Mark main contact when using a side-bar ;; Main - Mark main contact when using a side-bar
;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;
@ -193,6 +201,100 @@ to nil on creation."))
(setf (visiblep div) t)) (setf (visiblep div) t))
(change-class div 'clog-web-content))) (change-class div 'clog-web-content)))
;;;;;;;;;;;;;;;;;;;;;
;; create-web-code ;;
;;;;;;;;;;;;;;;;;;;;;
(defclass clog-web-code (clog-div)()
(:documentation "Code for web code"))
(defgeneric create-web-code (clog-obj &key content
hidden class html-id)
(:documentation "Create a clog-web-code. Code content container.
If hidden is t then then the visiblep propetery will be set
to nil on creation."))
(defmethod create-web-code ((obj clog-obj) &key (content "")
(hidden nil)
(class nil)
(html-id nil))
(let ((div (create-div obj :content content
:hidden t :class class :html-id html-id)))
(add-class div "w3-code")
(unless hidden
(setf (visiblep div) t))
(change-class div 'clog-web-code)))
;;;;;;;;;;;;;;;;;;;;;
;; create-web-main ;;
;;;;;;;;;;;;;;;;;;;;;
(defclass clog-web-main (clog-div)()
(:documentation "Main for web content"))
(defgeneric create-web-main (clog-obj &key content hidden class html-id)
(:documentation "Create a clog-web-main. Container for main content when
using a collapsable sidebar or other whole page shifting technique.
If hidden is t then then the visiblep propetery will be set to nil on
creation."))
(defmethod create-web-main ((obj clog-obj) &key (content "")
(hidden nil)
(class nil)
(html-id nil))
(let ((div (create-div obj :content content
:hidden t :class class :html-id html-id)))
(add-class div "w3-main")
(unless hidden
(setf (visiblep div) t))
(change-class div 'clog-web-main)))
;;;;;;;;;;;;;;;;;;;;;;;;
;; create-web-sidebar ;;
;;;;;;;;;;;;;;;;;;;;;;;;
(defclass clog-web-sidebar (clog-div)()
(:documentation "Sidebar for web content"))
(defgeneric create-web-sidebar (clog-obj &key content hidden class html-id)
(:documentation "Create a clog-web-sidebar. Container for sidebar content.
If hidden is t then then the visiblep propetery will be set to nil on
creation."))
(defmethod create-web-sidebar ((obj clog-obj) &key (content "")
(hidden nil)
(class nil)
(html-id nil))
(let ((div (create-div obj :content content
:hidden t :class class :html-id html-id)))
(add-class div "w3-sidebar w3-bar-block")
(unless hidden
(setf (visiblep div) t))
(change-class div 'clog-web-sidebar)))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; create-web-sidebar-item ;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defclass clog-web-sidebar-item (clog-button)()
(:documentation "Sidebar-Item for web content"))
(defgeneric create-web-sidebar-item (clog-obj &key content hidden class html-id)
(:documentation "Create a clog-web-sidebar-item. A sidebar menu bar item.
If hidden is t then then the visiblep propetery will be set to nil on
creation."))
(defmethod create-web-sidebar-item ((obj clog-obj) &key (content "")
(hidden nil)
(class nil)
(html-id nil))
(let ((item (create-button obj :content content
:hidden t :class class :html-id html-id)))
(add-class item "w3-bar-item w3-button")
(unless hidden
(setf (visiblep item) t))
(change-class item 'clog-web-sidebar-item)))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Implementation - Auto Layout ;; Implementation - Auto Layout
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

74
tutorial/24-tutorial.lisp
View file

@ -10,29 +10,57 @@
(defun on-new-window (body) (defun on-new-window (body)
(clog-web-initialize body) (clog-web-initialize body)
(setf (title (html-document body)) "Tutorial 24") (setf (title (html-document body)) "Tutorial 24")
(create-web-panel body :content "<h3>Note:</h3><p>This is a Panel</p>" :class "w3-yellow") (let ((side (create-web-sidebar body :class "w3-animate-left w3-card"))
(create-section (create-web-content body :class "w3-teal") (main (create-web-main body)))
:p :content "This is come content. I am centered and set to a maximum-width.") ;; Setup sidebar:
;; These containers not in a row and no setting for how main grid columns so are stacked (setf (display side) :none)
(create-web-container body :content "Container 1" :class "w3-border") (set-on-click (create-web-sidebar-item side :content "Close &times;"
(create-web-container body :content "Container 2" :class "w3-border") :class "w3-teal")
(create-web-container body :content "Container 3" :class "w3-border") (lambda (obj)
;; These are in a row and each is a third for the 12 grid columns (setf (display side) :none)))
(let ((row (create-web-row body))) (set-on-click (create-web-sidebar-item side :content "Google")
(create-web-container row :content "Container 1" :column-size :third :class "w3-border") (lambda (obj)
(create-web-container row :content "Container 2" :column-size :third :class "w3-border") (setf (url (location body)) "http://google.com")))
(create-web-container row :content "Container 3" :column-size :third :class "w3-border")) (create-web-sidebar-item side :content "item 2")
;; As before with padding added between columns and some color (create-web-sidebar-item side :content "item 3")
(let ((row (create-web-row body :padding t))) ;; Setup main content:
(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") ;; Button to open sidebar
(create-web-container row :content "Container 3" :column-size :third :class "w3-border w3-blue")) (set-on-click (create-button main :content "&#9776;" :class "w3-button")
(let ((row (create-web-auto-row body))) (lambda (obj)
(create-web-auto-column row :content "Container 1<br>Container 1<br>Container 1" (setf (display side) :block)))
:vertical-align :middle :class "w3-border") ;; Panels
(create-web-auto-column row :content "Container 2" :vertical-align :top :class "w3-border") (create-web-panel main :content "<h3>Note:</h3><p>This is a Panel</p>" :class "w3-yellow")
(create-web-auto-column row :content "Container 3" :vertical-align :bottom :class "w3-border")) (create-section (create-web-content main :class "w3-teal")
(run body)) :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 () (defun start-tutorial ()
"Start turtorial." "Start turtorial."