From 3f7a9ef03bd33a3a54db43cbd4940345a94b8371 Mon Sep 17 00:00:00 2001
From: David Botton <david@botton.com>
Date: Wed, 1 Dec 2021 20:18:34 -0500
Subject: [PATCH] Change to clog-gui to allow positioning absolute to work
 properly in the content area.

---
 FUTURE.md                 |  2 ++
 demos/03-demo.lisp        |  2 +-
 source/clog-gui.lisp      | 19 ++++++++++---------
 tools/clog-db-admin.lisp  |  2 +-
 tutorial/22-tutorial.lisp |  7 +++----
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/FUTURE.md b/FUTURE.md
index 42c300d..f6b4263 100644
--- a/FUTURE.md
+++ b/FUTURE.md
@@ -1,5 +1,7 @@
 Post 1.0
 
+GUI Builder
+
 - clog-data
   - binding html controls directly to fields for database use
 
diff --git a/demos/03-demo.lisp b/demos/03-demo.lisp
index 3acfe7c..3ce00f4 100644
--- a/demos/03-demo.lisp
+++ b/demos/03-demo.lisp
@@ -166,7 +166,7 @@
                                          <center>(c) 2021 - David Botton</center></p></div>"
 				  :hidden  t
 				  :width   200
-				  :height  200)))
+				  :height  215)))
     (window-center about)
     (setf (visiblep about) t)
     (set-on-window-can-size about (lambda (obj)
diff --git a/source/clog-gui.lisp b/source/clog-gui.lisp
index 5f0b624..dada214 100644
--- a/source/clog-gui.lisp
+++ b/source/clog-gui.lisp
@@ -710,18 +710,18 @@ the window will be set to keep-on-top always."))
     (let ((win (create-child (body app)
 			    (format nil
 	    "<div style='position:fixed;top:~Apx;left:~Apx;width:~Apx;height:~Apx;
-                  flex-container;display:flex;flex-direction:column;z-index:~A;
-                  visibility:hidden'
+                  z-index:~A;visibility:hidden'
                   class='w3-card-4 w3-white w3-border'>
                   <div id='~A-title-bar' class='w3-container w3-black'
-                       style='flex-container;display:flex;align-items:stretch;'>
+                       style='position:absolute;top:0;right:0;left:0;height:25px'>
                     <span data-drag-obj='~A' data-drag-type='m' id='~A-title'
-                      style='flex-grow:9;user-select:none;cursor:move;'>~A</span>~A
+                      style='position:absolute;top:0;right:20px;left:5px;
+                             user-select:none;cursor:move;'>~A</span>~A
                     <span id='~A-closer'
-                      style='cursor:pointer;user-select:none;'>&times;</span>
+                      style='position:absolute;top:0;right:5px;cursor:pointer;user-select:none;'>&times;</span>
                   </div>
-                  <div id='~A-body' style='flex-grow:9;overflow:auto'>~A</div>
-                  <div id='~A-sizer' style='user-select:none;height:3px;
+                  <div id='~A-body' style='position:absolute;top:25px;left:0;right:0;bottom:3px;overflow:auto'>~A</div>
+                  <div id='~A-sizer' style='position:absolute;right:0;bottom:0;left:0;user-select:none;height:3px;
                        cursor:se-resize;opacity:0'
                        class='w3-right' data-drag-obj='~A' data-drag-type='s'>+</div>
              </div>"
@@ -730,7 +730,8 @@ the window will be set to keep-on-top always."))
 	    title                                       ; title
 	    (if has-pinner                              ; pinner
 	      (format nil "<span id='~A-pinner'
-                 style='cursor:pointer;user-select:none;'>
+                 style='position:absolute;top:0;right:20px;
+                        cursor:pointer;user-select:none;'>
                  ☐</span><span>&nbsp;&nbsp;&nbsp;</span>" html-id)
 	      "")
 	    html-id                                     ; closer
@@ -1617,7 +1618,7 @@ if confirmed or nil if canceled."
 
 (defun server-file-dialog (obj title initial-dir on-file-name
 			   &key (modal t)
-			     (left nil) (top nil) (width 375) (height 420)
+			     (left nil) (top nil) (width 390) (height 425)
 			     (maximize nil)
 			     (initial-filename nil)
 			     (client-movement nil)
diff --git a/tools/clog-db-admin.lisp b/tools/clog-db-admin.lisp
index efbe33c..1a618b7 100644
--- a/tools/clog-db-admin.lisp
+++ b/tools/clog-db-admin.lisp
@@ -157,7 +157,7 @@
 			                 <div><p><center>CLOG DB Admin</center>
                                          <center>(c) 2021 - David Botton</center></p></div>"
 				  :width   200
-				  :height  200
+				  :height  215
 				  :hidden  t)))
     (window-center about)
     (setf (visiblep about) t)    
diff --git a/tutorial/22-tutorial.lisp b/tutorial/22-tutorial.lisp
index 863aceb..34d8ce4 100644
--- a/tutorial/22-tutorial.lisp
+++ b/tutorial/22-tutorial.lisp
@@ -15,7 +15,7 @@
 (defun on-file-browse (obj)
   (let ((win (create-gui-window obj :title "Browse")))
     (create-child (window-content win)
-		  "<iframe style='width:100%;height:98%;' src='https://common-lisp.net/'></iframe>")))
+		  "<iframe style='width:100%;height:97%;' src='https://common-lisp.net/'></iframe>")))
 
 (defun on-file-drawing (obj)
   (let* ((win (create-gui-window obj :title "Drawing"))
@@ -37,8 +37,7 @@
   (let* ((win  (create-gui-window obj :title "Movie"))
 	 (movie (create-video (window-content win)
 			      :source "https://www.w3schools.com/html/mov_bbb.mp4")))
-    (setf (box-width movie) "100%")
-    (setf (box-height movie) "100%")))
+    (set-geometry movie :units "%" :width 100 :height 100)))
 
 (defun on-file-pinned (obj)
   (let ((win (create-gui-window obj :title "Pin me!"
@@ -113,7 +112,7 @@
                                          <center>(c) 2021 - David Botton</center></p></div>"
 				   :hidden  t
 				   :width   200
-				   :height  200)))
+				   :height  215)))
     (window-center about)
     (setf (visiblep about) t)
     (set-on-window-can-size about (lambda (obj)