LET'S FUCKING GOOOOO #18
+26
-40
@@ -1,36 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<title> Profile - {{user.name}}</title>
|
<title> Profile - {{user.name}}</title>
|
||||||
<div
|
<div class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 selection:bg-blue-100 dark:selection:bg-blue-900 pb-12 transition-colors duration-300">
|
||||||
class="min-h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 selection:bg-blue-100 dark:selection:bg-blue-900 pb-12 transition-colors duration-300">
|
|
||||||
<div class="container mx-auto max-w-7xl px-4 py-8 md:py-12">
|
<div class="container mx-auto max-w-7xl px-4 py-8 md:py-12">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-12">
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 lg:gap-12">
|
||||||
|
|
||||||
<div class="md:col-span-4 lg:col-span-3 flex flex-col gap-6">
|
<div class="md:col-span-4 lg:col-span-3 flex flex-col gap-6">
|
||||||
|
|
||||||
<div
|
<div class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-800 transition-colors duration-300">
|
||||||
class="bg-white dark:bg-slate-900 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-800 transition-colors duration-300">
|
|
||||||
<div class="flex flex-col items-center text-center">
|
<div class="flex flex-col items-center text-center">
|
||||||
<div class="relative inline-block mb-4">
|
<div class="relative inline-block mb-4">
|
||||||
<div
|
<div
|
||||||
class="h-32 w-32 rounded-full border-4 border-white dark:border-slate-800 bg-slate-100 dark:bg-slate-800 overflow-hidden shadow-md ring-1 ring-slate-200 dark:ring-slate-700">
|
class="h-32 w-32 rounded-full border-4 border-white dark:border-slate-800 bg-slate-100 dark:bg-slate-800 overflow-hidden shadow-md ring-1 ring-slate-200 dark:ring-slate-700">
|
||||||
<img :src="user.avatarUrl" :alt="user.name"
|
<img :src="user.avatarUrl" :alt="user.name"
|
||||||
class="h-full w-full object-cover transition-transform hover:scale-105">
|
class="h-full w-full object-cover transition-transform hover:scale-105" />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute bottom-2 right-2 h-5 w-5 rounded-full border-[3px] border-white shadow-sm"
|
<div class="absolute bottom-2 right-2 h-5 w-5 rounded-full border-[3px] border-white dark:border-slate-900 shadow-sm"
|
||||||
:class="user.isActive ? 'bg-emerald-500' : 'bg-gray-400'" title="Online Status" />
|
:class="user.isActive ? 'bg-emerald-500' : 'bg-gray-400'" title="Online Status">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">{{ user.name }}
|
<h1 class="text-2xl font-bold text-slate-900 dark:text-white tracking-tight">{{ user.name }}</h1>
|
||||||
</h1>
|
<p class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-6 uppercase tracking-wide">{{ user.role }}
|
||||||
<p
|
|
||||||
class="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-6 uppercase tracking-wide">
|
|
||||||
{{ user.role }}
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="w-full space-y-3">
|
<div class="w-full space-y-3">
|
||||||
<button
|
<button
|
||||||
class="w-full py-2.5 px-4 bg-slate-900 dark:bg-blue-900 hover:bg-slate-800 dark:hover:bg-blue-500 text-white font-medium rounded-lg text-sm transition-all shadow-sm active:scale-95 cursor-pointer">
|
class="w-full py-2.5 px-4 bg-slate-900 dark:bg-blue-600 hover:bg-slate-800 dark:hover:bg-blue-500 text-white font-medium rounded-lg text-sm transition-all shadow-sm active:scale-95 cursor-pointer">
|
||||||
Edit Profile
|
Edit Profile
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@@ -42,24 +38,24 @@
|
|||||||
|
|
||||||
<div class="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800 space-y-4">
|
<div class="mt-8 pt-6 border-t border-slate-100 dark:border-slate-800 space-y-4">
|
||||||
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
||||||
<svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
|
<svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24" stroke="currentColor">
|
stroke="currentColor">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||||
</svg>
|
</svg>
|
||||||
<span class="truncate">{{ user.email }}</span>
|
<span class="truncate">{{ user.email }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
||||||
<svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
|
<svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24" stroke="currentColor">
|
stroke="currentColor">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||||
</svg>
|
</svg>
|
||||||
<span>Polytechnic of Leiria</span>
|
<span>Polytechnic of Leiria</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
|
||||||
<svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none"
|
<svg class="w-4 h-4 text-slate-400 dark:text-slate-500 shrink-0" fill="none" viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24" stroke="currentColor">
|
stroke="currentColor">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||||
</svg>
|
</svg>
|
||||||
@@ -72,18 +68,13 @@
|
|||||||
<div
|
<div
|
||||||
class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
|
class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
|
||||||
<div class="text-2xl font-bold text-slate-900 dark:text-white">{{ totalCitations }}</div>
|
<div class="text-2xl font-bold text-slate-900 dark:text-white">{{ totalCitations }}</div>
|
||||||
<div
|
<div class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">Citations
|
||||||
class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
|
|
||||||
Citations
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
|
class="bg-white dark:bg-slate-900 p-4 rounded-xl shadow-sm border border-slate-200 dark:border-slate-800 text-center hover:border-slate-300 dark:hover:border-slate-700 transition-colors">
|
||||||
<div class="text-2xl font-bold text-slate-900 dark:text-white">{{ user.publications.length }}
|
<div class="text-2xl font-bold text-slate-900 dark:text-white">{{ user.publications.length }}</div>
|
||||||
</div>
|
<div class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">Papers
|
||||||
<div
|
|
||||||
class="text-[10px] font-bold text-slate-400 dark:text-slate-500 uppercase tracking-widest mt-1">
|
|
||||||
Papers
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -91,8 +82,7 @@
|
|||||||
|
|
||||||
<div class="md:col-span-8 lg:col-span-9 space-y-6">
|
<div class="md:col-span-8 lg:col-span-9 space-y-6">
|
||||||
|
|
||||||
<div
|
<div class="bg-white dark:bg-slate-900 p-1.5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex gap-1 overflow-x-auto transition-colors">
|
||||||
class="bg-white dark:bg-slate-900 p-1.5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex gap-1 overflow-x-auto transition-colors">
|
|
||||||
<button
|
<button
|
||||||
class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-semibold bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5 cursor-pointer transition-colors">
|
class="flex-1 min-w-[100px] py-2.5 px-4 rounded-lg text-lg font-semibold bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-black/5 dark:ring-white/5 cursor-pointer transition-colors">
|
||||||
Overview
|
Overview
|
||||||
@@ -107,20 +97,17 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
|
||||||
class="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800 transition-colors">
|
<h2 class="text-xs font-bold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">Biography</h2>
|
||||||
<h2 class="text-s font-bold text-slate-900 dark:text-slate-100 uppercase tracking-wider mb-3">
|
|
||||||
Biography</h2>
|
|
||||||
<p class="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
|
||||||
{{ user.biography }}
|
{{ user.biography }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center justify-between pt-2 px-1">
|
<div class="flex items-center justify-between pt-2 px-1">
|
||||||
<h2 class="text-lg font-bold text-slate-900 dark:text-slate-300 flex items-center gap-2">
|
<h2 class="text-lg font-bold text-slate-900 dark:text-white flex items-center gap-2">
|
||||||
Recent Publications
|
Recent Publications
|
||||||
<span
|
<span class="bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold px-2 py-0.5 rounded-full">{{
|
||||||
class="bg-slate-200 dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-xs font-bold px-2 py-0.5 rounded-full">{{
|
|
||||||
user.publications.length }}</span>
|
user.publications.length }}</span>
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
@@ -151,11 +138,10 @@
|
|||||||
<div
|
<div
|
||||||
class="mt-4 pt-4 border-t border-slate-50 dark:border-slate-800 flex flex-wrap items-center gap-4 text-xs font-medium z-10 relative">
|
class="mt-4 pt-4 border-t border-slate-50 dark:border-slate-800 flex flex-wrap items-center gap-4 text-xs font-medium z-10 relative">
|
||||||
<span
|
<span
|
||||||
class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 border border-blue-100">
|
class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 border border-blue-100 dark:border-blue-800/50">
|
||||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500">
|
<span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
|
||||||
{{ pub.field }}
|
{{ pub.field }}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
|
||||||
<span class="inline-flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
|
<span class="inline-flex items-center gap-1.5 text-slate-500 dark:text-slate-400">
|
||||||
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
|
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<path
|
<path
|
||||||
@@ -167,12 +153,12 @@
|
|||||||
<span class="text-slate-500 dark:text-slate-400">{{ pub.publishedDate }}</span>
|
<span class="text-slate-500 dark:text-slate-400">{{ pub.publishedDate }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|||||||
Reference in New Issue
Block a user