saulteafarmer/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2025-05-25 03:12:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better seperation of alternative file upload mechanisms

Browse Source 
Hover over button animation
This commit is contained in:
Connor Yoh 2025-04-02 14:23:15 +01:00
parent c5b966c233
commit 83411dafcf
2 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/main/resources/static/css/fileSelect.css
View File

@ -272,11 +272,27 @@
z-index: 9999; z-index: 9999;
} }
.google-drive-button { .google-drive-button {
width: 2.5rem; width: 2.5rem;
pointer-events: auto; pointer-events: auto;
cursor: pointer;
transition-duration: 0.4s;
border-radius: 0.5rem;
box-shadow: 0 0 5px var(--md-sys-color-on-surface-variant);
background-color: var(--md-sys-color-on-surface-container-high)
} }
.horizontal-divider {
width: 85%;
border-top: 1px dashed;
padding: 0px;
margin: 10px;
}
.google-drive-button img { .google-drive-button img {
width:100% width:100%
} }
.google-drive-button:hover {
background-color: var(--md-sys-color-on-surface-variant)
}

3
src/main/resources/templates/fragments/common.html
View File

@ -240,11 +240,14 @@
th:required="${notRequired} ? null : 'required'"> th:required="${notRequired} ? null : 'required'">
Browse Browse
</label> </label>
<div class="d-flex flex-column align-items-center">
<div class="d-flex justify-content-start align-items-center" id="fileInputText"> <div class="d-flex justify-content-start align-items-center" id="fileInputText">
<div th:text="#{fileChooser.click}" style="margin-right: 5px"></div> <div th:text="#{fileChooser.click}" style="margin-right: 5px"></div>
<div th:text="#{fileChooser.or}" style="margin-right: 5px"></div> <div th:text="#{fileChooser.or}" style="margin-right: 5px"></div>
<div th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div> <div th:text="#{fileChooser.dragAndDrop}" id="dragAndDrop"></div>
</div> </div>
<hr th:if="${@GoogleDriveEnabled == true}" class="horizontal-divider" >
</div>
<div th:if="${@GoogleDriveEnabled == true}" th:id="${name}+'-google-drive-button'" class="google-drive-button" th:attr="data-name=${name}, data-multiple=${!disableMultipleFiles}, data-accept=${accept}" > <div th:if="${@GoogleDriveEnabled == true}" th:id="${name}+'-google-drive-button'" class="google-drive-button" th:attr="data-name=${name}, data-multiple=${!disableMultipleFiles}, data-accept=${accept}" >
<img th:src="@{'/images/google-drive.svg'}" alt="google drive"> <img th:src="@{'/images/google-drive.svg'}" alt="google drive">
</div> </div>