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

Merge remote-tracking branch 'origin/main'

Browse Source
This commit is contained in:
Esad Mustafoski
2024-11-03 21:14:31 +01:00
parent 537fca6b2b bf5e43bb7b
commit 7a43130a39
13 changed files with 131 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -58,8 +58,12 @@ $ deno task build
</ul>
## Tools used
<ul>
<li><a href="https://www.jetbrains.com/webstorm/"><img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/WebStorm_Icon.svg" width="20" height="20"> JetBrains WebStorm</a></li>
<li><a href="https://www.jetbrains.com/datagrip/"><img src="https://seeklogo.com/images/D/datagrip-logo-295CA63255-seeklogo.com.png" width="20" height="20"> JetBrains DataGrip</a></li>
<li><a href="https://neovim.io/"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Neovim-mark-flat.svg/640px-Neovim-mark-flat.svg.png" width="20" height="20"> Neovim</a></li>
</ul>

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/Login.vue
View File

@@ -1,16 +1,16 @@
<script setup>
import Legal from "./home_components/legal.vue";
import Sidebar from "./home_components/navigationbar.vue";
import Contacts from "./home_components/contacts.vue";
import Login_comp from "./login_components/login_comp.vue";
</script>
<template>
<div id="main" class="bg-weiss flex p-2">
<Sidebar></Sidebar>
<p class="text-4xl m-60">WIP</p>
<div class="w-1/4">
<contacts></contacts>
<div id="main" class="bg-hintergrund-farbe flex p-2 ">
<div class="items-center pr-96 pl-2 pt-5">
<img src="../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto">
</div>
<login_comp></login_comp>
<div class="p-5 ">
<legal></legal>
</div>
</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>

23
src/components/login_components/login_comp.vue Normal file
View File

@@ -0,0 +1,23 @@
<script setup>
</script>
<template>
<div class="px-20 border-x border-x-grau2 pb-35p">
<div class="text-3xl pt-32">
<p class="text-weiss text-center">Welcome to <span class="text-button-farbe">ESP</span>!</p>
<p class="text-weiss text-center">Login or create a new Account to continue</p>
</div>
<div class="px-20 pt-7">
<form class="flex flex-col items-center">
<input class="m-4 w-full max-w-xs bg-grau-dunkel p-4 text-weiss placeholder-grau2 focus:outline-none rounded-lg" 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" type="text" placeholder="Password"><br>
<button class="m-4 bg-grau-dunkel w-full max-w-xs p-4 text-weiss rounded-lg">Login</button>
</form>
</div>
</div>
</template>
<style scoped>
</style>

11
src/components/login_components/settings.vue
View File

@@ -1,11 +0,0 @@
<script setup>
</script>
<template>
</template>
<style scoped>
</style>

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

@@ -0,0 +1,29 @@
<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 class="border-x border-x-grau2">
<label class="text-weiss text-5xl align-middle mx-60 pt-60">This site is currently Work in Progress...</label>
</div>
<div id="right">
<quick-search> </quick-search>
<contacts></contacts>
<legal></legal>
</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({

3
tailwind.config.js
View File

@@ -17,6 +17,9 @@ export default {
'500p': '500%',
'600p': '600%',
},
padding: {
'35p': '30.825%',
}
},
colors: {
'logo-farbe-lila': '#5500a2',