groove/Part-DB-server
1
0
Fork 0
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-12-30 23:09:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implemented a new darkmode selector using bootstrap 5.3 color mode

Browse source
This commit is contained in:
Jan Böhmer 2023-06-19 01:08:11 +02:00
parent 0aec9419ec
commit 6df65a0b9d
15 changed files with 1465 additions and 1412 deletions
Download patch file Download diff file Expand all files Collapse all files

16
templates/_navbar.html.twig
View file

@ -1,6 +1,6 @@
{% import "helper.twig" as helper %}
<nav class="navbar navbar-expand-md navbar-light bg-light border-bottom shadow-sm fixed-top py-0" id="navbar">
<nav class="navbar navbar-expand-md bg-body-tertiary border-bottom shadow-sm fixed-top py-0" id="navbar">
<div class="container-fluid">
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#sidebar-container">
<span class="visually-hidden">{% trans %}sidebar.toggle{% endtrans %}</span>
@ -61,11 +61,15 @@
aria-hidden="true"></i> {% trans %}user.login{% endtrans %}</a>
{% endif %}
<li role="separator" class="dropdown-divider" id="toggleDarkmodeSeparator"></li>
<div class="px-4 px-3" id="toggleDarkmodeContainer hidden" {{ stimulus_controller('common/darkmode') }}>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="toggleDarkmode" {{ stimulus_action('common/darkmode', 'toggleDarkmode', 'change') }}>
<label class="form-check-label"
for="toggleDarkmode">{% trans %}ui.toggle_darkmode{% endtrans %}</label>
<div class="px-4 py-0 d-flex justify-content-between align-items-baseline">
<span>{% trans %}ui.toggle_darkmode{% endtrans %}</span>
<div class="btn-group" role="group" {{ stimulus_controller('common/darkmode') }}>
<input type="radio" class="btn-check" name="darkmode" id="darkmode-light" autocomplete="off" value="light">
<label class="btn btn-outline-secondary" for="darkmode-light" title="{% trans %}ui.darkmode.light{% endtrans %}"><i class="fa-solid fa-sun"></i></label>
<input type="radio" class="btn-check" name="darkmode" id="darkmode-dark" autocomplete="off" value="dark">
<label class="btn btn-outline-secondary" for="darkmode-dark" title="{% trans %}ui.darkmode.dark{% endtrans %}"><i class="fa-solid fa-moon"></i></label>
<input type="radio" class="btn-check" name="darkmode" id="darkmode-auto" autocomplete="off" value="auto" checked>
<label class="btn btn-outline-secondary" for="darkmode-auto" title="{% trans %}ui.darkmode.auto{% endtrans %}"><i class="fa-solid fa-circle-half-stroke"></i></label>
</div>
</div>
<li role="separator" class="dropdown-divider"></li>

2
templates/components/tree_macros.html.twig
View file

@ -34,7 +34,7 @@
<ul class="dropdown-menu" aria-labelledby="dropdownCat">
{{ _self.sidebar_dropdown('tree-categories') }}
</ul>
<input type="search" class="form-control bg-light border-0" placeholder="{% trans %}search.placeholder{% endtrans %}" {{ stimulus_action('elements/sidebar_tree', 'searchInput') }}>
<input type="search" class="form-control bg-body-tertiary border-0" placeholder="{% trans %}search.placeholder{% endtrans %}" {{ stimulus_action('elements/sidebar_tree', 'searchInput') }}>
</div>
<div id="{{ id }}Tree" {{ stimulus_target('elements/sidebar_tree', 'tree') }}></div>

2
templates/homepage.html.twig
View file

@ -1,7 +1,7 @@
{% extends "base.html.twig" %}
{% block content %}
<div class="rounded p-4" style="background-color: var(--bs-gray-300);">
<div class="rounded p-4 bg-body-secondary">
<h1 class="display-3">{{ partdb_title }}</h1>
<h4>
{% trans %}version.caption{% endtrans %}: {{ shivas_app_version }}

2
templates/parts/info/_part_lots.html.twig
View file

@ -42,7 +42,7 @@
<td>
<h6>
{% if lot.owner %}
<span class="badge bg-light mb-1" title="{% trans %}part_lot.owner{% endtrans %}">
<span class="badge bg-body-tertiary mb-1" title="{% trans %}part_lot.owner{% endtrans %}">
{{ helper.user_icon_link(lot.owner) }}
</span><br>
{% endif %}

6
templates/parts/info/_picture.html.twig
View file

@ -12,10 +12,10 @@
{# @var pic App\Entity\Attachments\Attachment #}
<div class="carousel-item {% if loop.first %}active{% endif %}">
<a href="{{ entity_url(pic, 'file_view') }}" data-turbo="false" target="_blank" rel="noopener">
<img class="d-block w-100 img-fluid img-thumbnail bg-light part-info-image" src="{{ entity_url(pic, 'file_view') }}" alt="">
<img class="d-block w-100 img-fluid img-thumbnail bg-body-tertiary part-info-image" src="{{ entity_url(pic, 'file_view') }}" alt="">
<div class="mask"></div>
<div class="carousel-caption-hover">
<div class="carousel-caption">
<div class="carousel-caption text-body ">
<div><b>{{ pic.name }}</b></div>
<div>{% if pic.filename %}({{ pic.filename }}) {% endif %}</div>
<div>{{ entity_type_label(pic.element) }}</div>
@ -38,5 +38,5 @@
</div>
{% else %}
<img src="{{ asset('img/part_placeholder.svg') }}" class="img-fluid img-thumbnail bg-light mb-2" alt="Part main image" height="300" width="300">
<img src="{{ asset('img/part_placeholder.svg') }}" class="img-fluid img-thumbnail bg-body-tertiary mb-2" alt="Part main image" height="300" width="300">
{% endif %}

4
templates/projects/info/_info.html.twig
View file

@ -6,10 +6,10 @@
<div class="col-md-3 col-lg-4 col-4 mt-auto mb-auto">
{% if project.masterPictureAttachment %}
<a href="{{ entity_url(project.masterPictureAttachment, 'file_view') }}" data-turbo="false" target="_blank" rel="noopener">
<img class="d-block w-100 img-fluid img-thumbnail bg-light part-info-image" src="{{ entity_url(project.masterPictureAttachment, 'file_view') }}" alt="">
<img class="d-block w-100 img-fluid img-thumbnail bg-body-tertiary part-info-image" src="{{ entity_url(project.masterPictureAttachment, 'file_view') }}" alt="">
</a>
{% else %}
<img src="{{ asset('img/part_placeholder.svg') }}" class="img-fluid img-thumbnail bg-light mb-2 " alt="Part main image" height="300" width="300">
<img src="{{ asset('img/part_placeholder.svg') }}" class="img-fluid img-thumbnail bg-body-tertiary mb-2 " alt="Part main image" height="300" width="300">
{% endif %}
</div>
<div class="col-md-9 col-lg-8 col-7">