107 bug UI not responsive for long website name (#112)

adds UI responsivity for long website name.
massalabs · Sep 21, 2022 · 27569ec · 27569ec
1 parent a8d3eee
commit 27569ec
Show file tree

Hide file tree

Showing 14 changed files with 123 additions and 106 deletions.
diff --git a/int/api/thyra.go b/int/api/thyra.go
@@ -27,6 +27,8 @@ func ThyraWalletHandler(params operations.ThyraWalletParams) middleware.Responde
 		body = front.Logo
 	case "errors.js":
 		body = front.Errors
+	case "common.js":
+		body = front.Common
 	}
 
 	return NewCustomResponder([]byte(body), contentType(params.Resource), http.StatusOK)
@@ -49,6 +51,8 @@ func ThyraWebsiteCreatorHandler(params operations.ThyraWebsiteCreatorParams) mid
 		body = front.Logo
 	case "errors.js":
 		body = front.Errors
+	case "common.js":
+		body = front.Common
 	}
 
 	return NewCustomResponder([]byte(body), contentType(params.Resource), http.StatusOK)

diff --git a/pkg/front/common.go b/pkg/front/common.go
@@ -0,0 +1,8 @@
+// GENERATED BY textFileToGoConst
+// GitHub:     github.com/logrusorgru/textFileToGoConst
+// input file: html/front/common.js
+// generated:  Wed Sep 21 10:06:14 CEST 2022
+
+package front
+
+const Common = "// utils\n\nfunction ellipsis(str) {\n\treturn str.substr(0, 5) + '...' + str.substr(str.length - 5, str.length);\n}\n\nconst copyToClipboard = (\n  value,\n  successfully = () => null,\n  failure = () => null\n) => {\n  const clipboard = navigator.clipboard;\n  if (clipboard !== undefined && clipboard !== \"undefined\") {\n    navigator.clipboard.writeText(value).then(successfully, failure);\n  } else {\n    if (document.execCommand) {\n      const el = document.createElement(\"input\");\n      el.value = value;\n      document.body.append(el);\n\n      el.select();\n      el.setSelectionRange(0, value.length);\n\n      if (document.execCommand(\"copy\")) {\n        successfully();\n      }\n\n      el.remove();\n    } else {\n      failure();\n    }\n  }\n};\n\nconst addressInnerHTML = (address) => `${ellipsis(address)} <svg xmlns=\"http://www.w3.org/2000/svg\" onclick=\"copyToClipboard('${address}')\" style=\"cursor: pointer;\" width=\"16\" height=\"16\" fill=\"currentColor\" class=\"bi bi-back\" viewBox=\"0 0 16 16\"><path d=\"M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z\"/></svg>`;\n"
diff --git a/pkg/front/wallet/html.go b/pkg/front/wallet/html.go
@@ -1,7 +1,7 @@
 // GENERATED BY textFileToGoConst
 // GitHub:     github.com/logrusorgru/textFileToGoConst
-// input file: html\front\wallet.html
-// generated:  Mon Sep 12 14:36:33 CEST 2022
+// input file: html/front/wallet.html
+// generated:  Wed Sep 21 10:06:14 CEST 2022
 
 package wallet
 
@@ -13,13 +13,12 @@ const HTML = `<!DOCTYPE html>
 		integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
 	<link rel="stylesheet" href="./wallet.css" />
 </head>
-<style></style>
 
 <body>
 	<nav class="navbar navbar-expand-lg navbar-dark">
 		<div class="container">
 			<a class="navbar-brand" href="#"><img src="./logo_banner.webp" class="massa-logo" alt="Massa logo" /></a>
-			<h2>Thyra</h1>
+			<h2>Thyra</h2>
 				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
 					aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 					<span class="navbar-toggler-icon"></span>
@@ -52,14 +51,14 @@ const HTML = `<!DOCTYPE html>
 				<div class="row mb-5">
 					<div class="col">
 						<input id='fileid' type='file' hidden />
-						<button id="import-wallet" class="primary-button" id='buttonid' type='button'
+						<button id="import-wallet" class="primary-button" type='button'
 							value='Upload MB'>Load Wallet</button>
 					</div>
 				</div>
 
 				<div class="row">
 					<div id="create-form">
-						<h2 class="mb-4">Create Wallet</h1>
+						<h2 class="mb-4">Create Wallet</h2>
 
 							<div class="form-floating mb-3 col-md-10">
 								<input class="form-control" placeholder="Nickname" id="nicknameCreate"
@@ -100,14 +99,15 @@ const HTML = `<!DOCTYPE html>
 		</div>
 
 	</div>
-</body>
-<script src="errors.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
-	integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
-	crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"
-	integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-<script src="wallet.js"></script>
 
+	<script src="errors.js"></script>
+	<script src="common.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
+		integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
+		crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"
+		integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+	<script src="wallet.js"></script>
+</body>
 </html>`
