Skip to content

feat(): Introduce catalog layout for sources catalog page #126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 21, 2019
Merged

feat(): Introduce catalog layout for sources catalog page #126

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c589cca
feat(): Introduce catalog layout for sources catalog page
bart-tonik Oct 16, 2019
b505a52
fix(): Add sorted groups
bart-tonik Oct 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 67 additions & 61 deletions src/connections/sources/catalog/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,70 +6,76 @@ icon: symbols/connections.svg
excerpt: Detailed information about each destination. Learn how our API methods are implemented for that destination.
---

<div class="l-chiclet-collection">
{% assign app_sources = site.data.catalog.sources.sources %}
{% assign cloud_sources = site.data.catalog.cloud_sources.sources %}
{% assign sources = app_sources | concat: cloud_sources | uniq: 'display_name' | sort: 'display_name' %}
<div class="destinations-catalog">

{% for source in sources %}
{% assign doc_path = source.name | replace: "catalog", "connections/sources" %}
{% if source.categories contains 'website'%}
<!-- Show AJs first -->
<a class="chiclet-item centered" href="{{doc_path | relative_url}}">
{% if source.logos.mark != '' %}
{% assign class = "logo mark" %}
{% else %}
{% assign class = "logo full" %}
{% endif %}
{% assign items = site.data.catalog.sources.sources %}
{% assign categories_array = "" | split: ',' %}

<div class="{{class}}">
{% if source.logos.mark != '' %}
<img alt="{{source.display_name}}" src="{{source.logos.mark}}" />
{% else %}
<img alt="{{source.display_name}}" src="{{source.logos.logo}}" />
{% endif %}
</div>
<div class="content">
<p class="title">{{ source.display_name }}</p>
</div>
</a>
{% elsif source.categories contains 'server'%}
<a class="chiclet-item centered" href="{{doc_path | relative_url}}">
{% if source.logos.mark != '' %}
{% assign class = "logo mark" %}
{% else %}
{% assign class = "logo full" %}
{% endif %}

<div class="{{class}}">
{% if source.logos.mark != '' %}
<img alt="{{source.display_name}}" src="{{source.logos.mark}}" />
{% else %}
<img alt="{{source.display_name}}" src="{{source.logos.logo}}" />
{% endif %}
</div>
<div class="content">
<p class="title">{{ source.display_name }}</p>
</div>
</a>
{% else %}
<a class="chiclet-item centered" href="{{doc_path | relative_url}}">
{% if source.logos.mark != '' %}
{% assign class = "logo mark" %}
{% else %}
{% assign class = "logo full" %}
{% for item in items %}
{% assign main_category = item.categories[0] %}
{% unless categories_array contains main_category %}
{% if main_category and main_category != "" %}
{% assign categories_array = categories_array | push: main_category %}
{% endif %}
{% endunless %}
{% endfor %}
{% for item in items %}
{% assign main_category = item.categories[0] %}
{% unless categories_array contains main_category %}
{% unless main_category and main_category != "" %}
{% assign categories_array = categories_array | push: 'Uncategorized' %}
{% endunless %}
{% endunless %}
{% endfor %}

<div class="{{class}}">
{% if source.logos.mark != '' %}
<img alt="{{source.display_name}}" src="{{source.logos.mark}}" />
{% else %}
<img alt="{{source.display_name}}" src="{{source.logos.logo}}" />
{% endif %}
</div>
<div class="content">
<p class="title">{{ source.display_name }}</p>
{% for category in categories_array %}
<div class="destinations-catalog__section" id="{{ category.name | slugify }}">
<h2 class="destinations-catalog__title">
{{ category }}
</h2>
<div class="flex flex--wrap waffle waffle--large">
{% for item in items %}
{% if item.categories[0] and item.categories[0] != "" %}
{% if item.categories[0] == category %}
<div class="flex__column flex__column--6 flex__column--4@medium">
<a class="thumbnail-integration" href="{{ doc_path | relative_url }}">
<div class="thumbnail-integration__content flex flex--stack flex--center flex--middle">
<div class="thumbnail-integration__logo">
{% if item.logos.mark != '' %}
<img class="image" alt="{{item.display_name}}" src="{{item.logos.mark}}" />
{% else %}
<img class="image" alt="{{item.display_name}}" src="{{item.logos.logo}}" />
{% endif %}
</div>
<h5>{{ item.display_name }}</h5>
</div>
{% if item.status == 'PUBLIC_BETA' %}
<p class="thumbnail-integration__label">Beta</p>
{% endif %}
</a>
</div>
{% endif %}
{% else %}
<div class="flex__column flex__column--6 flex__column--4@medium">
<a class="thumbnail-integration" href="{{ doc_path | relative_url }}">
<div class="thumbnail-integration__content flex flex--stack flex--center flex--middle">
<div class="thumbnail-integration__logo">
{% if item.logos.mark != '' %}
<img class="image" alt="{{item.display_name}}" src="{{item.logos.mark}}" />
{% else %}
<img class="image" alt="{{item.display_name}}" src="{{item.logos.logo}}" />
{% endif %}
</div>
<h5>{{ item.display_name }}</h5>
</div>
{% if item.status == 'PUBLIC_BETA' %}
<p class="thumbnail-integration__label">Beta</p>
{% endif %}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</a>
{% endif %}
</div>
{% endfor %}
</div>