style(eslint): apply max-len rule

⚠️ the files where autofixed by `prettier` formatting. In order to get rid of most of the `max-len` errors. That is why there are changes included that have nothing todo with `max-len`, but also do not collide with the current `eslint stylisit set`. See: BIDS-128
gobitfly · Aug 8, 2024 · 28ab088 · 28ab088
1 parent 912de0d
commit 28ab088
Show file tree

Hide file tree

Showing 274 changed files with 9,991 additions and 5,683 deletions.
diff --git a/frontend/README.md b/frontend/README.md
@@ -1,6 +1,7 @@
 # Beaconch.in Good to know
 
 ## Usefull VSC Plugins
+
 - Nuxtr
 - EsLint
 - Prettier -COde Formatter
@@ -20,49 +21,60 @@ Clone the `beaconchain` repository from git.
 On your console, navigate to folder `beaconchain/frontend`.
 
 Type
+
 ```bash
 cp .npmrc-example .npmrc
 ```
 
 In your `.npmrc` file, replace `FA_TOKEN` with an actual key for Font Awesome.
 
 Then type:
+
 ```bash
 cp .env-example .env
 ```
+
 In file `.env`, write the URLs of the API servers and the secret key to access to them.
 The variable evoking the development is used to show/hide features and components that are not ready for production.
 
 Set the following mapping in your `/etc/hosts` file:
+
 ```
 127.0.0.1 local.beaconcha.in
 ```
 
 Create server certificates for locally running on https, by runing these comands in the console (the last two with `sudo`)
+
 ```bash
 openssl genrsa 2048 > server.key
 chmod 400 server.key
 openssl req -new -x509 -nodes -sha256 -days 365 -key server.key -out server.crt
 ```
+
 Add the following env variable (on Ubuntu: in your `~/.profile`) needed to load local mock data:
+
 ```bash
 export NODE_TLS_REJECT_UNAUTHORIZED=0
 ```
 
 Restart.
 
 Navigate to folder `beaconchain/frontend` and run
+
 ```bash
 npm install
 ```
 
 If you prefer to use _pnpm_, _yarn_ or _bun_ instead of _npm_:
+
 ```bash
 sudo npm install -g pnpm
 sudo npm install -g yarn
 sudo npm install -g bun
 ```
+
 then
+
 ```bash
 pnpm install
 yarn install
@@ -79,6 +91,7 @@ pnpm run dev
 yarn dev
 bun run dev
 ```
+
 Now you can browse the front-end at https://local.beaconcha.in:3000/
 
 ## Production
