From 5874b88dec8f5f3ae5520c170c70acfc64a2b566 Mon Sep 17 00:00:00 2001
From: David Botton <david@botton.com>
Date: Tue, 16 Nov 2021 20:08:21 -0500
Subject: [PATCH] Marging and Padding for a selected side

---
 source/clog-element.lisp          | 23 +++++++++++++++++++++++
 source/clog-web.lisp              | 10 +++++-----
 source/clog.lisp                  |  2 ++
 static-files/tutorial/tut-11.html |  2 +-
 tutorial/README.md                |  2 +-
 5 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/source/clog-element.lisp b/source/clog-element.lisp
index 1cff8d4..aac012e 100644
--- a/source/clog-element.lisp
+++ b/source/clog-element.lisp
@@ -1953,6 +1953,18 @@ line-width -  size or medium|thin|thick|length|initial|inherit"))
 (defmethod set-margin ((obj clog-element) top right bottom left)
   (setf (style obj "margin") (format nil "~A ~A ~A ~A" top right bottom left)))
 
+;;;;;;;;;;;;;;;;;;;;;
+;; set-margin-side ;;
+;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric set-margin-side (clog-element side value)
+  (:documentation "Set margin SIDE (:top :right :bottom or :left),
+VALUE can be - <length>|auto|initial|inherit"))
+
+(defmethod set-margin-side ((obj clog-element) side value)
+  (setf (style obj (format nil "margin-~A" (string-downcase side))) value))
+
+
 ;;;;;;;;;;;;;
 ;; padding ;;
 ;;;;;;;;;;;;;
@@ -1971,6 +1983,17 @@ line-width -  size or medium|thin|thick|length|initial|inherit"))
 				      top right bottom left)))
 (defsetf padding set-padding)
 
+;;;;;;;;;;;;;;;;;;;;;;
+;; set-padding-side ;;
+;;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric set-padding-side (clog-element side value)
+  (:documentation "Set padding SIDE (:top :right :bottom or :left),
+VALUE can be - <length>|auto|initial|inherit"))
+
+(defmethod set-padding-side ((obj clog-element) side value)
+  (setf (style obj (format nil "padding-~A" (string-downcase side))) value))
+
 ;;;;;;;;;;;;
 ;; cursor ;;
 ;;;;;;;;;;;;
diff --git a/source/clog-web.lisp b/source/clog-web.lisp
index f70b9f0..36ede63 100644
--- a/source/clog-web.lisp
+++ b/source/clog-web.lisp
@@ -616,10 +616,10 @@ to nil on creation."))
   (:documentation "Main for web content"))
 
 (defgeneric create-web-main (clog-obj &key content hidden class html-id)
-  (:documentation "Create a clog-web-main. Container for main content when
-using a collapsable sidebar  or other whole page shifting technique.
-If hidden is t then then the visiblep propetery will be set to nil on
-creation."))
+  (:documentation "Create a clog-web-main. Container for main content
+when using a collapsable sidebar or other whole page shifting
+technique. If hidden is t then then the visiblep propetery will be set
+to nil on creation."))
 
 (defmethod create-web-main ((obj clog-obj) &key (content "")
 		 				  (hidden nil)
@@ -644,7 +644,7 @@ creation."))
 sidebars are create with the display property set to :none if hidden it t
 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
+if used. If using a sidebar that will take space and not collapse, make sure
 to set the sidebar's size and set a margin equal to the size on the main
 container."))
 
diff --git a/source/clog.lisp b/source/clog.lisp
index 558afc2..f4851f6 100644
--- a/source/clog.lisp
+++ b/source/clog.lisp
@@ -302,8 +302,10 @@ embedded in a native template application.)"
   (set-outline                generic-function)
   (margin                     generic-function)
   (set-margin                 generic-function)
+  (set-margin-side            generic-function)
   (padding                    generic-function)
   (set-padding                generic-function)
+  (set-padding-side           generic-function)
   (cursor                     generic-function)
   (font-style-type            type)
   (font-variant-type          type)
diff --git a/static-files/tutorial/tut-11.html b/static-files/tutorial/tut-11.html
index d86c708..da8b8e1 100644
--- a/static-files/tutorial/tut-11.html
+++ b/static-files/tutorial/tut-11.html
@@ -5,7 +5,7 @@
       <meta http-equiv="Pragma" content="no-cache" />
       <meta http-equiv="Expires" content="0" />
       <meta charset="utf-8">
-      <meta namei="viewport" content="width=device-width, initial-scale=1">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
 
       <!-- The CLOG boot file are jQuery are loaded at bottom of this HTML File. -->
 
diff --git a/tutorial/README.md b/tutorial/README.md
index 667aaad..6bec878 100644
--- a/tutorial/README.md
+++ b/tutorial/README.md
@@ -56,6 +56,6 @@ Tutorial Summary
 - 21-tutorial.lisp - New CLOG plugin in Common-Lisp
 - 22-tutorial.lisp - CLOG GUI Menus and Desktop Look and Feel
 - 23-tutorial.lisp - Using semaphores to wait for input
-- 24-tutorial.lisp - CLOG WEB containers (in progress)
+- 24-tutorial.lisp - CLOG WEB containers
 - 25-tutorial.lisp - A "local" web app using CLOG WEB
 - 26-tutorial.lisp - A web page and form with CLOG WEB