Skip to content

Commit 66ebe05

Browse files
committedMay 18, 2023
Restyle programmatically generated summary pages
The applications, code library and articles pages, which are all generated using Liquid, were restyled so that each item on the page can be clicked to trigger a link to the associated page. Previously these pages used a "More info" link on each item: this was removed.
1 parent 9bfc402 commit 66ebe05

File tree

3 files changed

+108
-85
lines changed

3 files changed

+108
-85
lines changed
 

‎articles.html

+32-25
Original file line numberDiff line numberDiff line change
@@ -62,28 +62,35 @@ <h1 role="heading">
6262

6363
<p>This page lists various articles that discuss various aspects of Delphi programming. Choose articles of interest from the list below. Many articles include source code examples in Delphi Pascal.</p>
6464

65-
{% assign sorted_articles = site.articles | where: "index", true | sort: "article" | reverse %}
66-
{% for article in sorted_articles %}
67-
{% assign test = forloop.index | modulo: 2 %}
68-
{% if test <> 0 %}<div class="row">{% endif %}
69-
<article role="section" aria-labelledby="art-{{ article.article | escape }}-head">
70-
<div class="col-md-6">
71-
<div class="panel panel-primary">
72-
<header class="panel-heading" id="art-{{ article.article | escape }}-head">
73-
<h2>{{ article.title | escape }}</h2>
74-
</header>
75-
<div class="panel-body">
76-
<p>{{ article.summary | escape }}</p>
77-
</div>
78-
<footer class="panel-footer text-right">
79-
<a href="/articles/article-{{ article.article }}" aria-label="Read &quot;{{ article.title | escape }}&quot;">Read the article</a>
80-
</footer>
81-
</div>
82-
</div>
83-
</article>
84-
{% if test == 0 or forloop.last %}
85-
</div> <!-- ./row -->
86-
<!-- Clear the lg cols if their content doesn't match in height -->
87-
<div class="clearfix visible-md-block" role="presentation"></div>
88-
{% endif %}
89-
{% endfor %}
65+
{% assign sorted_articles = site.articles | where: "index", true | sort: "article" | reverse -%}
66+
<div class="panel-list-group">
67+
68+
<div class="list-group">
69+
{% for article in sorted_articles -%}
70+
{% assign test = forloop.index | modulo: 2 -%}
71+
{% if test <> 0 %}
72+
<div class="row">
73+
{% endif %}
74+
<div class="col-sm-6">
75+
<a class="list-group-item" href="/articles/article-{{ article.article }}" aria-label="Read &quot;{{ article.title | escape }}&quot;">
76+
<article role="section" aria-labelledby="art-{{ article.article | escape }}-head">
77+
<div class="panel panel-primary">
78+
<header class="panel-heading" id="art-{{ article.article | escape }}-head">
79+
<h2>{{ article.title | escape }}</h2>
80+
</div><!-- /.panel .panel-primary -->
81+
<div class="panel-body">
82+
<p>{{ article.summary | escape }}</p>
83+
</div> <!-- ./panel-body -->
84+
</article>
85+
</a> <!-- list-group-item -->
86+
</div> <!-- ./col-sm-6 -->
87+
{% if test == 0 or forloop.last %}
88+
</div> <!-- ./row -->
89+
90+
<!-- Clear the lg cols if their content doesn't match in height -->
91+
<div class="clearfix visible-sm-block" role="presentation"></div>
92+
{% endif %}
93+
{%- endfor %}
94+
</div> <!-- ./list-group -->
95+
96+
</div> <!-- ./panel-list-group -->

‎codelib.html

+39-31
Original file line numberDiff line numberDiff line change
@@ -11,34 +11,42 @@ <h1 roll="heading">
1111

1212
<p>Each library member's page provides links that can be used to download the its source.</p>
1313

