diff --git a/tricerascuttler/static/access/index.html b/tricerascuttler/static/access/index.html index 7e616cf..2a3e422 100644 --- a/tricerascuttler/static/access/index.html +++ b/tricerascuttler/static/access/index.html @@ -11,11 +11,7 @@ import ClientHostProvider from "./js/ClientHostProvider.js" window.scuttlebuttHost = new ClientHostProvider().getScuttlebuttHost(); - + diff --git a/tricerascuttler/static/common/js/FeedAuthorLinkElement.js b/tricerascuttler/static/common/js/FeedAuthorLinkElement.js index a69b14c..f89402b 100644 --- a/tricerascuttler/static/common/js/FeedAuthorLinkElement.js +++ b/tricerascuttler/static/common/js/FeedAuthorLinkElement.js @@ -9,19 +9,39 @@ export class FeedAuthorLinkElement extends HTMLElement { getDescription(feedUri).then( ({ name, description, image }) => { this.shadowRoot.innerHTML = ` + @@ -29,9 +49,11 @@ export class FeedAuthorLinkElement extends HTMLElement { ${ showImage && image ? `` - : "" + : '' } -
${name ? name : feedUri.substring(0, 23) + "..."}
+
${name || ""}
+
${feedUri}
+ `; }, ); diff --git a/tricerascuttler/static/common/js/PostElement.js b/tricerascuttler/static/common/js/PostElement.js index 00bcc76..148bdd6 100644 --- a/tricerascuttler/static/common/js/PostElement.js +++ b/tricerascuttler/static/common/js/PostElement.js @@ -37,73 +37,85 @@ export class PostElement extends HTMLElement { const text = bindings[0].text?.value; const timestamp = new Date(parseInt(bindings[0].timestamp?.value)); this.shadowRoot.innerHTML = ` + - ${mdToHtml(text ?? "")}
-
- - ${ +
${mdToHtml(text ?? "")}
+
+ +
+
${ bindings[0].root - ? `In reply to
` - : "" - } - ${ - bindings[0].replies.value.split(",").filter((s) => s != "").map( - (reply) => - `Reply:
`, - ).join("") - } + ? `In reply to ` + : "" + }
+
${ + bindings[0].replies.value.split(",").filter((s) => s != "").map( + (reply) => + `Reply:
`, + ).join("") + }
- +
`; const actionsArea = this.shadowRoot.getElementById("actions"); actionsArea.append(await this.createLikeUnlikeButton()); diff --git a/tricerascuttler/static/common/js/PostListElement.js b/tricerascuttler/static/common/js/PostListElement.js index 3eaea6c..db68aa8 100644 --- a/tricerascuttler/static/common/js/PostListElement.js +++ b/tricerascuttler/static/common/js/PostListElement.js @@ -10,9 +10,11 @@ export class PostListElement extends HTMLElement { this.loadSize = parseInt(this.getAttribute("loadSize") ?? 20); this.styleElem = document.createElement("style"); this.styleElem.innerHTML = ` - .post { - display: block; - margin: 5px; + .posts { + display: grid; + gap: 0.4rem; + padding: 0.4rem; + max-width: 100vw; } .hideRead .read { display: none; diff --git a/tricerascuttler/static/common/reset.css b/tricerascuttler/static/common/reset.css new file mode 100644 index 0000000..744e9d9 --- /dev/null +++ b/tricerascuttler/static/common/reset.css @@ -0,0 +1,76 @@ +/*** + The new CSS reset - version 1.4.9 (last updated 11.2.2022) + GitHub page: https://github.com/elad2412/the-new-css-reset +***/ + +/* + Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property + - The "symbol *" part is to solve Firefox SVG sprite bug + */ + *:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) { + all: unset; + display: revert; +} + +/* Preferred box-sizing value */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Reapply the pointer cursor for anchor tags */ +a, button { + cursor: revert; +} + +/* Remove list styles (bullets/numbers) */ +ol, ul, menu { + list-style: none; +} + +/* For images to not be able to exceed their container */ +img { + max-width: 100%; +} + +/* removes spacing between cells in tables */ +table { + border-collapse: collapse; +} + +/* revert the 'white-space' property for textarea elements on Safari */ +textarea { + white-space: revert; +} + +/* minimum style to allow to style meter element */ +meter { + -webkit-appearance: revert; + appearance: revert; +} + +/* reset default text opacity of input placeholder */ +::placeholder { + all: unset; +} + +/* fix the feature of 'hidden' attribute. + display:revert; revert to element instead of attribute */ +:where([hidden]) { + display: none; +} + +/* revert for bug in Chromium browsers + - fix for the content editable attribute will work properly. */ +:where([contenteditable]) { + -moz-user-modify: read-write; + -webkit-user-modify: read-write; + overflow-wrap: break-word; + -webkit-line-break: after-white-space; +} + +/* apply back the draggable feature - exist only in Chromium and Safari */ +:where([draggable="true"]) { + -webkit-user-drag: element; +} \ No newline at end of file