diff --git a/source/clog-web.lisp b/source/clog-web.lisp index 9f7bffe..e9ce6f8 100644 --- a/source/clog-web.lisp +++ b/source/clog-web.lisp @@ -45,6 +45,7 @@ (create-web-compositor generic-function) (web-padding-class-type type) (composite-on-hover generic-function) + (composite-position generic-function) (composite-top-middle generic-function) (composite-top-left generic-function) (composite-top-right generic-function) @@ -67,6 +68,11 @@ (clog-web-container class) (create-web-container generic-function) + "CLOG-WEB - Look and Feel" + (add-card-look generic-function) + (add-hard-card-look generic-function) + + "CLOG-WEB - Mobile" (full-row-on-mobile generic-function) (hide-on-small-screens generic-function) (hide-on-medium-screens generic-function) @@ -112,11 +118,31 @@ (add-class clog-body "w3-content") (setf (maximum-width clog-body) (unit "px" width))) +;;;;;;;;;;;;;;;;;;; +;; add-card-look ;; +;;;;;;;;;;;;;;;;;;; + +(defgeneric add-card-look (clog-element) + (:documentation "Change clog-element to use 2px card look")) + +(defmethod add-card-look ((obj clog-element)) + (add-class obj "w3-card-2")) + +;;;;;;;;;;;;;;;;;;;;;;;; +;; add-hard-card-look ;; +;;;;;;;;;;;;;;;;;;;;;;;; + +(defgeneric add-hard-card-look (clog-element) + (:documentation "Change clog-element to use 4px card look")) + +(defmethod add-hard-card-look ((obj clog-element)) + (add-class obj "w3-card-4")) + ;;;;;;;;;;;;;;;;;;;;;;;; ;; full-row-on-mobile ;; ;;;;;;;;;;;;;;;;;;;;;;;; -(defgeneric full-row-on-mobiile (clog-element) +(defgeneric full-row-on-mobile (clog-element) (:documentation "Change element to display:block, take up the full row, when screen size smaller then 601 pixels DP")) @@ -255,6 +281,21 @@ then the visiblep propetery will be set to nil on creation.")) (defmethod composite-on-hover ((obj clog-element)) (add-class obj "w3-display-hover")) +(defgeneric composite-position (clog-element &key top left padding-class) + (:documentation "Composite CLOG-ELEMENT to coordinate top left.")) + +(defmethod composite-position ((obj clog-element) + &key + (top 0) (left 0) + (padding-class nil)) + (add-class obj + (format nil "w3-display-position~A" + (if padding-class + (format nil " w3-~A" (string-downcase padding-class)) + ""))) + (setf (top obj) (unit :px top)) + (setf (left obj) (unit :px left))) + (defgeneric composite-top-middle (clog-element &key padding-class) (:documentation "Composite CLOG-ELEMENT on top-middle.")) @@ -411,8 +452,12 @@ creation.")) (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.")) +sidebars are create with the display property set to :none if hidden it t +and :block if nil. In general the visiblep property is used in clog, however +in clog-web-sidebar the block property is needed to activate its animations +if used. If using a sidebar that will take space on not collapse, make sure +to set the sidebar's size and set a margin equal to the size on the main +container.")) (defmethod create-web-sidebar ((obj clog-obj) &key (content "") (hidden nil) @@ -420,9 +465,11 @@ creation.")) (html-id nil)) (let ((div (create-div obj :content content :hidden t :class class :html-id html-id))) + (setf (display div) :none) + (setf (visiblep div) t) (add-class div "w3-sidebar w3-bar-block") (unless hidden - (setf (visiblep div) t)) + (setf (display div) :block)) (change-class div 'clog-web-sidebar))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;; diff --git a/tutorial/24-tutorial.lisp b/tutorial/24-tutorial.lisp index 1c7eda3..a89fcab 100644 --- a/tutorial/24-tutorial.lisp +++ b/tutorial/24-tutorial.lisp @@ -1,5 +1,5 @@ ;; In this tutorial we use clog-web to create a dynamic modern mobile -;; compatible web page. (In progress) +;; compatible web page using various clog-web containers. (In progress) (defpackage #:clog-user (:use #:cl #:clog #:clog-web) @@ -10,62 +10,96 @@ (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")) + (let ((side (create-web-sidebar body :class "w3-animate-right" + :hidden t)) (main (create-web-main body))) ;; Setup sidebar: - (setf (display side) :none) + (setf (right side) (unit :px 0)) + (add-card-look side) (set-on-click (create-web-sidebar-item side :content "Close ×" - :class "w3-teal") + :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: - ;; - ;; Button to open sidebar - (set-on-click (create-button main :content "☰" :class "w3-button") + (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) - (setf (display side) :block))) + (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 "

Note:

This is a Panel

" :class "w3-yellow") + (create-web-panel main :content "

Note:

This is a 'panel' container

" + :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.") + :p :content "This is a 'content' container. + The container is 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 + (create-section (create-web-content main) + :p :content "Try and adjust size of browser to see reactions.
+ 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 "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")) + (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 "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")) + (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 "Container 1
Container 1
Container 1" + (create-web-auto-column row :content "Auto Column 1
Auto Column 1
Auto Column 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")) + (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 - "(defun start-tutorial ()
+ ";; This is a code block
+ (defun start-tutorial ()
\"Start turtorial.\"
(initialize #'on-new-window)
(open-browser))") - (let* ((com (create-web-compositor main)) - (img (create-img com :url-src "/img/kiarash-mansouri-fzoSNcxqtp8-unsplash.jpg")) - (txt (create-div com :content "Beyond!"))) - (setf (box-width img) "100%") - (composite-middle txt) - (add-class txt "w3-text-white w3-cursive w3-xxxlarge")) (run body))) (defun start-tutorial ()