Bookmark submission: Use CSS grid for form layout.
Change-Id: If06ddb2407dfb3f0e59948a9c437e9af4129da78
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 @@
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>