2 files changed, 38 insertions, 30 deletions
diff --git a/src/main/resources/META-INF/resources/cms2/base.css b/src/main/resources/META-INF/resources/cms2/base.css
index 735b297..ebfeeca 100644
--- a/src/main/resources/META-INF/resources/cms2/base.css
+++ b/src/main/resources/META-INF/resources/cms2/base.css
@@ -77,6 +77,10 @@ body > header h1 {
   font-size: 1em;
 }
 
+.small-title {
+  font-size: 1em;
+}
+
 body > nav {
   grid-area: navbar;
 
diff --git a/src/main/resources/templates/benki/bookmarks/bookmarkList.html b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
index 9d4c706..270a789 100644
--- a/src/main/resources/templates/benki/bookmarks/bookmarkList.html
+++ b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
@@ -12,41 +12,45 @@
 {#body}
 
 {#if authenticated}
-  <section id="bookmark-submission">
-    <form class="pure-form pure-form-aligned" method="post">
-      <fieldset>
-        <legend>Submit Bookmark</legend>
+  <script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script>
+  <elix-expandable-section>
+    <h2 slot="header" class="small-title"><button class="pure-button">Create New Bookmark</button></h2>
+    <section id="bookmark-submission">
+      <form class="pure-form pure-form-aligned" method="post">
+        <fieldset>
+          <legend>New Bookmark</legend>
 
-        <div class="pure-control-group">
-          <label for="title-input">Title:</label>
-          <input name="title" id="title-input" type="text" placeholder="Title" required/>
-        </div>
+          <div class="pure-control-group">
+            <label for="title-input">Title:</label>
+            <input name="title" id="title-input" type="text" placeholder="Title" required/>
+          </div>
 
-        <div class="pure-control-group">
-          <label for="uri-input">URI:</label>
-          <input name="uri" id="uri-input" type="text" placeholder="URI" required/>
-        </div>
+          <div class="pure-control-group">
+            <label for="uri-input">URI:</label>
+            <input name="uri" id="uri-input" type="text" placeholder="URI" required/>
+          </div>
 
-        <div class="pure-control-group">
-          <label for="description-input">Description:</label>
-          <textarea name="description" id="description-input" placeholder="Description"></textarea>
-        </div>
+          <div class="pure-control-group">
+            <label for="description-input">Description:</label>
+            <textarea name="description" id="description-input" placeholder="Description"></textarea>
+          </div>
 
-        <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>
+          <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>
 
-        <div class="pure-controls">
-          <button type="submit" class="pure-button pure-button-primary">Submit Bookmark</button>
-        </div>
-      </fieldset>
-    </form>
-  </section>
+          <div class="pure-controls">
+            <button type="submit" class="pure-button pure-button-primary">Submit Bookmark</button>
+          </div>
+        </fieldset>
+      </form>
+    </section>
+  </elix-expandable-section>
 {/if}
 
 {#for bookmark in bookmarks}