Updated schema editor styling

PhoneDroid · PhoneDroid · commit 0c1df1609778 · 2022-12-30T18:21:48.000-05:00
diff --git a/Source/Extension/Schema/Open.ts b/Source/Extension/Schema/Open.ts
@@ -113,13 +113,15 @@ export async function openSchema ( context : ExtensionContext , filePath : strin
 
         function option ({ title , description , link , content , id }){
             return [
+                '<div>' ,
                 `<label for = '${ id }'>` ,
                 `<a href = '${ link }'>${ title }</a>` ,
                 '<br>' ,
                 `<small>${ description }</small>` ,
                 `</label>` ,
                 '<br>' ,
-                content
+                content ,
+                '</div>'
             ].join('')
         }
 
@@ -159,12 +161,13 @@ export async function openSchema ( context : ExtensionContext , filePath : strin
                     <link rel = stylesheet type = 'text/css' href = '${ asset('Style.css') }'>
                 </head>
                 <body>
-                    <div id = Settings >
 
-                        <h1> Schema Editor </h1>
+                    <h1> Schema Editor </h1>
 
                         <br>
 
+                    <div id = Settings >
+
                         ${
                             text({
                                 description : 'seen in the customizer.' ,
@@ -174,9 +177,6 @@ export async function openSchema ( context : ExtensionContext , filePath : strin
                             })
                         }
 
-                        <br>
-                        <br>
-
                         ${
                             option({
                                 description : 'used for the section body.' ,
@@ -196,9 +196,6 @@ export async function openSchema ( context : ExtensionContext , filePath : strin
                             })
                         }
 
-                        <br>
-                        <br>
-
                         ${
                             text({
                                 description : 'the section body gets assigned.' ,
@@ -208,9 +205,6 @@ export async function openSchema ( context : ExtensionContext , filePath : strin
                             })
                         }
 
-                        <br>
-                        <br>
-
                         ${
                             option({
                                 description : 'of how many times a template can use it.' ,
@@ -228,9 +222,6 @@ export async function openSchema ( context : ExtensionContext , filePath : strin
                             })
                         }
 
-                        <br>
-                        <br>
-
                         ${
                             text({
                                 description : 'that can be added to this section.' ,
@@ -239,9 +230,8 @@ export async function openSchema ( context : ExtensionContext , filePath : strin
                                 id : 'max_blocks'
                             })
                         }
-
-                        <br>
-                        <br>
+                    </div>
+                    <div id = settingsblock>
 
                         ${
                             option({
@@ -259,10 +249,9 @@ export async function openSchema ( context : ExtensionContext , filePath : strin
                             })
                         }
 
-                        <br>
-                        <br>
-
                     </div>
+                    <br>
+                    <br>
                 </body>
             </html>
         `
diff --git a/Source/Schema/Style.css b/Source/Schema/Style.css
@@ -2,14 +2,22 @@
 
 #Settings {
 
-    min-width : 420px ;
-    width : fit-content ;
+    margin-bottom : 5rem ;
+    margin-top : 2rem ;
 
     padding : 1rem ;
+    gap : 4rem ;
+
+    grid-template-columns : repeat( auto-fit , 22rem ) ;
+    justify-content : center ;
+    display : grid ;
+}
+
+#Settings > div {
 
     flex-direction : column ;
+    align-items : stretch ;
     display : flex ;
-    gap : 0.5rem ;
 }
 
 :is( input , select ) {
@@ -29,6 +37,7 @@
 
 label {
     user-select : none ;
+    text-align : center ;
 }
 
 :is( a , input[ type = 'checkbox' ]):focus {
@@ -41,19 +50,36 @@ label > a {
     font-weight : bold ;
 }
 
+h1 {
+    text-align : center ;
+}
+
 h2 {
     margin-top : 0 ;
 }
 
 
-#settings {
+#settingsblock > div {
 
     flex-direction : column ;
-    align-items : stretch ;
+    align-items : center ;
     display : flex ;
+}
+
+#settings {
+
+    width : 100% ;
+
+    grid-template-columns : repeat(auto-fit,26rem) ;
+    justify-content : center ;
+    display : grid ;
     gap : 1.5rem ;
 }
 
+#settings * {
+    text-align : left ;
+}
+
 #settings > div {
 
     border-radius : 0.4rem ;
@@ -96,11 +122,14 @@ h2 {
 
 #settings_addition {
 
+    max-width : 30rem ;
+
     grid-template-columns : repeat( auto-fit , 2rem ) ;
     justify-content : center ;
     display : grid ;
     gap : 0.3rem ;
 
+    margin-bottom : 2rem ;
     padding : 0.5rem ;
 }
 
