From 96097f3b583f48189d5aaa16e53cd030461d83f9 Mon Sep 17 00:00:00 2001
From: Dustin Steiner <dustin.steiner@gmail.com>
Date: Tue, 31 Jan 2023 18:33:44 +0000
Subject: [PATCH] chore: use bulma override for mobile dropdown instead of
 classes

---
 .../bookwyrm/overrides/_bulma_overrides.scss  | 120 +++++++++---------
 .../templates/snippets/shelf_selector.html    |   6 +-
 .../shelve_button/shelve_button_dropdown.html |   2 +-
 .../snippets/status/status_options.html       |  10 +-
 bookwyrm/templates/snippets/user_options.html |   6 +-
 5 files changed, 75 insertions(+), 69 deletions(-)

diff --git a/bookwyrm/static/css/bookwyrm/overrides/_bulma_overrides.scss b/bookwyrm/static/css/bookwyrm/overrides/_bulma_overrides.scss
index cdcd74202..a8768328e 100644
--- a/bookwyrm/static/css/bookwyrm/overrides/_bulma_overrides.scss
+++ b/bookwyrm/static/css/bookwyrm/overrides/_bulma_overrides.scss
@@ -1,111 +1,117 @@
 .summary-on-open {
-    display: none;
+	display: none;
 }
 
 @media only screen and (max-width: 768px) {
-    .navbar-menu {
-        text-align: right;
-        padding-right: 1rem;
+	.navbar-menu {
+		text-align: right;
+		padding-right: 1rem;
 
-        .tags {
-            justify-content: flex-end;
-        }
+		.tags {
+			justify-content: flex-end;
+		}
 
-        #navbar-dropdown {
-            &[open] {
-                .summary-on-open {
-                    display: initial;
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    height: 3rem;
-                    z-index: 31;
-                    background-color: $dropdown-content-background-color;
-                    padding: 1rem 1.75rem;
-                    line-height: 1;
-                }
-            }
+		#navbar-dropdown {
+			&[open] {
+				.summary-on-open {
+					display: initial;
+					position: fixed;
+					top: 0;
+					left: 0;
+					right: 0;
+					height: 3rem;
+					z-index: 31;
+					background-color: $dropdown-content-background-color;
+					padding: 1rem 1.75rem;
+					line-height: 1;
+				}
+			}
 
-            .dropdown-menu {
-                padding-top: 0;
-                top: 3rem;
-            }
+			.dropdown-menu {
+				padding-top: 0;
+				top: 3rem;
+			}
 
-            .dropdown-content {
-                padding-top: 0;
-                box-shadow: none;
-                border-top-left-radius: 0;
-                border-top-right-radius: 0;
-            }
+			.dropdown-content {
+				padding-top: 0;
+				box-shadow: none;
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+			}
 
-            .navbar-item {
-                // see ../components/_details.scss :: Navbar details
-                padding-right: 1.75rem;
-                font-size: 1rem;
-            }
-        }
-    }
+			.navbar-item {
+				// see ../components/_details.scss :: Navbar details
+				padding-right: 1.75rem;
+				font-size: 1rem;
+			}
+		}
+	}
 }
 
 .image {
-    overflow: hidden;
+	overflow: hidden;
 }
 
 .navbar .logo {
-    max-height: 50px;
+	max-height: 50px;
 }
 
 .card {
-    overflow: visible;
+	overflow: visible;
 }
 
 .card.has-border {
-    border: 1px solid $border;
+	border: 1px solid $border;
 }
 
 .scroll-x {
-    overflow: hidden;
-    overflow-x: auto;
+	overflow: hidden;
+	overflow-x: auto;
 }
 
 .modal-card {
-    pointer-events: none;
+	pointer-events: none;
 }
 
 .modal-card > * {
-    pointer-events: all;
+	pointer-events: all;
 }
 
 /* stylelint-disable no-descending-specificity */
 .modal-card:focus {
-    outline-style: auto;
+	outline-style: auto;
 }
 
 .modal-card:focus:not(:focus-visible) {
-    outline-style: initial;
+	outline-style: initial;
 }
 
 .modal-card:focus-visible {
-    outline-style: auto;
+	outline-style: auto;
 }
 /* stylelint-enable no-descending-specificity */
 
 .modal-card.is-fullwidth {
-    min-width: 75% !important;
+	min-width: 75% !important;
 }
 
 @media only screen and (min-width: 769px) {
-    .modal-card.is-thin {
-        width: 350px !important;
-    }
+	.modal-card.is-thin {
+		width: 350px !important;
+	}
 }
 
 .modal-card-body {
-    max-height: 70vh;
+	max-height: 70vh;
 }
 
 .clip-text {
-    max-height: 35em;
-    overflow: hidden;
+	max-height: 35em;
+	overflow: hidden;
+}
+
+@include mobile {
+	.dropdown-menu .button {
+		font-size: $size-6;
+	}
 }
diff --git a/bookwyrm/templates/snippets/shelf_selector.html b/bookwyrm/templates/snippets/shelf_selector.html
index 2a17e7d58..902a66196 100644
--- a/bookwyrm/templates/snippets/shelf_selector.html
+++ b/bookwyrm/templates/snippets/shelf_selector.html
@@ -31,7 +31,7 @@
 </li>
 {% else%}
 {% comparison_bool shelf.identifier active_shelf.shelf.identifier as is_current %}
-{% with button_class="is-fullwidth is-small is-size-6-mobile shelf-option is-radiusless has-background-body" %}
+{% with button_class="is-fullwidth is-small shelf-option is-radiusless has-background-body" %}
 <li role="menuitem" class="dropdown-item p-0">
 {% if shelf.identifier == 'reading' %}
 
