Skip to content

Update UI to be more modern and fix issues #810

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
geekygirlsarah merged 3 commits into from
Oct 5, 2026
Merged

Update UI to be more modern and fix issues #810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a54711b
Revamp UI with improved styling and layout; introduce typography upda…
Oct 5, 2026
c8066f2
Enhance UI accessibility, refactor templates for dynamic nav highligh…
Oct 5, 2026
b2448a6
Merge branch 'main' into main
geekygirlsarah Oct 5, 2026
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
362 changes: 348 additions & 14 deletions web/static/css/app.css
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions web/templates/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="container">
<div class="row">
<div class="col py-5">
<h2 class="py-3">About Code Thesaurus</h2>
<h1 class="py-3">About Code Thesaurus</h1>
<p>Code Thesaurus is a system that allows you to compare structures of programming languages side-by-side
in an easy to learn way. It's a great method for learning a new programming language after you
already know one, or to quickly use as a cheat sheet or a reference tool. It's designed to help
Expand Down Expand Up @@ -43,7 +43,7 @@ <h2 class="py-3">Contributors</h2>
<p>
<a href="https://github.com/codethesaurus/codethesaur.us/graphs/contributors">
<img src="https://contrib.rocks/image?repo=codethesaurus/codethesaur.us&max=100"
alt="An image showing all of the contributors to Code Thesaurus so far"
alt="All contributors to Code Thesaurus so far"
class="img-fluid py-3" />
</a>
</p>
Expand Down
60 changes: 27 additions & 33 deletions web/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<!doctype html>
{% load templatetags %}
<html lang="en">
<head>
<meta charset="utf-8">
Expand All @@ -13,64 +14,57 @@
<meta property="og:url" content="{{ request.build_absolute_uri }}" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="{{request.scheme}}://{{request.META.HTTP_HOST}}/static/images/Logo-Book-Code.png" />

<!-- Twitter, Slack, etc. -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@CodeThesaurus">
<meta name="twitter:title" content="Code Thesaurus - {{ title }}">
<meta name="twitter:description" content="{{ description }}">
<meta name="twitter:image" content="{{request.scheme}}://{{request.META.HTTP_HOST}}/static/images/Logo-Book-Code.png">
<meta name="twitter:image:alt" content="Code Thesarus logo">
<meta name="twitter:image:alt" content="Code Thesaurus logo">
<!-- TODO: make these show number of languages/examples? -->
<!--
<meta name="twitter:label1" content="">
<meta name="twitter:data1" content="">
<meta name="twitter:label2" content="">
<meta name="twitter:data2" content="">
-->

<title>Code Thesaurus - {{ title }}</title>

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

