etwas responsible gemacht, posten und commentieren geht profile machen

src/components/Home.vue

@@ -8,14 +8,14 @@ import Trending from "./home_components/trending.vue";
 
 
 <template>
-  <div id="main" class="flex md:flex-col">
+  <div id="main" class="sm:flex overflow-y-auto h-screen scrollbar">
-    <div id="left" class="w-72 min-w-72 md:full">
+    <div id="left" class="sm:w-72 min-w-72">
       <navigationbar></navigationbar>
     </div>
-    <div class="w-100p sm:w-screen">
+    <div class="sm:w-100p w-screen">
       <feed></feed>
     </div>
-    <div class="w-1/4 sm:w-screen">
+    <div class="sm:w-1/4 w-screen">
       <contacts></contacts>
       <legal></legal>
     </div>

src/components/Login.vue

@@ -11,12 +11,12 @@ function route_home() {
 </script>
 
 <template>
-  <div id="main" class="bg-hintergrund-farbe flex p-2 justify-between">
+  <div id="main" class="bg-hintergrund-farbe sm:flex sm:p-2 sm:justify-between ">
-    <div class="pt-5 ">
+    <div class="pt-5 pl-2">
       <img src="../assets/esp-logo_no_text.png" alt="" class=" rounded-lg h-12 w-24 hover:shadow-2xl hover:shadow-grau-dunkel" @click="route_home">
     </div>
     <login_comp class="inset-0"></login_comp>
-    <div class="inset-y-0 right-0  max-w-36">
+    <div class="md:inset-y-0 sm:right-0  sm:max-w-36 text-center">
       <legal></legal>
     </div>
   </div>

src/components/home_components/feed.vue

@@ -3,14 +3,14 @@ import {onMounted, ref} from "vue";
 import router from "../../router";
   // PLACEHOLDER
 const upc = ref([]); // user post computed
-let post_nr = "";
+let post_create_text = "";
-let current_user = "";
-let pust_create_text = "";
 let self_id ;
 
-/*
+onMounted(async () => {
+  self_id = localStorage.getItem("self_id");
+  await createFeed();
+});
 
- */
 async function createFeed() {
   try {
     // posts und user holen und schauen ob sie richtig sidn
@@ -37,7 +37,7 @@ async function createFeed() {
 
     //upc.value = combinedPosts;
 
-    upc.value = combinedPosts.sort(() => Math.random() - 0.5);
+    upc.value = combinedPosts.sort((a, b) => b.post_id - a.post_id);;
 
   } catch (e) {
     console.error("An error has occurred. Please try again later.");
@@ -46,17 +46,10 @@ async function createFeed() {
   console.log(upc.value);
 }
 
-
-onMounted(async () => {
-  await createFeed();
-  self_id = localStorage.getItem("self_id");
-  console.log("ICH: "+self_id);
-});
-
-
-
 async function addLike(post_id: string | number, user_id: number, index: number) {
   try {
+    console.log("UPC: ", upc.value);
+    console.log("post_id: ", post_id);
     upc.value[index].likes++;
     const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, {
       method: 'POST',
@@ -67,14 +60,13 @@ onMounted(async () => {
     console.log('Antwort-Status:', response.status);
 
     if (!response.ok) {
-        const errorText = await response.text(); // Versuche, den Fehlertext vom Server zu bekommen
+      const errorText = await response.text();
       console.error('Server-Fehlertext:', errorText);
-        upc.value[index].likes--;
+      //upc.value[index].likes--;
       throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`);
     }
 
     const data = await response.json();
-      console.log('Antwort vom Server:', data);
 
     return data;
   } catch (error) {
@@ -94,30 +86,42 @@ onMounted(async () => {
   alert("Copied to clipboard");
 }
 
-  function post_create(post_text: string, user_id: number) {
+async function post_create(post_text: string) {
+  console.log(self_id);
+  console.log(post_text);
+  const response = await fetch(`http://localhost:8000/api/post/create`, {
+    method: 'POST',
+    headers: {'content-type': 'application/json'},
+    body: `{"userId":${self_id},"postText":"${post_create_text}","postType":"text"}`});
+  const data = await response.json();
+  if (response.ok) {
+    console.log(response.text);
+    await createFeed();
+  }
+  console.log(data);
+
   console.log(post_text);
 }
 </script>
 
 <template>
-  <div class="border-x border-x-grau2"> <!-- MAIN -->
+  <div class="sm:border-x sm:border-x-grau2"> <!-- MAIN -->
     <div> <!-- FEED HEADER -->
-      <h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b ">Feed</h2>
+      <h2 class="align-middle p-6 text-3xl text-weiss border-b-grau2 border-b-2 ">Feed</h2>
       <!-- POSTING-->
       <div class="flex border-2 border-b-grau2">
         <img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
         <form class="w-full pr-5">
           <!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
-          <textarea v-model="pust_create_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea>
+          <textarea v-model="post_create_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea>
           <div class="">
-            <input class="text-weiss" type="file" accept=".png, .jpg, .jpeg">
+            <button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="post_create(post_create_text)" type="button">Post</button>
-            <button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="post_create(pust_create_text, )" type="button">Post</button>
           </div>
         </form>
       </div>
     </div>
 
-    <div class="overflow-y-auto h-screen scrollbar"> <!-- CONTENT -->
+    <div class="sm:overflow-y-auto sm:h-screen sm:scrollbar"> <!-- CONTENT -->
       <ul>
         <li v-for="(postitem, indexus) in upc" :key="upc" class="border-2 border-b-grau2 p-3 flex">
           <!-- POST -->

src/components/home_components/navigationbar.vue

@@ -12,25 +12,39 @@ const show = ref(false);
 
 const getShowMobileElements = () => {
   const value = localStorage.getItem("mobile");
+  console.log("localStorage mobile:", value); // Debugging-Ausgabe
   return value === 'true';
 };
 
 const setShowMobileElements = (value) => {
+  console.log("localStorage set mobile:", value.toString()); // Debugging-Ausgabe
   localStorage.setItem("mobile", value.toString());
 };
 
 const toggleElements = () => {
+  if (isMobile.value){
     show.value = !show.value;
-  setShowMobileElements(show.value); // Zustand im localStorage speichern
+    setShowMobileElements(show.value);
+
+  }
 };
 
 const checkScreenWidth = () => {
   isMobile.value = window.innerWidth < 640;
+  if(isMobile.value === false){
+    show.value = true;
+  } else {
+    show.value = false;
+  }
 };
 
 onMounted(() => {
   checkScreenWidth();
   window.addEventListener('resize', checkScreenWidth);
+  const show = ref(getShowMobileElements());
+  if(localStorage.getItem("mobile") === null){
+    show.value = false;
+  }
 });
 
 onUnmounted(() => {

src/components/login_components/login_comp.vue

@@ -47,22 +47,21 @@ async function login(event: Event) {
 </script>
 
 <template>
-  <div class="px-20 border-x border-x-grau2 pb-32">
+  <div class="px-20 sm:border-x sm:border-x-grau2 pb-32">
     <div class="text-3xl pt-32"> <!-- ÜBERSCHRIFT-->
       <p class="text-weiss text-center">Welcome to <label class="bg-schwarz p-1 rounded-lg mr-1"><span class="text-logo-farbe-lila">E</span><span class="text-logo-farbe-rot">S</span><span class="text-logo-farbe-blau">P</span></label>!</p>
       <p class="text-weiss text-center">Login to continue</p>
     </div>
     <div class="px-20 pt-7"><!--  FORM --->
       <form class="flex flex-col items-center" @submit.prevent="login">
-        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_username_mail" type="text" placeholder="Username or E-Mail"><br>
+        <input class="m-4 md:w-full md:max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_username_mail" type="text" placeholder="Username or E-Mail"><br>
-        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_user_password" type="password" placeholder="Password"><br>
+        <input class="m-4 md:w-full md:max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="input_user_password" type="password" placeholder="Password"><br>
-        <button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg">Login</button>
+        <button class="m-4 bg-button-farbe w-full md:max-w-xs p-4 text-schwarz rounded-lg">Login</button>
-        <p class="text-weiss"><input type="checkbox" v-model="rememberMe"> Remeber me</p>
       </form>
     </div>
     <div>
-      <p class="text-weiss text-center">No Account? <router-link to="/register" class="text-button-farbe">Register here</router-link></p>
+      <p class="text-weiss text-center pb-2 ">No Account? <router-link to="/register" class="text-button-farbe">Register here</router-link></p>
-      <p class="text-weiss text-center"> <router-link to="/wip" class="text-button-farbe">Forgot password?</router-link> </p>
+      <p class="text-weiss text-center pt-2"> <router-link to="/wip" class="text-button-farbe">Forgot password?</router-link> </p>
     </div>
   </div>
 

src/components/posts.vue

@@ -39,7 +39,10 @@ const router = useRouter();
 const post = ref<Post | null>(null);
 const user = ref<User | null>(null);
 const comments = ref<Comment[] | null>(null);
-let post_id = ref();
+let comment_text = ref();
+let self_id;
+
+let post_uuid = ref();
 
 onMounted(async () => {
   console.log("PARAMS: "+ route.path);
@@ -47,22 +50,21 @@ onMounted(async () => {
   console.log(pathArray);
 
   if (pathArray.length > 2) {
-    post_id.value = pathArray[2];
+    post_uuid.value = pathArray[2];
+    console.log("post_id 0: ", post_uuid.value);
 
   }
 
-  if (!post_id) {
+  if (!post_uuid) {
     alert('No post selected. Redirecting to feed.');
     await router.push('/');
     return;
   }
-
+  self_id = localStorage.getItem('self_id');
-  getPost(parseInt(post_id.value));
+  getPost(parseInt(post_uuid.value));
-  getComment(parseInt(post_id.value));
+  getComment(parseInt(post_uuid.value));
 });
 
-
-
 async function getPost(post_id: any) {
   try {
     const post_response =  await fetch(`http://localhost:8000/api/post/${post_id}`, { method: 'GET' });
@@ -125,27 +127,25 @@ function copyLink(post_id: string | number) {
   alert("Copied to clipboard");
 }
 
-async function addLike(post_id: string | number, user_id: number) {
+async function addLike() { // Post liken
   try {
     post.value.likes++;
-    const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, {
+    const response_like = await fetch(`http://localhost:8000/api/post/${post_uuid.value}/like`, {
       method: 'POST',
       headers: {'content-type': 'application/json'},
-      body: `{"userId":${user_id}}`,
+      body: `{"userId":${self_id}}`,
     });
 
-    console.log('Antwort-Status:', response.status);
+    if (!response_like.ok) {
-
+      const errorText = await response_like.text();
-    if (!response.ok) {
-      const errorText = await response.text(); // Versuche, den Fehlertext vom Server zu bekommen
       console.error('Server-Fehlertext:', errorText);
-      post.value.likes--;
+      //post.value.likes--;
-      throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`);
+      throw new Error(`HTTP error! status: ${response_like.status}, text: ${errorText}`);
     }
 
-    const data = await response.json();
+    const data = await response_like.json();
-    console.log('Antwort vom Server:', data);
 
+    console.log("post_id 2: ", post_uuid);
     return data;
   } catch (error) {
     console.error('Fehler beim Liken des Posts:', error);
@@ -153,6 +153,54 @@ async function addLike(post_id: string | number, user_id: number) {
   }
 }
 
+async function comment_create_text(comment_text: string) {
+  try {
+    const response = await fetch(`http://localhost:8000/api/post/${post_uuid.value}/comment`, {
+      method: 'POST',
+      headers: {'content-type': 'application/json'},
+      body: `{"userId":${self_id},"text":"${comment_text}"}`,});
+
+    const data = await response.json();
+
+    if(response.ok) {
+      await getComment(parseInt(post_uuid.value));
+    } else {
+      alert("Error while posting comment.");
+    }
+    return data;
+  } catch (error) {
+    console.error(error);
+  }
+  console.log(comment_text);
+}
+
+async function addLike_comment(comment_id: number | string) {
+  try {
+    post.value.likes++;
+    const response_like = await fetch(`http://localhost:8000/api/comment/${comment_id}/like`, {
+      method: 'POST',
+      headers: {'content-type': 'application/json'},
+      body: `{"userId":${self_id}}`,
+    });
+
+    if (!response_like.ok) {
+      const errorText = await response_like.text();
+      console.error('Server-Fehlertext:', errorText);
+      post.value.likes--;
+      throw new Error(`HTTP error! status: ${response_like.status}, text: ${errorText}`);
+    }
+
+    const data = await response_like.json();
+
+    console.log("post_id: ", comment_id);
+    console.log(data);
+    getComment(parseInt(post_uuid.value));
+    return data;
+  } catch (error) {
+    console.error('Fehler beim Liken des Posts:', error);
+    throw error;
+  }
+}
 </script>
 
 <template>
@@ -183,11 +231,11 @@ async function addLike(post_id: string | number, user_id: number) {
               <label class="text-sm m-1 text-weiss" v-if="post.comments != undefined">{{ post.comments }}</label>
               <label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
             </div>
-            <div class="flex items-center" @click="addLike(post.post_uuid, post.user_id)"> <!-- Likes -->
+            <div class="flex items-center" @click="addLike()"> <!-- Likes -->
               <img alt="" src="../assets/icons/herz.png" class="align-middle">
               <label class="text-sm m-1 text-weiss">{{ post.likes }}</label>
             </div>
-            <button @click="copyLink(post_id)" class="text-schwarz  pl-1 mx-1 px-1 rounded-lg bg-button-farbe">Share Post</button>
+            <button @click="copyLink(post_uuid)" class="text-schwarz  pl-1 mx-1 px-1 rounded-lg bg-button-farbe">Share Post</button>
           </div>
         </div>
       </div>
@@ -199,13 +247,22 @@ async function addLike(post_id: string | number, user_id: number) {
         </div>
 
         <div> <!-- WRITE COMMENTS -->
-
+          <div class="flex border-b-2 border-b-grau2">
+            <img src="../assets/danielvici_pp.png" alt="" class="p-2 rounded-full w-16 h-16">
+            <form class="w-full pr-5">
+              <!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
+              <textarea v-model="comment_text" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-full resize-none" rows="3" placeholder="Write something..."></textarea>
+              <div class="">
+                <button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="comment_create_text(comment_text)" type="button">Post</button>
+              </div>
+            </form>
+          </div>
         </div>
 
         <div> <!-- VIEW COMMENTS -->
-          <div> <!-- VIEW COMMENTS -->
+          <div class="sm:overflow-y-scroll h-[450px]"> <!-- VIEW COMMENTS -->
-            <div v-if="comments && comments.length > 0" class="overflow-y-auto h-screen scrollbar" >
+            <ul v-if="comments && comments.length > 0">
-              <div v-for="c in comments" :key="c.comment_id" class="p-4 border-b border-gray-700">
+              <li v-for="c in comments" :key="c.comment_id" class="p-4 border-b border-gray-700">
                 <div class="flex">
                   <img src="../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
                   <div>
@@ -218,15 +275,15 @@ async function addLike(post_id: string | number, user_id: number) {
                     </div>
                     <div class="flex"> <!-- POST FOOTER -->
 
-                      <div class="flex items-center" @click="addLike(post.post_uuid)"> <!-- Likes -->
+                      <div class="flex items-center" @click="addLike_comment(c.comment_id)"> <!-- Likes -->
                         <img alt="" src="../assets/icons/herz.png" class="align-middle">
                         <label class="text-sm m-1 text-weiss">{{ c.likes }}</label>
                       </div>
                     </div>
                   </div>
                 </div>
-              </div>
+              </li>
-            </div>
+            </ul>
             <div v-else class="p-4 text-gray-400">No comments yet.</div>
           </div>
         </div>

src/components/profile.vue

@@ -7,14 +7,14 @@ import Profile_main from "./profile_components/profile_main.vue";
 </script>
 
 <template>
-  <div id="main" class="bg-hintergrund-farbe flex">
+  <div id="main" class="bg-hintergrund-farbe sm:flex overflow-y-auto h-screen scrollbar">
-    <div id="left" class="w-72">
+    <div id="left" class="sm:w-72 min-w-72">
       <navigationbar></navigationbar>
     </div>
-    <div class="w-100p border-x border-x-grau2">
+    <div class="sm:w-100p w-screen sm:border-x sm:border-x-grau2">
       <profile_main></profile_main>
     </div>
-    <div id="right" class="w-1/4">
+    <div id="right" class="sm:w-1/4 w-screen">
       <contacts></contacts>
       <legal></legal>
     </div>

src/components/profile_components/profile_main.vue

@@ -4,73 +4,102 @@ import { useRoute, useRouter } from 'vue-router';
 
 const route = useRoute();
 const router = useRouter();
-const profile = ref(null);
 
-
+const upc = ref([]);
-const post = ref([
+let self_id ;
-  {id: 541242,
+let profile_id = ref();
-    profile_picture: "../../assets/danielvici_pp.png",
-    author_display_name: "danielvici123", author_username: "danielvici",
-    content: "I created this WebApp with VUE3 and TailwindCSS. It was a lot of fun.",
-    comments_count: undefined, likes: 532844},
-  {id: 145,
-    profile_picture: "../../assets/danielvici_pp.png",
-    author_display_name: "danielvici123", author_username: "danielvici",
-    content: "I like Animes. I use Anilist to track them.",
-    comments_count: undefined, likes: 5325466844},
-  {id: 246,
-    profile_picture: "../../assets/danielvici_pp.png",
-    author_display_name: "danielvici123", author_username: "danielvici",
-    content: "sfsafhffgf",
-    comments_count: undefined, likes: 5},
-
-])
 
 onMounted(async () => {
-  const countPosts = post.value.length;
+  console.log("PARAMS: "+ route.path);
-});
+  const pathArray = route.path.split('/');
-//Wird bearbeitet wenn API dazu da ist.
+  console.log(pathArray);
-/*
+
-function fetchProfile(userId) {
+  if (pathArray.length > 2) {
-  return fetch(`/api/profile/${userId}`)
+    profile_id.value = pathArray[2];
-      .then(response => {
+    console.log("profile_id 0: ", profile_id.value);
-        if (!response.ok) {
+
-          throw new Error('Network response was not ok');
-        }
-        return response.json();
-      });
   }
 
-onMounted(async () => {
+  if (!profile_id) {
-  const userId = route.params.id;
+    alert('No profile selected. Redirecting to feed.');
+    await router.push('/');
+    return;
+  }
+  await create_own_posts();
+});
+
+async function create_own_posts() {
   try {
-    const data = await fetchProfile(userId);
+    // posts und user holen und schauen ob sie richtig sidn
-    profile.value = data;
+    const post_response = await fetch('http://localhost:8000/api/posts', { method: 'GET' });
-  } catch (error) {
+    if (!post_response.ok) {
-    console.error('Error fetching profile:', error);
+      throw new Error(`HTTP error! status: ${post_response.status}`);
     }
-});
+    const postsDATA = await post_response.json();
-router.beforeEach((to, from, next) => {
-  if ((from.name === 'Feed' || from.name === 'Settings') && to.name === 'Profile') {
-    // Set profile to 'danielvici123'
-    fetchProfile('danielvici123')
-        .then(data => {
-          profile.value = data;
-          next();
-        })
-        .catch(error => {
-          console.error('Error fetching profile:', error);
-          next();
-        });
-  } else {
-    next();
-  }
-});
-*/
 
-function addLike(index: number) {
+    const user_response = await fetch('http://localhost:8000/api/users', { method: 'GET' });
-  post.value[index].likes += 1;
+    if (!user_response.ok) {
-  console.log("New Like Amount: ", post.value[index].likes);
+      throw new Error(`HTTP error! status: ${user_response.status}`);
+    }
+    const usersDATA = await user_response.json();
+
+    // posts und user kombinieren
+    const combinedPosts = postsDATA.filter(post => post.user_id === profile_id).map(post => {
+      const user = usersDATA.find(user => user.user_id === post.user_id);
+
+      return {
+        post_id: post.posts_uuid,
+        post_text: post.post_text,
+        likes: post.likes,
+        comments: post.comments,
+        displayname: user ? user.displayname : 'Unknown',
+        username: user ? user.username : 'unknown_user',
+        user_id: post.user_id,
+      };
+    });
+    console.log("upc: " + upc.value);
+    console.log("combinedPosts: " + combinedPosts);
+
+    //upc.value = combinedPosts;
+
+    upc.value = combinedPosts.sort((a, b) => b.post_id - a.post_id);;
+
+    console.log("upc 2: " + upc.value);
+    console.log("combinedPosts 2: " + combinedPosts);
+  } catch (e) {
+    console.error("An error has occurred. Please try again later.");
+    console.error(e);
+  }
+  console.log(upc.value);
+}
+
+async function addLike(post_id: string | number, user_id: number, index: number) {
+  try {
+    console.log("UPC: ", upc.value);
+    console.log("post_id: ", post_id);
+    upc.value[index].likes++;
+    const response = await fetch(`http://localhost:8000/api/post/${post_id}/like`, {
+      method: 'POST',
+      headers: {'content-type': 'application/json'},
+      body: `{"userId":${user_id}}`,
+    });
+
+    console.log('Antwort-Status:', response.status);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Server-Fehlertext:', errorText);
+      //upc.value[index].likes--;
+      throw new Error(`HTTP error! status: ${response.status}, text: ${errorText}`);
+    }
+
+    const data = await response.json();
+
+    return data;
+  } catch (error) {
+    console.error('Fehler beim Liken des Posts:', error);
+    throw error;
+  }
 }
 
 </script>
@@ -101,7 +130,7 @@ function addLike(index: number) {
       <h2 class="align-middle  mt-4 p-6 text-2xl text-weiss border-y-grau2 border-y ">Posts (x)</h2>
     </div>
     <ul>
-      <li v-for="(postitem, indexus) in post" :key="post" class="border-2 border-b-grau2 p-3 flex">
+      <li v-for="(postitem, indexus) in upc" :key="postitem.user_id" class="border-2 border-b-grau2 p-3 flex">
         <!-- POST -->
         <img src="../../assets/danielvici_pp.png" alt="" class="rounded-full w-16 h-16">
         <div>
@@ -119,7 +148,7 @@ function addLike(index: number) {
               <label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
             </div>
 
-            <div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
+            <div class="flex items-center" @click="addLike(postitem.post_id, postitem.user_id, indexus)"> <!-- Likes -->
               <img alt="" src="../../assets/icons/herz.png" class="align-middle">
               <label class="text-sm m-1 text-weiss">{{ postitem.likes }}</label>
             </div>

src/components/register.vue

@@ -9,12 +9,12 @@ function route_home() {
 </script>
 
 <template>
-  <div id="main" class="bg-hintergrund-farbe flex p-2 justify-between">
+  <div id="main" class="bg-hintergrund-farbe sm:flex p-2 sm:justify-between overflow-auto h-screen scrollbar">
     <div class="pt-5">
       <img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 hover:shadow-2xl hover:shadow-grau-dunkel" @click="route_home">
     </div>
-    <register_main class="inset-0"></register_main>
+    <register_main class="sm:inset-0"></register_main>
-    <div class="inset-y-0 right-0 max-w-36">
+    <div class="sm:inset-y-0 sm:right-0 sw:max-w-36 text-center">
       <legal></legal>
     </div>
   </div>

src/components/register_components/register_main.vue

@@ -8,9 +8,8 @@ let register_input_displayname = ref("");
 let register_input_password = ref("");
 let register_input_email = ref("");
 
+
 async function register() {
-
-
   const username = register_input_username;
   const displayname = register_input_displayname;
   const email = register_input_email;
@@ -51,20 +50,20 @@ async function register() {
 </script>
 
 <template>
-  <div id="main" class="bg-hintergrund-farbe p-2 border-x border-x-grau2 px-20">
+  <div id="main" class="bg-hintergrund-farbe p-2 sm:border-x sm:border-x-grau2 sm:px-20">
-    <div class="text-3xl pt-32"> <!-- ÜBERSCHRIFT-->
+    <div class="text-3xl pt-20px sm:pt-32"> <!-- ÜBERSCHRIFT-->
       <p class="text-weiss text-center">Welcome to <label class="bg-schwarz p-1 rounded-lg mr-1"><span class="text-logo-farbe-lila">E</span><span class="text-logo-farbe-rot">S</span><span class="text-logo-farbe-blau">P</span></label>!</p>
       <p class="text-weiss text-center pt-2">Join today!</p>
     </div>
     <div class="px-20 pt-7"> <!--  FORM --->
       <form class="flex flex-col items-center" @submit.prevent="register">
-        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_username" type="text" placeholder="Username" required><br>
+        <input class="m-4 sm:w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_username" type="text" placeholder="Username" required><br>
-        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_displayname" type="text" placeholder="Displayname" required><br>
+        <input class="m-4 sm:w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_displayname" type="text" placeholder="Displayname" required><br>
-        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_email" type="email" placeholder="E-Mail" required><br>
+        <input class="m-4 sm:w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_email" type="email" placeholder="E-Mail" required><br>
-        <input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_password " type="password" placeholder="Password" required><br>
+        <input class="m-4 sm:w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" v-model="register_input_password " type="password" placeholder="Password" required><br>
-        <button class="m-4 bg-button-farbe w-full max-w-xs p-4 text-schwarz rounded-lg">Create Account</button>
+        <button class="m-4 bg-button-farbe sm:w-full max-w-xs p-4 text-schwarz rounded-lg">Create Account</button>
       </form>
-      <p class="text-weiss text-center">Already have an account? <router-link to="/login" class="text-button-farbe">Login</router-link></p>
+      <p class="text-weiss w-100p text-center">Already have an account? <router-link to="/login" class="text-button-farbe">Login</router-link></p>
     </div>
   </div>
 </template>

src/components/search.vue

@@ -9,10 +9,10 @@ import Contacts from "./home_components/contacts.vue";
 
 <template>
   <div class="text-weiss flex">
-    <div id="left" class="border-1 border-b-grau w-72">
+    <div id="left" class="sm:w-72 min-w-72 border-1 border-b-grau">
       <navigationbar></navigationbar>
     </div>
-    <div class="w-100p border-x-2 border-x-grau2">
+    <div class="sm:w-100p w-screen border-x-2 border-x-grau2">
       <div class="border-b-grau2 border-b-2">
         <h1 class="text-weiss text-3xl p-4">Search</h1>
       </div>