Clickable star rating form

fedireads/forms.py

@@ -35,11 +35,10 @@ class RatingForm(ModelForm):
 class ReviewForm(ModelForm):
     class Meta:
         model = models.Review
-        fields = ['name', 'rating', 'content']
+        fields = ['name', 'content']
         help_texts = {f: None for f in fields}
         labels = {
             'name': 'Title',
-            'rating': 'Rating (out of 5)',
             'content': 'Review',
         }
 

fedireads/static/format.css

@@ -326,7 +326,7 @@ button .icon {
     display: inline;
     width: min-content;
 }
-.rate-stars form button.icon {
+.rate-stars button.icon {
     background: none;
     border: none;
     padding: 0;
@@ -336,10 +336,35 @@ button .icon {
 .rate-stars:hover .icon:before {
     content: '\e9d9';
 }
+.rate-stars label {
+    display: inline;
+}
 .rate-stars form:hover ~ form .icon:before{
     content: '\e9d7';
 }
 
+.rate-stars input + .icon:before {
+    content: '\e9d9';
+}
+.rate-stars input:checked + .icon:before {
+    content: '\e9d9';
+}
+.rate-stars input:checked + * ~ .icon:before {
+    content: '\e9d7';
+}
+.rate-stars:hover label.icon:before {
+    content: '\e9d9';
+}
+.rate-stars label.icon:hover:before {
+     content: '\e9d9';
+ }
+.rate-stars label.icon:hover ~ label.icon:before{
+    content: '\e9d7';
+}
+.rate-stars input[type="radio"] {
+    display: none;
+}
+
 /* re-usable tab styles */
 .tabs {
     display: flex;

fedireads/templates/snippets/create_status.html

@@ -4,7 +4,7 @@
 <h2>
     {% include 'snippets/avatar.html' with user=user %}
     Your thoughts on
-    <a href="/book/{{ book.fedireads_key }}">{{ book.title }}</a>
+a   <a href="/book/{{ book.fedireads_key }}">{{ book.title }}</a>
     by {% include 'snippets/authors.html' with book=book %}
 </h2>
 
@@ -27,6 +27,7 @@
     <form class="tab-option-{{ book.id }} review-form" name="review" action="/review/" method="post" id="tab-review-{{ book.id }}">
         {% csrf_token %}
         <input type="hidden" name="book" value="{{ book.fedireads_key }}"></input>
+        {% include 'snippets/rate_form.html' with book=book %}
         {{ review_form.as_p }}
         <button type="submit">post review</button>
     </form>

fedireads/templatetags/fr_display.py

@@ -20,7 +20,6 @@ def get_rating(book, user):
         book=book,
         rating__isnull=False,
     ).order_by('-published_date').first()
-    print(rating.rating, '\n\n\n')
     if rating:
         return rating.rating
     return 0

fedireads/view_actions.py

@@ -213,9 +213,13 @@ def review(request):
         return redirect('/book/%s' % book_identifier)
 
     # TODO: validation, htmlification
-    name = form.data.get('name')
-    content = form.data.get('content')
-    rating = form.cleaned_data.get('rating')
+    name = form.cleaned_data.get('name')
+    content = form.cleaned_data.get('content')
+    rating = form.data.get('rating', None)
+    try:
+        rating = int(rating)
+    except ValueError:
+        rating = None
 
     # throws a value error if the book is not found
     book = get_or_create_book(book_identifier)