Display letterhead as 400x200 pixel image

assets/main.css

@@ -250,6 +250,15 @@ section.inputs {
 	position: relative;
 }
 
+.settings.page section.letterhead {
+	max-width: 400px;
+}
+
+.settings.page .letterhead canvas {
+	max-width: 400px;
+	width: 100%;
+}
+
 section.radios h3 {
 	grid-column: 1 / 3;
 }

components/settings.vue

@@ -1,24 +1,24 @@
 <template>
-<div class="page">
+<div class="page settings">
 <h2>Settings</h2>
 
 <section class="form inputs">
 <h3>Avatar</h3>
 <canvas class="displayer" width="200" height="200" ref="avatar"></canvas>
 <input type="file"
-@change="e => uploadAvatar(e.target.files[0])"
+@change="e => changeAvatar(e.target.files[0])"
 />
-<button>Upload</button>
+<button @click="uploadAvatar">Upload</button>
 <label class="error">{{avatarError}}</label>
 </section>
 
-<section class="form inputs">
+<section class="form inputs letterhead">
 <h3>Letterhead</h3>
-<canvas class="displayer" width="200" height="200" ref="letterhead"></canvas>
+<canvas class="displayer" height="200" ref="letterhead"></canvas>
 <input type="file"
-@change="e => uploadLetterhead(e.target.files[0])"
+@change="e => changeLetterhead(e.target.files[0])"
 />
-<button>Upload</button>
+<button @click="uploadLetterhead">Upload</button>
 <label class="error">{{avatarError}}</label>
 </section>
 
@@ -79,47 +79,33 @@ function check() {
 	ready.value = true
 }
 
-function uploadAvatar(blob) {
-    changeAvatar(blob)?.then(() => {
-        avatar.value.toBlob(b => {
-            fetch(`/api/user/avatar`,
-		    {method: 'POST',
-		        body: b,
-        		headers: {
-            	"Accept": "application/json",
-            	"Authorization": `Bearer ${props.token}`,
-        		},
-	        }).then(resp => {
-	            if (resp.ok) {emit('updateAvatar')}
-	        })
-        })
-    })
-    
-    
+function uploadAvatar() {
     avatar.value.toBlob(b => {
-       // uploadAvatar(b)
+        fetch(`/api/user/avatar`,
+	    {method: 'POST',
+	        body: b,
+    		headers: {
+        	"Accept": "application/json",
+        	"Authorization": `Bearer ${props.token}`,
+    		},
+        }).then(resp => {
+            if (resp.ok) {emit('updateAvatar')}
+        })
     })
 }
 
-function uploadLetterhead(blob) {
-    changeLetterhead(blob)?.then(() => {
-        letterhead.value.toBlob(b => {
-            fetch(`/api/user/letterhead`,
-		    {method: 'POST',
-		        body: b,
-        		headers: {
-            	"Accept": "application/json",
-            	"Authorization": `Bearer ${props.token}`,
-        		},
-	        }).then(resp => {
-	            if (resp.ok) {emit('updateLetterhead')}
-	        })
-        })
-    })
-    
-    
+function uploadLetterhead() {
     letterhead.value.toBlob(b => {
-       // uploadAvatar(b)
+        fetch(`/api/user/letterhead`,
+	    {method: 'POST',
+	        body: b,
+    		headers: {
+        	"Accept": "application/json",
+        	"Authorization": `Bearer ${props.token}`,
+    		},
+        }).then(resp => {
+            if (resp.ok) {emit('updateLetterhead')}
+        })
     })
 }
 
@@ -134,7 +120,7 @@ function changeAvatar(blob) {
     
     avatarError.value = ''
     
-    return createImageBitmap(blob,
+    createImageBitmap(blob,
     {resizeWidth: 200, resizeHeight: 200, resizeQuality: 'medium'}).
     then((img) => {
         avatar.value.getContext("2d").drawImage(img, 0, 0, 200, 200)
@@ -152,13 +138,13 @@ function changeLetterhead(blob) {
     letterheadError.value = ''
     
     return createImageBitmap(blob,
-    {resizeWidth: 200, resizeHeight: 200, resizeQuality: 'medium'}).
+    {resizeWidth: 400, resizeHeight: 200, resizeQuality: 'medium'}).
     then((img) => {
-        letterhead.value.getContext("2d").drawImage(img, 0, 0, 200, 200)
+        letterhead.value.getContext("2d").drawImage(img, 0, 0, 400, 200)
     })
 }
 
-watch(props.user, () => {
+watch(props.user, (u) => {
     if (props.user.avatar) {
        changeAvatar(props.user.avatar) 
     }