diff --git a/source/clog-element.lisp b/source/clog-element.lisp
index 5e9359c..6a63257 100644
--- a/source/clog-element.lisp
+++ b/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)
- (format nil "'~A':'~A',"
- (first n)
- (second n)))
+ (if n
+ (format nil "'~A':'~A',"
+ (first n)
+ (second n))
+ ""))
style-list))))
;;;;;;;;;;;;;;;
diff --git a/source/clog-panel.lisp b/source/clog-panel.lisp
index d4c0083..e4ea963 100644
--- a/source/clog-panel.lisp
+++ b/source/clog-panel.lisp
@@ -67,75 +67,90 @@ nil. Resizable only works if overflow is set to :SCROLL"))
(class nil)
(html-id nil)
(auto-place t))
- (create-child obj (format nil "
~A
"
- (if class
- (format nil " class='~A'" (escape-string class))
- "")
- (if style
- (format nil "~A;" (escape-string style))
- "")
- (if left
- (format nil "left:~A~A;" left units)
- "")
- (if top
- (format nil "top:~A~A;" top units)
- "")
- (if right
- (format nil "right:~A~A;" right units)
- "")
- (if bottom
- (format nil "bottom:~A~A;" bottom units)
- "")
- (if margin-left
- (format nil "margin-left:~A~A;" margin-left units)
- "")
- (if margin-top
- (format nil "margin-top:~A~A;" margin-top units)
- "")
- (if margin-right
- (format nil "margin-right:~A~A;" margin-right units)
- "")
- (if margin-bottom
- (format nil "margin-bottom:~A~A;" margin-bottom units)
- "")
- (if width
- (format nil "width:~A~A;" width units)
- "")
- (if height
- (format nil "height:~A~A;" height units)
- "")
- (if border-style
- (format nil "border-style:~A;" border-style)
- "")
- (if border-width
- (format nil "border-width:~A;" border-width)
- "")
- (if border-color
- (format nil "border-color:~A;" border-color)
- "")
- (if background-color
- (format nil "background-color:~A;" background-color)
- "")
- (if overflow
- (format nil "overflow:~A;" overflow)
- "")
- (if display
- (format nil "display:~A;" display)
- "")
- (if resizable
- (format nil "resize:~A;" resizable)
- "")
- (if positioning
- (format nil "position:~A;"
- (escape-string positioning))
- "")
- (if hidden
- "visibility:hidden;"
- "")
- (escape-string content))
- :clog-type 'clog-panel
- :html-id html-id
- :auto-place auto-place))
+ (create-child obj
+ (format nil "~A
"
+ (if class
+ (format nil " class='~A'" (escape-string class))
+ "")
+ (if style
+ (format nil "~A;" (escape-string style))
+ "")
+ (if left
+ (format nil "left:~A~A;" left units)
+ "")
+ (if top
+ (format nil "top:~A~A;" top units)
+ "")
+ (if right
+ (format nil "right:~A~A;" right units)
+ "")
+ (if bottom
+ (format nil "bottom:~A~A;" bottom units)
+ "")
+ (if margin-left
+ (format nil "margin-left:~A~A;" margin-left units)
+ "")
+ (if margin-top
+ (format nil "margin-top:~A~A;" margin-top units)
+ "")
+ (if margin-right
+ (format nil "margin-right:~A~A;" margin-right units)
+ "")
+ (if margin-bottom
+ (format nil "margin-bottom:~A~A;" margin-bottom units)
+ "")
+ (if width
+ (format nil "width:~A~A;" width units)
+ "")
+ (if height
+ (format nil "height:~A~A;" height units)
+ "")
+ (if border-style
+ (format nil "border-style:~A;" border-style)
+ "")
+ (if border-width
+ (format nil "border-width:~A;" border-width)
+ "")
+ (if border-color
+ (format nil "border-color:~A;" border-color)
+ "")
+ (if background-color
+ (format nil "background-color:~A;" background-color)
+ "")
+ (if overflow
+ (format nil "overflow:~A;" overflow)
+ "")
+ (if display
+ (format nil "display:~A;" display)
+ "")
+ (if resizable
+ (format nil "resize:~A;" resizable)
+ "")
+ (if positioning
+ (format nil "position:~A;"
+ (escape-string positioning))
+ "")
+ (if hidden
+ "visibility:hidden;"
+ "")
+ (escape-string content))
+ :clog-type 'clog-panel
+ :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
diff --git a/source/clog.lisp b/source/clog.lisp
index 462211c..3d3d2f2 100644
--- a/source/clog.lisp
+++ b/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)
diff --git a/tutorial/27-tutorial.lisp b/tutorial/27-tutorial.lisp
index 1cab20a..af6ff1a 100644
--- a/tutorial/27-tutorial.lisp
+++ b/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 ()