DGNum/Stirling-PDF
14
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity

Update: change update icon + animation

Browse source
This commit is contained in:
Rectos VX 2024-05-09 17:31:12 +04:00
parent 72ba97a00c
commit 3a27d97811
3 changed files with 30 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/main/resources/static/css/home.css
View file

@ -75,11 +75,11 @@
}
#tool-icon {
height: 100%;
height: 100%;
}
#tool-text {
margin: 0.5rem 0.5rem 0rem;
margin: 0.5rem 0.5rem 0rem;
}
.card-title {
@ -135,3 +135,16 @@ margin: 0.5rem 0.5rem 0rem;
}
}
.update-notice {
animation: scale 1s infinite alternate;
}
@keyframes scale {
0% {
transform: scale(0.96);
}
100% {
transform: scale(1);
}
}

2
src/main/resources/templates/fragments/card.html
View file

@ -1,7 +1,7 @@
<div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}"
th:data-bs-tags="${tags}">
<a th:href="${cardLink}">
<div class="d-flex align-items-center"> <!-- Add a flex container to align the SVG and title -->
<div class="d-flex align-items-center">
<div id="tool-icon" class="icon" alt="icon" th:class="@{${toolGroup}}">
<span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}"></span>

16
src/main/resources/templates/home.html
View file

@ -30,17 +30,17 @@
<input type="text" id="searchBar" onkeyup="filterCards()" th:placeholder="#{home.searchBar}" autofocus>
<div class="features-container">
<div th:if="${@shouldShow}" class="feature-card favorite" id="update-link" style="display: none;">
<a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" class="nav-link text-body-secondary px-2" rel="noopener">
<div th:if="${@shouldShow}" class="feature-card favorite update-notice" id="update-link" style="display: none;">
<a href="https://github.com/Stirling-Tools/Stirling-PDF/releases" target="_blank" rel="noopener">
<div class="d-flex align-items-center">
<!-- Replace the existing icon markup with the new one -->
<div class="icon" alt="icon" th:class="advance">
<img class="card-icon home-card-icon home-card-icon-colour" src="images/update.svg" alt="Icon" width="30" height="30">
</div>
<!-- End of icon markup replacement -->
<h5 class="card-title lookatme ms-2" th:text="#{settings.update}" th:data-lookatme-text="#{settings.update}"></h5>
<div id="tool-icon" class="advance" alt="icon">
<span class="material-symbols-rounded nav-icon">update</span>
</div>
<div id="tool-text">
<h5 class="card-title" th:text="#{settings.update}"></h5>
<p class="card-text" id="app-update"></p>
</div>
</div>
</a>
</div>