From 64c7535ad1003d8727ee951cbdf1e729dd1e5ed3 Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Thu, 2 Aug 2018 20:23:04 +0430 Subject: [PATCH 1/7] Add support for pricing fragment --- exampleSite/content/about/pricing/index.md | 11 ++++ exampleSite/content/about/pricing/plan-1.md | 15 +++++ exampleSite/content/about/pricing/plan-2.md | 20 ++++++ exampleSite/content/about/pricing/plan-3.md | 22 +++++++ layouts/partials/fragments/pricing.html | 68 +++++++++++++++++++++ static-main/styles/_pricing.scss | 24 ++++++++ static-main/styles/index.scss | 1 + static/main.css | 17 ++++++ 8 files changed, 178 insertions(+) create mode 100644 exampleSite/content/about/pricing/index.md create mode 100644 exampleSite/content/about/pricing/plan-1.md create mode 100644 exampleSite/content/about/pricing/plan-2.md create mode 100644 exampleSite/content/about/pricing/plan-3.md create mode 100644 layouts/partials/fragments/pricing.html create mode 100644 static-main/styles/_pricing.scss diff --git a/exampleSite/content/about/pricing/index.md b/exampleSite/content/about/pricing/index.md new file mode 100644 index 00000000..c14da07f --- /dev/null +++ b/exampleSite/content/about/pricing/index.md @@ -0,0 +1,11 @@ ++++ +fragment = "pricing" +weight = 100 +# background = "light" + +title = "Pricing fragment" +subtitle = """ +Pricing fragment supports **markdown** as it's subtitle. +Supports feature listing of different plans and links to a payment service. +""" ++++ diff --git a/exampleSite/content/about/pricing/plan-1.md b/exampleSite/content/about/pricing/plan-1.md new file mode 100644 index 00000000..c94f5cb3 --- /dev/null +++ b/exampleSite/content/about/pricing/plan-1.md @@ -0,0 +1,15 @@ ++++ +weight = 10 + +title = "Starting plan" +subtitle = "starting at" + +price = "Free" +# highlight = true + +button_text = "Start for free" +link = "http://example.com" ++++ +**Basic** feature + +**Email** support diff --git a/exampleSite/content/about/pricing/plan-2.md b/exampleSite/content/about/pricing/plan-2.md new file mode 100644 index 00000000..5f1aeb30 --- /dev/null +++ b/exampleSite/content/about/pricing/plan-2.md @@ -0,0 +1,20 @@ ++++ +weight = 20 + +title = "Premium plan" +subtitle = "starting at" + +price = "$9.99/mo" +highlight = true + +button_text = "Get started" +link = "http://example.com" ++++ + +**Basic** feature + +**Premium** feature + +**Email** support + +**Chat** support diff --git a/exampleSite/content/about/pricing/plan-3.md b/exampleSite/content/about/pricing/plan-3.md new file mode 100644 index 00000000..41060ae7 --- /dev/null +++ b/exampleSite/content/about/pricing/plan-3.md @@ -0,0 +1,22 @@ ++++ +weight = 30 + +title = "Enterprise plan" +# subtitle = "" + +price = "Custom" +# highlight = true + +button_text = "Contact us" +link = "http://example.com" ++++ + +**Basic** feature + +**Premium** feature + +**Email** support + +**Chat** support + +**Additional enterprise stuff** diff --git a/layouts/partials/fragments/pricing.html b/layouts/partials/fragments/pricing.html new file mode 100644 index 00000000..9826422e --- /dev/null +++ b/layouts/partials/fragments/pricing.html @@ -0,0 +1,68 @@ +{{- $items := where (.resources.Match (printf "%s/*.md" .Name)) ".Name" "ne" .self.Name -}} +{{- $bg := .Params.background | default "light" }} + +{{ "" | safeHTML }} +
+
+
+ {{- with .Params.title }} +
+
+

+ {{- . | markdownify -}} +

+
+
+ {{- end -}} + {{- with .Params.subtitle -}} +
+
+
+ {{- . | markdownify -}} +
+
+
+ {{- end }} +
+ {{- range (sort $items ".Params.weight") }} +
+
+
+
+

{{ .Title }}

+
{{ (.Params.subtitle | default "") | markdownify }}
+

{{ .Params.price }}

