diff options
| author |  Leon Sandøy <[email protected]> | 2018-04-27 15:36:17 +0200 |
|---|---|---|
| committer |  Gareth Coles <[email protected]> | 2018-04-27 14:36:17 +0100 |
| commit | 0829ce9cfcf9927b31ed634885bca3cf32972ced (patch) | |
| tree | f9cf65447fcdbffd677e8e74e7232e03034b10d4 | |
| parent | [Wiki] Fix left sidebar width on some devices (diff) | |
Minor adjustments to payment icon alignment and margins (#60)
| -rw-r--r-- | static/style.css | 9 | ||||
| -rw-r--r-- | templates/main/info/resources.html | 23 |
2 files changed, 24 insertions, 8 deletions
diff --git a/static/style.css b/static/style.css index 04f83fa7..0120f56c 100644 --- a/static/style.css +++ b/static/style.css @@ -138,3 +138,12 @@ img.navbar-logo { #wiki-nav uk-nav-divider { min-width: 7rem; } + +/* Resource page styling */ +div.payment-icon img { + height: 2em; +} + +div.payment-icon { + margin-right: 1em; +}
\ No newline at end of file diff --git a/templates/main/info/resources.html b/templates/main/info/resources.html index c947d4ed..ae416d33 100644 --- a/templates/main/info/resources.html +++ b/templates/main/info/resources.html @@ -28,15 +28,22 @@ a resource or not. You can also hover them for more information on the payment (or tap them on mobile). </p> - <p class="uk-text-center"> - <img src="{{ static_file("images/payment_icons/green.svg") }}" style="height: 2rem;" uk-tooltip="Free" /> - Free - <img src="{{ static_file("images/payment_icons/yellow.svg") }}" style="height: 2rem;" uk-tooltip="Payment Optional" /> - Payment Optional - <img src="{{ static_file("images/payment_icons/red.svg") }}" style="height: 2rem;" uk-tooltip="Paid" /> - Paid - </p> + <div class="uk-text-center uk-flex uk-flex-center"> + <div class="payment-icon"> + <img src="{{ static_file("images/payment_icons/green.svg") }}" uk-tooltip="Free" /> + <span>Free</span> + </div> + <div class="payment-icon"> + <img src="{{ static_file("images/payment_icons/yellow.svg") }}" uk-tooltip="Payment Optional" /> + <span>Payment optional</span> + </div> + + <div class="payment-icon"> + <img src="{{ static_file("images/payment_icons/red.svg") }}" uk-tooltip="Paid" /> + <span>Paid</span> + </div> + </div> {% if categories is none %} <div class="uk-alert-danger" uk-alert> <p> |