diff --git a/src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue b/src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue index 20020f9e..2a11bdc2 100644 --- a/src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue +++ b/src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue @@ -2,16 +2,18 @@ $ - - - - +
+ + + + +
@@ -68,8 +70,10 @@ export default defineComponent({ font-size: 0.8rem; user-select: none; } - .copy-button { + .copy-action-container { margin-left: 1rem; + } + .copy-button { @include clickable; @include hover-or-touch { color: $color-primary; diff --git a/src/presentation/components/Code/CodeButtons/Save/Instructions/Data/LinuxInstructionsBuilder.ts b/src/presentation/components/Code/CodeButtons/Save/Instructions/Data/LinuxInstructionsBuilder.ts index 21d389bd..ce280c05 100644 --- a/src/presentation/components/Code/CodeButtons/Save/Instructions/Data/LinuxInstructionsBuilder.ts +++ b/src/presentation/components/Code/CodeButtons/Save/Instructions/Data/LinuxInstructionsBuilder.ts @@ -27,7 +27,6 @@ export class LinuxInstructionsBuilder extends InstructionsBuilder { + '
  • Alt-T: Parrot OS…
  • ' + '
  • Ctrl-Alt-Insert: Bodhi Linux…
  • ' + '' - + '
    ' , }, })) diff --git a/src/presentation/components/Code/CodeButtons/Save/Instructions/InfoTooltip.vue b/src/presentation/components/Code/CodeButtons/Save/Instructions/InfoTooltip.vue new file mode 100644 index 00000000..c9d86d4a --- /dev/null +++ b/src/presentation/components/Code/CodeButtons/Save/Instructions/InfoTooltip.vue @@ -0,0 +1,21 @@ + + + diff --git a/src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue b/src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue index 69cb57ab..d631843f 100644 --- a/src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue +++ b/src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue @@ -13,8 +13,8 @@

    2. The hard (manual) alternative. This requires you to do additional manual - steps. If you are unsure how to follow the instructions, hover on information - () + steps. If you are unsure how to follow the instructions, tap or hover on information + (Engage with icons like this for extra wisdom!) icons near the steps, or follow the easy alternative described above.

    @@ -26,27 +26,15 @@ >

    {{ step.action.instruction }} - - - - +
    +
    +
    {{ step.code.instruction }} - - - - +
    +
    +
    @@ -60,16 +48,14 @@ import { } from 'vue'; import { injectKey } from '@/presentation/injectionSymbols'; import { OperatingSystem } from '@/domain/OperatingSystem'; -import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue'; -import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue'; import CodeInstruction from './CodeInstruction.vue'; import { IInstructionListData } from './InstructionListData'; +import InfoTooltip from './InfoTooltip.vue'; export default defineComponent({ components: { CodeInstruction, - TooltipWrapper, - AppIcon, + InfoTooltip, }, props: { data: { @@ -125,7 +111,7 @@ function renderOsName(os: OperatingSystem): string { margin-top: 0.5em; } } -.explanation { - margin-left: 0.5em; +.details-container { + margin-left: 0.5em; // Do not style icon itself to ensure correct tooltip alignment }