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

Add capsule preview template

parent 1b6f162e
No related branches found
No related tags found
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
+ 5
− 2
View file @ 0dd90477
......@@ -84,8 +84,11 @@ button[type=submit]{
box-shadow: 0 0 10px rgba(0,0,0,.5);
border-radius: 2px;
margin-bottom: 40px;
//display: inline-flex;
align-items: center;
justify-content: center;
//width: 100%;
//position: absolute;
}
.elements-left {
......@@ -161,7 +164,7 @@ button[type=submit]{
padding-left: 0;
}
.row-title {
.my-capsules-title {
text-decoration: none;
float: left;
color: rgba(255,255,255,.75) !important;
......
templates/capsule/index.html.twig
+ 110
− 1
View file @ 0dd90477
......@@ -7,6 +7,12 @@
{% endblock %}
{% block body %}
<div class="row w-100 gx-0">
<div class="row-title-box">
<h3 class="my-capsules-title">My capsules</h3>
</div>
</div>
<div class="mt-4">
<div class="d-flex justify-content-center align-items-center">
<form>
......@@ -27,6 +33,109 @@
{{ flashSuccess }}
</div>
{% endfor %}
</div>
<div class="capsules-list d-flex flex-column w-100 m-6">
<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 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
+ 13
− 13
View file @ 0dd90477
......@@ -16,7 +16,7 @@
</head>
<body class="container">
<body class="container col-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 to comment