summaryrefslogtreecommitdiff
path: root/talermerchantdemos
diff options
context:
space:
mode:
authorng <�>2022-09-24 23:23:09 +0200
committerng <�>2022-09-24 23:23:09 +0200
commit42a33bdb7120c5e2fe66624741a4737231c67396 (patch)
tree5c8dba005d4a56a3895895f2b58741307aee43ec /talermerchantdemos
parentdebf91d256d13e5242dd3fb9adcfed7e6c029bca (diff)
downloadtaler-merchant-demos-42a33bdb7120c5e2fe66624741a4737231c67396.tar.gz
taler-merchant-demos-42a33bdb7120c5e2fe66624741a4737231c67396.tar.bz2
taler-merchant-demos-42a33bdb7120c5e2fe66624741a4737231c67396.zip
feat: ✨ Add a shopping cart icon to the pay button
Diffstat (limited to 'talermerchantdemos')
-rw-r--r--talermerchantdemos/static/blog.css26
-rw-r--r--talermerchantdemos/templates/blog-index.html.j23
2 files changed, 26 insertions, 3 deletions
diff --git a/talermerchantdemos/static/blog.css b/talermerchantdemos/static/blog.css
index 9e0b910..e226ecd 100644
--- a/talermerchantdemos/static/blog.css
+++ b/talermerchantdemos/static/blog.css
@@ -22,6 +22,23 @@
color: var(--link-colour, var(--default-link-colour, black));
}
+/* Pay Icon */
+.payLink > .icon::before {
+ content: '​'; /* Blank = CSS Won't render, which is why we put a Zero-Width-Space */
+ /* Size & Positioning */
+ display: inline-block;
+ width: 1.2em;
+ margin-right: 5px;
+ /* Set Icon */
+ background-image: url(/static/noun-shopping-cart-5195508.svg);
+ /* Ensure Icon is rendered correctly */
+ background-size: contain;
+ background-position: center center;
+ background-repeat: no-repeat;
+ /* Invert it by default unless otherwise specified */
+ filter: var(--paylink-icon-filter, invert());
+}
+/* Pay Button */
.payLink {
/* Variables */
--link-colour: var(--button-confirm-foreground);
@@ -48,13 +65,20 @@
/* Transformations */
transform: none;
}
+
+/* Hover */
.payLink:hover {
--background: var(--button-confirm-hovering-background);
--link-colour: var(--button-confirm-hovering-foreground);
--bottom-line: 0;
transform: translateY(6px);
}
-.payLink:active {
+
+/* Active */
+.payLink:active,
+.payLink:focus,
+.payLink:focus-within,
+.payLink:focus-visible {
--background: var(--button-confirm-active-background);
--link-colour: var(--button-confirm-active-foreground);
} \ No newline at end of file
diff --git a/talermerchantdemos/templates/blog-index.html.j2 b/talermerchantdemos/templates/blog-index.html.j2
index 9468cc7..7c69b12 100644
--- a/talermerchantdemos/templates/blog-index.html.j2
+++ b/talermerchantdemos/templates/blog-index.html.j2
@@ -20,12 +20,11 @@
{{ gettext("Click on an individual chapter to to purchase it with GNU Taler.") }}
{{ gettext('You can get free, virtual money to buy articles on this page at the <a href="{}")">bank</a>.').format(env('TALER_ENV_URL_BANK')) }}
</div>
-
<div>
{% for article in articles %}
<div class="notice">
<h3><a href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}" class="articleTitle">{{article.title}}</a></h3>
- <p>{{ article.teaser|safe }} <a class="payLink" href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}">{{ gettext('Pay to read more...') }}</a></p>
+ <p>{{ article.teaser|safe }} <a class="payLink" href="{{ url_for('article', lang=article.lang, article_name=article.slug) }}"><span class="icon"></span>{{ gettext('Pay to read more...') }}</a></p>
</div>
{% else %}
<em>({{ gettext("No articles available in this language.") }})</em>