Skip to content

Commit

Permalink
Style provider listing evidence and website url
Browse files Browse the repository at this point in the history
  • Loading branch information
@hanopcan
hanopcan committed Jul 28, 2023
1 parent 1f39701 commit f332330
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 52 deletions.
3 changes: 3 additions & 0 deletions apps/theme/static/img/icon-external-link.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 15 additions & 4 deletions apps/theme/static_src/src/css/components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,35 +73,46 @@
.service-label {
@apply bg-green-100;
@apply rounded-3xl;
@apply mb-4;
@apply mb-2;
@apply mr-6;
@apply last:mr-0;
@apply px-4;
@apply py-2;
@apply py-1.5;
@apply text-sm;
@apply leading-normal;
}
.service-label:before {
@apply inline-block;
@apply relative;
@apply top-[2px];
@apply rounded-xl;
content: '';
@apply bg-green;
@apply w-4;
@apply h-4;
@apply mt-1;
@apply mr-2;
}
.info-circle {
.utility-icon {
@apply relative;
@apply -top-0.5;
@apply inline-block;
@apply leading-none;
@apply text-center;
@apply h-5;
@apply w-5;
}
.info-circle {
@apply border-2;
@apply border-solid;
@apply border-neutral-300;
@apply text-neutral-300;
@apply rounded-3xl;
}
.external-link-icon {
@apply m-0;
@apply inline-block;
}
.evidence-description p {
@apply my-1.5;
}
}
111 changes: 63 additions & 48 deletions apps/theme/templates/greencheck/directory_index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ <h1 class="text-5xl md:text-disp-sm md:mt-6 pb-4">I'm looking for</h1>

<details class="prose mt-6 md:mt-8 lg:mt-0">
<summary class="uppercase text-green">What is this directory for?
<span class="info-circle">&#x2139;</span>
<span class="utility-icon info-circle">&#x2139;</span>
</summary>
<p class="text-white mt-2">
The Green Web Directory is a searchable list which enables people to
Expand All @@ -34,57 +34,72 @@ <h1 class="text-5xl md:text-disp-sm md:mt-6 pb-4">I'm looking for</h1>
</section>
</div>

<section class="main-content container mx-auto">
<section class="main-content container mx-auto my-8">
{% regroup ordered_results by country.name as country_list %}
{% for country in country_list %}
<article class="md:grid md:grid-cols-5 lg:grid-cols-7 md:grid-rows-1 pt-4 pb-8 md:pt-8 md:pb-14">
<h2 class="text-2xl mb-2 mt-0">{{ country.grouper }}</h2>
<div class="col-span-3 lg:col-span-5">
{% for obj in country.list %}
<div class="border-b-2 border-neutral-200 mb-4">
<h4 class="mb-4 font-bold text-xl" id="{{ obj.id }}">{{ obj.name }}</h4>

<p class="text-neutral-700 mb-8 max-w-prose">
{% if obj.description %}
{{ obj.description }}
{% else %}
<small>If we had a description it would go here. So we need some graceful fallback copy to replace this.</small>
{% endif %}

<ul class="mb-4">
{% if obj.services.names %}
{% for service in obj.services.all %}<li class="service-label inline-block">{{ service.name }}</li>{% endfor %}
{% comment %}
Every host in our directory used to at least offer shared hosting.
Below is a placeholder to see how it would look with live data.
{% else %}
<li class="service-label inline-block">Compute: Shared Hosting for Websites</li>
{% endcomment %}
{% endif %}
</ul>
<section class="country-list mb-2 lg:mb-4">

<h2 class="text-2xl mt-4 mb-4 border-b-2 border-black">{{ country.grouper }}</h2>

{% for obj in country.list %}
<article class="provider-listing lg:w-3/4 my-6 lg:mr-0 lg:ml-auto py-6 border-b-2 border-neutral-200 last:border-0">
<div class="prose mx-auto lg:ml-0 lg:mr-auto">

<h4 class="inline-block mb-0 font-bold text-xl" id="{{ obj.id }}">{{ obj.name }}</h4>

{% if obj.website %}
<a target="_blank" rel="noopener noreferrer" href="https://{{ obj.website|urlencode }}">
<img class="utility-icon external-link-icon" width="16px" height="16px" src="{% static 'img/icon-external-link.svg' %}" alt="Visit {{ obj.name }}'s website"/>
</a>
{% endif %}

<p class="text-neutral-700 mt-2 mb-3">
{% if obj.description %}
{{ obj.description }}
{% else %}
<small class"text-sm">If we had a description it would go here. So we need some graceful fallback copy to replace this.</small>
{% endif %}
</p>

<ul class="mb-4 pl-0">
{% if obj.services.names %}
{% for service in obj.services.all %}<li class="service-label inline-block">{{ service.name }}</li>{% endfor %}
{% comment %}
Every host in our directory used to at least offer shared hosting.
Below is a placeholder to see how it would look with live data.
{% else %}
<li class="service-label inline-block">Compute: Shared Hosting for Websites</li>
{% endcomment %}
{% endif %}
</ul>

{% if obj.public_supporting_evidence %}
<details class="mb-4">
<summary>
<span class="">Published supporting evidence</span>
</summary>

<ul class="mt-3">
{% for evidence in obj.public_supporting_evidence %}
<li class="m-3">
<a class="my-2" target="_blank" rel="noopener noreferrer" href="{{ evidence.link }}">{{ evidence.title }}</a>

{% if evidence.description %}
<div class="evidence-description text-sm">
{{ evidence.description|linebreaks }}
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</details>
{% endif %}
</div>
</article>
{% endfor %}
</section>

</p>
{% if obj.public_supporting_evidence %}
<details class="mb-4">
<summary>
<span class="">Published supporting evidence</span>
</summary>
<ul>
{% for evidence in obj.public_supporting_evidence %}
<li class="m-3">
<a class="py-2"href="{{ evidence.link }}">{{ evidence.title }}</a>
<div class="description py-2">
<small>{{ evidence.description|linebreaks }}</small>
</div>
</li>
{% endfor %}
</ul>
</details>
{% endif %}
</div>
{% endfor %}
</div>
</article>
{% endfor %}
</section>

Expand Down

0 comments on commit f332330

Please sign in to comment.