danielvici123/esp-projekt
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Design, Route added

Browse Source 
Changes:
- Clicking on Home (icon and text) and Logo now routes to “/”, i.e. to the main page
- New design is now complete
This commit is contained in:
danielvici123
2024-11-01 22:13:04 +01:00
parent 4dc0f653ad
commit 7ef1d53926
8 changed files with 85 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Home.vue
View File

@@ -4,6 +4,7 @@ import Contacts from "./home_components/contacts.vue";
import Legal from "./home_components/legal.vue";
import Navigationbar from "./home_components/navigationbar.vue";
import Trending from "./home_components/trending.vue";
import QuickSearch from "./home_components/quick_search.vue";
</script>
@@ -17,6 +18,7 @@ import Trending from "./home_components/trending.vue";
<feed></feed>
</div>
<div class="w-1/4">
<quick-search></quick-search>
<contacts></contacts>
<legal></legal>
</div>

14
src/components/home_components/contacts.vue
View File

@@ -7,18 +7,18 @@ const contacts =[
</script>
<template>
<div class="p-2"> <!--MAIN-->
<div class="bg-grau-hell rounded-lg"> <!--HEADER-->
<h2 class="align-middle m-2 text-xl p-1">Contacts</h2>
<div class="p-2 border-b-2 border-b-grau2"> <!--MAIN-->
<div> <!--HEADER-->
<h2 class="align-middle m-2 text-xl p-1 pb-4 text-weiss">Contacts</h2>
</div>
<div> <!--CONTENT-->
<ul class="space-y-1">
<li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex rounded-lg">
<li v-for="(contact) in contacts" :key="contact" class="flex rounded-lg">
<!--CONTACT-->
<img src="../../assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
<img src="../../assets/default_pp.png" alt="" class="w-12 h-12 mr-2">
<div class="">
<label class="text-lg font-bold m-1" >{{ contact.display_name }}</label><br>
<p class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ contact.username }}</p>
<label class=" font-bold m-1 text-weiss">{{ contact.display_name }}</label><br>
<p class="text-base m-1 text-grau2 underline-offset-3">@{{ contact.username }}</p>
</div>
</li>
</ul>

25
src/components/home_components/feed.vue
View File

@@ -61,9 +61,10 @@
<template>
<div class="border-x-2 border-x-grau2"> <!-- MAIN -->
<div> <!-- FEED HEADER -->
<h2 class="align-middle p-2 text-xl font-bold text-grau2 border-b-grau2 border-b ">Feed</h2>
<div class="flex border-2 border-b-grau2"> <!-- POSTING-->
<img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-xl w-16 h-16">
<h2 class="align-middle p-6 text-xl font-bold text-grau2 border-b-grau2 border-b ">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>
<!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
<textarea v-model="post_publish" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-200p resize-none" rows="3" placeholder="Write something..."></textarea>
@@ -78,27 +79,27 @@
<div> <!-- CONTENT -->
<ul>
<li v-for="(postitem, indexus) in post" :key="post" class="border border-b-grau-hell rounded-lg p-1 m-2 bg-grau-hell2 flex">
<li v-for="(postitem, indexus) in post" :key="post" class="border-2 border-b-grau2 p-3 flex">
<!-- POST -->
<img src="../../assets/danielvici_pp.png" alt="" class="w-16 h-16">
<img src="../../assets/default_pp.png" alt="" class="rounded-full w-16 h-16">
<div>
<div> <!-- POST HEADER -->
<label class="text-lg font-bold m-1">{{postitem.author_display_name}}</label>
<label class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ postitem.author_username }}</label>
<label class="text-lg font-bold m-1 text-weiss">{{postitem.author_display_name}}</label>
<label class="text-base m-1 underline-offset-3 text-grau2">@{{ postitem.author_username }}</label>
</div>
<div class="m-2"> <!-- POST CONTENT -->
<p class="text-sm m-1">{{ postitem.content }}</p>
<p class="text-sm m-1 text-weiss">{{ postitem.content }}</p>
</div>
<div class="flex"> <!-- POST FOOTER -->
<div class="flex"> <!-- Comments -->
<img src="../../assets/icons/comment.png" alt="" class="align-middle">
<label class="text-sm m-1" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
<label class="text-sm m-1" v-else>Comments disabled</label>
<img src="../../assets/icons/comment.png" alt="" class="rounded-full align-middle">
<label class="text-sm m-1 text-weiss" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
<label class="text-sm m-1 text-weiss" v-else>Comments disabled</label>
</div>
<div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
<img alt="" src="../../assets/icons/herz.png" class="align-middle">
<label class="text-sm m-1">{{ postitem.likes }}</label>
<label class="text-sm m-1 text-weiss">{{ postitem.likes }}</label>
</div><!-- ENDE -->
</div>
</div>