@@ -77,7 +77,7 @@
         {% csrf_token %}
         <input type="hidden" name="book" value="{{ book.id }}">
         <input type="hidden" name="shelf" value="{{ user_shelf.id }}">
-        <button class="button is-fullwidth is-small is-size-6-mobile is-radiusless is-danger is-light" type="submit">
+        <button class="button is-fullwidth is-small is-radiusless is-danger is-light" type="submit">
             {% blocktrans with name=user_shelf|translate_shelf_name %}Remove from {{ name }}{% endblocktrans %}
         </button>
     </form>
@@ -91,7 +91,7 @@
         {% csrf_token %}
         <input type="hidden" name="book" value="{{ book.id }}">
         <input type="hidden" name="shelf" value="{{ shelf.id }}">
-        <button class="button is-fullwidth is-small is-size-6-mobile is-radiusless is-danger is-light" type="submit">{% trans "Remove from" %} {{ shelf.name }}</button>
+        <button class="button is-fullwidth is-small is-radiusless is-danger is-light" type="submit">{% trans "Remove from" %} {{ shelf.name }}</button>
     </form>
 </li>
 {% endif %}
diff --git a/bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown.html b/bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown.html
index 6187b2038..6ea30fadf 100644
--- a/bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown.html
+++ b/bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown.html
@@ -7,5 +7,5 @@
 {% endblock %}
 
 {% block dropdown-list %}
-{% include 'snippets/shelve_button/shelve_button_dropdown_options.html' with active_shelf=active_shelf shelves=user_shelves dropdown=True class="shelf-option is-fullwidth is-small is-size-6-mobile is-radiusless has-background-body" %}
+{% include 'snippets/shelve_button/shelve_button_dropdown_options.html' with active_shelf=active_shelf shelves=user_shelves dropdown=True class="shelf-option is-fullwidth is-small is-radiusless has-background-body" %}
 {% endblock %}
diff --git a/bookwyrm/templates/snippets/status/status_options.html b/bookwyrm/templates/snippets/status/status_options.html
index e12d6e1d6..f47967551 100644
--- a/bookwyrm/templates/snippets/status/status_options.html
+++ b/bookwyrm/templates/snippets/status/status_options.html
@@ -13,7 +13,7 @@
 <li role="menuitem" class="dropdown-item p-0">
     <form name="delete-{{ status.id|uuid }}" action="/delete-status/{{ status.id }}" method="post">
         {% csrf_token %}
-        <button class="button is-radiusless is-danger is-light is-fullwidth is-small is-size-6-mobile" type="submit">
+        <button class="button is-radiusless is-danger is-light is-fullwidth is-small" type="submit">
             {% trans "Delete status" %}
         </button>
     </form>
@@ -21,7 +21,7 @@
 {% if status.status_type != 'GeneratedNote' and status.status_type != 'Rating' %}
 <li role="menuitem" class="dropdown-item p-0">
     <span class="control">
-        <a href="{% url 'edit-status' status.id %}" class="button is-radiusless is-fullwidth is-small is-size-6-mobile" type="submit">
+        <a href="{% url 'edit-status' status.id %}" class="button is-radiusless is-fullwidth is-small" type="submit">
             {% trans "Edit" %}
         </a>
     </span>
@@ -31,16 +31,16 @@
 {# things you can do to other people's statuses #}
 <li role="menuitem" class="dropdown-item p-0">
     <span class="control">
-        <a href="{% url 'direct-messages-user' status.user|username %}" class="button is-small has-background-body is-radiusless is-fullwidth is-size-6-mobile">
+        <a href="{% url 'direct-messages-user' status.user|username %}" class="button is-small has-background-body is-radiusless is-fullwidth">
             {% trans "Send direct message" %}
         </a>
     </span>
 </li>
 <li role="menuitem" class="dropdown-item p-0">
-    {% include 'snippets/report_button.html' with user=status.user status=status class="is-size-6-mobile" %}
+    {% include 'snippets/report_button.html' with user=status.user status=status %}
 </li>
 <li role="menuitem" class="dropdown-item p-0">
-    {% include 'snippets/block_button.html' with user=status.user class="is-fullwidth is-size-6-mobile" blocks=False %}
+    {% include 'snippets/block_button.html' with user=status.user class="is-fullwidth" blocks=False %}
 </li>
 {% endif %}
 {% endblock %}
diff --git a/bookwyrm/templates/snippets/user_options.html b/bookwyrm/templates/snippets/user_options.html
index 7923e3d27..35abc98c2 100644
--- a/bookwyrm/templates/snippets/user_options.html
+++ b/bookwyrm/templates/snippets/user_options.html
@@ -11,13 +11,13 @@
 {% block dropdown-list %}
 <li role="menuitem">
     <div class="control">
-        <a href="{% url 'direct-messages-user' user|username %}" class="button is-fullwidth is-small is-size-6-mobile">{% trans "Send direct message" %}</a>
+        <a href="{% url 'direct-messages-user' user|username %}" class="button is-fullwidth is-small">{% trans "Send direct message" %}</a>
     </div>
 </li>
 <li role="menuitem">
-    {% include 'snippets/report_button.html' with user=user class="is-fullwidth is-size-6-mobile" %}
+    {% include 'snippets/report_button.html' with user=user class="is-fullwidth" %}
 </li>
 <li role="menuitem">
-    {% include 'snippets/block_button.html' with user=user class="is-fullwidth is-size-6-mobile" blocks=False %}
+    {% include 'snippets/block_button.html' with user=user class="is-fullwidth" blocks=False %}
 </li>
 {% endblock %}