forked from ulovliglogning/ulovliglogning.dk
Merge branch 'feature/donation-counter01'
This commit is contained in:
commit
99dc7f7e2b
|
@ -21,7 +21,7 @@ description: >- # this means to ignore newlines until "baseurl:"
|
||||||
baseurl: "" # the subpath of your site, e.g. /blog
|
baseurl: "" # the subpath of your site, e.g. /blog
|
||||||
url: "https://ulovliglogning.dk" # the base hostname & protocol for your site, e.g. http://example.com
|
url: "https://ulovliglogning.dk" # the base hostname & protocol for your site, e.g. http://example.com
|
||||||
donationCounter:
|
donationCounter:
|
||||||
donated: 110000
|
donated: 175000
|
||||||
goal: 250000
|
goal: 250000
|
||||||
|
|
||||||
# multilanguage support
|
# multilanguage support
|
||||||
|
|
|
@ -12,5 +12,8 @@ global:
|
||||||
langs:
|
langs:
|
||||||
da: Dansk
|
da: Dansk
|
||||||
en: Engelsk
|
en: Engelsk
|
||||||
|
donation:
|
||||||
|
text: doneret af
|
||||||
|
currency: ",-"
|
||||||
|
sub: Donationer opdateres pt. manuelt
|
||||||
mobilepayLink: https://mobilepay.dk/da-dk/pages/betal.aspx?phone=004540456&comment=Til%20kampen%20imod%20den%20Ulovlige%20Logning!&t=d
|
mobilepayLink: https://mobilepay.dk/da-dk/pages/betal.aspx?phone=004540456&comment=Til%20kampen%20imod%20den%20Ulovlige%20Logning!&t=d
|
||||||
|
|
|
@ -12,3 +12,7 @@ global:
|
||||||
langs:
|
langs:
|
||||||
da: Danish
|
da: Danish
|
||||||
en: English
|
en: English
|
||||||
|
donation:
|
||||||
|
text: donated of
|
||||||
|
currency: " DKK"
|
||||||
|
sub: Donations are updated manually
|
|
@ -5,6 +5,12 @@ layout: default
|
||||||
{% for section in page.sections %}
|
{% for section in page.sections %}
|
||||||
<section id="{{ section.id }}" class="{% cycle 'odd', 'even' %}">
|
<section id="{{ section.id }}" class="{% cycle 'odd', 'even' %}">
|
||||||
{% if forloop.first %}
|
{% if forloop.first %}
|
||||||
|
<div class="donationCounter">
|
||||||
|
<span>
|
||||||
|
{{ site.donationCounter.donated | intcomma: '.' }}{{ global.donation.currency }} {{ global.donation.text }} {{ site.donationCounter.goal | intcomma: '.' }}{{ global.donation.currency }}
|
||||||
|
<sub>{{ global.donation.sub }}</sub>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<nav id="navElm">
|
<nav id="navElm">
|
||||||
<div class="langSwitcher left">
|
<div class="langSwitcher left">
|
||||||
{% for tongue in site.languages %}
|
{% for tongue in site.languages %}
|
||||||
|
|
257
_plugins/humanize.rb
Normal file
257
_plugins/humanize.rb
Normal file
|
@ -0,0 +1,257 @@
|
||||||
|
module Jekyll
|
||||||
|
|
||||||
|
module Humanize
|
||||||
|
##
|
||||||
|
# This is a port of the Django app `humanize` which adds a "human touch"
|
||||||
|
# to data. Given that Jekyll produces static sites, some of the original
|
||||||
|
# methods do not make logical sense (e.g. naturaltime).
|
||||||
|
#
|
||||||
|
# Source code can be viewed here:
|
||||||
|
# https://github.com/django/django
|
||||||
|
#
|
||||||
|
# Copyright (c) Django Software Foundation and individual contributors.
|
||||||
|
# All rights reserved.
|
||||||
|
|
||||||
|
####################
|
||||||
|
# PUBLIC METHODS #
|
||||||
|
####################
|
||||||
|
|
||||||
|
def ordinal(value, flag=nil)
|
||||||
|
##
|
||||||
|
# Converts an integer to its ordinal as a string. 1 is '1st', 2 is '2nd',
|
||||||
|
# 3 is '3rd', etc. Works for any integer.
|
||||||
|
#
|
||||||
|
# Usage:
|
||||||
|
# {{ somenum }} >>> 3
|
||||||
|
# {{ somenum | ordinal }} >>> '3rd'
|
||||||
|
# {{ somenum | ordinal: "super" }} >>> '3<sup>rd</sup>'
|
||||||
|
|
||||||
|
begin
|
||||||
|
value = value.to_i
|
||||||
|
flag.to_s.downcase!
|
||||||
|
rescue Exception => e
|
||||||
|
puts "#{e.class} #{e}"
|
||||||
|
return value
|
||||||
|
end
|
||||||
|
|
||||||
|
suffix = ""
|
||||||
|
suffixes = ["th", "st", "nd", "rd", "th", "th", "th", "th", "th", "th"]
|
||||||
|
unless [11, 12, 13].include? value % 100 then
|
||||||
|
suffix = suffixes[value % 10]
|
||||||
|
else
|
||||||
|
suffix = suffixes[0]
|
||||||
|
end
|
||||||
|
|
||||||
|
unless flag and flag == "super"
|
||||||
|
return "#{value}%s" % suffix
|
||||||
|
else
|
||||||
|
return "#{value}<sup>%s</sup>" % suffix
|
||||||
|
end
|
||||||
|
|
||||||
|
end
|
||||||
|
|
||||||
|
def intcomma(value, delimiter=",")
|
||||||
|
##
|
||||||
|
# Converts an integer to a string containing commas every three digits.
|
||||||
|
# For example, 3000 becomes '3,000' and 45000 becomes '45,000'.
|
||||||
|
# Optionally supports a delimiter override for commas.
|
||||||
|
#
|
||||||
|
# Usage:
|
||||||
|
# {{ post.content | number_of_words }} >>> 12345
|
||||||
|
# {{ post.content | number_of_words | intcomma }} >>> '12,345'
|
||||||
|
# {{ post.content | number_of_words | intcomma: '.' }} >>> '12.345'
|
||||||
|
|
||||||
|
begin
|
||||||
|
orig = value.to_s
|
||||||
|
delimiter = delimiter.to_s
|
||||||
|
rescue Exception => e
|
||||||
|
puts "#{e.class} #{e}"
|
||||||
|
return value
|
||||||
|
end
|
||||||
|
|
||||||
|
copy = orig.strip
|
||||||
|
copy = orig.gsub(/^(-?\d+)(\d{3})/, "\\1#{delimiter}\\2")
|
||||||
|
orig == copy ? copy : intcomma(copy, delimiter)
|
||||||
|
end
|
||||||
|
|
||||||
|
INTWORD_HELPERS = [
|
||||||
|
[6, "million"],
|
||||||
|
[9, "billion"],
|
||||||
|
[12, "trillion"],
|
||||||
|
[15, "quadrillion"],
|
||||||
|
[18, "quintillion"],
|
||||||
|
[21, "sextillion"],
|
||||||
|
[24, "septillion"],
|
||||||
|
[27, "octillion"],
|
||||||
|
[30, "nonillion"],
|
||||||
|
[33, "decillion"],
|
||||||
|
[100, "googol"],
|
||||||
|
]
|
||||||
|
|
||||||
|
def intword(value)
|
||||||
|
##
|
||||||
|
# Converts a large integer to a friendly text representation. Works best
|
||||||
|
# for numbers over 1 million. For example, 1000000 becomes '1.0 million',
|
||||||
|
# 1200000 becomes '1.2 million' and 1200000000 becomes '1.2 billion'.
|
||||||
|
#
|
||||||
|
# Usage:
|
||||||
|
# {{ largenum }} >>> 1200000
|
||||||
|
# {{ largenum | intword }} >>> '1.2 million'
|
||||||
|
|
||||||
|
begin
|
||||||
|
value = value.to_i
|
||||||
|
rescue Exception => e
|
||||||
|
puts "#{e.class} #{e}"
|
||||||
|
return value
|
||||||
|
end
|
||||||
|
|
||||||
|
if value < 1000000
|
||||||
|
return value
|
||||||
|
end
|
||||||
|
|
||||||
|
for exponent, text in INTWORD_HELPERS
|
||||||
|
large_number = 10 ** exponent
|
||||||
|
|
||||||
|
if value < large_number * 1000
|
||||||
|
return "%#{value}.1f #{text}" % (value / large_number.to_f)
|
||||||
|
end
|
||||||
|
|
||||||
|
end
|
||||||
|
|
||||||
|
return value
|
||||||
|
end
|
||||||
|
|
||||||
|
def apnumber(value)
|
||||||
|
##
|
||||||
|
# For numbers 0-9, returns the number spelled out. Otherwise, returns the
|
||||||
|
# number. This follows Associated Press style.
|
||||||
|
#
|
||||||
|
# Usage:
|
||||||
|
# {{ num }} >>> 6
|
||||||
|
# {{ num | apnumber }} >>> six
|
||||||
|
|
||||||
|
begin
|
||||||
|
value = value.to_i
|
||||||
|
rescue Exception => e
|
||||||
|
puts "#{e.class} #{e}"
|
||||||
|
return value
|
||||||
|
end
|
||||||
|
|
||||||
|
unless value >= 0 and value < 10 then
|
||||||
|
return value
|
||||||
|
else
|
||||||
|
return ["zero", "one", "two", "three", "four", "five", "six",
|
||||||
|
"seven", "eight", "nine"][value]
|
||||||
|
end
|
||||||
|
|
||||||
|
end
|
||||||
|
|
||||||
|
def naturalday(date)
|
||||||
|
##
|
||||||
|
# For date values that are within a 9 day stretch from present day, this
|
||||||
|
# will attempt to return the string representation in the format of today,
|
||||||
|
# tomorrow, yesterday, "in # days" or "# days ago". Otherwise, returns a
|
||||||
|
# string formatted according to the "date_format" setting in your
|
||||||
|
# _config.yml file using strftime format (if not defined, it will default
|
||||||
|
# to "%m/%d/%Y").
|
||||||
|
#
|
||||||
|
# Usage:
|
||||||
|
# TODAY == 01/26/2014
|
||||||
|
# {{ post.updated }} >>> 01/25/2014
|
||||||
|
# {{ post.updated | naturalday }} >>> 'yesterday'
|
||||||
|
# {{ post.date }} >>> 01/19/2014
|
||||||
|
# {{ post.date | naturalday }} >>> 'seven days ago'
|
||||||
|
|
||||||
|
begin
|
||||||
|
site = @context.registers[:site]
|
||||||
|
date_format = site.config['humanize']['date_format']
|
||||||
|
date = time(date).to_date
|
||||||
|
rescue Exception => e
|
||||||
|
puts "#{e.class} #{e}"
|
||||||
|
return date
|
||||||
|
end
|
||||||
|
|
||||||
|
unless date_format then
|
||||||
|
date_format = "%m/%d/%Y"
|
||||||
|
end
|
||||||
|
|
||||||
|
today = time(Time.now).to_date
|
||||||
|
delta = (date - today).to_i
|
||||||
|
|
||||||
|
case delta
|
||||||
|
when 0
|
||||||
|
return "today"
|
||||||
|
when 1
|
||||||
|
return "tomorrow"
|
||||||
|
when 2..9
|
||||||
|
delta = apnumber(delta)
|
||||||
|
return "in #{delta} days"
|
||||||
|
when -1
|
||||||
|
return "yesterday"
|
||||||
|
when -9..-2
|
||||||
|
delta = apnumber(delta * -1)
|
||||||
|
return "#{delta} days ago"
|
||||||
|
else
|
||||||
|
return date.strftime("#{date_format}")
|
||||||
|
end
|
||||||
|
|
||||||
|
end
|
||||||
|
|
||||||
|
def filesize(value)
|
||||||
|
##
|
||||||
|
# For filesize values in bytes, returns the number rounded to 3
|
||||||
|
# decimal places with the correct suffix.
|
||||||
|
#
|
||||||
|
# Usage:
|
||||||
|
# {{ bytes }} >>> 123456789
|
||||||
|
# {{ bytes | filesize }} >>> 117.738 MB
|
||||||
|
filesize_tb = 1099511627776.0
|
||||||
|
filesize_gb = 1073741824.0
|
||||||
|
filesize_mb = 1048576.0
|
||||||
|
filesize_kb = 1024.0
|
||||||
|
|
||||||
|
begin
|
||||||
|
value = value.to_f
|
||||||
|
rescue Exception => e
|
||||||
|
puts "#{e.class} #{e}"
|
||||||
|
return value
|
||||||
|
end
|
||||||
|
|
||||||
|
if value >= filesize_tb
|
||||||
|
return "%s TB" % (value / filesize_tb).to_f.round(3)
|
||||||
|
elsif value >= filesize_gb
|
||||||
|
return "%s GB" % (value / filesize_gb).to_f.round(3)
|
||||||
|
elsif value >= filesize_mb
|
||||||
|
return "%s MB" % (value / filesize_mb).to_f.round(3)
|
||||||
|
elsif value >= filesize_kb
|
||||||
|
return "%s KB" % (value / filesize_kb).to_f.round(0)
|
||||||
|
elsif value == 1
|
||||||
|
return "1 byte"
|
||||||
|
else
|
||||||
|
return "%s bytes" % value.to_f.round(0)
|
||||||
|
end
|
||||||
|
|
||||||
|
end
|
||||||
|
|
||||||
|
#####################
|
||||||
|
# PRIVATE METHODS #
|
||||||
|
#####################
|
||||||
|
|
||||||
|
private
|
||||||
|
def time(input)
|
||||||
|
case input
|
||||||
|
when Time
|
||||||
|
input
|
||||||
|
when String
|
||||||
|
Time.parse(input)
|
||||||
|
else
|
||||||
|
Jekyll.logger.error "Invalid Date:", "'#{input}' not valid datetime."
|
||||||
|
exit(1)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
end
|
||||||
|
|
||||||
|
end
|
||||||
|
|
||||||
|
Liquid::Template.register_filter(Jekyll::Humanize)
|
65
_scss/module/_donationCounter.scss
Normal file
65
_scss/module/_donationCounter.scss
Normal file
|
@ -0,0 +1,65 @@
|
||||||
|
$donationCounter_percentFromGoal: 100 - ($donationCounter_donated / $donationCounter_goal * 100);
|
||||||
|
|
||||||
|
.donationCounter {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
background: linear-gradient(to right, #49a540 50%, #407b3b 50%);
|
||||||
|
position: absolute;
|
||||||
|
background-size: 200%;
|
||||||
|
background-position: 100%;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
animation: donationCounterSlideIn .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) .5s forwards;
|
||||||
|
|
||||||
|
sub {
|
||||||
|
display: block;
|
||||||
|
font-size: .8rem;
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before, &:after {
|
||||||
|
content: "";
|
||||||
|
height: 30px;
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
background: linear-gradient(to left bottom, #2A2A2A 49%, transparent 50%);
|
||||||
|
top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
background: linear-gradient(to left bottom, transparent 49%, #ff5802 50%);
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes donationCounterSlideIn {
|
||||||
|
from {
|
||||||
|
background-position: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
background-position: $donationCounter_percentFromGoal + unquote("%");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
#intro {
|
||||||
|
padding-bottom: 6rem;
|
||||||
|
}
|
||||||
|
.donationCounter {
|
||||||
|
height: 80px;
|
||||||
|
&:before, &:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,9 +1,23 @@
|
||||||
.cta{display:none;}
|
.cta {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 1200px) and (orientation:landscape) {
|
@media screen and (min-width: 1200px) and (orientation:landscape) {
|
||||||
#intro{position:relative;}
|
#intro {
|
||||||
.cta{display:inline;position:absolute;left:5%;bottom:15%;
|
position: relative;
|
||||||
height:auto;width:200px;box-shadow:none;}
|
}
|
||||||
.ctaTxt{display:none;}
|
.cta {
|
||||||
|
display: inline;
|
||||||
|
position: absolute;
|
||||||
|
left: 5%;
|
||||||
|
bottom: 15%;
|
||||||
|
height: auto;
|
||||||
|
width: 200px;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.ctaTxt {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
|
@ -39,13 +53,16 @@ nav {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
a, label:before, label:after {
|
a,
|
||||||
|
label:before,
|
||||||
|
label:after {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
.left, .right {
|
.left,
|
||||||
|
.right {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
|
@ -53,7 +70,8 @@ nav {
|
||||||
input[type=checkbox] {
|
input[type=checkbox] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
label:before, label:after {
|
label:before,
|
||||||
|
label:after {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -146,7 +164,8 @@ nav {
|
||||||
background: darken($background-alternative, 20);
|
background: darken($background-alternative, 20);
|
||||||
border-bottom: 2px solid darken($background-alternative, 25);
|
border-bottom: 2px solid darken($background-alternative, 25);
|
||||||
}
|
}
|
||||||
&:before, &:after {
|
&:before,
|
||||||
|
&:after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
---
|
---
|
||||||
---
|
---
|
||||||
|
//import Jekyll variables
|
||||||
|
$donationCounter_donated: {{ site.donationCounter.donated }};
|
||||||
|
$donationCounter_goal: {{ site.donationCounter.goal }};
|
||||||
|
|
||||||
// Import base styles
|
// Import base styles
|
||||||
@import "base/reset.scss";
|
@import "base/reset.scss";
|
||||||
@import "base/variables";
|
@import "base/variables";
|
||||||
|
@ -13,4 +17,5 @@
|
||||||
@import "module/flags.scss";
|
@import "module/flags.scss";
|
||||||
@import "module/qa.scss";
|
@import "module/qa.scss";
|
||||||
@import "module/sections.scss";
|
@import "module/sections.scss";
|
||||||
|
@import "module/donationCounter.scss";
|
||||||
@import "module/indexpage.scss";
|
@import "module/indexpage.scss";
|
||||||
|
|
Loading…
Reference in a new issue