use css for modals

fedireads/static/format.css

@@ -172,6 +172,7 @@ body {
     padding-top: 70px;
     position: relative;
     z-index: 0;
+    margin-top: -2em;
 }
 
 /* row component */
@@ -484,8 +485,9 @@ dd {
 .all-shelves {
     display: flex;
     flex-direction: row;
-    overflow-y: hidden;
     margin-left: 0;
+    position: relative;
+    z-index: 1;
 }
 .all-shelves > div {
     flex-grow: 0;
@@ -510,7 +512,6 @@ dd {
     font-size: 0.9em;
     overflow: unset;
     width: min-content;
-    position: relative;
 }
 .covers-shelf .cover-container:last-child {
     margin-right: 0;
@@ -534,16 +535,33 @@ dd {
     padding: 1rem;
 }
 
-.compose-suggestion {
+.all-shelves input[type='radio'] {
     display: none;
 }
-.compose-suggestion.visible {
+.compose-suggestion {
+    display: none;
+    background-color: white;
+    z-index: 1;
+    width: -webkit-fill-available;
+    width: -moz-available;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.45);
+}
+input:checked ~ .compose-suggestion {
     display: block;
+    position: absolute;
+    top: 5em;
+    left: 0;
 }
 .compose-suggestion .book-preview {
     background-color: #EEE;
     padding: 1em;
 }
+.compose-suggestion button {
+    margin: 0;
+}
+.compose-suggestion .stars {
+    text-align: left;
+}
 
 .tag {
     display: inline-block;

fedireads/static/js/shared.js

@@ -1,20 +1,3 @@
-function show_compose(element, e) {
-    e.preventDefault();
-    var visible_compose_boxes = document.getElementsByClassName('visible');
-    for (var i = 0; i < visible_compose_boxes.length; i++) {
-        visible_compose_boxes[i].className = 'compose-suggestion';
-    }
-
-    var target_id = 'compose-' + element.id;
-    var target = document.getElementById(target_id);
-    target.className += ' visible';
-}
-
-function hide_element(element) {
-    var classes = element.parentElement.className;
-    element.parentElement.className = classes.replace('visible', '');
-}
-
 function interact(e) {
     e.preventDefault();
     ajaxPost(e.target);

fedireads/templates/snippets/covers_shelf.html

@@ -12,10 +12,20 @@
         <div class="covers-shelf {{ shelf.identifier }} ">
             {% for book in shelf.books %}
             <div class="cover-container">
-            <div >
-                <a href="{{ book.absolute_id }}" onclick="show_compose(this, event)" id="book-{{ book.id }}">
+            <div>
+                <label for="book-{{ book.id }}-radio">
                     {% include 'snippets/book_cover.html' with book=book %}
-                </a>
+                </label>
+                <input name="book-{{ book.id }}" type="radio" id="book-{{ book.id }}-radio"></input>
+                <div class="compose-suggestion" id="compose-book-{{ book.id }}">
+                    <label class="close icon icon-close" for="book-{{ book.id }}-radio-close" onclick="hide_element(this)">
+                        <span class="hidden-text">Close</span>
+                    </label>
+                    <input name="book-{{ book.id }}" type="radio" id="book-{{ book.id }}-radio-close"></input>
+                    <div class="content-container">
+                        {% include 'snippets/create_status.html' with book=book user=request.user %}
+                    </div>
+                </div>
             </div>
             {% include 'snippets/shelve_button.html' with book=book %}
             </div>
@@ -28,13 +38,5 @@
 
 {% for shelf in shelves %}
     {% for book in shelf.books %}
-<div class="compose-suggestion" id="compose-book-{{ book.id }}">
-    <span class="close icon icon-close" onclick="hide_element(this)">
-        <span class="hidden-text">Close</span>
-    </span>
-    <div class="content-container">
-        {% include 'snippets/create_status.html' with book=book user=request.user %}
-    </div>
-</div>
     {% endfor %}
 {% endfor %}