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 { #tool-icon {
height: 100%; height: 100%;
} }
#tool-text { #tool-text {
margin: 0.5rem 0.5rem 0rem; margin: 0.5rem 0.5rem 0rem;
} }
.card-title { .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)}" <div th:fragment="card" class="feature-card" th:id="${id}" th:if="${@endpointConfiguration.isEndpointEnabled(cardLink)}"
th:data-bs-tags="${tags}"> th:data-bs-tags="${tags}">
<a th:href="${cardLink}"> <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}}"> <div id="tool-icon" class="icon" alt="icon" th:class="@{${toolGroup}}">
<span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}"></span> <span class="material-symbols-rounded nav-icon" th:text="@{${toolIcon}}"></span>

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

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