Bookmark submission: Use CSS grid for form layout.

Change-Id: If06ddb2407dfb3f0e59948a9c437e9af4129da78

2 files changed, 50 insertions, 27 deletions

diff --git a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.css b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.css
new file mode 100644
index 0000000..007a172
--- /dev/null
+++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.css
@@ -0,0 +1,30 @@
+fieldset {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 5px;
+}
+
+label,
+input,
+button,
+textarea {
+  grid-column: 1 / 2;
+}
+
+@media (min-width: 30em) {
+  fieldset {
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    grid-gap: 0;
+  }
+
+  label {
+    grid-column: 1 / 2;
+  }
+
+  input,
+  button,
+  textarea {
+    grid-column: 2 / 3;
+  }
+}
diff --git a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
index e7e6751..f8834ef 100644
--- a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
+++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
@@ -63,41 +63,34 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
   render() {
     const template = html`
       <link rel="stylesheet" type="text/css" href="/cms2/base.css" />
+      <link rel="stylesheet" type="text/css" href="MlkBookmarkSubmissionForm.css" />
 
-      <form class="pure-form pure-form-aligned" method="post" action="/bookmarks">
+      <form class="pure-form" method="post" action="/bookmarks">
         <fieldset>
           <legend>New Bookmark</legend>
 
-          <div class="pure-control-group">
-            <label for="uri-input">URI:</label>
-            <input name="uri" id="uri-input" type="text" placeholder="URI" required
-                   value=${this.getAttribute("uri") || ""}
-                   @blur=${this.onUriBlur.bind(this)} />
-            <elix-progress-spinner id="uri-spinner" hidden></elix-progress-spinner>
-          </div>
+          <label for="uri-input">URI:</label>
+          <input name="uri" id="uri-input" type="text" placeholder="URI" required
+                 value=${this.getAttribute("uri") || ""}
+                 @blur=${this.onUriBlur.bind(this)} />
+          <elix-progress-spinner id="uri-spinner" hidden></elix-progress-spinner>
 
-          <div class="pure-control-group">
-            <label for="title-input">Title:</label>
-            <input name="title" id="title-input" type="text" placeholder="Title" required
-                   value="${this.getAttribute("title") || ""}" />
-          </div>
+          <label for="title-input">Title:</label>
+          <input name="title" id="title-input" type="text" placeholder="Title" required
+                 value="${this.getAttribute("title") || ""}" />
 
-          <div class="pure-control-group">
-            <label for="description-input">Description:</label>
-            <textarea name="description" id="description-input" placeholder="Description"
-                >${this.getAttribute("description") || ""}</textarea>
-          </div>
+          <label for="description-input">Description:</label>
+          <textarea name="description" id="description-input" placeholder="Description"
+              >${this.getAttribute("description") || ""}</textarea>
 
-          <div class="pure-control-group">
-            <label for="visibility-input">Visibility:</label>
-            <select id="visibility-input" name="visibility" required>
-              <option value="public">Public</option>
-              <option value="semiprivate" selected>Semiprivate</option>
-              <option value="private">Private</option>
-            </select>
-          </div>
+          <label for="visibility-input">Visibility:</label>
+          <select id="visibility-input" name="visibility" required>
+            <option value="public">Public</option>
+            <option value="semiprivate" selected>Semiprivate</option>
+            <option value="private">Private</option>
+          </select>
 
-          <div class="pure-controls">
+          <div class="controls">
             <button type="submit" class="pure-button pure-button-primary">Submit Bookmark</button>
           </div>
         </fieldset>