diff options
Diffstat (limited to 'src/main')
| -rw-r--r-- | src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.css | 30 | ||||
| -rw-r--r-- | src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js | 47 |
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> |