14-
{% assign projects = site.software | where: "group", "lib" %}
15-
{% assign projects = projects | sort: "priority" %}
16-
{% for project in projects %}
17-
{% assign test = forloop.index | modulo: 2 %}
18-
{% if test <> 0 %}<div class="row">{% endif %}
19-
<section role="section" aria-labelledby="{{ program.id | escape }}-head">
20-
<div class="col-sm-6">
21-
<div class="panel panel-primary">
22-
<header class="panel-heading" id="{{ program.id | escape }}-head">
23-
<h2>{{ project.title | escape }}</h2>
24-
</header>
25-
<div class="panel-body">
26-
<p>{{ project.summary | escape }}</p>
27-
{% if project.status == "mothballed" %}
28-
<p class="alert alert-warning small" role="alert"><span class="fa fa-flag fa-lg fa-x-pad-right" aria-hidden="true"></span><span class="sr-only">Note</span> This library project is mothballed. It is being neither developed nor supported.</p>
29-
{% elsif project.status == "obsolete" %}
30-
<p class="alert alert-danger small" role="alert"><span class="fa fa-exclamation-triangle fa-lg fa-x-pad-right" aria-hidden="true"></span><span class="sr-only">Note</span> This library project is obsolete. It is being neither developed nor supported and is here only for historical reasons.</p>
31-
{% endif %}
32-
</div>
33-
<div class="panel-footer text-right">
34-
<a href="{{ project.url | remove: ".html" }}" aria-label="{{ project.title | escape }} page on {{ site.data.core.orig-site-name | escape }}">More info</a>
35-
</div>
36-
</div>
37-
</div>
38-
</section>
39-
{% if test == 0 or forloop.last %}
40-
</div> <!-- ./row -->
41-
<!-- Clear the lg cols if their content doesn't match in height -->
42-
<div class="clearfix visible-sm-block" role="presentation"></div>
43-
{% endif %}
44-
{%endfor %}
14+
{% assign projects = site.software | where: "group", "lib" -%}
15+
{% assign projects = projects | sort: "priority" -%}
16+
<div class="panel-list-group">
17+
18+
<div class="list-group">
19+
{% for project in projects -%}
20+
{% assign test = forloop.index | modulo: 2 -%}
21+
{% if test <> 0 %}
22+
<div class="row">
23+
{% endif %}
24+
<div class="col-sm-6">
25+
<a class="list-group-item" href="{{ project.url | remove: ".html" }}" aria-label="{{ project.title | escape }} page on {{ site.data.core.orig-site-name | escape }}">
26+
<section role="section" aria-labelledby="{{ program.id | escape }}-head">
27+
<div class="panel panel-primary">
28+
<header class="panel-heading" id="{{ program.id | escape }}-head">
29+
<h2>{{ project.title | escape }}</h2>
30+
</header>
31+
</div><!-- /.panel .panel-primary -->
32+
<div class="panel-body">
33+
<p>{{ project.summary | escape }}</p>
34+
{% if project.status == "mothballed" -%}
35+
<p class="alert alert-warning small" role="alert"><span class="fa fa-flag fa-lg fa-x-pad-right" aria-hidden="true"></span><span class="sr-only">Note</span> This library project is mothballed. It is being neither developed nor supported.</p>
36+
{% elsif project.status == "obsolete" -%}
37+
<p class="alert alert-danger small" role="alert"><span class="fa fa-exclamation-triangle fa-lg fa-x-pad-right" aria-hidden="true"></span><span class="sr-only">Note</span> This library project is obsolete. It is being neither developed nor supported and is here only for historical reasons.</p>
38+
{% endif -%}
39+
</div> <!-- ./panel-body -->
40+
</section>
41+
</a> <!-- list-group-item -->
42+
</div> <!-- ./col-sm-6 -->
43+
{% if test == 0 or forloop.last %}
44+
</div> <!-- ./row -->
45+
46+
<!-- Clear the lg cols if their content doesn't match in height -->
47+
<div class="clearfix visible-sm-block" role="presentation"></div>
48+
{% endif %}
49+
{%- endfor %}
50+
</div> <!-- ./list-group -->
51+
52+
</div> <!-- ./panel-list-group -->

‎programs.html

+37-29
Original file line numberDiff line numberDiff line change
@@ -13,32 +13,40 @@ <h1 roll="heading">
1313

