This is an automated email from the ASF dual-hosted git repository.
kamilbregula pushed a commit to branch aip-11
in repository https://gitbox.apache.org/repos/asf/airflow-site.git
The following commit(s) were added to refs/heads/aip-11 by this push:
new 4976f21 Add accordian component (#84)
4976f21 is described below
commit 4976f218652975dff3e3c0cab5f699c68b0cba56
Author: Kamil BreguĊa <mik-...@users.noreply.github.com>
AuthorDate: Tue Oct 22 19:40:01 2019 +0200
Add accordian component (#84)
Co-Authored-By: Kamil Gabryjelski <kamil.gabryjel...@polidea.com>
---
.../site/assets/icons/ask-question-icon.svg | 16 +++++++++++
landing-pages/site/assets/icons/bug-icon.svg | 31 ++++++++++++++++++++++
.../site/assets/icons/join-devlist-icon.svg | 16 +++++++++++
landing-pages/site/assets/scss/_accordion.scss | 20 ++++++++------
landing-pages/site/content/en/examples/_index.html | 21 +++++++++++----
.../site/layouts/shortcodes/accordion.html | 19 ++++++++++---
6 files changed, 107 insertions(+), 16 deletions(-)
diff --git a/landing-pages/site/assets/icons/ask-question-icon.svg
b/landing-pages/site/assets/icons/ask-question-icon.svg
new file mode 100644
index 0000000..33916d3
--- /dev/null
+++ b/landing-pages/site/assets/icons/ask-question-icon.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="60" height="55.876" viewBox="0
0 60 55.876">
+ <g id="Group_1432" data-name="Group 1432" transform="translate(1047.912
-646.062)">
+ <g id="Group_1428" data-name="Group 1428">
+ <path id="Path_1218" d="M-1002.844 701.938a.607.607 0 0
1-.432-.181l-11.713-11.849h-29.177a3.75 3.75 0 0 1-3.746-3.747v-36.352a3.75
3.75 0 0 1 3.746-3.747h52.507a3.751 3.751 0 0 1 3.747 3.747v36.352a3.751 3.751
0 0 1-3.747 3.747h-10.577v11.422a.608.608 0 0 1-.377.562.6.6 0 0
1-.231.046zm-41.322-54.66a2.533 2.533 0 0 0-2.53 2.531v36.352a2.533 2.533 0 0 0
2.53 2.53h29.431a.613.613 0 0 1 .433.181l10.85 10.978V689.3a.609.609 0 0 1
.608-.609h11.185a2.534 2.534 0 0 0 2.531-2.53v-36 [...]
+ </g>
+ <g id="Group_1429" data-name="Group 1429">
+ <path id="Path_1219" d="M-998.821 658.262H-1037a.608.608 0 0
1-.608-.608.608.608 0 0 1 .608-.608h38.183a.609.609 0 0 1 .609.608.609.609 0 0
1-.613.608z" fill="#017cee" data-name="Path 1219"/>
+ </g>
+ <g id="Group_1430" data-name="Group 1430">
+ <path id="Path_1220" d="M-998.821 667.678H-1037a.608.608 0 0
1-.608-.608.609.609 0 0 1 .608-.609h38.183a.609.609 0 0 1 .609.609.609.609 0 0
1-.613.608z" fill="#017cee" data-name="Path 1220"/>
+ </g>
+ <g id="Group_1431" data-name="Group 1431">
+ <path id="Path_1221" d="M-1008.759 677.093H-1037a.609.609 0 0
1-.608-.609.608.608 0 0 1 .608-.608h28.245a.608.608 0 0 1 .608.608.609.609 0 0
1-.612.609z" fill="#017cee" data-name="Path 1221"/>
+ </g>
+ </g>
+</svg>
diff --git a/landing-pages/site/assets/icons/bug-icon.svg
b/landing-pages/site/assets/icons/bug-icon.svg
new file mode 100644
index 0000000..7bfb35b
--- /dev/null
+++ b/landing-pages/site/assets/icons/bug-icon.svg
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="54.425" height="60" viewBox="0
0 54.425 60">
+ <g id="Group_1427" data-name="Group 1427" transform="translate(1175.26
-644)">
+ <g id="Group_1418" data-name="Group 1418">
+ <path id="Path_1210" d="M-1148.047 704a16.589 16.589 0 0
1-16.571-16.571v-18.75a.608.608 0 0 1 .608-.608h31.925a.609.609 0 0 1
.609.608v18.75A16.59 16.59 0 0 1-1148.047 704zm-15.355-34.713v18.142a15.372
15.372 0 0 0 15.355 15.355 15.372 15.372 0 0 0 15.354-15.355v-18.142z"
fill="#017cee" data-name="Path 1210"/>
+ </g>
+ <g id="Group_1419" data-name="Group 1419">
+ <path id="Path_1211" d="M-1135.784 668.679H-1137V665.2a8.054 8.054
0 0 0-8.045-8.044h-6.005a8.054 8.054 0 0 0-8.045 8.044v3.475h-1.216V665.2a9.272
9.272 0 0 1 9.261-9.261h6.005a9.271 9.271 0 0 1 9.261 9.261z" fill="#017cee"
data-name="Path 1211"/>
+ </g>
+ <g id="Group_1420" data-name="Group 1420">
+ <path id="Path_1212" d="M-1143.993 657.252a.608.608 0 0
1-.608-.608A12.657 12.657 0 0 1-1131.958 644a.608.608 0 0 1 .608.608.608.608 0
0 1-.608.608 11.441 11.441 0 0 0-11.427 11.428.608.608 0 0 1-.608.608z"
fill="#017cee" data-name="Path 1212"/>
+ </g>
+ <g id="Group_1421" data-name="Group 1421">
+ <path id="Path_1213" d="M-1151.975 657.252a.608.608 0 0
1-.608-.608 11.441 11.441 0 0 0-11.427-11.428.608.608 0 0 1-.608-.608.608.608 0
0 1 .608-.608 12.658 12.658 0 0 1 12.643 12.644.608.608 0 0 1-.608.608z"
fill="#017cee" data-name="Path 1213"/>
+ </g>
+ <g id="Group_1422" data-name="Group 1422">
+ <path id="Rectangle_473" d="M0 0h1.216v34.713H0z" fill="#017cee"
data-name="Rectangle 473" transform="translate(-1148.656 668.679)"/>
+ </g>
+ <g id="Group_1423" data-name="Group 1423">
+ <path id="Path_1214" d="M-1164.01 678.409h-11.25v-12.517a.608.608
0 0 1 .608-.608.608.608 0 0 1 .608.608v11.3h10.034a.608.608 0 0 1
.608.608.608.608 0 0 1-.608.609z" fill="#017cee" data-name="Path 1214"/>
+ </g>
+ <g id="Group_1424" data-name="Group 1424">
+ <path id="Path_1215" d="M-1174.652 700.959a.608.608 0 0
1-.608-.608v-12.517h11.25a.609.609 0 0 1 .608.609.608.608 0 0
1-.608.608h-10.034v11.3a.608.608 0 0 1-.608.608z" fill="#017cee"
data-name="Path 1215"/>
+ </g>
+ <g id="Group_1425" data-name="Group 1425">
+ <path id="Path_1216" d="M-1120.835 678.409h-11.25a.608.608 0 0
1-.608-.608.608.608 0 0 1 .608-.608h10.034v-11.3a.608.608 0 0 1
.608-.608.608.608 0 0 1 .608.608z" fill="#017cee" data-name="Path 1216"/>
+ </g>
+ <g id="Group_1426" data-name="Group 1426">
+ <path id="Path_1217" d="M-1121.443 700.959a.608.608 0 0
1-.608-.608v-11.3h-10.034a.609.609 0 0 1-.608-.608.609.609 0 0 1
.608-.609h11.25v12.517a.608.608 0 0 1-.608.608z" fill="#017cee" data-name="Path
1217"/>
+ </g>
+ </g>
+</svg>
diff --git a/landing-pages/site/assets/icons/join-devlist-icon.svg
b/landing-pages/site/assets/icons/join-devlist-icon.svg
new file mode 100644
index 0000000..48a9ec5
--- /dev/null
+++ b/landing-pages/site/assets/icons/join-devlist-icon.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="60" height="43.846" viewBox="0
0 60 43.846">
+ <g id="Group_1417" data-name="Group 1417" transform="translate(1242.912
-652.077)">
+ <g id="Group_1413" data-name="Group 1413">
+ <path id="Path_1208" d="M-1212.912 677.749a.6.6 0 0
1-.387-.139l-28.606-23.558.773-.939 28.22 23.24 28.22-23.24.773.939-28.607
23.558a.6.6 0 0 1-.386.139z" fill="#017cee" data-name="Path 1208"/>
+ </g>
+ <g id="Group_1414" data-name="Group 1414">
+ <path id="Rectangle_471" d="M0 0h1.216v32.117H0z" fill="#017cee"
data-name="Rectangle 471" transform="rotate(-50.527 109.86 1618.69)"/>
+ </g>
+ <g id="Group_1415" data-name="Group 1415">
+ <path id="Rectangle_472" d="M0 0h32.117v1.216H0z" fill="#017cee"
data-name="Rectangle 472" transform="rotate(-39.47 346.56 2076.918)"/>
+ </g>
+ <g id="Group_1416" data-name="Group 1416">
+ <path id="Path_1209" d="M-1185.953 695.923h-53.919a3.044 3.044 0 0
1-3.04-3.041v-37.764a3.044 3.044 0 0 1 3.04-3.041h53.919a3.044 3.044 0 0 1
3.041 3.041v37.764a3.044 3.044 0 0 1-3.041 3.041zm-53.919-42.63a1.827 1.827 0 0
0-1.824 1.825v37.764a1.827 1.827 0 0 0 1.824 1.825h53.919a1.827 1.827 0 0 0
1.825-1.825v-37.764a1.827 1.827 0 0 0-1.825-1.825z" fill="#017cee"
data-name="Path 1209"/>
+ </g>
+ </g>
+</svg>
diff --git a/landing-pages/site/assets/scss/_accordion.scss
b/landing-pages/site/assets/scss/_accordion.scss
index 7d9e96d..392e3e5 100644
--- a/landing-pages/site/assets/scss/_accordion.scss
+++ b/landing-pages/site/assets/scss/_accordion.scss
@@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
-
@import "colors";
details.accordion {
@@ -36,16 +35,21 @@ details.accordion {
display: none;
}
- .accordion__header {
- color: map_get($colors, cerulean-blue);
- margin-bottom: 20px;
- }
+ .accordion__summary-content {
+ display: flex;
- .accordion__description {
- color: map_get($colors, brownish-grey);
+ svg {
+ width: 60px;
+ margin-top: 28px;
+ margin-right: 42px;
+ }
+
+ &--header {
+ margin-bottom: 20px;
+ }
}
- .accordion__icon {
+ .accordion__arrow {
display: flex;
position: absolute;
width: 36px;
diff --git a/landing-pages/site/content/en/examples/_index.html
b/landing-pages/site/content/en/examples/_index.html
index a9b2fc3..4d6085b 100644
--- a/landing-pages/site/content/en/examples/_index.html
+++ b/landing-pages/site/content/en/examples/_index.html
@@ -43,16 +43,27 @@ menu:
{{< blocks/section color="white" >}}
<div class="col-10 mx-auto my-2">
- {{< accordion title="Accordion 1" description="Tincidunt ornare massa eget
egestas purus viverra." >}}
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Tellus at urna condimentum
mattis pellentesque id. Neque laoreet suspendisse interdum consectetur. Non
blandit massa enim nec.
- {{< /accordion >}}
- {{< accordion title="Accordion 2" description="Vestibulum morbi blandit
cursus risus at." >}}
+ {{< accordion title="Install Apache Airflow locally" description="Working
on an Open Source project such as Apache Airflow is very demanding but also
equally rewarding when you realize how many businesses use it every day." >}}
Magna ac placerat vestibulum lectus mauris ultrices. Nullam non nisi est
sit amet facilisis magna etiam tempor. Aliquet nec ullamcorper sit amet risus
nullam eget felis. Rhoncus aenean vel elit scelerisque mauris pellentesque.
{{< /accordion >}}
- {{< accordion title="Accordion 3" description="Id faucibus nisl tincidunt
eget." >}}
+ {{< accordion title="Install Apache Airflow on server"
description="Working on an Open Source project such as Apache Airflow is very
demanding but also equally rewarding when you realize how many businesses use
it every day." >}}
+ Amet mauris commodo quis imperdiet massa tincidunt nunc. Leo duis ut diam
quam nulla porttitor massa id neque.
+ {{< /accordion >}}
+ {{< accordion title="Install Apache Airflow on cluster"
description="Working on an Open Source project such as Apache Airflow is very
demanding but also equally rewarding when you realize how many businesses use
it every day." >}}
Amet mauris commodo quis imperdiet massa tincidunt nunc. Leo duis ut diam
quam nulla porttitor massa id neque.
{{< /accordion >}}
</div>
+<div class="col-10 mx-auto my-2">
+ {{< accordion title="Join the devlist" description="If you want to stay up
to date with what is going on in the project, want to discuss the features,
talk about fixes or simply ask a question - this is the first step to take."
logo_path="icons/join-devlist-icon.svg" >}}
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Tellus at urna condimentum
mattis pellentesque id. Neque laoreet suspendisse interdum consectetur. Non
blandit massa enim nec.
+ {{< /accordion >}}
+ {{< accordion title="Report a bug" description="If you want to stay up to
date with what is going on in the project, want to discuss the features, talk
about fixes or simply ask a question - this is the first step to take."
logo_path="icons/bug-icon.svg" >}}
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Tellus at urna condimentum
mattis pellentesque id. Neque laoreet suspendisse interdum consectetur. Non
blandit massa enim nec.
+ {{< /accordion >}}
+ {{< accordion title="Ask a question" description="If you want to stay up
to date with what is going on in the project, want to discuss the features,
talk about fixes or simply ask a question - this is the first step to take."
logo_path="icons/ask-question-icon.svg" >}}
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Tellus at urna condimentum
mattis pellentesque id. Neque laoreet suspendisse interdum consectetur. Non
blandit massa enim nec.
+ {{< /accordion >}}
+</div>
{{< /blocks/section >}}
{{< blocks/section color="white" >}}
diff --git a/landing-pages/site/layouts/shortcodes/accordion.html
b/landing-pages/site/layouts/shortcodes/accordion.html
index 7cb8891..2484392 100644
--- a/landing-pages/site/layouts/shortcodes/accordion.html
+++ b/landing-pages/site/layouts/shortcodes/accordion.html
@@ -17,13 +17,26 @@
under the License.
*/}}
+{{ $icon := .Get "logo_path" }}
<details class="accordion">
<summary>
- <div class="accordion__icon">
+ <div class="accordion__arrow">
{{ with resources.Get "icons/accordion-arrow.svg" }}{{ ( . |
minify).Content | safeHTML }}{{ end }}
</div>
- <h4 class="accordion__header subtitle__large--cerulean-blue">{{ .Get
"title" }}</h4>
- <span class="accordion__description
bodytext__medium--brownish-grey">{{ .Get "description" }}</span>
+ <div class="accordion__summary-content">
+ {{ if $icon }}
+ {{ with resources.Get $icon }}{{ ( . | minify).Content |
safeHTML }}{{ end }}
+ {{ end }}
+ <div>
+ <h4 class="accordion__summary-content--header
+ {{ if $icon }}
+ subtitle__large--greyish-brown
+ {{ else }}
+ subtitle__large--cerulean-blue
+ {{ end }}">{{ .Get "title" }}</h4>
+ <span class="bodytext__medium--brownish-grey">{{ .Get
"description" }}</span>
+ </div>
+ </div>
</summary>
<div class="accordion__content">{{ .Inner }}</div>
</details>
