mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2025-02-03 04:42:22 +00:00
Code Issues Projects Releases Wiki Activity

chore: use bulma override for mobile dropdown instead of classes

Browse source
This commit is contained in:
Dustin Steiner 2023-01-31 18:33:44 +00:00
parent f30a0ae714
commit 96097f3b58
No known key found for this signature in database
GPG key ID: 918D51522D8CB8F2
5 changed files with 75 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

120
bookwyrm/static/css/bookwyrm/overrides/_bulma_overrides.scss
View file

@ -1,111 +1,117 @@
.summary-on-open { .summary-on-open {
display: none; display: none;
} }
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.navbar-menu { .navbar-menu {
text-align: right; text-align: right;
padding-right: 1rem; padding-right: 1rem;
.tags { .tags {
justify-content: flex-end; justify-content: flex-end;
} }
#navbar-dropdown { #navbar-dropdown {
&[open] { &[open] {
.summary-on-open { .summary-on-open {
display: initial; display: initial;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 3rem; height: 3rem;
z-index: 31; z-index: 31;
background-color: $dropdown-content-background-color; background-color: $dropdown-content-background-color;
padding: 1rem 1.75rem; padding: 1rem 1.75rem;
line-height: 1; line-height: 1;
} }
} }
.dropdown-menu { .dropdown-menu {
padding-top: 0; padding-top: 0;
top: 3rem; top: 3rem;
} }
.dropdown-content { .dropdown-content {
padding-top: 0; padding-top: 0;
box-shadow: none; box-shadow: none;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.navbar-item { .navbar-item {
// see ../components/_details.scss :: Navbar details // see ../components/_details.scss :: Navbar details
padding-right: 1.75rem; padding-right: 1.75rem;
font-size: 1rem; font-size: 1rem;
} }
} }
} }
} }
.image { .image {
overflow: hidden; overflow: hidden;
} }
.navbar .logo { .navbar .logo {
max-height: 50px; max-height: 50px;
} }
.card { .card {
overflow: visible; overflow: visible;
} }
.card.has-border { .card.has-border {
border: 1px solid $border; border: 1px solid $border;
} }
.scroll-x { .scroll-x {
overflow: hidden; overflow: hidden;
overflow-x: auto; overflow-x: auto;
} }
.modal-card { .modal-card {
pointer-events: none; pointer-events: none;
} }
.modal-card > * { .modal-card > * {
pointer-events: all; pointer-events: all;
} }
/* stylelint-disable no-descending-specificity */ /* stylelint-disable no-descending-specificity */
.modal-card:focus { .modal-card:focus {
outline-style: auto; outline-style: auto;
} }
.modal-card:focus:not(:focus-visible) { .modal-card:focus:not(:focus-visible) {
outline-style: initial; outline-style: initial;
} }
.modal-card:focus-visible { .modal-card:focus-visible {
outline-style: auto; outline-style: auto;
} }
/* stylelint-enable no-descending-specificity */ /* stylelint-enable no-descending-specificity */
.modal-card.is-fullwidth { .modal-card.is-fullwidth {
min-width: 75% !important; min-width: 75% !important;
} }
@media only screen and (min-width: 769px) { @media only screen and (min-width: 769px) {
.modal-card.is-thin { .modal-card.is-thin {
width: 350px !important; width: 350px !important;
} }
} }
.modal-card-body { .modal-card-body {
max-height: 70vh; max-height: 70vh;
} }
.clip-text { .clip-text {
max-height: 35em; max-height: 35em;
overflow: hidden; overflow: hidden;
}
@include mobile {
.dropdown-menu .button {
font-size: $size-6;
}
} }

6
bookwyrm/templates/snippets/shelf_selector.html
View file

@ -31,7 +31,7 @@
</li> </li>
{% else%} {% else%}
{% comparison_bool shelf.identifier active_shelf.shelf.identifier as is_current %} {% 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"> <li role="menuitem" class="dropdown-item p-0">
{% if shelf.identifier == 'reading' %} {% if shelf.identifier == 'reading' %}
@ -77,7 +77,7 @@
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="book" value="{{ book.id }}"> <input type="hidden" name="book" value="{{ book.id }}">
<input type="hidden" name="shelf" value="{{ user_shelf.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 %} {% blocktrans with name=user_shelf|translate_shelf_name %}Remove from {{ name }}{% endblocktrans %}
</button> </button>
</form> </form>
@ -91,7 +91,7 @@
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="book" value="{{ book.id }}"> <input type="hidden" name="book" value="{{ book.id }}">
<input type="hidden" name="shelf" value="{{ shelf.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> </form>
</li> </li>
{% endif %} {% endif %}

2
bookwyrm/templates/snippets/shelve_button/shelve_button_dropdown.html
View file

@ -7,5 +7,5 @@
{% endblock %} {% endblock %}
{% block dropdown-list %} {% 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 %} {% endblock %}

10
bookwyrm/templates/snippets/status/status_options.html
View file

@ -13,7 +13,7 @@
<li role="menuitem" class="dropdown-item p-0"> <li role="menuitem" class="dropdown-item p-0">
<form name="delete-{{ status.id|uuid }}" action="/delete-status/{{ status.id }}" method="post"> <form name="delete-{{ status.id|uuid }}" action="/delete-status/{{ status.id }}" method="post">
{% csrf_token %} {% 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" %} {% trans "Delete status" %}
</button> </button>
</form> </form>
@ -21,7 +21,7 @@
{% if status.status_type != 'GeneratedNote' and status.status_type != 'Rating' %} {% if status.status_type != 'GeneratedNote' and status.status_type != 'Rating' %}
<li role="menuitem" class="dropdown-item p-0"> <li role="menuitem" class="dropdown-item p-0">
<span class="control"> <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" %} {% trans "Edit" %}
</a> </a>
</span> </span>
@ -31,16 +31,16 @@
{# things you can do to other people's statuses #} {# things you can do to other people's statuses #}
<li role="menuitem" class="dropdown-item p-0"> <li role="menuitem" class="dropdown-item p-0">
<span class="control"> <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" %} {% trans "Send direct message" %}
</a> </a>
</span> </span>
</li> </li>
<li role="menuitem" class="dropdown-item p-0"> <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>
<li role="menuitem" class="dropdown-item p-0"> <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> </li>
{% endif %} {% endif %}
{% endblock %} {% endblock %}

6
bookwyrm/templates/snippets/user_options.html
View file

@ -11,13 +11,13 @@
{% block dropdown-list %} {% block dropdown-list %}
<li role="menuitem"> <li role="menuitem">
<div class="control"> <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> </div>
</li> </li>
<li role="menuitem"> <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>
<li role="menuitem"> <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> </li>
{% endblock %} {% endblock %}