diff --git a/css/preview.css b/css/preview.css index f4ec789..b2f7b3f 100644 --- a/css/preview.css +++ b/css/preview.css @@ -50,29 +50,28 @@ margin: 8px 0; } -.PreviewView .memberCount p { -} .PreviewView .memberCount.loading { margin: 16px 0; } .PreviewView .memberCount p { + font-size: 12px; + margin: 0; +} + +.PreviewView .memberCount p:not(.placeholder) { + padding: 0 4px 0 24px; + border-radius: 8px; background-image: url(../images/member-icon.svg); background-repeat: no-repeat; background-position: 2px center; - padding: 0 4px 0 24px; background-color: var(--lightgrey); - border-radius: 8px; - font-size: 12px; - margin: 0; } .PreviewView .memberCount p.placeholder { height: 1.5em; width: 100px; - background-image: none; - padding: 0; } .PreviewView .topic { diff --git a/src/preview/PreviewView.js b/src/preview/PreviewView.js index 825ab62..ecc95f1 100644 --- a/src/preview/PreviewView.js +++ b/src/preview/PreviewView.js @@ -28,7 +28,7 @@ class LoadingPreviewView extends TemplateView { render(t, vm) { return t.div({className: "PreviewView"}, [ t.div({className: "avatarContainer"}, t.div({className: "avatar loading"}, t.div({className: "spinner"}))), - t.h1(vm => vm.identifier), + t.h1(vm => vm.name), t.p({className: "identifier placeholder"}), t.div({className: {memberCount: true, loading: true, hidden: !vm.hasMemberCount}}, t.p({className: "placeholder"})), t.p({className: {topic: true, loading: true, hidden: !vm.hasTopic}}, [ diff --git a/src/preview/PreviewViewModel.js b/src/preview/PreviewViewModel.js index 3be8b11..51de645 100644 --- a/src/preview/PreviewViewModel.js +++ b/src/preview/PreviewViewModel.js @@ -27,9 +27,9 @@ export class PreviewViewModel extends ViewModel { this._link = link; this._consentedServers = consentedServers; this.loading = false; - this.name = null; + this.name = this._link.identifier; this.avatarUrl = null; - this.identifier = this._link.identifier; + this.identifier = null; this.memberCount = null; this.topic = null; this.previewDomain = null;