Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

apps: Minor tweaks to apps page. 

Co-authored-by: Alya Abbott <alya@zulip.com>
This commit is contained in:
Aman Agrawal 2024-02-20 06:45:01 +00:00 committed by Tim Abbott
parent 3fda29afad
commit c6d0a3c098
3 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
templates/corporate/apps.html
View File

@ -26,13 +26,13 @@
<div class="cta"> <div class="cta">
<h1>Zulip for <span class="platform"></span></h1> <h1>Zulip for <span class="platform"></span></h1>
<p class="description"></p> <p class="description"></p>
<p class="download-instructions">For download instructions, go to the <a class="silver bold" href="/help/desktop-app-install-guide" target="_blank" rel="noopener noreferrer">desktop app install guide</a>.</p>
<a class="desktop-download-link no-action" hidden href=""><span class="button green">Download Zulip for <span class="platform"></span></span></a> <a class="desktop-download-link no-action" hidden href=""><span class="button green">Download Zulip for <span class="platform"></span></span></a>
<a class="download-from-google-play-store" hidden href=""><img src="{{ static('images/store-badges/google-play-badge.png') }}" alt=""/></a> <a class="download-from-google-play-store" hidden href=""><img src="{{ static('images/store-badges/google-play-badge.png') }}" alt=""/></a>
<a class="download-from-apple-app-store" hidden href=""><img src="{{ static('images/store-badges/app-store-badge.svg') }}" alt=""/></a> <a class="download-from-apple-app-store" hidden href=""><img src="{{ static('images/store-badges/app-store-badge.svg') }}" alt=""/></a>
<span><a id="download-from-microsoft-store" hidden href="https://apps.microsoft.com/store/detail/XP8HN41S4PLGZ3">or download from the Microsoft Store</a></span> <span id="download-from-microsoft-store" hidden>or <a href="https://apps.microsoft.com/store/detail/XP8HN41S4PLGZ3">download from the Microsoft Store</a></span>
<span><a id="download-android-apk" hidden href="https://github.com/zulip/zulip-mobile/releases/latest">or manually download APK</a></span> <span id="download-android-apk" hidden>or <a href="https://github.com/zulip/zulip-mobile/releases/latest">manually download APK</a></span>
<span><a id="download-mac-arm64" hidden href="">or download Apple silicon native build</a></span> <span id="download-mac-arm64" hidden>or <a href="">download Apple silicon native build</a></span>
<p class="download-instructions"></p>
</div> </div>
</div> </div>
</div> </div>

26
web/src/portico/landing-page.js
View File

