Skip to content
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.

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

Footer icons dimensions #1340

Closed
koeaw opened this issue Nov 4, 2024 · 0 comments · Fixed by #1427 or #1428
Closed

Footer icons dimensions #1340

koeaw opened this issue Nov 4, 2024 · 0 comments · Fixed by #1427 or #1428
Labels
assets Static files, components defining or contributing to appearance UI-UX Appearance, coherence, usability of user-facing parts (frontend, user interface)

Comments

@koeaw
Copy link
Contributor

koeaw commented Nov 4, 2024

We don't set the width and height of the icons in the footer in a consistent way, which doesn't allow easy adjustments.

The Git and Swagger icons are set via HTML attributes:

{% if swagger_ui %}
<a href="{{ swagger_ui }}" title="Swagger UI">
<img src="{% static "/img/Swagger-logo.png" %}" height="24px">
</a>
{% endif %}
{% git_repository_url as repository_url %}
{% if repository_url %}
<a href="{{ repository_url }}" title="Git repository">
<img src="{% static "/img/Git-Icon-1788C.png" %}" height="24px">
</a>

The ACDH-CH logo's height is set via a CSS ID selector:

/* project/site logo in footer */
#logo {
height: 1.5em;
}

The API icon's size is determined by a site-wide class for Material Icons:

.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
/* preferred icon size */
font-size: 24px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}

A shared class, e.g. icons or app-icons, apis-icons (to avoid clashes with other libraries) would be preferable.

@koeaw koeaw added the UI-UX Appearance, coherence, usability of user-facing parts (frontend, user interface) label Nov 4, 2024
@koeaw koeaw added the assets Static files, components defining or contributing to appearance label Nov 12, 2024
b1rger added a commit that referenced this issue Nov 21, 2024
Introduce *one* place to specify dimensions for footer icons in the CSS
file by adding an `icon` class to the elements. This replaces the inline
`height` settings, the CSS `#logo` definition and overwrites the
`height` and `font-size` settings for the material symbol if used in the
footer with the icon class.

Closes: #1340
b1rger added a commit that referenced this issue Nov 25, 2024
Introduce *one* place to specify dimensions for footer icons in the CSS
file by adding an `icon` class to the elements. This replaces the inline
`height` settings, the CSS `#logo` definition and overwrites the
`height` and `font-size` settings for the material symbol if used in the
footer with the icon class.

Closes: #1340
b1rger added a commit that referenced this issue Nov 25, 2024
Introduce *one* place to specify dimensions for footer icons in the CSS
file by adding an `icon` class to the elements. This replaces the inline
`height` settings, the CSS `#logo` definition and overwrites the
`height` and `font-size` settings for the material symbol if used in the
footer with the icon class.

Closes: #1340
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
assets Static files, components defining or contributing to appearance UI-UX Appearance, coherence, usability of user-facing parts (frontend, user interface)
Projects
None yet
1 participant