44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply global styles for visual consistency

Browse Source 
This commit centralizes the styling of key UI elements across the
project to ensure:

- Consistent look and feel.
- Enhanced code reusability.
- Simpified maintenance, improving development speed.

It establishes a uniform foundation that can be leveraged across
different parts of the project, even enabling the styling to be shared
across different websites (supporting issue #49).

Key changes:

- Apply the following shared styles globally:
  * Styling of code, blockquotes, superscripts, horizontal rules and
    anchors.
  * Vertical and horizontal spacing.
- Segregate base styling into dedicated SCSS files for clearer structure
  and increased maintainability.
- Remove custom styling from affected components, enabling global style
  reuse for visual uniformity, reduced redundancy, and enhanced
  semantics.

Other supporting changes:

- Rename `globals.scss` to `base.scss` for better clarity.
- Add `.editorconfig` for `.scss` files to ensure consistent whitespace
  usage.
- Remove `2` file from the project root, that was included in the source
  code by mistake.
- Remove unused font-face imports
This commit is contained in:
undergroundwires
2024-02-17 23:09:58 +01:00
parent d5bbc321f9
commit faa7a38a7d
27 changed files with 484 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/presentation/components/Code/CodeButtons/Save/RunInstructions/InfoTooltip.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="info-container">
<span class="info-container">
<TooltipWrapper>
<AppIcon icon="circle-info" />
<template #tooltip>
<slot />
</template>
</TooltipWrapper>
</div>
</span>
</template>
<script lang="ts">
@@ -23,9 +23,23 @@ export default defineComponent({
</script>
<style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;
@mixin apply-style-when-placed-after-non-text {
* + & {
@content;
}
}
.info-container {
display: inline-block;
margin-left: 0.15em; // Do not style icon itself to ensure correct tooltip alignment
vertical-align: middle;
vertical-align: text-top;
* + & { // If it's followed by any other element
vertical-align: middle;
@include set-property-ch-value-with-fallback(
$property: margin-left,
$value-in-ch: 0.5,
)
}
}
</style>

59
src/presentation/components/Code/CodeButtons/Save/RunInstructions/RunInstructions.vue
View File

@@ -1,32 +1,37 @@
<template>
<div class="instructions">
<section>
<p>
You have two alternatives to apply your selection.
</p>
<hr />
<p>
<strong>1. The easy alternative</strong>. Run your script without any manual steps by
<a :href="downloadUrl">downloading desktop version</a> of {{ appName }} on the
{{ osName }} system you wish to configure, and then click on the Run button. This is
recommended for most users.
</p>
<hr />
<p>
<strong>2. The hard (manual) alternative</strong>. This requires you to do additional manual
steps. If you are unsure how to follow the instructions, tap or hover on information
<InfoTooltip>Engage with icons like this for extra wisdom!</InfoTooltip>
icons near the steps, or follow the easy alternative described above.
</p>
<p>
<PlatformInstructionSteps :filename="filename" />
</p>
</div>
<article>
<h3>1. The Easy Alternative</h3>
<p>
Run your script without any manual steps by
<a :href="downloadUrl">downloading desktop version</a> of {{ appName }} on the
{{ osName }} system you wish to configure, and then click on the Run button. This is
recommended for most users.
</p>
</article>
<article>
<h3>2. The Hard (Manual) Alternative</h3>
<p>
This requires you to do additional manual
steps. If you are unsure how to follow the instructions, tap or hover on information
<InfoTooltip>Engage with icons like this for extra wisdom!</InfoTooltip>
icons near the steps, or follow the easy alternative described above.
</p>
<p>
<PlatformInstructionSteps :filename="filename" />
</p>
</article>
</section>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { injectKey } from '@/presentation/injectionSymbols';
import { OperatingSystem } from '@/domain/OperatingSystem';
import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
import InfoTooltip from './InfoTooltip.vue';
import PlatformInstructionSteps from './Steps/PlatformInstructionSteps.vue';
@@ -55,7 +60,7 @@ export default defineComponent({
);
const osName = computed<string>(
() => renderOsName(operatingSystem.value),
() => getOperatingSystemDisplayName(operatingSystem.value),
);
return {
@@ -65,21 +70,7 @@ export default defineComponent({
};
},
});
function renderOsName(os: OperatingSystem): string {
switch (os) {
case OperatingSystem.Windows: return 'Windows';
case OperatingSystem.macOS: return 'macOS';
case OperatingSystem.Linux: return 'Linux';
default: throw new RangeError(`Cannot render os name: ${OperatingSystem[os]}`);
}
}
</script>
<style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;
.step {
margin: 10px 0;
}
</style>

31
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/CopyableCommand.vue
View File

@@ -1,16 +1,16 @@
<template>
<span class="code-wrapper">
<code class="copyable-command">
<span class="dollar">$</span>
<code ref="codeElement"><slot /></code>
<div class="copy-action-container">
<span ref="copyableTextHolder"><slot /></span>
<span class="copy-action-container">
<TooltipWrapper>
<FlatButton icon="copy" @click="copyCode" />
<template #tooltip>
Copy
</template>
</TooltipWrapper>
</div>
</span>
</span>
</code>
</template>
<script lang="ts">
@@ -27,10 +27,10 @@ export default defineComponent({
setup() {
const { copyText } = injectKey((keys) => keys.useClipboard);
const codeElementRef = shallowRef<HTMLElement | undefined>();
const copyableTextHolderRef = shallowRef<HTMLElement | undefined>();
async function copyCode() {
const element = codeElementRef.value;
const element = copyableTextHolderRef.value;
if (!element) {
throw new Error('Code element could not be found.');
}
@@ -43,7 +43,7 @@ export default defineComponent({
return {
copyCode,
codeElement: codeElementRef,
copyableTextHolder: copyableTextHolderRef,
};
},
});
@@ -52,25 +52,16 @@ export default defineComponent({
<style scoped lang="scss">
@use "@/presentation/assets/styles/main" as *;
.code-wrapper {
.copyable-command {
display: inline-flex;
white-space: nowrap;
justify-content: space-between;
font-family: $font-family-monospace;
background-color: $color-primary-darker;
color: $color-on-primary;
align-items: center;
padding: 0.2rem;
padding: 0.25em;
font-size: $font-size-absolute-small;
.dollar {
margin-right: 0.5rem;
font-size: $font-size-absolute-x-small;
user-select: none;
}
.copy-action-container {
margin-left: 1rem;
}
code {
font-size: $font-size-absolute-small;
}
}
</style>

3
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/InstructionStep.vue
View File

@@ -13,7 +13,4 @@ export default defineComponent({
</script>
<style scoped lang="scss">
.step {
margin: 10px 0;
}
</style>

16
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/LinuxInstructions.vue
View File

@@ -46,9 +46,7 @@
Navigate to the folder where you downloaded the file e.g.:
</p>
<p>
<CopyableCommand>
cd ~/Downloads
</CopyableCommand>
<CopyableCommand>cd ~/Downloads</CopyableCommand>
<InfoTooltip>
<p>
Press on <code>enter/return</code> key after running the command.
@@ -72,9 +70,7 @@
Give the file execute permissions:
</p>
<p>
<CopyableCommand>
chmod +x {{ filename }}
</CopyableCommand>
<CopyableCommand>chmod +x {{ filename }}</CopyableCommand>
<InfoTooltip>
<p>
Press on <code>enter/return</code> key after running the command.
@@ -101,11 +97,11 @@
Execute the file:
</p>
<p>
<CopyableCommand>
./{{ filename }}
</CopyableCommand>
<CopyableCommand>./{{ filename }}</CopyableCommand>
<InfoTooltip>
If you have desktop environment, instead of running this command you can alternatively:
<p>
If you have desktop environment, instead of running this command you can alternatively:
</p>
<ol>
<li>Locate the file using your file manager.</li>
<li>Right click on the file, select "Run as program".</li>

8
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/MacOsInstructions.vue
View File

@@ -49,9 +49,7 @@
Give the file execute permissions:
</p>
<p>
<CopyableCommand>
chmod +x {{ filename }}
</CopyableCommand>
<CopyableCommand>chmod +x {{ filename }}</CopyableCommand>
<InfoTooltip>
<p>
Press on <code>enter/return</code> key after running the command.
@@ -67,9 +65,7 @@
Execute the file:
</p>
<p>
<CopyableCommand>
./{{ filename }}
</CopyableCommand>
<CopyableCommand>./{{ filename }}</CopyableCommand>
<InfoTooltip>
Alternatively you can locate the file in <strong>Finder</strong> and double click on it.
</InfoTooltip>

43
src/presentation/components/Code/CodeButtons/Save/RunInstructions/Steps/Platforms/WindowsInstructions.vue
View File

@@ -23,12 +23,12 @@
</p>
<p>
In <strong>Edge</strong>:
<ol>
<li>Select <strong>Keep</strong> from the downloads section.</li>
<li>Click <strong>Show more</strong> on the next warning.</li>
<li>Select <strong>Keep anyway</strong>.</li>
</ol>
</p>
<ol>
<li>Select <strong>Keep</strong> from the downloads section.</li>
<li>Click <strong>Show more</strong> on the next warning.</li>
<li>Select <strong>Keep anyway</strong>.</li>
</ol>
<p>
For <strong>Firefox</strong> and <strong>Chrome</strong>, typically no additional
action is needed.
@@ -53,25 +53,26 @@
</p>
<p>
To handle false warnings in Microsoft Defender:
<ol>
<li>
Open <strong>Virus & threat protection</strong> from
the <strong>Start</strong> menu.
</li>
<li>
Locate the event in <strong>Protection history</strong>
that pertains to the script.
</li>
<li>In the event details, select <strong>Actions</strong> > <strong>Allow</strong>.</li>
<li>If the script was deleted, please re-download it.</li>
</ol>
</p>
<ol>
<li>
Open <strong>Virus & threat protection</strong> from
the <strong>Start</strong> menu.
</li>
<li>
Locate the event in <strong>Protection history</strong>
that pertains to the script.
</li>
<li>In the event details, select <strong>Actions</strong> > <strong>Allow</strong>.</li>
<li>If the script was deleted, please re-download it.</li>
</ol>
<blockquote>
<strong>Caution:</strong> For your security, remember to:
<strong>Caution:</strong>
<p>For your security, remember to</p>
<ul>
<li>Only allow scripts from trusted sources.</li>
<li>Avoid broad exclusions in your antivirus settings.</li>
<li>Keep real-time protection enabled whenever possible.</li>
<li>only allow scripts from trusted sources,</li>
<li>avoid broad exclusions in your antivirus settings,</li>
<li>and keep real-time protection enabled whenever possible.</li>
</ul>
</blockquote>
</InfoTooltip>