+
+
+
+ {{ .Content }} +
+ {{ .Params.button_text }} +
+
+
+
+ {{- end }} +
+
+
+
diff --git a/static-main/styles/_pricing.scss b/static-main/styles/_pricing.scss new file mode 100644 index 00000000..f4dbfc28 --- /dev/null +++ b/static-main/styles/_pricing.scss @@ -0,0 +1,24 @@ +.pricing-plan { + &-highlight { + margin: -15px; + } + + .card-body { + p { + margin-bottom: 0; + + &:before { + content: '\F00C'; + color: #7ed321; + margin-right: 10px; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + } + } + } +} diff --git a/static-main/styles/index.scss b/static-main/styles/index.scss index 091fe1d9..0a1ffb71 100644 --- a/static-main/styles/index.scss +++ b/static-main/styles/index.scss @@ -9,5 +9,6 @@ $fa-font-path: '~@fortawesome/fontawesome-free-webfonts/webfonts'; @import './header'; @import './form'; @import './portfolio'; +@import './pricing'; @import './modal'; @import './syna'; diff --git a/static/main.css b/static/main.css index 47adb094..5d157732 100644 --- a/static/main.css +++ b/static/main.css @@ -9657,6 +9657,23 @@ div.form-error ul li { border-radius: 0; background-color: rgba(52, 58, 64, 0.6); } +.pricing-plan-highlight { + margin: -15px; } + +.pricing-plan .card-body p { + margin-bottom: 0; } + .pricing-plan .card-body p:before { + content: '\F00C'; + color: #7ed321; + margin-right: 10px; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; } + body.modal-open { padding-right: 15px; } From 75114faa2ed856dfbbffeab70a0f639dc57131ae Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Thu, 2 Aug 2018 21:29:27 +0430 Subject: [PATCH 2/7] Fix size of the pricing plans --- layouts/partials/fragments/pricing.html | 29 ++++++-------- static-main/styles/_pricing.scss | 29 +++++++++++++- static/main.css | 50 +++++++++++++++++-------- 3 files changed, 74 insertions(+), 34 deletions(-) diff --git a/layouts/partials/fragments/pricing.html b/layouts/partials/fragments/pricing.html index 9826422e..7044abc7 100644 --- a/layouts/partials/fragments/pricing.html +++ b/layouts/partials/fragments/pricing.html @@ -40,24 +40,19 @@
{{- range (sort $items ".Params.weight") }}
-
-
-
-

{{ .Title }}

-
{{ (.Params.subtitle | default "") | markdownify }}
-

{{ .Params.price }}

-
-
-
- {{ .Content }} -
- {{ .Params.button_text }} +
+
+

{{ .Title }}

+
{{ (.Params.subtitle | default "") | markdownify }}
+

{{ .Params.price }}

+
+
+
+ {{ .Content }}
+ {{ .Params.button_text }}
diff --git a/static-main/styles/_pricing.scss b/static-main/styles/_pricing.scss index f4dbfc28..e1d07792 100644 --- a/static-main/styles/_pricing.scss +++ b/static-main/styles/_pricing.scss @@ -1,9 +1,36 @@ .pricing-plan { + display: flex; + + .card { + flex: 1 0 auto; + } + + .card-header { + height: 125px; + display: flex; + flex-direction: column; + justify-content: center; + } + &-highlight { - margin: -15px; + margin: -20px -10px 0; + + .card-header { + height: 145px;; + } } .card-body { + display: flex; + flex-direction: column; + flex: 1 0 auto; + + .features { + display: flex; + flex-direction: column; + flex: 1 0 auto; + } + p { margin-bottom: 0; diff --git a/static/main.css b/static/main.css index 5d157732..89ff1003 100644 --- a/static/main.css +++ b/static/main.css @@ -9657,22 +9657,40 @@ div.form-error ul li { border-radius: 0; background-color: rgba(52, 58, 64, 0.6); } -.pricing-plan-highlight { - margin: -15px; } - -.pricing-plan .card-body p { - margin-bottom: 0; } - .pricing-plan .card-body p:before { - content: '\F00C'; - color: #7ed321; - margin-right: 10px; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; } +.pricing-plan { + display: flex; } + .pricing-plan .card { + flex: 1 0 auto; } + .pricing-plan .card-header { + height: 125px; + display: flex; + flex-direction: column; + justify-content: center; } + .pricing-plan-highlight { + margin: -20px -10px 0; } + .pricing-plan-highlight .card-header { + height: 145px; } + .pricing-plan .card-body { + display: flex; + flex-direction: column; + flex: 1 0 auto; } + .pricing-plan .card-body .features { + display: flex; + flex-direction: column; + flex: 1 0 auto; } + .pricing-plan .card-body p { + margin-bottom: 0; } + .pricing-plan .card-body p:before { + content: '\F00C'; + color: #7ed321; + margin-right: 10px; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; } body.modal-open { padding-right: 15px; } From b8e13941854d5a4e3f2c9e2b4128bb4f48b02e71 Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Thu, 2 Aug 2018 22:02:08 +0430 Subject: [PATCH 3/7] Update with requested changes on pricing --- exampleSite/content/about/pricing/index.md | 6 ++--- exampleSite/content/about/pricing/plan-1.md | 13 ++++++--- exampleSite/content/about/pricing/plan-2.md | 19 ++++++++++---- exampleSite/content/about/pricing/plan-3.md | 22 +++++++++++----- layouts/partials/fragments/pricing.html | 29 +++++++++++++++++---- static-main/styles/_pricing.scss | 26 +++++++++--------- static/main.css | 26 ++++++++---------- 7 files changed, 89 insertions(+), 52 deletions(-) diff --git a/exampleSite/content/about/pricing/index.md b/exampleSite/content/about/pricing/index.md index c14da07f..354267f7 100644 --- a/exampleSite/content/about/pricing/index.md +++ b/exampleSite/content/about/pricing/index.md @@ -4,8 +4,8 @@ weight = 100 # background = "light" title = "Pricing fragment" -subtitle = """ +subtitle = "Can be linked to 3rd party payment services" ++++ + Pricing fragment supports **markdown** as it's subtitle. Supports feature listing of different plans and links to a payment service. -""" -+++ diff --git a/exampleSite/content/about/pricing/plan-1.md b/exampleSite/content/about/pricing/plan-1.md index c94f5cb3..d6185f85 100644 --- a/exampleSite/content/about/pricing/plan-1.md +++ b/exampleSite/content/about/pricing/plan-1.md @@ -8,8 +8,13 @@ price = "Free" # highlight = true button_text = "Start for free" -link = "http://example.com" -+++ -**Basic** feature +button_url = "http://example.com" + +[[feature]] + text = "**Basic** feature" + icon = "fas fa-check" -**Email** support +[[feature]] + text = "**Email** support" + icon = "fas fa-check" ++++ diff --git a/exampleSite/content/about/pricing/plan-2.md b/exampleSite/content/about/pricing/plan-2.md index 5f1aeb30..c5455fba 100644 --- a/exampleSite/content/about/pricing/plan-2.md +++ b/exampleSite/content/about/pricing/plan-2.md @@ -9,12 +9,21 @@ highlight = true button_text = "Get started" link = "http://example.com" -+++ +button_url = "http://example.com" -**Basic** feature +[[feature]] + text = "**Basic** feature" + icon = "fas fa-check" -**Premium** feature +[[feature]] + text = "**Premium** feature" + icon = "fas fa-check" -**Email** support +[[feature]] + text = "**Email** support" + icon = "fas fa-check" -**Chat** support +[[feature]] + text = "**Chat** support" + icon = "fas fa-check" ++++ diff --git a/exampleSite/content/about/pricing/plan-3.md b/exampleSite/content/about/pricing/plan-3.md index 41060ae7..b23eaa75 100644 --- a/exampleSite/content/about/pricing/plan-3.md +++ b/exampleSite/content/about/pricing/plan-3.md @@ -9,14 +9,24 @@ price = "Custom" button_text = "Contact us" link = "http://example.com" -+++ -**Basic** feature +[[feature]] + text = "**Basic** feature" + icon = "fas fa-check" -**Premium** feature +[[feature]] + text = "**Premium** feature" + icon = "fas fa-check" -**Email** support +[[feature]] + text = "**Email** support" + icon = "fas fa-check" -**Chat** support +[[feature]] + text = "**Chat** support" + icon = "fas fa-check" -**Additional enterprise stuff** +[[feature]] + text = "**Additional enterprise stuff**" + icon = "fas fa-check" ++++ diff --git a/layouts/partials/fragments/pricing.html b/layouts/partials/fragments/pricing.html index 7044abc7..d4b1fe50 100644 --- a/layouts/partials/fragments/pricing.html +++ b/layouts/partials/fragments/pricing.html @@ -1,4 +1,5 @@ {{- $items := where (.resources.Match (printf "%s/*.md" .Name)) ".Name" "ne" .self.Name -}} +{{- $self := . -}} {{- $bg := .Params.background | default "light" }} {{ "" | safeHTML }} @@ -15,6 +16,9 @@ {{- else -}} {{- printf " text-%s" "light" -}} {{- end -}} + {{- if and (not (isset $self.Params "subtitle")) (not $self.Content) -}} + {{- printf " pb-4" -}} + {{- end -}} ">

{{- . | markdownify -}} @@ -24,16 +28,29 @@

{{- end -}} {{- with .Params.subtitle -}}
-
-
+
{{- . | markdownify -}} -
+

+
+
+ {{- end }} + {{- with .Content -}} +
+
+ {{- . -}}
{{- end }} @@ -50,9 +67,11 @@

{{ .Params.price }}
- {{ .Content }} + {{- range .Params.feature }} +

{{ .text | markdownify }}

+ {{- end }}
- {{ .Params.button_text }} + {{ .Params.button_text }}

diff --git a/static-main/styles/_pricing.scss b/static-main/styles/_pricing.scss index e1d07792..ac9e379f 100644 --- a/static-main/styles/_pricing.scss +++ b/static-main/styles/_pricing.scss @@ -13,10 +13,16 @@ } &-highlight { - margin: -20px -10px 0; - - .card-header { - height: 145px;; + @include media-breakpoint-up(md) { + margin: -20px -10px 0; + + .card-header { + height: 145px; + } + } + + @include media-breakpoint-down(md) { + order: -1; } } @@ -34,17 +40,9 @@ p { margin-bottom: 0; - &:before { - content: '\F00C'; - color: #7ed321; + i { + color: $green; margin-right: 10px; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; } } } diff --git a/static/main.css b/static/main.css index 89ff1003..58ebc4e6 100644 --- a/static/main.css +++ b/static/main.css @@ -9666,10 +9666,14 @@ div.form-error ul li { display: flex; flex-direction: column; justify-content: center; } - .pricing-plan-highlight { - margin: -20px -10px 0; } - .pricing-plan-highlight .card-header { - height: 145px; } + @media (min-width: 768px) { + .pricing-plan-highlight { + margin: -20px -10px 0; } + .pricing-plan-highlight .card-header { + height: 145px; } } + @media (max-width: 991.98px) { + .pricing-plan-highlight { + order: -1; } } .pricing-plan .card-body { display: flex; flex-direction: column; @@ -9680,17 +9684,9 @@ div.form-error ul li { flex: 1 0 auto; } .pricing-plan .card-body p { margin-bottom: 0; } - .pricing-plan .card-body p:before { - content: '\F00C'; - color: #7ed321; - margin-right: 10px; - font-family: 'Font Awesome 5 Free'; - font-weight: 900; - display: inline-block; - font-style: normal; - font-variant: normal; - text-rendering: auto; - line-height: 1; } + .pricing-plan .card-body p i { + color: #008f54; + margin-right: 10px; } body.modal-open { padding-right: 15px; } From 3bcdad09f0c1422110b9b9c10b2bb9b339ffc190 Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Thu, 2 Aug 2018 23:27:41 +0430 Subject: [PATCH 4/7] Fix pricing plan urls --- exampleSite/content/about/pricing/plan-2.md | 1 - exampleSite/content/about/pricing/plan-3.md | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/exampleSite/content/about/pricing/plan-2.md b/exampleSite/content/about/pricing/plan-2.md index c5455fba..cb57ddaf 100644 --- a/exampleSite/content/about/pricing/plan-2.md +++ b/exampleSite/content/about/pricing/plan-2.md @@ -8,7 +8,6 @@ price = "$9.99/mo" highlight = true button_text = "Get started" -link = "http://example.com" button_url = "http://example.com" [[feature]] diff --git a/exampleSite/content/about/pricing/plan-3.md b/exampleSite/content/about/pricing/plan-3.md index b23eaa75..ca43965e 100644 --- a/exampleSite/content/about/pricing/plan-3.md +++ b/exampleSite/content/about/pricing/plan-3.md @@ -8,7 +8,7 @@ price = "Custom" # highlight = true button_text = "Contact us" -link = "http://example.com" +button_url = "http://example.com" [[feature]] text = "**Basic** feature" From b58c4f15fe9d6424846133d7aec485237285db14 Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Fri, 3 Aug 2018 16:28:03 +0430 Subject: [PATCH 5/7] Change pricing plan urls --- exampleSite/content/about/pricing/plan-1.md | 2 +- exampleSite/content/about/pricing/plan-2.md | 2 +- exampleSite/content/about/pricing/plan-3.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/exampleSite/content/about/pricing/plan-1.md b/exampleSite/content/about/pricing/plan-1.md index d6185f85..a838671d 100644 --- a/exampleSite/content/about/pricing/plan-1.md +++ b/exampleSite/content/about/pricing/plan-1.md @@ -8,7 +8,7 @@ price = "Free" # highlight = true button_text = "Start for free" -button_url = "http://example.com" +button_url = "#" [[feature]] text = "**Basic** feature" diff --git a/exampleSite/content/about/pricing/plan-2.md b/exampleSite/content/about/pricing/plan-2.md index cb57ddaf..b039844c 100644 --- a/exampleSite/content/about/pricing/plan-2.md +++ b/exampleSite/content/about/pricing/plan-2.md @@ -8,7 +8,7 @@ price = "$9.99/mo" highlight = true button_text = "Get started" -button_url = "http://example.com" +button_url = "#" [[feature]] text = "**Basic** feature" diff --git a/exampleSite/content/about/pricing/plan-3.md b/exampleSite/content/about/pricing/plan-3.md index ca43965e..791c84ef 100644 --- a/exampleSite/content/about/pricing/plan-3.md +++ b/exampleSite/content/about/pricing/plan-3.md @@ -8,7 +8,7 @@ price = "Custom" # highlight = true button_text = "Contact us" -button_url = "http://example.com" +button_url = "#" [[feature]] text = "**Basic** feature" From d5ac4e89fe2775f710f8e09931a7c217b2ba71f7 Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Fri, 3 Aug 2018 19:11:27 +0430 Subject: [PATCH 6/7] Fix border on pricing plans --- static-main/styles/_pricing.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/static-main/styles/_pricing.scss b/static-main/styles/_pricing.scss index ac9e379f..9ec279dc 100644 --- a/static-main/styles/_pricing.scss +++ b/static-main/styles/_pricing.scss @@ -3,6 +3,7 @@ .card { flex: 1 0 auto; + overflow: hidden; } .card-header { From b0371de7b19d47a401b1da06b736d14f1578778b Mon Sep 17 00:00:00 2001 From: Mahdi Pourismaiel Date: Sat, 4 Aug 2018 15:17:37 +0430 Subject: [PATCH 7/7] Change pricing plan feature to plural --- exampleSite/content/about/pricing/plan-1.md | 4 ++-- exampleSite/content/about/pricing/plan-2.md | 8 ++++---- exampleSite/content/about/pricing/plan-3.md | 10 +++++----- layouts/partials/fragments/pricing.html | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/exampleSite/content/about/pricing/plan-1.md b/exampleSite/content/about/pricing/plan-1.md index a838671d..e4ec6f0e 100644 --- a/exampleSite/content/about/pricing/plan-1.md +++ b/exampleSite/content/about/pricing/plan-1.md @@ -10,11 +10,11 @@ price = "Free" button_text = "Start for free" button_url = "#" -[[feature]] +[[features]] text = "**Basic** feature" icon = "fas fa-check" -[[feature]] +[[features]] text = "**Email** support" icon = "fas fa-check" +++ diff --git a/exampleSite/content/about/pricing/plan-2.md b/exampleSite/content/about/pricing/plan-2.md index b039844c..8eb65eec 100644 --- a/exampleSite/content/about/pricing/plan-2.md +++ b/exampleSite/content/about/pricing/plan-2.md @@ -10,19 +10,19 @@ highlight = true button_text = "Get started" button_url = "#" -[[feature]] +[[features]] text = "**Basic** feature" icon = "fas fa-check" -[[feature]] +[[features]] text = "**Premium** feature" icon = "fas fa-check" -[[feature]] +[[features]] text = "**Email** support" icon = "fas fa-check" -[[feature]] +[[features]] text = "**Chat** support" icon = "fas fa-check" +++ diff --git a/exampleSite/content/about/pricing/plan-3.md b/exampleSite/content/about/pricing/plan-3.md index 791c84ef..8aea29be 100644 --- a/exampleSite/content/about/pricing/plan-3.md +++ b/exampleSite/content/about/pricing/plan-3.md @@ -10,23 +10,23 @@ price = "Custom" button_text = "Contact us" button_url = "#" -[[feature]] +[[features]] text = "**Basic** feature" icon = "fas fa-check" -[[feature]] +[[features]] text = "**Premium** feature" icon = "fas fa-check" -[[feature]] +[[features]] text = "**Email** support" icon = "fas fa-check" -[[feature]] +[[features]] text = "**Chat** support" icon = "fas fa-check" -[[feature]] +[[features]] text = "**Additional enterprise stuff**" icon = "fas fa-check" +++ diff --git a/layouts/partials/fragments/pricing.html b/layouts/partials/fragments/pricing.html index d4b1fe50..57283b06 100644 --- a/layouts/partials/fragments/pricing.html +++ b/layouts/partials/fragments/pricing.html @@ -67,7 +67,7 @@

{{ .Params.price }}
- {{- range .Params.feature }} + {{- range .Params.features }}

{{ .text | markdownify }}

{{- end }}