[frontend] small fixes (#907)

* add missing watchify dependency * replace svg rss icon with forkawesome+styling * use $white1 instead of hardcoding white * fix toot overflow
superseriousbusiness · Oct 12, 2022 · 80c2833 · 80c2833
1 parent eb85ef7
commit 80c2833
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 22 deletions.
diff --git a/web/assets/rss.svg b/web/assets/rss.svg
diff --git a/web/source/css/profile.css b/web/source/css/profile.css
@@ -225,10 +225,13 @@ main {
 	align-items: center;
 	justify-content: space-between;
 	margin: 1rem;
-	.rsslogo {
-		width: 1.45em;
-		height: 1.45em;
+	.rss-icon {
+		font-size: 1.45em;
 		object-fit: contain;
 		vertical-align: middle;
+		color: $orange2;
+		/* can't size a single-color background, so we use a linear-gradient that's effectively white */
+		background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center;
+		background-size: 1.2rem 1.4rem;
 	}
 }
diff --git a/web/source/css/status.css b/web/source/css/status.css
@@ -133,6 +133,8 @@ main {
 		position: relative;
 		z-index: 2;
 
+		width: 100%;
+
 		a {
 			color: $link-fg;
 			text-decoration: underline;

diff --git a/web/source/package.json b/web/source/package.json
@@ -47,6 +47,7 @@
     "redux-thunk": "^2.4.1",
     "tiny-lr": "^2.0.0",
     "uglifyify": "^5.0.2",
+    "watchify": "^4.0.0",
     "wouter": "^2.8.0-alpha.2"
   },
   "devDependencies": {

diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl
@@ -30,7 +30,9 @@
     <h2 id="recent">
         <span>Latest public toots</span>
         {{ if .rssFeed }}
-            <a href="{{ .rssFeed }}"><img class="rsslogo" src="/assets/rss.svg" alt="The orange RSS logo."/></a>
+            <a href="{{ .rssFeed }}" aria-label="RSS feed">
+                <i class="rss-icon fa fa-rss-square" aria-hidden="true"></i>
+            </a>
         {{ end }}
     </h2>
 	    {{ if not .statuses }}