Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Install guide tweaks #10838

Merged
merged 1 commit into from
Sep 12, 2019
Merged

Install guide tweaks #10838

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 23 additions & 62 deletions src/vector/mobile_guide/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,30 +45,9 @@

.mx_HomePage_header {
color: #2E2F32;
text-align: center;
}

.mx_HomePage_header h1 {
margin-left: 0px;
margin-bottom: 20px;
}

.mx_HomePage_header h2 {
margin-left: 0px;
margin-top: 5px;
margin-bottom: 20px;
margin-right: 20px;
color: #2E2F32;
}

.mx_HomePage_header h1 a {
color: #2E2F32;
}

.mx_HomePage_header h4 {
margin-top: -10px;
margin-right: 20px;
line-height: 1.4em;
display: flex;
align-items: center;
justify-content: center;
}

.mx_HomePage h3 {
Expand All @@ -84,32 +63,20 @@
flex-direction: row;
}

.mx_HomePage_toprow {
flex-wrap: wrap;
margin-top: 40px;
}

.mx_HomePage_row {
flex: 1 1 0;
margin-right: 20px;
margin-top: 20px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.mx_HomePage_logo {
margin-top: 20px;
margin-left: 20px;
margin-right: 30px;
margin-bottom: 20px;
display: inline;
height: 80px;
margin-right: 20px;
}

.mx_HomePage_container {
display: block ! important;
margin: 20px;
margin: 10px 20px;
}

.mx_HomePage_errorContainer {
Expand All @@ -125,10 +92,11 @@
.mx_HomePage_container h3,
.mx_HomePage_container h4 {
font-weight: 600;
margin-bottom: 32px;
}

.mx_Spacer {
margin-top: 30px;
margin-top: 24px;
}

.mx_FooterLink {
Expand All @@ -140,6 +108,10 @@
font-size: 14px;
}

.mx_SubtextTop {
margin-top: 32px;
}

@media screen and (max-width: 1120px) {
body {
font-size: 20px;
Expand All @@ -153,13 +125,12 @@
.mx_Button {
font-size: 18px;
padding: 14px 28px;
margin-bottom: 12px;
}
.mx_HomePage_toprow {
margin-top: 12px;
.mx_HomePage_header {
justify-content: left;
}
.mx_Spacer {
margin-top: 60px;
margin-top: 24px;
}
}

Expand Down Expand Up @@ -191,15 +162,13 @@
</g>
</svg>
</span>
<div>
<h1>Set up Riot on iOS or Android</h1>
</div>
<p>Set up Riot on iOS or Android</p>
</div>
<div class="mx_HomePage_col mx_HomePage_toprow">
<div class="mx_HomePage_col">
<div class="mx_HomePage_row">
<div>
<h2>1: Install the app</h2>
<p><strong>iOS:</strong> If you have an iPhone or iPad, install Riot from the Apple App Store.</p>
<h2 id="step1_heading">Install the app</h2>
<p><strong>iOS</strong> (iPhone or iPad)</p>
<a href="https://itunes.apple.com/app/riot-im/id1083446067?mt=8" target="_blank" class="mx_ClearDecoration">
<svg width="144px" height="48px" viewBox="0 0 120 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Download on the App Store.</desc>
Expand Down Expand Up @@ -251,7 +220,7 @@ <h2>1: Install the app</h2>
</g>
</svg>
</a>
<p class="mx_Spacer"><strong>Android:</strong> If you have an Android device, Riot from Google Play or F-droid.</p>
<p class="mx_Spacer"><strong>Android</strong></p>
<a href="https://play.google.com/store/apps/details?id=im.vector.app" target="_blank" class="mx_ClearDecoration">
<svg width="162px" height="48px" viewBox="0 0 162 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
Expand Down Expand Up @@ -357,30 +326,22 @@ <h2>1: Install the app</h2>
</div>
</div>
</div>
<div id="step2_container" class="mx_HomePage_col mx_HomePage_toprow" style="display: none;">
<div id="step2_container" class="mx_HomePage_col mx_Spacer" style="display: none;">
<div class="mx_HomePage_row">
<div>
<h2>2: Configure your app</h2>
<a class="mx_Button" id="configure_riot_button" href="#">Configure</a>
<p class="mx_Subtext">Tap the button above, or manually enable <em>Use custom server</em> and enter:</p>
<p class="mx_Subtext mx_SubtextTop">Tap the button above, or manually enable <em>Use custom server</em> and enter:</p>
<p class="mx_Subtext">Homeserver: <em id="hs_url"></em></p>
<p class="mx_Subtext" id="default_is">Identity Server: <em>https://vector.im</em> (default)</p>
<p class="mx_Subtext" id="custom_is">Identity Server: <em id="is_url"></em></p>
</div>
</div>
</div>
<div class="mx_HomePage_col mx_HomePage_toprow">
<div class="mx_HomePage_row">
<div>
<h2 id="step_login_header">2: Launch the app</h2>
<p>Launch & use the app to continue!</p>
</div>
</div>
</div>
<div class="mx_HomePage_row mx_Center mx_Spacer">
<p>
<p class="mx_Spacer">
<a id="back_to_riot_button" href="#" class="mx_FooterLink">
Back to Desktop
Go to Desktop Site
</a>
</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/vector/mobile_guide/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,9 @@ async function initPage() {
document.getElementById('configure_riot_button').href =
"https://riot.im/config/config?hs_url=" + encodeURIComponent(hsUrl) +
"&is_url=" + encodeURIComponent(isUrl);
document.getElementById('step1_heading').innerHTML= '1: Install the app';
document.getElementById('step2_container').style.display = 'block';
document.getElementById('hs_url').innerText = hsUrl;
document.getElementById('step_login_header').innerHTML= '3: Launch the app';

if (isUrl && isUrl !== "https://vector.im/") {
document.getElementById('default_is').style.display = 'none';
Expand Down