container demo

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
+sidebars are create with the display property set to :none if hidden it t
-creation."))
+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)))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

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:
-    ;;
+    (let* ((com (create-web-compositor main))
-    ;; Button to open sidebar
+	   (img (create-img com    :url-src "/img/kiarash-mansouri-fzoSNcxqtp8-unsplash.jpg"))
-    (set-on-click (create-button main :content "☰" :class "w3-button")
+	   (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 "<h3>Note:</h3><p>This is a Panel</p>" :class "w3-yellow")
+    (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 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-section (create-web-content main)
-    (create-web-container main :content "Container 1" :class "w3-border")
+		    :p :content "Try and adjust size of browser to see reactions.<br>
-    (create-web-container main :content "Container 2" :class "w3-border")
+                                 These are in a row container and each is a third of the 12 column grid")
-    (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 "Grid 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 "Grid 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 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 "Grid 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 "Grid 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 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<br>Container 1<br>Container 1"
+      (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 "Container 2" :vertical-align :top :class "w3-border")
+      (create-web-auto-column row :content "Auto Column 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 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 ()<br>
+		     ";; This is a code block<br>
+                      (defun start-tutorial ()<br>
                       \"Start turtorial.\"<br>
                       (initialize #'on-new-window)<br>
                       (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 ()