10
src/components/home_components/legal.vue
View File

@@ -3,17 +3,17 @@
</script>
<template>
<label class="text-grau2 m-2">
<div class="text-grau2 p-3">
<a href="">Terms of Service</a>
-
<a href="">Privacy Policy</a>
-
<a href="">Imprint</a><br>
<a href="">Privacy Policy</a><br>
<a href="">Imprint</a>
-
<a href="">Contact</a>
-
<a href="">Support</a>
</label>
</div>
</template>
<style scoped>

17
src/components/home_components/navigationbar.vue
View File

@@ -6,6 +6,7 @@ import router from "../../router";
const sb_home = () => {
console.log("home");
router.push("/");
}
const sb_search = () => {
console.log("Search");
@@ -26,17 +27,17 @@ const sb_settings = () => {
</script>
<template>
<div class="pt-4 border-2 border-b-grau2">
<div class="pt-4 border-b-2 border-b-grau2">
<div class="items-center flex justify-center">
<img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto">
<img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto" @click="sb_home">
</div>
<div class="align-middle space-y-3 pt-3 pl-3 pb-4 font-bold text-xl">
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/home.png" alt="" v-on:click="sb_home"> Home</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/lupe.png" alt="" v-on:click="sb_search">Search</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/glocke.png" alt="" v-on:click="sb_notifications">Notifications</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/mail.png" alt="" v-on:click="sb_messages">Messages</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/user.png" alt="" v-on:click="sb_accounts">Profile</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="" v-on:click="sb_settings">Settings</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="sb_home"><img class="pr-2" src="../../assets/icons/home.png" alt=""> Home</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg" @click="sb_search"><img class="pr-2" src="../../assets/icons/lupe.png" alt="">Search</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="sb_notifications"><img class="pr-2" src="../../assets/icons/glocke.png" alt="">Notifications</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg" @click="sb_messages"><img class="pr-2" src="../../assets/icons/mail.png" alt="">Messages</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="sb_accounts"><img class="pr-2" src="../../assets/icons/user.png" alt="">Profile</label>
<label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg" @click="sb_settings"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="">Settings</label>
</div>
</div>
</template>

16
src/components/home_components/quick_search.vue Normal file
View File

@@ -0,0 +1,16 @@
<script setup>
</script>
<template>
<div class="flex p-4 border-b-2 border-b-grau2 ">
<div class="w-12">
<img class="p-2 bg-grau rounded-l-lg" src="../../assets/icons/lupe.png" alt="">
</div>
<input type="text" class="bg-grau rounded-r-lg focus:outline-none text-weiss" placeholder="Search...">
</div>
</template>
<style scoped>
</style>

20
src/components/wip.vue Normal file
View File

@@ -0,0 +1,20 @@
<script setup>
import Navigationbar from "./home_components/navigationbar.vue";
import Feed from "./home_components/feed.vue";
import Contacts from "./home_components/contacts.vue";
import Legal from "./home_components/legal.vue";
import Trending from "./home_components/trending.vue";
import QuickSearch from "./home_components/quick_search.vue";
</script>
<template>
<div id="main" class="bg-hintergrund-farbe flex">
<div id="left" class="w-72">
<navigationbar></navigationbar>
</div>
</div>
</template>
<style scoped>
</style>

8
src/router/index.ts
View File

@@ -5,6 +5,7 @@ import { createRouter, createWebHistory } from "vue-router";
// at these URL's.
import Home from "../components/Home.vue";
import Login from "../components/Login.vue";
import wip from "../components/wip.vue";
// The routing does not happen automatically
// Each route has to be defined here, or it wont work.
@@ -18,7 +19,12 @@ const routes = [
path: "/login",
name: "login",
component: Login,
}
},
{
path: "/wip",
name: "Work in Progress",
component: wip,
},
]
const router = createRouter({