@ -15,25 +15,30 @@ const apps_events = function () {
windows: { windows: {
alt: "Windows", alt: "Windows",
description: description:
"Zulip for Windows is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.", "The Zulip desktop app comes with native <a class='apps-page-link' href='/help/desktop-notifications'>desktop notifications</a>, support for multiple Zulip accounts, and a dedicated tray icon.",
download_link: "/apps/download/windows", download_link: "/apps/download/windows",
show_instructions: true, show_instructions: true,
install_guide: "/help/desktop-app-install-guide", install_guide: "/help/desktop-app-install-guide",
app_type: "desktop", app_type: "desktop",
download_instructions:
'For help or to install offline, see our <a class="apps-page-link" href="/help/desktop-app-install-guide" target="_blank" rel="noopener noreferrer">installation guide</a>.',
}, },
mac: { mac: {
alt: "macOS", alt: "macOS",
description: description:
"Zulip on macOS is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.", "The Zulip desktop app comes with native <a class='apps-page-link' href='/help/desktop-notifications'>desktop notifications</a>, support for multiple Zulip accounts, and a dedicated tray icon.",
download_link: "/apps/download/mac", download_link: "/apps/download/mac",
mac_arm64_link: "/apps/download/mac-arm64", mac_arm64_link: "/apps/download/mac-arm64",
show_instructions: true, show_instructions: true,
install_guide: "/help/desktop-app-install-guide", install_guide: "/help/desktop-app-install-guide",
app_type: "desktop", app_type: "desktop",
download_instructions:
'For help or to install via Homebrew, see our <a class="apps-page-link" href="/help/desktop-app-install-guide" target="_blank" rel="noopener noreferrer">installation guide</a>.',
}, },
android: { android: {
alt: "Android", alt: "Android",
description: "Zulip's native Android app makes it easy to keep up while on the go.", description:
"Zulip's native Android app makes it easy to keep up while on the go, with fully customizable <a class='apps-page-link' href='/help/mobile-notifications'>mobile notifications</a>.",
show_instructions: false, show_instructions: false,
play_store_link: "https://play.google.com/store/apps/details?id=com.zulipmobile", play_store_link: "https://play.google.com/store/apps/details?id=com.zulipmobile",
download_link: "https://github.com/zulip/zulip-mobile/releases/latest", download_link: "https://github.com/zulip/zulip-mobile/releases/latest",
@ -41,7 +46,8 @@ const apps_events = function () {
}, },
ios: { ios: {
alt: "iOS", alt: "iOS",
description: "Zulip's native iOS app makes it easy to keep up while on the go.", description:
"Zulip's native iOS app makes it easy to keep up while on the go, with fully customizable <a class='apps-page-link' href='/help/mobile-notifications'>mobile notifications</a>.",
show_instructions: false, show_instructions: false,
app_store_link: "https://itunes.apple.com/us/app/zulip/id1203036395", app_store_link: "https://itunes.apple.com/us/app/zulip/id1203036395",
app_type: "mobile", app_type: "mobile",
@ -49,11 +55,13 @@ const apps_events = function () {
linux: { linux: {
alt: "Linux", alt: "Linux",
description: description:
"Zulip on the Linux desktop is even better than Zulip on the web, with a cleaner look, tray integration, native notifications, and support for multiple Zulip accounts.", "The Zulip desktop app comes with native <a class='apps-page-link' href='/help/desktop-notifications'>desktop notifications</a>, support for multiple Zulip accounts, and a dedicated tray icon.",
download_link: "/apps/download/linux", download_link: "/apps/download/linux",
show_instructions: true, show_instructions: true,
install_guide: "/help/desktop-app-install-guide", install_guide: "/help/desktop-app-install-guide",
app_type: "desktop", app_type: "desktop",
download_instructions:
'For help or to install via a package manager, see our <a class="apps-page-link" href="/help/desktop-app-install-guide" target="_blank" rel="noopener noreferrer">installation guide</a>.',
}, },
}; };
@ -85,13 +93,13 @@ const apps_events = function () {
const version_info = info[version]; const version_info = info[version];
$(".info .platform").text(version_info.alt); $(".info .platform").text(version_info.alt);
$(".info .description").text(version_info.description); $(".info .description").html(version_info.description);
$desktop_download_link.attr("href", version_info.download_link); $desktop_download_link.attr("href", version_info.download_link);
$download_from_google_play_store.attr("href", version_info.play_store_link); $download_from_google_play_store.attr("href", version_info.play_store_link);
$download_from_apple_app_store.attr("href", version_info.app_store_link); $download_from_apple_app_store.attr("href", version_info.app_store_link);
$download_android_apk.attr("href", version_info.download_link); $download_android_apk.find("a").attr("href", version_info.download_link);
$download_mac_arm64.attr("href", version_info.mac_arm64_link); $download_mac_arm64.find("a").attr("href", version_info.mac_arm64_link);
$download_instructions.find("a").attr("href", version_info.install_guide); $download_instructions.html(version_info.download_instructions);
$download_instructions.toggle(version_info.show_instructions); $download_instructions.toggle(version_info.show_instructions);

25
web/styles/portico/landing_page.css
View File

@ -1041,7 +1041,7 @@ button {
hsl(197deg 100% 16%), hsl(197deg 100% 16%),
hsl(166deg 45% 49%) hsl(166deg 45% 49%)
); );
height: 600px; height: 450px;
color: hsl(0deg 0% 100%); color: hsl(0deg 0% 100%);
@ -1082,10 +1082,11 @@ button {
.portico-landing.apps .hero .info .cta { .portico-landing.apps .hero .info .cta {
text-shadow: 0 0 60px hsl(0deg 0% 0% / 30%); text-shadow: 0 0 60px hsl(0deg 0% 0% / 30%);
text-align: center;
} }
.portico-landing.apps .hero .info .flex { .portico-landing.apps .hero .info .flex {
height: 500px; height: 300px;
min-height: 0; min-height: 0;
} }
@ -2155,10 +2156,23 @@ button {
#download-from-microsoft-store, #download-from-microsoft-store,
#download-android-apk, #download-android-apk,
#download-mac-arm64 { #download-mac-arm64 {
display: inline-block; display: block;
color: hsl(0deg 0% 100%); color: hsl(0deg 0% 100%);
font-size: 13px; font-size: 13px;
padding-left: 10px; padding-left: 10px;
& a {
color: hsl(0deg 0% 100%);
}
}
#download-from-microsoft-store,
#download-mac-arm64 {
margin-top: 10px;
}
.download-instructions {
margin-top: 30px;
} }
.feature-container { .feature-container {
@ -2888,3 +2902,8 @@ button {
} }
} }
} }
.apps .apps-page-link {
text-decoration: underline;
color: hsl(0deg 0% 100%);
}