diff --git a/pkg/front/wallet/js.go b/pkg/front/wallet/js.go
@@ -1,7 +1,7 @@
 // GENERATED BY textFileToGoConst
 // GitHub:     github.com/logrusorgru/textFileToGoConst
-// input file: html\front\wallet.js
-// generated:  Mon Sep 12 14:36:34 CEST 2022
+// input file: html/front/wallet.js
+// generated:  Wed Sep 21 10:06:14 CEST 2022
 
 package wallet
 
@@ -55,6 +55,7 @@ async function getWallets() {
 			}
 		})
 		.catch((e) => {
+			console.error(e);
 			errorAlert(getErrorMessage(e.response.data.code));
 		});
 }
@@ -88,10 +89,6 @@ function errorAlert(error) {
 	}, 5000);
 }
 
-function ellipsis(str) {
-	return str.substr(0, 5) + '...' + str.substr(str.length - 5, str.length);
-}
-
 function tableInsert(resp) {
 	const tBody = document.getElementById('user-wallet-table').getElementsByTagName('tbody')[0];
 	const row = tBody.insertRow(-1);
@@ -101,24 +98,13 @@ function tableInsert(resp) {
 	const cell2 = row.insertCell();
 	const cell3 = row.insertCell();
 
-	cell0.innerHTML =
-		ellipsis(resp.address) +
-		'<svg class="clipboard" onclick="copyToClipboard(this)" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>';
+	cell0.innerHTML = addressInnerHTML(resp.address);
 	cell1.innerHTML = resp.nickname;
 	cell2.innerHTML = 0;
 	cell3.innerHTML =
 		'<svg class="quit-button" onclick="deleteRow(this)" xmlns="http://www.w3.org/2000/svg" width="24" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line></svg>';
 }
 
-function copyToClipboard(element) {
-	const rowIndex = element.parentNode.parentNode.rowIndex;
-
-	const tBody = document.getElementById('user-wallet-table').getElementsByTagName('tbody')[0];
-	const address = tBody.rows[rowIndex - 1].cells[0].innerHTML;
-
-	navigator.clipboard.writeText(address);
-}
-
 function deleteRow(element) {
 	const rowIndex = element.parentNode.parentNode.rowIndex;
 

diff --git a/pkg/front/website/css.go b/pkg/front/website/css.go
@@ -1,7 +1,7 @@
 // GENERATED BY textFileToGoConst
 // GitHub:     github.com/logrusorgru/textFileToGoConst
-// input file: html\front\website.css
-// generated:  Thu Sep 15 14:31:01 CEST 2022
+// input file: html/front/website.css
+// generated:  Wed Sep 21 14:13:43 CEST 2022
 
 package website
 
@@ -81,6 +81,7 @@ button {
   padding: 3px 30px;
   border-radius: 100px;
   color: #fff;
+  width: fit-content;
 }
 
 .primary-button {

diff --git a/pkg/front/website/html.go b/pkg/front/website/html.go
@@ -1,7 +1,7 @@
 // GENERATED BY textFileToGoConst
 // GitHub:     github.com/logrusorgru/textFileToGoConst
-// input file: html\front\website.html
-// generated:  Thu Sep 15 14:31:01 CEST 2022
+// input file: html/front/website.html
+// generated:  Wed Sep 21 10:06:14 CEST 2022
 
 package website
 
@@ -14,15 +14,14 @@ const HTML = `<!DOCTYPE html>
 		integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
 	<link rel="stylesheet" href="./website.css" />
 </head>
-<style></style>
 
 <body>
 	<!-- NAVIGATION / HEADER -->
 	<nav class="navbar navbar-expand-lg navbar-dark">
 		<div class="container">
 			<a class="navbar-brand" href="#"><img src="./logo_banner.webp" class="massa-logo-banner"
 					alt="Massa logo" /></a>
-			<h2>Thyra</h1>
+			<h2>Thyra</h2>
 				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
 					aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
 					<span class="navbar-toggler-icon"></span>
@@ -140,8 +139,8 @@ const HTML = `<!DOCTYPE html>
 				</div>
 				<div class="spacer"></div>
 
-				<button class="primary-button" id="website-upload" onClick="setTxType('deployWebsiteAndUpload')"
-					class="primary-button me-5" type='button' value='Upload MB' data-bs-toggle="modal"
+				<button class="primary-button primary-button me-5" id="website-upload" onClick="setTxType('deployWebsiteAndUpload')"
+					type='button' value='Upload MB' data-bs-toggle="modal"
 					data-bs-target="#passwordModal">Upload</button>
 
 				<button class="primary-button" id="website-upload-refuse">Upload</button>
@@ -171,16 +170,16 @@ const HTML = `<!DOCTYPE html>
 			</div>
 		</div>
 	</div>
+	<script src="errors.js"></script>
+	<script src="common.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
+		crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
+		integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
+		crossorigin="anonymous"></script>
+	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"
+		integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+	<script src="website.js"></script>
 </body>
-<script src="errors.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
-	crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
-	integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
-	crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"
-	integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-<script src="website.js"></script>
-
 </html>`