switch to scss

package.json

@@ -18,6 +18,8 @@
     "core-js": "^3.6.5",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^7.0.0",
+    "sass": "^1.37.5",
+    "sass-loader": "^10.2.0",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0"
   }

src/App.vue

@@ -1,8 +1,7 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <div class="alert alert-success text-center mb-0" role="alert">
-    Willkommen beim Alpha-Test!
-    <a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new">Problem gefunden? Bitte hier ein Issue anlegen.</a>
+    Willkommen in der Alpha Version! <a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new">Problem? Einfach ein neues Issue Anlegen.</a>
   </div>
   <header v-if="this.$route.path.includes('/s/')">
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
@@ -64,7 +63,7 @@
               class="form-control me-2"
               v-model="searchText"
               type="search"
-              placeholder="Profile durchsuchen"
+              placeholder="Direkt Suchen"
               aria-label="Search"
             />
             <button
@@ -86,7 +85,7 @@
     <a href="https://wtf-eg.de/impressum/" class="m-4">Impressum</a>
     <a href="https://wtf-eg.de/datenschutz/" class="m-4">Datenschutz</a>
     <a href="https://git.wtf-eg.de/kompetenzinventar" class="m-4">git(ea)</a>
-    <a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new" class="m-4">Problem melden</a>
+    <a href="https://git.wtf-eg.de/kompetenzinventar/ki-frontend/issues/new" class="m-4">Problem Melden</a>
   </footer>
 </template>
 <script>

src/assets/global.scss

@@ -2,7 +2,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+@import "variables";
+@import "bootstrap/scss/bootstrap";
+
 .container{
   min-height: calc(100vh - 70px - 24px);
 }
-  

src/assets/variables.scss

@@ -0,0 +1 @@
+$primary: #0790a9;

src/components/AutoComplete.vue

@@ -64,7 +64,7 @@
           aria-label="Hinzufügen"
           @click="editSelectedResult()"
         >
-          Änderung speichern
+          Änderung Speichern
         </button>
       </div>
     </div>

src/main.js

@@ -5,8 +5,7 @@ import router from './router'
 
 import axios from 'axios'
 
-import 'bootstrap/dist/css/bootstrap.min.css'
-import './assets/custom.css'
+import './assets/global.scss'
 
 const app = createApp(App)
 

src/views/Index.vue

@@ -1,11 +1,11 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <div class="container">
-    <h1>WTF Kompetenzinventar</h1>
+    <h1>Kompetenz Inventar by WTF eG</h1>
     <form @submit.prevent="submitLogin()">
       <div class="mb-3">
         <label for="exampleInputusername1" class="form-label"
-          >Benutzername:
+          >E-Mail Aresse:
         </label>
         <input
           type="username"
@@ -34,10 +34,10 @@
       v-if="showErrorMessage"
     >
       Mit deinen Login Daten ist ein Fehler aufgetreten. Versuch es nochmal oder
-      <a href="https://resetpw.wtf-eg.de/">hast du dein Passwort vergessen?</a>.
+      <a href="https://resetpw.wtf-eg.de/">erzeuge ein neues Passwort</a>.
     </div>
     <p>
-      Das Login gilt nur für WTF eG Mitglieder. Du kannst dein LDAP Passwort
+      Das Login gilt nur für WTF eG Mitglieder. Du kannst dein Ldap Passwort
       hier ändern.
     </p>
   </div>
@@ -85,4 +85,4 @@ export default {
     },
   },
 };
-</script>
+</script>

src/views/Search.vue

@@ -14,7 +14,7 @@
         </div>
         <div class="col">
           <button type="submit" class="btn btn-primary mb-4">
-            Suche starten
+            Suche Starten
           </button>
         </div>
       </div>
@@ -28,7 +28,7 @@
     </div>
     <div v-if="searchTotal == 0">
       Es wurde kein Suchergebnis gefunden.
-      <p v-if="searchText !== ''">Probiere eine andere Suche.</p>
+      <p v-if="searchText !== ''">Am besten suchst du weniger Spezifisch.</p>
     </div>
     <div v-else>
       <div class="row">

src/views/profile/Edit.vue

@@ -1,12 +1,12 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <div class="container">
-    <h1>Profil bearbeiten</h1>
+    <h1>Profil Ändern</h1>
     <form @submit.prevent="submitForm()">
       <div class="row">
         <div class="col">
           <input type="radio" id="false" :value="false" v-model="profile.visible" class="mr-2"/>
-          <label for="false" class="m-2 fw-bold"> Nicht öffentlich</label>
+          <label for="false" class="m-2 fw-bold"> Nicht Öffentlich</label>
         </div>
         <div class="col">
           <input type="radio" id="true" :value="true" v-model="profile.visible" />
@@ -42,7 +42,7 @@
       </div>
       <div class="row">
         <div class="col-12 col-xs-12">
-          <label for="freetext" class="form-label fw-bold">Vorstellung:</label>
+          <label for="freetext" class="form-label fw-bold">Freitext Vorstellung:</label>
           <textarea
             class="form-control"
             id="freetext"
@@ -52,7 +52,7 @@
         </div>
         <div class="col-12 col-xs-12">
           <label for="volunteerwork" class="form-label fw-bold"
-            >Ehrenamtliche Arbeit:</label
+            >Ehrentamtliche Arbeit:</label
           >
           <textarea
             class="form-control"
@@ -64,19 +64,19 @@
       </div>
       <auto-complete
         type="skill"
-        label="Deine Fähigkeiten"
+        label="Deine Fähigkeiten (Autocomplete)"
         :values="profile.skills"
         @update-values="profile.skills = $event"
       ></auto-complete>
       <auto-complete
         type="language"
-        label="Deine Sprachen"
+        label="Deine Sprachen (Autocomplete)"
         :values="profile.languages"
         @update-values="profile.languages = $event"
       ></auto-complete>
       <auto-complete
         type="skill"
-        label="Ich suche"
+        label="Ich Suche"
         :values="profile.searchtopics"
         @update-values="profile.searchtopics = $event"
       ></auto-complete>

src/views/profile/View.vue

@@ -1,19 +1,16 @@
 <!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
 <template>
   <div v-if="profile" class="container">
-    <h1>
-        {{profile.nickname}}
-        <span v-if="profile.pronouns">({{profile.pronouns}})</span>
-    </h1>
+    <h1>{{profile.nickname}}({{profile.pronouns}})</h1>
     <p><label class="fw-bold">Vorstellung: </label> {{profile.freetext}}</p>
     <p><label class="fw-bold">Ehrentamtliche Arbeit: </label> {{profile.volunteerwork}}</p>
     <p><label class="fw-bold">Verfügbarkeit: </label> {{profile.availability}}</p>
-    <h3>Das kann ich:</h3>
+    <h3>Meine Skills:</h3>
     <profile-list
       :values="profile.skills"
       type="skill"
     ></profile-list>
-    <h3>Das suche ich:</h3>
+    <h3>Ich Suche:</h3>
     <profile-list
       :values="profile.searchtopics"
       type="skill"