mirror of
https://github.com/docker/docs.git
synced 2026-03-27 06:18:55 +07:00
homepage: update download component (#23978)
<!--Delete sections as needed --> ## Description This might be a my computer thing (because my computer probably isn't the fastest), but the component often flickers on load. - ~Removed x-collapse and~ added x-cloak to prevent the drop-down from appearing expanded before the js loads. - Changed the button text to static, so it's not waiting for the OS detection to load. ## Related issues or tickets ENGDOCS-3149 ## Reviews <!-- Notes for reviewers here --> <!-- List applicable reviews (optionally @tag reviewers) --> - [ ] Editorial review --------- Signed-off-by: Craig Osterhout <craig.osterhout@docker.com>
This commit is contained in:
@@ -60,10 +60,6 @@
|
||||
'linux': 'Docker Desktop for Linux'
|
||||
};
|
||||
return labels[os === 'linux' ? 'linux' : `${os}-${arch}`] || 'Docker Desktop';
|
||||
},
|
||||
getPrimaryLabel() {
|
||||
if (this.os === 'unknown') return 'Download Docker Desktop';
|
||||
return this.getOsLabel(this.os, this.arch);
|
||||
}
|
||||
}"
|
||||
@click.outside="open = false">
|
||||
@@ -83,7 +79,7 @@
|
||||
<a :href="getDownloadUrl(os, arch)"
|
||||
class="bg-blue flex cursor-pointer items-center gap-2 p-2 px-4 text-white transition duration-300 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 whitespace-nowrap">
|
||||
<span class="icon-svg icon-sm">{{ partial "icon" "download" }}</span>
|
||||
<span x-text="getPrimaryLabel()">Download Docker Desktop</span>
|
||||
<span>Download Docker Desktop</span>
|
||||
</a>
|
||||
<button @click="open = !open" type="button"
|
||||
class="bg-blue flex items-center justify-center px-3 text-white border-l border-blue-400 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-300"
|
||||
@@ -93,7 +89,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="open" x-collapse
|
||||
<div x-show="open" x-collapse x-cloak
|
||||
class="absolute top-full left-0 mt-1 min-w-full bg-white dark:bg-gray-800 rounded-sm shadow-lg overflow-hidden z-50">
|
||||
<a href="https://desktop.docker.com/mac/main/arm64/Docker.dmg?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-mac-arm64"
|
||||
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap">
|
||||
|
||||
Reference in New Issue
Block a user