From a36f4f072e34d1a4f063c1eba9ff69264329ab6b Mon Sep 17 00:00:00 2001 From: tams sokari Date: Thu, 1 Feb 2024 16:58:40 -0500 Subject: [PATCH] redesign: modify file links styles to show interactivity (#207) --- packages/embed/src/css/styles.css | 29 +++++++++++++++++++++++++++- packages/embed/src/js/e-signature.js | 27 ++++++++++++++------------ 2 files changed, 43 insertions(+), 13 deletions(-) diff --git a/packages/embed/src/css/styles.css b/packages/embed/src/css/styles.css index 20e4fb9e..febff602 100644 --- a/packages/embed/src/css/styles.css +++ b/packages/embed/src/css/styles.css @@ -601,7 +601,6 @@ smileid-combobox-option[hidden] { .document-list li { list-style: none; background-color: #F9F0E7; - padding: 1rem; border-radius: .5rem; } @@ -611,8 +610,36 @@ smileid-combobox-option[hidden] { .document-list a { color: initial; + padding: 1rem; text-decoration: none; margin: 0px; + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; +} + +.document-meta { + display: flex; + align-items: center; + text-align: initial; +} + +.document-meta p { + margin-block: 0; +} + +.document-meta p:first-of-type { + font-weight: bold; +} + +.document-meta svg { + margin-inline-end: 1rem; +} + +.document-list li:has(a:hover), +.document-list li:has(a:focus) { + background-color: #f7dec5; } smileid-signature-pad { diff --git a/packages/embed/src/js/e-signature.js b/packages/embed/src/js/e-signature.js index cdf176e9..190b5034 100644 --- a/packages/embed/src/js/e-signature.js +++ b/packages/embed/src/js/e-signature.js @@ -70,7 +70,7 @@ function getHumanSize(numberOfBytes) { } const NavigationTargets = document.querySelectorAll("smileid-navigation"); - NavigationTargets.forEach(navigationTarget => { + NavigationTargets.forEach((navigationTarget) => { navigationTarget.addEventListener( "navigation.back", () => { @@ -365,19 +365,22 @@ function getHumanSize(numberOfBytes) { - - - - - - - -
-

${document.name}

-

${getHumanSize(document.size)}

+

+ + + + + + + +
+

${document.name}

+

${getHumanSize(document.size)}

+
+ + `,