<!DOCTYPE html>
<html lang="de">
<head>
<!-- These meta tags come first. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> - Youthweb Styleguide</title>
<!-- Include the CSS -->
<link href="../../dist/toolkit.min.css" rel="stylesheet">
<meta name="theme-color" content="#1c60a1">
</head>
<body>
<script type="text/javascript">
app_settings = {
// Profildaten zum eingeloggten User
// TODO: Refactoring profile-settings
profile: null,
urls: {
// Wegen eines Bugs in Fractal wird z.B. `_config.project.baseUrl` statt `baseUrl` verwendet
// @see https://github.com/frctl/fractal/issues/1042
'root': 'https://styleguide.youthweb.net/components/preview',
'baseUrl': 'http://localhost:8000',
'communityJsonHost': 'http://localhost:8000',
'imagesUploadUrl': 'http://localhost:8000/imageUpload',
},
'loaderUIDelay': 1000, //Asynchrone Funktionen fühlen sich flüssiger an, wenn es aufgrund eines künstlichen Delays nicht flackert
'redirectDelay': 3000, //Bei Redirects sollten die Nutzer die Möglichkeit haben, den Bestätigungstext zu sehen
'locale': window.navigator.userLanguage || window.navigator.language, // z.B. 'de' oder 'de_DE'
};
</script>
<div id="app">
<div class="with-top-navbar">
<div class="growl" id="app-growl"></div>
<add-friend></add-friend>
<report-user></report-user>
<error-message></error-message>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-yw-gradient-primary app-navbar" id="mainNavigation">
<a class="navbar-brand" href="https://styleguide.youthweb.net/components/preview/timeline"><img src="../../dist/img/logo-16.png" alt="Youthweb" /></a>
<div class="collapse navbar-collapse" id="navbarResponsive" data-parent="#mainNavigation">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/forum">Forum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Zeugnisse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/praystation">Gebetsanliegen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/groups">Gruppen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/events">Events</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Impulse</a>
</li>
</ul>
<search-user source="/" type="users" target="user/{0}" id="autosuggest__navbar"></search-user>
</div>
<a class="nav-link-with-icon ml-auto" href="https://styleguide.youthweb.net/components/preview/messenger">
<span class="icon icon-chat"></span> <!-- TODO: <unread-messages></unread-messages> -->
</a>
<a class="nav-link-with-icon" href="https://styleguide.youthweb.net/components/preview/notifications">
<span class="icon icon-bell"></span> </a>
<button class="navbar-btn-avatar ml-2" type="button" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover" aria-expanded="false" aria-label="Toggle profile">
<img class="rounded-circle" src="https://eu.ui-avatars.com/api/?name=John+Doe&p=square35">
</button>
<button class="navbar-toggler d-lg-none ml-2" type="button" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon icon-menu"></span>
</button>
</nav>
<div id="navigationPopover" class="collapse w-100 d-lg-none" role="dialog" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover">
<div class="navbar navbar-dark bg-yw-gradient-primary" onclick="event.stopPropagation();">
<div class="navbar-collapse">
<div class="w-100">
<search-user source="/" type="users" target="user/{0}" id="autosuggest__popover"></search-user>
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/forum">Forum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Zeugnisse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/praystation">Gebetsanliegen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/groups">Gruppen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/events">Events</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Impulse</a>
</li>
</ul>
<div class="dropdown-divider"></div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/team">Über uns</a>
</li>
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/docs/index.html">Hilfe</a>
</li>
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/develop">Develop</a>
</li>
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/privacy">Datenschutz</a>
</li>
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/impressum">Impressum</a>
</li>
</ul>
<div class="dropdown-divider"></div>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
Facebook
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
Instagram
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
Twitter
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
Pinterest
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
Shop
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="profilePopover" class="collapse w-100" role="dialog" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover">
<div class="float-right m-2" onclick="event.stopPropagation();">
<div class="card card-profile mb-4 ">
<div class="card-header bg-secondary"></div>
<div class="card-body text-center">
<a href="https://styleguide.youthweb.net/components/preview/user">
<img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=John+Doe">
</a>
<h6 class="card-title">
<a class="text-inherit" href="user">John Doe</a>
</h6>
<p class="mb-4">Ut nam fabulas ponderum assentior</p><!-- Verhältnis zu Lebensmotto? -->
<ul class="card-menu">
<li class="card-menu-item">
<a href="https://styleguide.youthweb.net/components/preview/friends" class="text-inherit">
Freunde
<h6 class="my-0">17</h6>
</a>
</li>
<li class="card-menu-item">
<a href="https://styleguide.youthweb.net/components/preview/participation/hall-of-fame" class="text-inherit">
CP
<h6 class="my-0">352</h6>
</a>
</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="">
<a href="https://styleguide.youthweb.net/components/preview/account/settings" class="btn btn-secondary btn-block"><i class="fas fa-user-cog"></i> Account</a>
<a href="https://styleguide.youthweb.net/components/preview/account/profile_settings" class="btn btn-secondary btn-block"><i class="fas fa-user-circle"></i> Profil</a>
<a href="https://styleguide.youthweb.net/components/preview/account/ignorelist" class="btn btn-secondary btn-block"><i class="fas fa-eye-slash"></i> Ignoreliste</a>
</div>
</li>
<li class="list-group-item"><a href="https://styleguide.youthweb.net/components/preview/logout"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
</ul>
</div>
<div class="card mb-4">
<div class="card-body">
<h6 class="card-title">Über mich<small> · <a href="https://styleguide.youthweb.net/components/preview/user">Zum Steckbrief</a></small></h6>
<p><i class="fas fa-user"></i> Angemeldet vor 5 Jahren
</p>
<p>
<i class="fas fa-star"></i> 21.02.1995 (32 Jahre alt)
</p>
<p>
<i class="fas fa-user-friends"></i> Gruppen: <a href="https://styleguide.youthweb.net/components/preview/groups/1234">Github</a>
</p>
</div>
</div>
</div>
</div>
<div class="container pt-4 pb-5">
<div class="row">
<div class="col-lg-3">
<div class="d-none d-lg-block">
<Conversations type="conversations"></Conversations>
</div>
</div>
<div class="col-lg-6">
<div id="carouselMessages" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="d-lg-none">
<Conversations type="conversations"></Conversations>
</div>
<div class="d-none d-lg-block">
<div class="container-fill-height">
<div class="container-content-middle text-center">
<h1 class="text-muted"><span class="icon icon-chat "></span></h1>
<p>Du hast noch keinen Chat ausgewählt</p>
</div>
</div>
</div>
</div>
<div class="carousel-item ">
<div class="card">
<!-- TODO: media-list-stream und Chat angleichen -->
<Messages source="/conversations/{0}" conversation="this.$store.state.messenger.selectedConversation" type="messages"></Messages>
<create-message receiverid=""></create-message>
</div>
</div>
</div>
</div>
</div>
<div class="d-none d-lg-block d-xl-block col-lg-3">
<div class="card card-profile mb-4 ">
<!-- maxh298: background sollte eher Breitformatbild sein, max. Darstellungshöhe: 149px, maxh298 ist Puffer für 1:2 Verhältnis -->
<div class="card-header bg-secondary" style="background-image: url('http://localhost:3000/dist/img/samantha-stortecky-sP5CaWEN7Do-unsplash.jpg?p=maxh298'); "></div>
<div class="card-body text-center">
<a href="https://styleguide.youthweb.net/components/preview/user">
<img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=John+Doe&p=square94">
</a>
<h6 class="card-title">
<a class="text-inherit" href="https://styleguide.youthweb.net/components/preview/user">John Doe</a>
</h6>
<p class="mb-4">Ut nam fabulas ponderum assentior</p><!-- Verhältnis zu Lebensmotto? -->
<ul class="card-menu">
<li class="card-menu-item">
<a href="https://styleguide.youthweb.net/components/preview/friends" class="text-inherit">
<!--@Frontend Integration: URL aus Profile -->
Freunde
<h6 class="my-0">17</h6>
</a>
</li>
<li class="card-menu-item">
<a href="https://styleguide.youthweb.net/components/preview/participation/hall-of-fame" class="text-inherit">
CP
<h6 class="my-0">352</h6>
</a>
</li>
</ul>
</div>
</div>
<div class="card mb-4">
<div class="card-body">
<h6 class="card-title">Über mich<small> · <a href="https://styleguide.youthweb.net/components/preview/user">Zum Steckbrief</a></small></h6>
<p><i class="fas fa-user fa-fw"></i> Angemeldet vor 5 Jahren
</p>
<p>
<i class="fas fa-star fa-fw"></i> 21.02.1995 (32 Jahre alt)
</p>
<p>
<i class="fas fa-user-friends fa-fw"></i> Gruppen: <a href="https://styleguide.youthweb.net/components/preview/groups/1234">Github</a>
</p>
</div>
</div>
<div class="card mb-4 d-none d-lg-flex">
<div class="card-header">Youthweb</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href="https://styleguide.youthweb.net/components/preview/blog">Blog</a>
<a href="https://styleguide.youthweb.net/components/preview/page/team">Über uns</a>
<a href="https://styleguide.youthweb.net/components/preview/docs/index.html">Hilfe</a>
<a href="https://styleguide.youthweb.net/components/preview/page/develop">Develop</a>
<a href="https://styleguide.youthweb.net/components/preview/page/privacy">Datenschutz</a>
<a href="https://styleguide.youthweb.net/components/preview/page/impressum">Impressum</a>
</li>
<li class="list-group-item text-center d-none d-lg-flex">
<!---->
<a class="brand-nav" href="https://www.facebook.com/youthweb.net"><i class="fab fa-facebook-f"></i></a>
<a class="brand-nav" href="https://www.instagram.com/youthwebnet/"><i class="fab fa-instagram"></i></a>
<a class="brand-nav" href="https://twitter.com/youthwebnet"><i class="fab fa-twitter"></i></a>
<a class="brand-nav" href="https://www.pinterest.de/youthwebnet/"><i class="fab fa-pinterest-p"></i></a>
<a class="brand-nav" href="https://shop.spreadshirt.de/youthweb"><i class="fas fa-shopping-basket"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../dist/toolkit.min.js"></script>
</body>
</html>
{% extends 'shared/layouts/community-3-col.html.twig' %}
{% block leftcol %}
<div class="d-none d-lg-block">
<Conversations type="conversations"></Conversations>
</div>
{% endblock %}
{% block content %}
<div id="carouselMessages" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item {% if selected_receiver is empty %}active{% endif %}">
<div class="d-lg-none">
<Conversations type="conversations"></Conversations>
</div>
<div class="d-none d-lg-block">
<div class="container-fill-height">
<div class="container-content-middle text-center">
<h1 class="text-muted"><span class="icon icon-chat "></span></h1>
<p>Du hast noch keinen Chat ausgewählt</p>
</div>
</div>
</div>
</div>
<div class="carousel-item {% if selected_receiver is not empty %}active{% endif %}">
<div class="card">
<!-- TODO: media-list-stream und Chat angleichen -->
<Messages source="/conversations/{0}" conversation="this.$store.state.messenger.selectedConversation" type="messages"></Messages>
<create-message receiverid="{{selected_receiver}}" ></create-message>
</div>
</div>
</div>
</div>
{% endblock %}
{
"active_page": "messenger/messenger",
"selected_receiver": "",
"auth_profile": {
"id": "12345",
"username": "John Doe",
"picture_url": "https://eu.ui-avatars.com/api/?name=John+Doe",
"picture_description": "Ut nam fabulas ponderum assentior",
"background": "http://localhost:3000/dist/img/samantha-stortecky-sP5CaWEN7Do-unsplash.jpg",
"community_points_count": 352,
"friends_count": 17,
"birthday": "1995-02-21",
"age_in_years": "32",
"created_years_ago": "5",
"groups": [
{
"id": 1234,
"name": "Github"
}
]
}
}
No notes defined.