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

Refactor Saas naming, structure and modules

Browse Source 
- Add more documentation.
- Use `main.scss` instead of importing components individually. This
  improves productivity without compilation errors due to missing
  imports and allows for easier future file/folder changes and
  refactorings inside `./styles`.
- Use partials with underscored naming. Because it documents that the
  files should not be individually imported.
- Introduce `third-party-extensions` folder to group styles that
  overwrites third party components.
- Refactor variable names from generic to specific.
- Use Sass modules (`@use` and `@forward`) over depreciated `@import`
  syntax.
- Separate font assets from Sass files (`styles/`). Create `assets/`
  folder that will contain both.
- Create `_globals.css` for global styling of common element instead of
  using `App.vue`.
This commit is contained in:
undergroundwires
2021-11-14 17:48:49 +01:00
parent 2e082932c9
commit bf83c58982
43 changed files with 198 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/presentation/components/App.vue
View File

@@ -33,27 +33,7 @@ export default class App extends Vue {
</script>
<style lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@import "@/presentation/styles/media.scss";
* {
box-sizing: border-box;
}
a {
color:inherit;
text-decoration: underline;
cursor: pointer;
&:hover {
color: $color-primary;
}
}
body {
background: $color-background;
font-family: $main-font;
}
@use "@/presentation/assets/styles/main" as *;
#app {
margin-right: auto;
@@ -76,6 +56,4 @@ body {
}
}
@import "@/presentation/styles/tooltip.scss";
@import "@/presentation/styles/tree.scss";
</style>

5
src/presentation/components/Code/CodeButtons/Code.vue
View File

