Added CENTER-CHILDREN

This commit is contained in:
David Botton 2021-11-28 12:13:27 -05:00
parent c6c9fa85d9
commit cf48218eaf
4 changed files with 92 additions and 77 deletions

View file

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

View file

@ -67,75 +67,90 @@ nil. Resizable only works if overflow is set to :SCROLL"))
(class nil) (class nil)
(html-id nil) (html-id nil)
(auto-place t)) (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
(if class (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>"
(format nil " class='~A'" (escape-string class)) (if class
"") (format nil " class='~A'" (escape-string class))
(if style "")
(format nil "~A;" (escape-string style)) (if style
"") (format nil "~A;" (escape-string style))
(if left "")
(format nil "left:~A~A;" left units) (if left
"") (format nil "left:~A~A;" left units)
(if top "")
(format nil "top:~A~A;" top units) (if top
"") (format nil "top:~A~A;" top units)
(if right "")
(format nil "right:~A~A;" right units) (if right
"") (format nil "right:~A~A;" right units)
(if bottom "")
(format nil "bottom:~A~A;" bottom units) (if bottom
"") (format nil "bottom:~A~A;" bottom units)
(if margin-left "")
(format nil "margin-left:~A~A;" margin-left 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-top
"") (format nil "margin-top:~A~A;" margin-top units)
(if margin-right "")
(format nil "margin-right:~A~A;" margin-right 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 margin-bottom
"") (format nil "margin-bottom:~A~A;" margin-bottom units)
(if width "")
(format nil "width:~A~A;" width units) (if width
"") (format nil "width:~A~A;" width units)
(if height "")
(format nil "height:~A~A;" height units) (if height
"") (format nil "height:~A~A;" height units)
(if border-style "")
(format nil "border-style:~A;" border-style) (if border-style
"") (format nil "border-style:~A;" border-style)
(if border-width "")
(format nil "border-width:~A;" border-width) (if border-width
"") (format nil "border-width:~A;" border-width)
(if border-color "")
(format nil "border-color:~A;" border-color) (if border-color
"") (format nil "border-color:~A;" border-color)
(if background-color "")
(format nil "background-color:~A;" background-color) (if background-color
"") (format nil "background-color:~A;" background-color)
(if overflow "")
(format nil "overflow:~A;" overflow) (if overflow
"") (format nil "overflow:~A;" overflow)
(if display "")
(format nil "display:~A;" display) (if display
"") (format nil "display:~A;" display)
(if resizable "")
(format nil "resize:~A;" resizable) (if resizable
"") (format nil "resize:~A;" resizable)
(if positioning "")
(format nil "position:~A;" (if positioning
(escape-string positioning)) (format nil "position:~A;"
"") (escape-string positioning))
(if hidden "")
"visibility:hidden;" (if hidden
"") "visibility:hidden;"
(escape-string content)) "")
:clog-type 'clog-panel (escape-string content))
:html-id html-id :clog-type 'clog-panel
:auto-place auto-place)) :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 ;; Implementation - clog-panel-box-layout

View file

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

View file

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