New Design, Route added
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
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -3,17 +3,17 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<label class="text-grau2 m-2">
|
||||
<a href="">Terms of Service</a>
|
||||
-
|
||||
<a href="">Privacy Policy</a>
|
||||
-
|
||||
<a href="">Imprint</a><br>
|
||||
-
|
||||
<a href="">Contact</a>
|
||||
-
|
||||
<a href="">Support</a>
|
||||
</label>
|
||||
<div class="text-grau2 p-3">
|
||||
<a href="">Terms of Service</a>
|
||||
-
|
||||
<a href="">Privacy Policy</a><br>
|
||||
|
||||
<a href="">Imprint</a>
|
||||
-
|
||||
<a href="">Contact</a>
|
||||
-
|
||||
<a href="">Support</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -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
16
src/components/home_components/quick_search.vue
Normal 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
20
src/components/wip.vue
Normal 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>
|
||||
@@ -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({
|
||||
|
||||
Reference in New Issue
Block a user