Skip to content
Snippets Groups Projects
Commit cf681ad6 authored by Camille Simiand's avatar Camille Simiand Committed by Sebastien
Browse files

Add responsive capsule template

parent 9a48b32e
Branches
Tags
3 merge requests!43tuleap-83-access-my-capsules,!42Draft: access-my-capsules-conflicts-fixed,!40Draft: Tuleap 83 access my capsules
Show whitespace changes
Inline Side-by-side
assets/styles/app.scss
+ 32
− 34
View file @ cf681ad6
......@@ -82,43 +82,43 @@ button[type=submit]{
.capsule-item {
background: linear-gradient(to bottom left, rgba(73, 173, 154, .0), rgba(73, 173, 154, .5));
box-shadow: 0 0 10px rgba(0,0,0,.5);
border-radius: 2px;
margin-bottom: 40px;
//border-radius: 2px;
//margin-bottom: 40px;
//display: inline-flex;
align-items: center;
justify-content: center;
//align-items: center;
//justify-content: center;
//width: 100%;
//position: absolute;
}
.elements-left {
width: auto;
padding: 20px;
float: left;
}
//.elements-left {
// width: auto;
// padding: 20px;
// float: left;
//}
.elements-right {
padding: 30px 30px 10px 10px;
float: right;
}
//.elements-right {
// padding: 30px 30px 10px 10px;
// float: right;
//}
.capsule-video {
overflow:hidden;
position:relative;
padding-top: 56.25%;
width: 600px;
}
//.capsule-video {
// overflow:hidden;
// position:relative;
// padding-top: 56.25%;
// width: 600px;
//}
.responsive-iframe {
padding-top: 10px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
//.responsive-iframe {
// padding-top: 10px;
// position: absolute;
// top: 0;
// left: 0;
// bottom: 0;
// right: 0;
// width: 100%;
// height: 100%;
//}
.list-item {
font-size: 16px;
......@@ -140,9 +140,7 @@ button[type=submit]{
}
.standard-button {
line-height: 40px;
margin: 30px 0 0 0;
padding: 0 20px;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
......
src/Controller/CapsuleController.php
+ 1
− 1
View file @ cf681ad6
......@@ -21,7 +21,7 @@ class CapsuleController extends AbstractController
public function index(CapsuleRepository $capsuleRepository): Response
{
$capsules = $capsuleRepository->findAll();
$user_id = $capsules[0]->getCreationAuthor();
$user_id = $capsules[0]->getCreationauthor();
$user_name = $this->getDoctrine()->getRepository(User::class)->find($user_id)->getFirstName();
return $this->render('capsule/index.html.twig', [
......
src/DataFixtures/AppCapsuleFixtures.php
+ 5
− 5
View file @ cf681ad6
......@@ -47,13 +47,13 @@ class AppCapsuleFixtures extends Fixture
?DateTime $update_datetime
): void {
$capsule = new Capsule();
$capsule->setAutCrea($author);
$capsule->setDtCrea($date_time);
$capsule->setLink($link);
$capsule->setCreationauthor($author);
$capsule->setCreationdate($date_time);
$capsule->setVideourl($link);
$capsule->setEditionLink($edition_link);
$capsule->setNom($name);
$capsule->setAutMaj($update_author);
$capsule->setDtMaj($update_datetime);
$capsule->setUpdateauthor($update_author);
$capsule->setUpdatedDateTime($update_datetime);
$manager->persist($capsule);
}
......
src/Entity/User.php
+ 3
− 3
View file @ cf681ad6
......@@ -237,7 +237,7 @@ class User implements UserInterface, LegacyPasswordAuthenticatedUserInterface
{
if (!$this->capsules->contains($capsule)) {
$this->capsules[] = $capsule;
$capsule->setAutCrea($this);
$capsule->setCreationauthor($this);
}
return $this;
......@@ -247,8 +247,8 @@ class User implements UserInterface, LegacyPasswordAuthenticatedUserInterface
{
if ($this->capsules->removeElement($capsule)) {
// set the owning side to null (unless already changed)
if ($capsule->getAutCrea() === $this) {
$capsule->setAutCrea(null);
if ($capsule->getCreationauthor() === $this) {
$capsule->setCreationauthor(null);
}
}
......
src/Repository/UserRepository.php
+ 10
− 0
View file @ cf681ad6
......@@ -47,4 +47,14 @@ class UserRepository extends ServiceEntityRepository implements PasswordUpgrader
->getOneOrNullResult()
;
}
public function getUserNameFromUserId(int $user_id): int
{
return $this->createQueryBuilder('u.firstname')
->andWhere('u.id = :id')
->setParameter('id', $user_id)
->getQuery()
->getOneOrNullResult()
;
}
}
templates/capsule/index.html.twig
+ 16
− 71
View file @ cf681ad6
......@@ -7,8 +7,7 @@
{% endblock %}
{% block body %}
<div class="row w-100 gx-0">
<div class="row gx-0">
<div class="row-title-box">
<h3 class="my-capsules-title">My capsules</h3>
</div>
......@@ -35,13 +34,13 @@
{% endfor %}
</div>
<div class="capsules-list d-flex flex-column w-100 m-6">
<div class="capsules-list d-flex flex-column m-6">
{% for capsule in capsules %}
<div class="capsule-item w-100 pb-4">
<div class="d-flex flex-row justify-content-center align-items-center pt-4">
<div class="capsule-item pb-4 m-5">
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center mt-sm-4">
<div class="list-item">
<a href="{{ capsule.getLink() }}" class="capsule-title">
{{ capsule.getNom() }}
<a href="{{ capsule.getEditionLink() }}" class="capsule-title">
{{ capsule.getName() }}
</a>
</div>
<div class="list-item">
......@@ -49,20 +48,16 @@
</div>
</div>
<div class=" d-flex flex-row justify-content-center align-items-center">
<div class="elements-left">
<div class="capsule-video">
<iframe class="responsive-iframe"
width="950" height="534"
src="{{ capsule.getLink() }}"
title="YouTube video player"
<div class="d-flex flex-column flex-md-row justify-content-center align-items-center">
<div class="m-4 ratio ratio-16x9">
<iframe
src="{{ capsule.getEditionLink() }}"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
allowfullscreen>
</iframe>
</div>
<div class="elements-right d-flex flex-column justify-content-center">
<div class="d-flex flex-column justify-content-center m-2">
<div class="list-item">
<a href="" class="links">
......@@ -79,8 +74,8 @@
Delete capsule
</a>
</div>
<a href="/" class="list-item">
<button class="standard-button">
<a href="/" class="list-item lh-md">
<button class="standard-button p-2">
Edit capsule
</button>
</a>
......@@ -88,56 +83,6 @@
</div>
</div>
{% endfor %}
<div class="capsule-item w-100 pb-4">
<div class="d-flex flex-row justify-content-center align-items-center pt-4">
<div class="list-item">
<a href="https://www.youtube.com/watch?v=ffcitRgiNDs&ab_channel=AdeleVEVO" class="capsule-title">
Title here
</a>
</div>
<div class="list-item">
By author
</div>
</div>
<div class=" d-flex flex-row justify-content-center align-items-center">
<div class="elements-left">
<div class="capsule-video">
<iframe class="responsive-iframe"
width="950" height="534"
src="https://www.youtube.com/embed/ffcitRgiNDs"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="elements-right d-flex flex-column justify-content-center">
<div class="list-item">
<a href="" class="links">
Edit permissions
</a>
</div>
<div class="list-item">
<a href="" class="links">
Duplicate capsule
</a>
</div>
<div class="list-item">
<a href="" class="links">
Delete capsule
</a>
</div>
<a href="/" class="list-item">
<button class="standard-button">
Edit capsule
</button>
</a>
</div>
</div>
</div>
</div>
{% endblock %}
templates/layout.html.twig
+ 1
− 1
View file @ cf681ad6
......@@ -16,7 +16,7 @@
</head>
<body class="container col-6 m-auto">
<body class="container col-10 col-md-8 col-lg-6 m-auto">
<div class="position-relative d-flex flex-row align-items-center justify-content-center mb-5">
<a href="/my_capsules" class="align-self-center">
<img id="header-memorekall-logo" class="memorekall-logo" src="{{ asset('build/images/MemoRekall.png') }}">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment