Skip to content

Commit

Permalink
small design fix for the outline buttons and feed subscription
Browse files Browse the repository at this point in the history
mrmegatelo committed Nov 5, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 9278696 commit b71d9cf
Showing 6 changed files with 42 additions and 26 deletions.
40 changes: 28 additions & 12 deletions feed/static/feed/styles/main.css
Original file line number Diff line number Diff line change
@@ -480,6 +480,21 @@ body {
fill: var(--color-background);
}
}

&.button_outline {
background: transparent;
color: var(--color-primary);
border: 1px solid #FFBCAD;
box-shadow: none;

&.active {
background-color: #FFEEEB;
}

&:hover {
border-color: var(--color-primary);
}
}
}

.button__icon {
@@ -494,24 +509,25 @@ body {
&:hover {
background: var(--color-background);
}
}

.button_outline {
background: transparent;
color: var(--color-primary);
border: 1px solid #FFBCAD;
box-shadow: none;
transition: border-color 0.15s;
&.button_outline {
background: transparent;
border: 1px solid var(--color-grey-light);

&.active {
background-color: #FFEEEB;
}
&:hover {
border-color: var(--color-paragraph);
}

&:hover {
border-color: var(--color-primary);
&.active {
background-color: var(--color-background);
}
}
}

.button_outline {
transition: border-color 0.15s;
}

.button_text {
background: transparent;
color: var(--color-text);
2 changes: 1 addition & 1 deletion feed/templates/blocks/feed/feeds_full.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% load url_with_filters %}
{% for feed in feed_list %}
<a href="{% url 'feed_subscription' slug=feed.slug %}{% provide_filters_qs %}"
class="button button_outline button_sm {% if request.GET.selected_feed_id == feed.id|stringformat:'d' %}active{% endif %}"
class="button button_primary button_outline button_sm {% if request.GET.selected_feed_id == feed.id|stringformat:'d' %}active{% endif %}"
title="{{ feed.title }}"
>
<img width="20" height="20" alt="{{ feed.title }}" src="{{ feed.icon }}">
6 changes: 3 additions & 3 deletions feed/templates/blocks/feed/feeds_short.html
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
{% if feed_list.count <= 5 %}
{% for item in feed_list %}
<a href="{% url 'feed_subscription' slug=item.slug %}{% provide_filters_qs %}"
class="button button_outline button_sm {% if item.id == feed.id %}active{% endif %}"
class="button button_primary button_outline button_sm {% if item.id == feed.id %}active{% endif %}"
title="{{ item.title }}"
>
<img width="20" height="20" alt="{{ item.title }}" src="{{ item.icon }}">
@@ -12,7 +12,7 @@
{% else %}
{% for item in feed_list|slice:":5" %}
<a href="{% url 'feed_subscription' slug=item.slug %}{% provide_filters_qs %}"
class="button button_outline button_sm {% if item.id == feed.id %}active{% endif %}"
class="button button_primary button_outline button_sm {% if item.id == feed.id %}active{% endif %}"
title="{{ item.title }}"
>
<img width="20" height="20" alt="{{ item.title }}" src="{{ item.icon }}">
@@ -29,7 +29,7 @@
{% if feed %}
<input type="hidden" name="selected_feed_id" value="{{ feed.id }}">
{% endif %}
<button class="button button_outline button_sm {% if feed and not feed in feed_list|slice:":5" %}active{% endif %}">
<button class="button button_primary button_outline button_sm {% if feed and not feed in feed_list|slice:":5" %}active{% endif %}">
{% include 'icons/more_horiz.svg' %}
See all ({{ feed_list.count }})
</button>
4 changes: 2 additions & 2 deletions feed/templates/blocks/feed/filters.html
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@
{% endif %}
/>
<label for="filter_by_interesting"
class="feed-filters-item__title button button_sm button_outline">
class="feed-filters-item__title button button_primary button_sm button_outline">
<span>👎</span>
{% translate 'Not interesting' noop %}
</label>
@@ -28,7 +28,7 @@
{% endif %}
/>
<label for="filter_by_paid"
class="feed-filters-item__title button button_sm button_outline">
class="feed-filters-item__title button button_sm button_primary button_outline">
<span>🔒</span>
{% translate 'Paid content' noop %}
</label>
8 changes: 4 additions & 4 deletions feed/templates/blocks/feed/subscription.html
Original file line number Diff line number Diff line change
@@ -2,19 +2,19 @@
{% if user in feed.subscribers.all %}
<button formaction="{% url 'api_feed_action' feed_id=feed.id action='unsubscribe' %}"
hx-post="{% url 'api_feed_action' feed_id=feed.id action='unsubscribe' %}"
class="button button_primary button_sm"
class="button button_blank button_outline button_sm active"
type="submit"
>
Unsubscribe
<span class="button__icon">🔔</span> Unsubscribe
{% include 'blocks/feed/loader.html' %}
</button>
{% else %}
<button formaction="{% url 'api_feed_action' feed_id=feed.id action='subscribe' %}"
hx-post="{% url 'api_feed_action' feed_id=feed.id action='subscribe' %}"
class="button button_primary button_sm"
class="button button_blank button_outline button_sm"
type="submit"
>
Subscribe
<span class="button__icon">🔔</span> Subscribe
{% include 'blocks/feed/loader.html' %}
</button>
{% endif %}
8 changes: 4 additions & 4 deletions feed/templates/blocks/feed/types_selector.html
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
{% if not feed_type %}checked{% endif %}
/>
<label for="all"
class="feed-filters-item__title button button_outline button_sm"
class="feed-filters-item__title button button_primary button_outline button_sm"
>
<span>🪩</span>
All
@@ -23,7 +23,7 @@
{% if feed_type == 'podcasts' %}checked{% endif %}
/>
<label for="podcasts"
class="feed-filters-item__title button button_outline button_sm"
class="feed-filters-item__title button button_primary button_outline button_sm"
>
<span>🎧️</span>
Podcasts
@@ -38,7 +38,7 @@
{% if feed_type == 'articles' %}checked{% endif %}
/>
<label for="articles"
class="feed-filters-item__title button button_outline button_sm"
class="feed-filters-item__title button button_primary button_outline button_sm"
>
<span>📰</span>
Articles
@@ -53,7 +53,7 @@
{% if feed_type == 'videos' %}checked{% endif %}
/>
<label for="videos"
class="feed-filters-item__title button button_outline button_sm"
class="feed-filters-item__title button button_primary button_outline button_sm"
>
<span>🎥</span>
Videos

0 comments on commit b71d9cf

Please sign in to comment.