polish
This commit is contained in:
parent
ef073de306
commit
ca601d0e73
11 changed files with 55 additions and 25 deletions
|
@ -1,5 +1,6 @@
|
||||||
.ClientListView .list {
|
.ClientListView h2 {
|
||||||
padding: 16px 0;
|
text-align: center;
|
||||||
|
margin: 18px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ClientView {
|
.ClientView {
|
||||||
|
@ -49,12 +50,15 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ClientView .back {
|
||||||
|
margin-top: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
.InstallClientView .instructions button {
|
.InstallClientView .instructions button {
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-color: var(--link);
|
background-color: transparent;
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
border-radius: 4px;
|
|
||||||
border: none;
|
border: none;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
|
@ -67,5 +71,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.InstallClientView .instructions button.tick {
|
.InstallClientView .instructions button.tick {
|
||||||
background-image: url('../images/tick.svg');
|
background-image: url('../images/tick-dark.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
13
css/main.css
13
css/main.css
|
@ -42,6 +42,7 @@ html {
|
||||||
body {
|
body {
|
||||||
background-color: var(--app-background);
|
background-color: var(--app-background);
|
||||||
background-image: url('../images/background.svg');
|
background-image: url('../images/background.svg');
|
||||||
|
background-attachment: fixed;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: auto;
|
background-size: auto;
|
||||||
background-position: center -50px;
|
background-position: center -50px;
|
||||||
|
@ -53,6 +54,14 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 150%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
body,
|
body,
|
||||||
button,
|
button,
|
||||||
input,
|
input,
|
||||||
|
@ -118,14 +127,13 @@ button, input {
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer .links {
|
.footer .links {
|
||||||
font-size: 0.8em;
|
font-size: 12px;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a, button.text {
|
a, button.text {
|
||||||
color: var(--link);
|
color: var(--link);
|
||||||
text-decoration: underline;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button.text {
|
button.text {
|
||||||
|
@ -184,7 +192,6 @@ input[type='text'].large {
|
||||||
border: 1px solid var(--foreground);
|
border: 1px solid var(--foreground);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullwidth {
|
.fullwidth {
|
||||||
|
|
10
css/open.css
10
css/open.css
|
@ -14,11 +14,17 @@ See the License for the specific language governing permissions and
|
||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.OpenLinkView .previewSource {
|
.OpenLinkView .caption {
|
||||||
color: var(--grey);
|
color: var(--grey);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ServerConsentView .actions label {
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.ServerConsentView .actions {
|
.ServerConsentView .actions {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -27,7 +33,7 @@ limitations under the License.
|
||||||
|
|
||||||
.ServerConsentView input[type=submit] {
|
.ServerConsentView input[type=submit] {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 12px;
|
margin-left: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ServerOptions div {
|
.ServerOptions div {
|
||||||
|
|
|
@ -61,8 +61,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.PreviewView .memberCount p:not(.placeholder) {
|
.PreviewView .memberCount p:not(.placeholder) {
|
||||||
padding: 4px 4px 4px 24px;
|
padding: 4px 8px 4px 24px;
|
||||||
border-radius: 8px;
|
border-radius: 14px;
|
||||||
background-image: url(../images/member-icon.svg);
|
background-image: url(../images/member-icon.svg);
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: 2px center;
|
background-position: 2px center;
|
||||||
|
@ -107,7 +107,7 @@
|
||||||
var(--flash-fg) calc(10% + 25px),
|
var(--flash-fg) calc(10% + 25px),
|
||||||
var(--flash-bg) calc(10% + 50px)
|
var(--flash-bg) calc(10% + 50px)
|
||||||
);
|
);
|
||||||
animation: flash 2s ease-in-out infinite;
|
animation: flash 2s linear infinite;
|
||||||
background-size: 200%;
|
background-size: 200%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<svg width="1440" height="1505" viewBox="0 0 1440 1505" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="1440" height="1505" viewBox="0 0 1440 1505" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g clip-path="url(#clip0)">
|
<g clip-path="url(#clip0)">
|
||||||
<g opacity="0.26">
|
<g>
|
||||||
<path opacity="0.26" d="M1027.99 602.979C1262.01 860.194 1465.48 1242.7 1528.69 1544.36C1592.2 1847.63 1503.31 2018.17 1310.8 1964.61C1117.48 1910.83 851.081 1638.68 658.35 1297.66C466.355 957.9 378.93 607.541 443.1 434.715C506.167 264.833 707.508 296.249 938.653 512.115C968.31 539.852 998.261 570.239 1027.99 602.979Z" stroke="url(#paint0_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
|
<path opacity="0.26" d="M1027.99 602.979C1262.01 860.194 1465.48 1242.7 1528.69 1544.36C1592.2 1847.63 1503.31 2018.17 1310.8 1964.61C1117.48 1910.83 851.081 1638.68 658.35 1297.66C466.355 957.9 378.93 607.541 443.1 434.715C506.167 264.833 707.508 296.249 938.653 512.115C968.31 539.852 998.261 570.239 1027.99 602.979Z" stroke="url(#paint0_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
|
||||||
<path opacity="0.26" d="M1044.18 604.303C1277.61 867.698 1476.23 1255.51 1532.89 1558.78C1589.85 1863.67 1493.74 2031.71 1297.33 1973.07C1100.11 1914.14 833.789 1635 645.032 1288.91C457.01 944.068 376.871 591.501 447.59 420.442C517.133 252.325 723.184 289.112 954.844 511.085C984.648 539.632 1014.53 570.827 1044.18 604.303Z" stroke="url(#paint1_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
|
<path opacity="0.26" d="M1044.18 604.303C1277.61 867.698 1476.23 1255.51 1532.89 1558.78C1589.85 1863.67 1493.74 2031.71 1297.33 1973.07C1100.11 1914.14 833.789 1635 645.032 1288.91C457.01 944.068 376.871 591.501 447.59 420.442C517.133 252.325 723.184 289.112 954.844 511.085C984.648 539.632 1014.53 570.827 1044.18 604.303Z" stroke="url(#paint1_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
|
||||||
<path opacity="0.26" d="M1060.81 606.069C1293.5 875.644 1486.97 1268.6 1536.79 1573.27C1586.9 1879.56 1483.51 2045.03 1283.27 1981.09C1082.22 1916.94 816.124 1630.66 631.709 1279.64C447.955 930.015 375.249 575.389 452.665 406.316C528.757 240.112 739.517 282.417 971.546 510.496C1001.42 539.779 1031.3 571.784 1060.81 606.069Z" stroke="url(#paint2_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
|
<path opacity="0.26" d="M1060.81 606.069C1293.5 875.644 1486.97 1268.6 1536.79 1573.27C1586.9 1879.56 1483.51 2045.03 1283.27 1981.09C1082.22 1916.94 816.124 1630.66 631.709 1279.64C447.955 930.015 375.249 575.389 452.665 406.316C528.757 240.112 739.517 282.417 971.546 510.496C1001.42 539.779 1031.3 571.784 1060.81 606.069Z" stroke="url(#paint2_linear)" stroke-opacity="0.5" stroke-miterlimit="10"/>
|
||||||
|
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
|
@ -1,4 +1,4 @@
|
||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M9.5 15H6C4.89543 15 4 14.1046 4 13V6C4 4.89543 4.89543 4 6 4H13C14.1046 4 15 4.89543 15 6V9.5" stroke="white" stroke-width="1.5"/>
|
<path d="M9.5 15H6C4.89543 15 4 14.1046 4 13V6C4 4.89543 4.89543 4 6 4H13C14.1046 4 15 4.89543 15 6V9.5" stroke="#0098d4" stroke-width="1.5"/>
|
||||||
<rect x="9" y="9" width="11" height="11" rx="2" stroke="white" stroke-width="1.5"/>
|
<rect x="9" y="9" width="11" height="11" rx="2" stroke="#0098d4" stroke-width="1.5"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 328 B After Width: | Height: | Size: 332 B |
3
images/tick-dark.svg
Normal file
3
images/tick-dark.svg
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M5.5 12.5L8.84497 15.845C9.71398 16.714 11.1538 16.601 11.8767 15.6071L18.5 6.5" stroke="#333" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 249 B |
|
@ -43,7 +43,11 @@ export class ClientView extends TemplateView {
|
||||||
t.div({className: "header"}, [
|
t.div({className: "header"}, [
|
||||||
t.div({className: "description"}, [
|
t.div({className: "description"}, [
|
||||||
t.h3(vm.name),
|
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.p({className: "platforms"}, formatPlatforms(vm.availableOnPlatformNames)),
|
||||||
]),
|
]),
|
||||||
t.img({className: "clientIcon", src: vm.iconUrl})
|
t.img({className: "clientIcon", src: vm.iconUrl})
|
||||||
|
@ -80,6 +84,8 @@ class InstallClientView extends TemplateView {
|
||||||
if (textInstructions) {
|
if (textInstructions) {
|
||||||
const copyButton = t.button({
|
const copyButton = t.button({
|
||||||
className: "copy",
|
className: "copy",
|
||||||
|
title: "Copy instructions",
|
||||||
|
"aria-label": "Copy instructions",
|
||||||
onClick: evt => {
|
onClick: evt => {
|
||||||
if (copy(vm.copyString, copyButton.parentElement)) {
|
if (copy(vm.copyString, copyButton.parentElement)) {
|
||||||
copyButton.className = "tick";
|
copyButton.className = "tick";
|
||||||
|
@ -131,9 +137,8 @@ class InstallClientView extends TemplateView {
|
||||||
}
|
}
|
||||||
|
|
||||||
function showBack(t, vm) {
|
function showBack(t, vm) {
|
||||||
return t.p({className: {previewSource: true, hidden: vm => !vm.showBack}}, [
|
return t.p({className: {caption: true, "back": true, hidden: vm => !vm.showBack}}, [
|
||||||
`Continue with ${vm.name}.`,
|
`Continue with ${vm.name} · `,
|
||||||
" ",
|
|
||||||
t.button({className: "text", onClick: () => vm.back()}, "Change"),
|
t.button({className: "text", onClick: () => vm.back()}, "Change"),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -76,6 +76,10 @@ export class ClientViewModel extends ViewModel {
|
||||||
return actions;
|
return actions;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get homepage() {
|
||||||
|
return this._client.homepage;
|
||||||
|
}
|
||||||
|
|
||||||
get identifier() {
|
get identifier() {
|
||||||
return this._link.identifier;
|
return this._link.identifier;
|
||||||
}
|
}
|
||||||
|
@ -102,7 +106,7 @@ export class ClientViewModel extends ViewModel {
|
||||||
|
|
||||||
get textInstructions() {
|
get textInstructions() {
|
||||||
let instructions = this._client.getLinkInstructions(this._proposedPlatform, this._link);
|
let instructions = this._client.getLinkInstructions(this._proposedPlatform, this._link);
|
||||||
if (!Array.isArray(instructions)) {
|
if (instructions && !Array.isArray(instructions)) {
|
||||||
instructions = [instructions];
|
instructions = [instructions];
|
||||||
}
|
}
|
||||||
return instructions;
|
return instructions;
|
||||||
|
|
|
@ -35,9 +35,9 @@ class ShowLinkView extends TemplateView {
|
||||||
return t.div([
|
return t.div([
|
||||||
t.view(new PreviewView(vm.previewViewModel)),
|
t.view(new PreviewView(vm.previewViewModel)),
|
||||||
t.view(new ClientListView(vm.clientsViewModel)),
|
t.view(new ClientListView(vm.clientsViewModel)),
|
||||||
t.p({className: {previewSource: true, hidden: vm => !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}.`,
|
vm => vm.previewFailed ? `${vm.previewDomain} has not returned a preview.` : `Preview provided by ${vm.previewDomain}`,
|
||||||
" ",
|
" · ",
|
||||||
t.button({className: "text", onClick: () => vm.changeServer()}, "Change"),
|
t.button({className: "text", onClick: () => vm.changeServer()}, "Change"),
|
||||||
]),
|
]),
|
||||||
]);
|
]);
|
||||||
|
|
|
@ -40,7 +40,7 @@ export class Element {
|
||||||
get name() {return "Element"; }
|
get name() {return "Element"; }
|
||||||
get description() { return 'Fully-featured Matrix client, used by millions.'; }
|
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"; }
|
get author() { return "Element"; }
|
||||||
|
|
||||||
getMaturity(platform) { return Maturity.Stable; }
|
getMaturity(platform) { return Maturity.Stable; }
|
||||||
|
|
Loading…
Reference in a new issue