@@ -25,13 +25,12 @@ export default class Code extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
.code-wrapper {
white-space: nowrap;
justify-content: space-between;
font-family: $normal-font;
font-family: $font-normal;
background-color: $color-primary-darker;
color: $color-on-primary;
padding-left: 0.3rem;

5
src/presentation/components/Code/CodeButtons/IconButton.vue
View File

@@ -24,8 +24,7 @@ export default class IconButton extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
.button {
display: flex;
@@ -57,7 +56,7 @@ export default class IconButton extends Vue {
}
&__text {
display: none;
font-family: $artistic-font;
font-family: $font-artistic;
font-size: 1.5em;
color: $color-primary;
font-weight: 500;

3
src/presentation/components/Code/CodeButtons/MacOsInstructions.vue
View File

@@ -104,8 +104,7 @@ export default class MacOsInstructions extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
li {
margin: 10px 0;

3
src/presentation/components/Code/TheCodeArea.vue
View File

@@ -150,7 +150,8 @@ function getDefaultCode(language: ScriptingLanguage): string {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
::v-deep .code-area {
min-height: 200px;
width: 100%;

4
src/presentation/components/Scripts/Menu/MenuOptionList.vue
View File

@@ -17,11 +17,11 @@ export default class MenuOptionList extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
$gap: 0.25rem;
.list {
font-family: $normal-font;
font-family: $font-normal;
display: flex;
align-items: center;
.items {

2
src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
View File

@@ -22,7 +22,7 @@ export default class MenuOptionListItem extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
.enabled {
cursor: pointer;

2
src/presentation/components/Scripts/Slider/Handle.vue
View File

@@ -43,7 +43,7 @@ export default class Handle extends Vue {
</script>
<style lang="scss" scoped>
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
$color : $color-primary-dark;
$color-hover : $color-primary;

4
src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue
View File

@@ -40,7 +40,7 @@ export default class HorizontalResizeSlider extends Vue {
</script>
<style lang="scss" scoped>
@import "@/presentation/styles/media.scss";
@use "@/presentation/assets/styles/main" as *;
.slider {
display: flex;
@@ -53,7 +53,7 @@ export default class HorizontalResizeSlider extends Vue {
flex: 1;
min-width: var(--second-min-width);
}
@media screen and (max-width: $vertical-view-breakpoint) {
@media screen and (max-width: $media-vertical-view-breakpoint) {
flex-direction: column;
.first {
width: auto !important;

7
src/presentation/components/Scripts/View/Cards/CardList.vue
View File

@@ -105,13 +105,12 @@ function isClickable(element: Element) {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/fonts.scss";
@import "@/presentation/styles/components/card.scss";
@use "@/presentation/assets/styles/main" as *;
.cards {
display: flex;
flex-flow: row wrap;
font-family: $main-font;
font-family: $font-main;
gap: $card-gap;
/*
Padding is used to allow scale animation (growing size) for cards on hover.
@@ -124,6 +123,6 @@ function isClickable(element: Element) {
width: 100%;
text-align: center;
font-size: 3.5em;
font-family: $normal-font;
font-family: $font-normal;
}
</style>

4
src/presentation/components/Scripts/View/Cards/CardListItem.vue
View File

@@ -95,9 +95,7 @@ export default class CardListItem extends StatefulVue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/media.scss";
@import "@/presentation/styles/components/card.scss";
@use "@/presentation/assets/styles/main" as *;
$card-inner-padding : 30px;
$arrow-size : 15px;

3
src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
View File

@@ -24,7 +24,8 @@
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
.documentationUrls {
display: flex;
flex-direction: row;

3
src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue
View File

@@ -32,7 +32,8 @@
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
#node {
display:flex;
flex-direction: row;

26
src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
View File

@@ -52,14 +52,14 @@ export default class RevertToggle extends StatefulVue {
<style scoped lang="scss">
@use 'sass:math';
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
$color-unchecked-bullet : $color-primary-darker;
$color-unchecked-text : $color-on-primary;
$color-unchecked-bg : $color-primary;
$color-checked-bg : $color-secondary;
$color-checked-text : $color-on-secondary;
$color-checked-bullet : $color-on-secondary;
$color-bullet-unchecked : $color-primary-darker;
$color-bullet-checked : $color-on-secondary;
$color-text-unchecked : $color-on-primary;
$color-text-checked : $color-on-secondary;
$color-bg-unchecked : $color-primary;
$color-bg-checked : $color-secondary;
$size-width : 85px;
$size-height : 30px;
@@ -94,7 +94,7 @@ $size-height : 30px;
position: relative;
width: $size-width;
height: $size-height;
background-color: $color-unchecked-bg;
background-color: $color-bg-unchecked;
-webkit-transition: background-color 0.25s ease-out 0s;
transition: background-color 0.25s ease-out 0s;
@@ -109,7 +109,7 @@ $size-height : 30px;
height: $circle-size;
border-radius: $circle-size * 2;
-webkit-border-radius: $circle-size * 2;
background-color: $color-unchecked-bullet;
background-color: $color-bullet-unchecked;
top: $size-height * 0.16;
left: $size-width * 0.05;
-webkit-transition: left 0.3s ease-out 0s;
@@ -120,11 +120,11 @@ $size-height : 30px;
input.input-checkbox:checked {
+ .checkbox-animate {
background-color: $color-checked-bg;
background-color: $color-bg-checked;
}
+ .checkbox-animate:before {
left: ($size-width - math.div($size-width, 3.5));
background-color: $color-checked-bullet;
background-color: $color-bullet-checked;
}
+ .checkbox-animate .checkbox-off {
display: none;
@@ -146,7 +146,7 @@ $size-height : 30px;
.checkbox-off {
margin-left: math.div($size-width, 3);
opacity: 1;
color: $color-unchecked-text;
color: $color-text-unchecked;
}
.checkbox-on {
@@ -154,7 +154,7 @@ $size-height : 30px;
float: right;
margin-right: math.div($size-width, 3);
opacity: 0;
color: $color-checked-text;
color: $color-text-checked;
}
}
</style>

10
src/presentation/components/Scripts/View/TheScriptsView.vue
View File

@@ -95,15 +95,13 @@ export default class TheScriptsView extends StatefulVue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@import "@/presentation/styles/media.scss";
@use "@/presentation/assets/styles/main" as *;
$inner-margin: 4px;
$margin-inner: 4px;
.scripts {
margin-top: $inner-margin;
@media screen and (min-width: $vertical-view-breakpoint) { // so the current code is always visible
margin-top: $margin-inner;
@media screen and (min-width: $media-vertical-view-breakpoint) { // so the current code is always visible
overflow: auto;
max-height: 70vh;
}

5
src/presentation/components/Shared/Dialog.vue
View File

@@ -31,12 +31,11 @@ export default class Dialog extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/fonts.scss";
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
.dialog {
color: $color-surface;
font-family: $normal-font;
font-family: $font-normal;
margin-bottom: 10px;
display: flex;
flex-direction: row;

3
src/presentation/components/TheFooter/DownloadUrlList.vue
View File

@@ -38,8 +38,7 @@ export default class DownloadUrlList extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/media.scss";
@import "@/presentation/styles/colors.scss";
@use "@/presentation/assets/styles/main" as *;
.container {
display:flex;

5
src/presentation/components/TheFooter/PrivacyPolicy.vue
View File

@@ -56,11 +56,12 @@ export default class PrivacyPolicy extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
.privacy-policy {
display: flex;
flex-direction: column;
font-family: $normal-font;
font-family: $font-normal;
text-align:center;
.line {

12
src/presentation/components/TheFooter/TheFooter.vue
View File

@@ -81,9 +81,7 @@ export default class TheFooter extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@import "@/presentation/styles/media.scss";
@use "@/presentation/assets/styles/main" as *;
.icon {
margin-right: 0.5em;
@@ -93,13 +91,13 @@ export default class TheFooter extends Vue {
.footer {
display: flex;
justify-content: space-between;
@media screen and (max-width: $big-screen-width) {
@media screen and (max-width: $media-screen-big-width) {
flex-direction: column;
align-items: center;
}
&__section {
display: flex;
@media screen and (max-width: $big-screen-width) {
@media screen and (max-width: $media-screen-big-width) {
justify-content: space-around;
width:100%;
&:not(:first-child) {
@@ -108,13 +106,13 @@ export default class TheFooter extends Vue {
}
flex-wrap: wrap;
font-size: 1rem;
font-family: $normal-font;
font-family: $font-normal;
&__item:not(:first-child) {
&::before {
content: "|";
padding: 0 5px;
}
@media screen and (max-width: $big-screen-width) {
@media screen and (max-width: $media-screen-big-width) {
margin-top: 3px;
&::before {
content: "";

8
src/presentation/components/TheHeader.vue
View File

@@ -22,8 +22,8 @@ export default class TheHeader extends Vue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
#container {
display: flex;
align-items: center;
@@ -37,7 +37,7 @@ export default class TheHeader extends Vue {
.title {
margin: 0;
text-transform: uppercase;
font-family: $main-font;
font-family: $font-main;
font-size: 2.5em;
line-height: 1.1;
}
@@ -45,7 +45,7 @@ export default class TheHeader extends Vue {
margin: 0;
font-size: 1.5em;
color: $color-primary;
font-family: $artistic-font;
font-family: $font-artistic;
font-weight: 500;
line-height: 1.2;
}

5
src/presentation/components/TheSearchBar.vue
View File

@@ -58,8 +58,7 @@ export default class TheSearchBar extends StatefulVue {
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
@import "@/presentation/styles/fonts.scss";
@use "@/presentation/assets/styles/main" as *;
.search {
width: 100%;
@@ -81,7 +80,7 @@ export default class TheSearchBar extends StatefulVue {
padding-right:10px;
outline: none;
color: $color-primary;
font-family: $normal-font;
font-family: $font-normal;
font-size:1em;
&:focus {
color: $color-primary-darker;