miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(nx-dev): adjust powerpack mobile view

Browse Source
This commit is contained in:
Juri 2024-09-26 09:33:04 +02:00 committed by Juri Strumpflohner
parent 529ab9455c
commit fc39beae7a
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
nx-dev/ui-powerpack/src/lib/get-started.tsx
View File

@ -85,13 +85,13 @@ export function GetStarted(): ReactElement {
/> />
</svg> </svg>
<div className="space-y-6 lg:space-y-12"> <div className="space-y-6 lg:space-y-12">
<div className="flex items-start gap-6"> <div className="flex flex-col items-center lg:flex-row lg:items-start lg:gap-6">
<div className="relative flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 dark:ring-slate-800/60"> <div className="mb-4 flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 lg:mb-0 dark:ring-slate-800/60">
<span className="text-lg text-slate-900 dark:text-slate-100"> <span className="text-lg text-slate-900 dark:text-slate-100">
1 1
</span> </span>
</div> </div>
<div> <div className="text-center lg:text-left">
<h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100"> <h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
Buy an Nx Powerpack license Buy an Nx Powerpack license
</h4> </h4>
@ -104,13 +104,14 @@ export function GetStarted(): ReactElement {
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-start gap-6">
<div className="relative flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 dark:ring-slate-800/60"> <div className="flex flex-col items-center lg:flex-row lg:items-start lg:gap-6">
<div className="mb-4 flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 lg:mb-0 dark:ring-slate-800/60">
<span className="text-lg text-slate-900 dark:text-slate-100"> <span className="text-lg text-slate-900 dark:text-slate-100">
2 2
</span> </span>
</div> </div>
<div> <div className="text-center lg:text-left">
<h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100"> <h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
Activate Nx Powerpack right from your terminal Activate Nx Powerpack right from your terminal
</h4> </h4>
@ -118,7 +119,7 @@ export function GetStarted(): ReactElement {
In your Nx workspace, run the following command to activate In your Nx workspace, run the following command to activate
your new license. your new license.
</p> </p>
<div className="mt-4"> <div className="mt-4 text-left">
<TerminalOutput <TerminalOutput
command="nx activate-powerpack {YOUR_LICENSE_KEY}" command="nx activate-powerpack {YOUR_LICENSE_KEY}"
path="~/my-workspace" path="~/my-workspace"
@ -128,13 +129,14 @@ export function GetStarted(): ReactElement {
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-start gap-6">
<div className="relative flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 dark:ring-slate-800/60"> <div className="flex flex-col items-center lg:flex-row lg:items-start lg:gap-6">
<div className="mb-4 flex size-10 place-items-center rounded-full p-4 shadow-sm ring-1 ring-slate-200 lg:mb-0 dark:ring-slate-800/60">
<span className="text-lg text-slate-900 dark:text-slate-100"> <span className="text-lg text-slate-900 dark:text-slate-100">
3 3
</span> </span>
</div> </div>
<div> <div className="text-center lg:text-left">
<h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100"> <h4 className="relative text-base font-medium leading-6 text-slate-900 dark:text-slate-100">
Install Powerpack plugins Install Powerpack plugins
</h4> </h4>

2
nx-dev/ui-powerpack/src/lib/powerpack-features.tsx
View File

@ -38,7 +38,7 @@ export function PowerpackFeatures(): ReactElement {
variant="secondary" variant="secondary"
size="default" size="default"
> >
Learn more about self-hosted cache storage Learn self-hosted cache storage
</ButtonLink> </ButtonLink>
</div> </div>
</div> </div>