<!-- Styles -->
<link rel="stylesheet" href="/static/css/app.css" />
<!-- Styles: app.css loads after pygments_colorful.css so project overrides win -->
<link rel="stylesheet" href="/static/css/pygments_colorful.css" />
<link rel="stylesheet" href="/static/css/app.css" />
</head>
<body>
<body id="top">
<a class="skip-link" href="#main-content">Skip to main content</a>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-blue">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-dark bg-blue" aria-label="Primary">
<div class="container">
<a class="navbar-brand" href="/">Code Thesaurus</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 text-end">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/statistics">Statistics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://docs.codethesaur.us">Docs</a>
</li>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 text-end">
{% nav_items as items %}
{% for item in items %}
<li class="nav-item">
<a class="nav-link" href="https://docs.codethesaur.us/contributing/">Contribute</a>
<a class="nav-link{% if item.is_active %} active{% endif %}" href="{{ item.url }}"
{% if item.is_active %}aria-current="page"{% endif %}
{% if item.external %}rel="noopener"{% endif %}>{{ item.label }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</nav>
</header>

<main role="main">
<main id="main-content" role="main">

{% block content %}{% endblock %}

Expand All @@ -81,13 +75,13 @@
<div class="container">
<div class="row">
<div class="col-8 justify-content-start">
<p>Made with &#x2764; by Sarah Withee and <a href="https://github.com/codethesaurus/codethesaur.us/graphs/contributors" target="_blank" rel="noreferrer"><span id="contributors"></span> contributors</a>.</p> <!-- x2764 the heart emoji code -->
<p>Made with &#x2764; by Sarah Withee and <a href="https://github.com/codethesaurus/codethesaur.us/graphs/contributors" target="_blank" rel="noopener noreferrer"><span id="contributors"></span> contributors</a>.</p> <!-- x2764 the heart emoji code -->
<p>Last GitHub update: <span id="last-update"></span></p>
<p>Want to help out? Check the project out on <a href="http://github.com/codethesaurus/" target="_blank" rel="noopener">GitHub</a>.</p>
</div>
<div class="col-4 order-sm-2 d-flex justify-content-end align-self-center">
<div class="flex-column">
<a class="toTop" href="#">
<a class="toTop" href="#top">
<span class="d-flex flex-column">
<i class="fa fa-angle-up fa-2x align-self-center" aria-hidden="true"></i>
Back to top
Expand Down
30 changes: 22 additions & 8 deletions web/templates/concept_card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,28 @@
{% load markdownify %}

<div class="card">
<div class="card ct-entry-card">
<div class="card-body">
{% if code %}
<div class="syntax">{{ code | safe }}</div>
{% endif %}
{% if comment %}
<div>
{{ comment|markdownify|linebreaksbr }}
{% if language %}
<p class="ct-cell-label">
<span class="ct-cell-label-name">{{ language.name }}</span>
<span class="ct-cell-label-detail">(version {{ language.version }})</span>
</p>
{% endif %}
{% if placeholder %}
<p class="ct-placeholder">
<i class="fa fa-circle-o" aria-hidden="true"></i>
<span>{{ placeholder }}</span>
</p>
{% endif %}
{% if code %}
<div class="syntax ct-code">{{ code | safe }}</div>
{% endif %}
{% if comment %}
{% if code %}<div class="ct-comment-divider" aria-hidden="true"></div>{% endif %}
<div class="ct-comment">
<span class="ct-comment-label">Note</span>
<div class="ct-comment-body">{{ comment|markdownify|linebreaksbr }}</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
80 changes: 33 additions & 47 deletions web/templates/concepts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,63 +8,65 @@ <h1 class="col-12">{{ title }}</h1>
</div>
<div class="row col-12">
<p>
The tables below show the syntactically highlighted
{{ concept_friendly_name }} topic for the
{% if languages|length > 1 %}{{ languages | length }}{% endif %}
language{{ languages | length | pluralize }}.
{% if languages|length > 1 %}
Here you can compare <strong>{{ concept_name }}</strong> across
{% for lang in languages %}{{ lang.name }} (version {{ lang.version }}){% if not forloop.last %} and {% endif %}{% endfor %},
side by side.
{% else %}
Here you can browse <strong>{{ concept_name }}</strong> for
{% for lang in languages %}{{ lang.name }} (version {{ lang.version }}){% endfor %}.
{% endif %}
</p>
<br />
<p>
If you see any incorrect information, please help us improve! Feel free to either
<p class="mt-3">
Spot something incorrect? You can
<a href="https://github.com/codethesaurus/codethesaur.us/issues/new/choose" rel="noopener">
create an issue
open an issue
</a>
or use the link{{ languages | length | pluralize }} at the bottom of
the language column{{ languages | length | pluralize }} to correct any
information.
or use the "Want to add or correct" link{{ languages | length | pluralize }} at the bottom of each column.
</p>
{% for lang in languages %}
{% if lang.is_incomplete %}
<div class="alert alert-link" role="alert">
{{ lang.name }} ({{ lang.version }})'s thesaurus is incomplete. Please help us improve by
<div class="alert alert-warning" role="alert">
{{ lang.name }} ({{ lang.version }}) is missing some entries. Help improve it by
<a href="https://github.com/codethesaurus/codethesaur.us/edit/main/web/thesauruses/{{ lang.key }}/{{ lang.version }}/{{ concept }}.json" rel="noopener">
adding or correcting information
</a>
for this language.
editing this file on GitHub
</a>.
</div>
{% endif %}
{% endfor %}
</div>

{% for category in categories %}
<div class="row">&nbsp;</div>
<div class="row"><h2>{{ category.key }}</h2></div>
<div class="card-group">
<div class="card">
<div class="card-body">
<h3 class="text-center">Concept</h3>
<div class="row mb-2 mt-4"><h2 class="category-header">{{ category.key }}</h2></div>
<div class="table-responsive">
<div class="card-group ct-table-header">
<div class="card ct-concept-header">
<div class="card-body py-3">
<h3 class="text-center mb-0">Concept</h3>
</div>
</div>
</div>
{% for lang in languages %}
<div class="card">
<div class="card-body">
<h3 class="text-center">{{ lang.name }}'s Implementation</h3>
{% for lang in languages %}
<div class="card">
<div class="card-body py-3">
<h3 class="text-center mb-0">{{ lang.name }}'s Implementation</h3>
</div>
</div>
{% endfor %}
</div>
{% endfor %}
</div>

{% for concept in category.concepts %}
<div class="card-group">
<div class="card">
<div class="card ct-concept-cell">
<div class="card-body">
<p class="ct-cell-label">Concept</p>
<div class="strong">
{{ concept.name | linebreaksbr }}
</div>
</div>
</div>
{% for d in concept.data %}
{% concept_card d.code d.comment %}
{% concept_card d.code d.comment d.placeholder d.language %}
{% endfor %}
</div>
{% endfor %}
Expand All @@ -76,7 +78,7 @@ <h3 class="text-center">{{ lang.name }}'s Implementation</h3>
<div class="card-body">&nbsp;</div>
</div>
{% for lang in languages %}
<div class="card" id="start-of-row">
<div class="card ct-contribute-cell">
<div class="card-body">
<a href="https://github.com/codethesaurus/codethesaur.us/edit/main/web/thesauruses/{{ lang.key }}/{{ lang.version }}/{{ concept }}.json">
Want to add or correct information for {{ lang.name }}?
Expand Down Expand Up @@ -105,20 +107,4 @@ <h3 class="text-center">{{ lang.name }}'s Implementation</h3>
</div>

</div>
<div class="modal fade" id="templateModal" tabindex="-1" aria-labelledby="templateModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="templateModalLabel">{{ concept }}.json</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<textarea class="form-control" rows="20" readonly style="min-width: 100%;max-width: 100%;"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{% endblock content %}
Loading
Loading