1414
{% assign apps = site.software | where: "group", "apps" %}
1515
{% assign apps = apps | sort: "priority" %}
16-
{% for program in apps %}
17-
{% assign test = forloop.index | modulo: 2 %}
18-
{% if test <> 0 %}<div class="row">{% endif %}
19-
<section role="section" aria-labelledby="{{ program.id | escape }}-head">
20-
<div class="col-sm-6">
21-
<div class="panel panel-primary">
22-
<header class="panel-heading" id="{{ program.id | escape }}-head">
23-
<h2>{{ program.title | escape }}</h2>
24-
</header>
25-
<div class="panel-body">
26-
<p>{{ program.summary | escape }}</p>
27-
{% if program.status == "mothballed" %}
28-
<p class="alert alert-warning small" role="alert"><span class="fa fa-flag fa-lg fa-x-pad-right" aria-hidden="true"></span><span class="sr-only">Note</span> This program is mothballed. It is being neither developed nor supported.</p>
29-
{% elsif program.status == "obsolete" %}
30-
<p class="alert alert-danger small" role="alert"><span class="fa fa-exclamation-triangle fa-lg fa-x-pad-right" aria-hidden="true"></span><span class="sr-only">Note</span> This program is obsolete. It is being neither developed nor supported and is here only for historical reasons.</p>
31-
{% endif %}
32-
</div>
33-
<div class="panel-footer text-right">
34-
<a href="{{ program.url | remove: ".html" }}" aria-label="{{ program.title | escape }} page on {{ site.data.core.orig-site-name | escape }}">More info</a>
35-
</div>
36-
</div>
37-
</div>
38-
</section>
39-
{% if test == 0 or forloop.last %}
40-
</div> <!-- ./row -->
41-
<!-- Clear the lg cols if their content doesn't match in height -->
42-
<div class="clearfix visible-sm-block" role="presentation"></div>
43-
{% endif %}
44-
{%endfor %}
16+
<div class="panel-list-group">
17+
18+
<div class="list-group">
19+
{% for program in apps -%}
20+
{% assign test = forloop.index | modulo: 2 -%}
21+
{% if test <> 0 %}
22+
<div class="row">
23+
{% endif %}
24+
<div class="col-sm-6">
25+
<a class="list-group-item" href="{{ program.url | remove: ".html" }}" aria-label="{{ program.title | escape }} page on {{ site.data.core.orig-site-name | escape }}">
26+
<section role="section" aria-labelledby="{{ program.id | escape }}-head">
27+
<div class="panel panel-primary">
28+
<header class="panel-heading" id="{{ program.id | escape }}-head">
29+
<h2>{{ program.title | escape }}</h2>
30+
</header>
31+
</div><!-- /.panel .panel-primary -->
32+
<div class="panel-body">
33+
<p>{{ program.summary | escape }}</p>
34+
{% if program.status == "mothballed" -%}
35+
<p class="alert alert-warning small" role="alert"><span class="fa fa-flag fa-lg fa-x-pad-right" aria-hidden="true"></span><span class="sr-only">Note</span> This program is mothballed. It is being neither developed nor supported.</p>
36+
{% elsif program.status == "obsolete" -%}
37+
<p class="alert alert-danger small" role="alert"><span class="fa fa-exclamation-triangle fa-lg fa-x-pad-right" aria-hidden="true"></span><span class="sr-only">Note</span> This program is obsolete. It is being neither developed nor supported and is here only for historical reasons.</p>
38+
{% endif -%}
39+
</div> <!-- ./panel-body -->
40+
</section>
41+
</a> <!-- list-group-item -->
42+
</div> <!-- ./col-sm-6 -->
43+
{% if test == 0 or forloop.last %}
44+
</div> <!-- ./row -->
45+
46+
<!-- Clear the lg cols if their content doesn't match in height -->
47+
<div class="clearfix visible-sm-block" role="presentation"></div>
48+
{% endif %}
49+
{%- endfor %}
50+
</div> <!-- ./list-group -->
51+
52+
</div> <!-- ./panel-list-group -->

0 commit comments

Comments
 (0)