From ca601d0e732185398d8725fba891ed9cd9732ceb Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Mon, 7 Dec 2020 16:02:06 +0100 Subject: [PATCH] polish --- css/client.css | 15 ++++++++++----- css/main.css | 13 ++++++++++--- css/open.css | 10 ++++++++-- css/preview.css | 6 +++--- images/background.svg | 2 +- images/copy.svg | 4 ++-- images/tick-dark.svg | 3 +++ src/open/ClientView.js | 13 +++++++++---- src/open/ClientViewModel.js | 6 +++++- src/open/OpenLinkView.js | 6 +++--- src/open/clients/Element.js | 2 +- 11 files changed, 55 insertions(+), 25 deletions(-) create mode 100644 images/tick-dark.svg diff --git a/css/client.css b/css/client.css index ebe9f20..fbacecd 100644 --- a/css/client.css +++ b/css/client.css @@ -1,5 +1,6 @@ -.ClientListView .list { - padding: 16px 0; +.ClientListView h2 { + text-align: center; + margin: 18px 0; } .ClientView { @@ -49,12 +50,15 @@ height: 100%; } +.ClientView .back { + margin-top: 22px; +} + .InstallClientView .instructions button { background-repeat: no-repeat; background-position: center; - background-color: var(--link); + background-color: transparent; padding: 4px; - border-radius: 4px; border: none; width: 24px; height: 24px; @@ -67,5 +71,6 @@ } .InstallClientView .instructions button.tick { - background-image: url('../images/tick.svg'); + background-image: url('../images/tick-dark.svg'); } + diff --git a/css/main.css b/css/main.css index 23d43d4..a16404a 100644 --- a/css/main.css +++ b/css/main.css @@ -42,6 +42,7 @@ html { body { background-color: var(--app-background); background-image: url('../images/background.svg'); + background-attachment: fixed; background-repeat: no-repeat; background-size: auto; background-position: center -50px; @@ -53,6 +54,14 @@ body { margin: 0; } +p { + line-height: 150%; +} + +a { + text-decoration: none; +} + body, button, input, @@ -118,14 +127,13 @@ button, input { } .footer .links { - font-size: 0.8em; + font-size: 12px; list-style: none; padding: 0; } a, button.text { color: var(--link); - text-decoration: underline; } button.text { @@ -184,7 +192,6 @@ input[type='text'].large { border: 1px solid var(--foreground); border-radius: 16px; font-size: 14px; - line-height: 24px; } .fullwidth { diff --git a/css/open.css b/css/open.css index d02c0e0..de0c018 100644 --- a/css/open.css +++ b/css/open.css @@ -14,11 +14,17 @@ See the License for the specific language governing permissions and limitations under the License. */ -.OpenLinkView .previewSource { +.OpenLinkView .caption { color: var(--grey); font-size: 12px; } +.ServerConsentView .actions label { + display: flex; + align-items: end; + gap: 5px; +} + .ServerConsentView .actions { margin-top: 24px; display: flex; @@ -27,7 +33,7 @@ limitations under the License. .ServerConsentView input[type=submit] { flex: 1; - margin-left: 12px; + margin-left: 32px; } .ServerOptions div { diff --git a/css/preview.css b/css/preview.css index 2921850..1de5220 100644 --- a/css/preview.css +++ b/css/preview.css @@ -61,8 +61,8 @@ } .PreviewView .memberCount p:not(.placeholder) { - padding: 4px 4px 4px 24px; - border-radius: 8px; + padding: 4px 8px 4px 24px; + border-radius: 14px; background-image: url(../images/member-icon.svg); background-repeat: no-repeat; background-position: 2px center; @@ -107,7 +107,7 @@ var(--flash-fg) calc(10% + 25px), var(--flash-bg) calc(10% + 50px) ); - animation: flash 2s ease-in-out infinite; + animation: flash 2s linear infinite; background-size: 200%; } diff --git a/images/background.svg b/images/background.svg index bdca144..37c31f0 100644 --- a/images/background.svg +++ b/images/background.svg @@ -1,6 +1,6 @@ - + diff --git a/images/copy.svg b/images/copy.svg index 7906974..1d60511 100644 --- a/images/copy.svg +++ b/images/copy.svg @@ -1,4 +1,4 @@ - - + + diff --git a/images/tick-dark.svg b/images/tick-dark.svg new file mode 100644 index 0000000..e19a7b1 --- /dev/null +++ b/images/tick-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/open/ClientView.js b/src/open/ClientView.js index 3cf76e5..96c585f 100644 --- a/src/open/ClientView.js +++ b/src/open/ClientView.js @@ -43,7 +43,11 @@ export class ClientView extends TemplateView { t.div({className: "header"}, [ t.div({className: "description"}, [ t.h3(vm.name), - t.p(vm.description), + t.p([vm.description, " ", t.a({ + href: vm.homepage, + target: "_blank", + rel: "noopener noreferrer" + }, "Learn more")]), t.p({className: "platforms"}, formatPlatforms(vm.availableOnPlatformNames)), ]), t.img({className: "clientIcon", src: vm.iconUrl}) @@ -80,6 +84,8 @@ class InstallClientView extends TemplateView { if (textInstructions) { const copyButton = t.button({ className: "copy", + title: "Copy instructions", + "aria-label": "Copy instructions", onClick: evt => { if (copy(vm.copyString, copyButton.parentElement)) { copyButton.className = "tick"; @@ -131,9 +137,8 @@ class InstallClientView extends TemplateView { } function showBack(t, vm) { - return t.p({className: {previewSource: true, hidden: vm => !vm.showBack}}, [ - `Continue with ${vm.name}.`, - " ", + return t.p({className: {caption: true, "back": true, hidden: vm => !vm.showBack}}, [ + `Continue with ${vm.name} · `, t.button({className: "text", onClick: () => vm.back()}, "Change"), ]); } diff --git a/src/open/ClientViewModel.js b/src/open/ClientViewModel.js index c6d54b5..eb21f15 100644 --- a/src/open/ClientViewModel.js +++ b/src/open/ClientViewModel.js @@ -76,6 +76,10 @@ export class ClientViewModel extends ViewModel { return actions; } + get homepage() { + return this._client.homepage; + } + get identifier() { return this._link.identifier; } @@ -102,7 +106,7 @@ export class ClientViewModel extends ViewModel { get textInstructions() { let instructions = this._client.getLinkInstructions(this._proposedPlatform, this._link); - if (!Array.isArray(instructions)) { + if (instructions && !Array.isArray(instructions)) { instructions = [instructions]; } return instructions; diff --git a/src/open/OpenLinkView.js b/src/open/OpenLinkView.js index badcd29..8a2dbd4 100644 --- a/src/open/OpenLinkView.js +++ b/src/open/OpenLinkView.js @@ -35,9 +35,9 @@ class ShowLinkView extends TemplateView { return t.div([ t.view(new PreviewView(vm.previewViewModel)), t.view(new ClientListView(vm.clientsViewModel)), - t.p({className: {previewSource: true, hidden: vm => !vm.previewDomain}}, [ - vm => vm.previewFailed ? `${vm.previewDomain} has not returned a preview.` : `Preview provided by ${vm.previewDomain}.`, - " ", + t.p({className: {caption: true, hidden: vm => !vm.previewDomain}}, [ + vm => vm.previewFailed ? `${vm.previewDomain} has not returned a preview.` : `Preview provided by ${vm.previewDomain}`, + " · ", t.button({className: "text", onClick: () => vm.changeServer()}, "Change"), ]), ]); diff --git a/src/open/clients/Element.js b/src/open/clients/Element.js index e793b4d..7469e5d 100644 --- a/src/open/clients/Element.js +++ b/src/open/clients/Element.js @@ -40,7 +40,7 @@ export class Element { get name() {return "Element"; } get description() { return 'Fully-featured Matrix client, used by millions.'; } - get homepage() { return ; } // prevents a visit app homepage button from appearing + get homepage() { return "https://element.io"; } get author() { return "Element"; } getMaturity(platform) { return Maturity.Stable; }