@@ -121,5 +134,3 @@ Check out the [deployment documentation](https://nuxt.com/docs/getting-started/d
 
 We documented our decisions in the [decisions](decisions.md) file.
 The documentation should be inspired by Architecture Decision Records ([ADR](https://adr.github.io/)).
-
-
diff --git a/frontend/app.vue b/frontend/app.vue
@@ -3,15 +3,18 @@ import { generateUUID } from '~/utils/misc'
 
 // Used for debugging purposes, might be removed or moved later
 provide('app-uuid', { value: generateUUID() })
-useHead({
-  script: [
-    {
-      key: 'revive',
-      src: '../js/revive.min.js',
-      async: false,
-    },
-  ],
-}, { mode: 'client' })
+useHead(
+  {
+    script: [
+      {
+        key: 'revive',
+        src: '../js/revive.min.js',
+        async: false,
+      },
+    ],
+  },
+  { mode: 'client' },
+)
 useWindowSizeProvider()
 useBcToastProvider()
 useDateProvider()
@@ -27,5 +30,4 @@ useDateProvider()
   </div>
 </template>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
diff --git a/frontend/app/router.options.ts b/frontend/app/router.options.ts
@@ -1,5 +1,9 @@
 export default {
-  scrollBehavior(_to: any, _from: any, savedPosition: { left: number, top: number } | null) {
+  scrollBehavior(
+    _to: any,
+    _from: any,
+    savedPosition: { left: number, top: number } | null,
+  ) {
     return { _to, ...savedPosition }
   },
 }
diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss
@@ -22,13 +22,13 @@
   --light-black: #2a262c;
   --dark-blue: #2f2e42;
   --purple-blue: #3e4461;
-  --light-purple-blue: #545C7E;
-  --sky-blue:#cde3ee;
+  --light-purple-blue: #545c7e;
+  --sky-blue: #cde3ee;
   --light-blue: #66bce9;
-  --melllow-blue: #7db5eC;
+  --melllow-blue: #7db5ec;
   --blue: #2e82ae;
   --teal-blue: #116897;
-  --mint-green: #D3E4D4;
+  --mint-green: #d3e4d4;
   --flashy-green: #90ed7d;
   --light-green: #4e7451;
   --green: #7dc382;
@@ -37,7 +37,7 @@
   --light-red: #d42127;
   --dark-red: #ce3438;
   --bold-red: #b10b11;
-  --pastel-red: #F1C5C6;
+  --pastel-red: #f1c5c6;
   --yellow: #ffd600;
   --light-yellow: #969100;
   --purple: #9747ff;
@@ -74,7 +74,7 @@
 
   --button-secondary-color: var(--light-black);
   --button-secondary-hover-color: var(--light-grey-6);
-  --button-secondary-background-color--hover: var(--light-grey-4 );
+  --button-secondary-background-color--hover: var(--light-grey-4);
   --button-secondary-background-color: var(--grey-4);
   --button-secondary-border-color: var(--light-grey-7);
 
@@ -84,7 +84,7 @@
   --container-color: var(--light-black);
   --container-border-color: var(--light-grey-3);
   --container-border: 1px solid var(--container-border-color);
-  
+
   --subcontainer-background: var(--light-grey-2);
 
   --input-background: var(--grey-4);
@@ -153,7 +153,6 @@
   --toast-background-error-color: var(--pastel-red);
   --toast-border-error-color: var(--bold-red);
 
-
   &.dark-mode {
     --primary-color: var(--primary-orange);
     --primary-contrast-color: var(--light-black);
@@ -222,4 +221,4 @@
     --list-hover-background: var(--dark-grey);
     --list-hover-descrete-color: var(--grey);
   }
-}
+}
diff --git a/frontend/assets/css/fonts.scss b/frontend/assets/css/fonts.scss
@@ -111,13 +111,11 @@
   --standard_text_medium_font_weight: var(--roboto-medium);
   --standard_text_bold_font_weight: var(--roboto-bold);
 
-  --main_header_font_family:var(--roboto-family);
+  --main_header_font_family: var(--roboto-family);
   --main_header_font_size: 16px;
   --main_header_font_weight: var(--roboto-regular);
   --main_header_bold_font_weight: var(--roboto-bold);
 
-
-
   --small_text_font_family: var(--roboto-family);
   --small_text_font_size: 14px;
   --small_text_font_weight: var(--roboto-light);
@@ -171,14 +169,14 @@ h1 {
   @include subtitle_text;
 }
 
-@mixin big_text(){
+@mixin big_text() {
   font-family: var(--big_text_font_family);
   font-size: var(--big_text_font_size);
   font-weight: var(--big_text_font_weight);
 }
 
-.big_text{
-  @include big_text
+.big_text {
+  @include big_text;
 }
 
 @mixin big_text_label() {
@@ -188,116 +186,115 @@ h1 {
 }
 
 .big_text_label {
-  @include big_text_label
+  @include big_text_label;
 }
 
-@mixin standard_text(){
+@mixin standard_text() {
   font-family: var(--standard_text_font_family);
   font-size: var(--standard_text_font_size);
   font-weight: var(--standard_text_font_weight);
 }
 
-.standard_text{
-  @include standard_text
+.standard_text {
+  @include standard_text;
 }
 
-@mixin standard_text_bold(){
+@mixin standard_text_bold() {
   font-family: var(--standard_text_font_family);
   font-size: var(--standard_text_font_size);
   font-weight: var(--standard_text_bold_font_weight);
 }
 
-.standard_text_bold{
-  @include standard_text_bold
+.standard_text_bold {
+  @include standard_text_bold;
 }
 
-@mixin small_text(){
+@mixin small_text() {
   font-family: var(--small_text_font_family);
   font-size: var(--small_text_font_size);
   font-weight: var(--small_text_font_weight);
 }
 
-.small_text{
-  @include small_text
+.small_text {
+  @include small_text;
 }
 
-@mixin small_text_bold(){
+@mixin small_text_bold() {
   font-family: var(--small_text_font_family);
   font-size: var(--small_text_font_size);
   font-weight: var(--small_text_bold_font_weight);
 }
 
-.small_text_bold{
-  @include small_text_bold
+.small_text_bold {
+  @include small_text_bold;
 }
 
-@mixin tiny_text(){
+@mixin tiny_text() {
   font-family: var(--tiny_text_font_family);
   font-size: var(--tiny_text_font_size);
   font-weight: var(--tiny_text_font_weight);
 }
 
-.tiny_text{
-  @include tiny_text
+.tiny_text {
+  @include tiny_text;
 }
 
-@mixin tiny_text_bold(){
+@mixin tiny_text_bold() {
   font-family: var(--tiny_text_font_family);
   font-size: var(--tiny_text_font_size);
   font-weight: var(--tiny_text_bold_font_weight);
 }
 
-.tiny_text_bold{
-  @include tiny_text_bold
+.tiny_text_bold {
+  @include tiny_text_bold;
 }
 
-@mixin tooltip_text(){
+@mixin tooltip_text() {
   font-family: var(--tooltip_text_font_family);
   font-size: var(--tooltip_text_font_size);
   font-weight: var(--tooltip_text_font_weight);
 }
 
-.tooltip_text{
-  @include tooltip_text
+.tooltip_text {
+  @include tooltip_text;
 }
 
-@mixin tooltip_text_bold(){
+@mixin tooltip_text_bold() {
   font-family: var(--tooltip_text_font_family);
   font-size: var(--tooltip_text_font_size);
   font-weight: var(--tooltip_text_bold_font_weight);
 }
 
-.tooltip_text_bold{
-  @include tooltip_text_bold
+.tooltip_text_bold {
+  @include tooltip_text_bold;
 }
 
-@mixin button_text(){
+@mixin button_text() {
   font-family: var(--button_font_family);
   font-size: var(--button_font_size);
   font-weight: var(--button_font_weight);
 }
 
-
-.button_text{
-  @include button_text
+.button_text {
+  @include button_text;
 }
 
-@mixin text-toast(){
-  font-family:var(--roboto-family);
-  font-size:var(--standard_text_font_size);
+@mixin text-toast() {
+  font-family: var(--roboto-family);
+  font-size: var(--standard_text_font_size);
   font-weight: var(--roboto-bold);
 }
 
-.text-toast{
-  @include text-toast
+.text-toast {
+  @include text-toast;
 }
 
-@mixin text-toast-sm(){
-  font-family:var(--roboto-family);
+@mixin text-toast-sm() {
+  font-family: var(--roboto-family);
   font-size: var(--small_text_font_size);
   font-weight: var(--roboto-regular);
 }
 
-.text-toast-sm{
-  @include text-toast-sm
-}
+.text-toast-sm {
+  @include text-toast-sm;
+}