Skip to content

Add a dedicated stylesheet#190

Merged
edan-bainglass merged 2 commits into
aiidalab:mainfrom
edan-bainglass:app-styles
Dec 17, 2024
Merged

Add a dedicated stylesheet#190
edan-bainglass merged 2 commits into
aiidalab:mainfrom
edan-bainglass:app-styles

Conversation

@edan-bainglass

@edan-bainglass edan-bainglass commented Dec 17, 2024

Copy link
Copy Markdown
Member

This PR moves CSS styles to a local stylesheet and loads it in the main notebook. It also adds more CSS classes for app containers. See aiidalab/aiidalab-qe#983 for an example.

Note that for feature logos, other than images (local or url-linked), you can also use Font Awesome icons.

For example, you can use an <img> tag:

<a
  class="feature"
  href="{appbase}/my_notebook.ipynb"
  target="_blank">
  <img
    class="feature-logo"
    src="{appbase}/<image-folder>/image.png"  -> can also use a link to an online image
    alt="My feature" />
  <div class="feature-label">My feature</div>
</a>

or an <i> tag for Font Awesome icons

<a
  class="feature"
  href="{appbase}/my_notebook.ipynb"
  target="_blank">
  <i class="fa fa-whatever feature-logo"></i>
  <div class="feature-label">My feature</div>
</a>

where fa-whatever is a Font Awesome 4 CSS class (ipywidgets 7 supports FA4)

@mikibonacci

Copy link
Copy Markdown
Member

Hi @edan-bainglass, thanks for the work, LGTM!

@edan-bainglass edan-bainglass merged commit c66b365 into aiidalab:main Dec 17, 2024
edan-bainglass added a commit to aiidalab/aiidalab-docker-stack that referenced this pull request Dec 17, 2024
* Update aiidalab-home to 24.12.0
* Update aiidalab-home to 24.12.1 (including aiidalab/aiidalab-home#190)

---------

Co-authored-by: Edan Bainglass <45081142+edan-bainglass@users.noreply.github.com>
edan-bainglass added a commit to aiidalab/aiidalab-qe that referenced this pull request Dec 18, 2024
This PR uses new CSS classes introduced in aiidalab/aiidalab-home#190 to redesign the app's container in the home app.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants