From ccf2f7f198466ea712b17ad415ba2cdd665361a1 Mon Sep 17 00:00:00 2001 From: Matthias Andreas Benkard Date: Thu, 13 Feb 2020 05:23:07 +0100 Subject: Bookmark submission: Use CSS grid for form layout. Change-Id: If06ddb2407dfb3f0e59948a9c437e9af4129da78 --- .../bookmarks/MlkBookmarkSubmissionForm.css | 30 ++++++++++++++ .../bookmarks/MlkBookmarkSubmissionForm.js | 47 +++++++++------------- 2 files changed, 50 insertions(+), 27 deletions(-) create mode 100644 src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.css 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` + -
+
New Bookmark -
- - - -
+ + + -
- - -
+ + -
- - -
+ + -
- - -
+ + -
+
-- cgit v1.2.3