Added CENTER-CHILDREN

source/clog-element.lisp

@@ -128,9 +128,11 @@ must be in DOM, ie placed or auto-placed."))
   (jquery-execute obj (format nil "css({~{~A~}})"
 			      (mapcar
 			       (lambda (n)
+				 (if n
 				     (format nil "'~A':'~A',"
 					     (first n)
-					 (second n)))
+					     (second n))
+				     ""))
 			       style-list))))
 
 ;;;;;;;;;;;;;;;

source/clog-panel.lisp

@@ -67,7 +67,8 @@ nil. Resizable only works if overflow is set to :SCROLL"))
 					  (class nil)
 					  (html-id nil)
 					  (auto-place t))
-  (create-child obj (format nil "<div~A style='~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A'>~A</div>"
+  (create-child obj
+     (format nil "<div~A style='~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A~A'>~A</div>"
 	     (if class
 		 (format nil " class='~A'" (escape-string class))
 		 "")
@@ -137,6 +138,20 @@ nil. Resizable only works if overflow is set to :SCROLL"))
      :html-id    html-id
      :auto-place auto-place))
 
+;;;;;;;;;;;;;;;;;;;;;
+;; center-children ;;
+;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric center-children (clog-element &key vertical horizontal)
+  (:documentation "Align children of CLOG-ELEMENT VERTICAL (default t)
+and/or HORIZONTAL (default t). This will set the DISPLAY property of
+CLOG-ELEMENT to :FLEX."))
+
+(defmethod center-children ((obj clog-element) &key (vertical t) (horizontal t))
+  (set-styles obj `(("display" "flex")
+		   ,(when vertical '("align-items" "center"))
+		   ,(when horizontal '("justify-content" "center")))))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Implementation - clog-panel-box-layout
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

source/clog.lisp

@@ -474,6 +474,7 @@ embedded in a native template application.)"
 
   "CLOG-Panel-Box-Layout"
   (clog-panel-box-layout   class)
+  (center-children         generic-function)
   (create-panel-box-layout function)
   (center-panel            generic-function)
   (top-panel               generic-function)

tutorial/27-tutorial.lisp

@@ -14,9 +14,7 @@
     (declare (ignore footer))
     ;; Setup Top
     (setf (background-color (top-panel console)) :teal)
-    (setf (display (top-panel console)) :flex)
-    (setf (justify-content (top-panel console)) :center)
-    (setf (align-items (top-panel console)) :center)
+    (center-children (top-panel console))
     (setf (color head) :white)
     ;; Setup viewer
     (setf (width viewer) "100%")
@@ -34,8 +32,7 @@
 			  (setf (url-src viewer) (format nil "/img/~A"
 							 (value lbox)))))
     ;; Setup Bottom
-    (setf (display (bottom-panel console)) :flex)
-    (setf (align-items (bottom-panel console)) :center)
+    (center-children (bottom-panel console) :horizontal nil)
     (run body)))
 
 (defun start-tutorial ()