Skip to content

Commit

Permalink
[DONE] BS 5 Accordion in completions (#1136)
Browse files Browse the repository at this point in the history 
* Replace the old accordion in video completions by BS 5 Accordion
(Thank's to Apolline Vandaele’s UX audit ;)

* add line at end of file

* Correct completion unit tests
  • Loading branch information
@Badatos
Badatos authored May 21, 2024
1 parent e90b3c8 commit b84f5f1
Show file tree
Hide file tree
Showing 11 changed files with 399 additions and 495 deletions.
132 changes: 28 additions & 104 deletions pod/completion/static/css/completion.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,124 +2,57 @@
* Esup-Pod completion styles
*/

/** Table scroll **/
table.scroll {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}

table.scroll .btn-sm,
table.scroll .btn-group-sm > .btn {
border-radius: 4px;
font-size: 14px;
line-height: 1.4;
padding: 0.2em 0.4em;
}

table.scroll tbody {
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
}

table.scroll tbody td,
table.scroll thead th {
width: 10%;
height: 20px;
line-height: 20px;
border-bottom: 0;
}

table.scroll thead tr th {
height: 27px;
line-height: 27px;
text-align: left;
}

/** Table contributor **/
table#table_list_contributors tbody td.contributor_name,
table#table_list_contributors thead th.contributor_name {
table#list-contributor tbody td.contributor-name,
table#list-contributor thead th.contributor-name {
width: 20%;
}

/** Accordeon for lists **/
#accordeon li,
#accordeon div {
list-style: none;
}

/** Lists style **/
#list_contributor .panel-heading,
#list_track .panel-heading,
#list_document .panel-heading,
#list_overlay .panel-heading {
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding: 4px 15px;
}

#id_background {
margin-left: 0.25rem;
position: inherit;
}

.contenuTitre {
display: flex;
flex-direction: column;
}

.contenuTitre #list_track {
order: 1;
}

.contenuTitre .breadcrumb {
padding: 0;
}

.contenuTitre .btn {
margin-bottom: 1rem;
margin-right: 1rem;
}

/***** Override track list *****/

.grid-list-track .division {
grid-column: 1 / span 4;
border-bottom: 1px solid #ccc;
}

.grid-list-track .track_kind.options .btn {
.track-kind.options .btn {
margin: 0;
padding: 0.2em 0.4em;
font-size: 1rem;
box-sizing: border-box;
}

.grid-list-track .track-kind.options .btn {
font-size: 14px;
}

.grid-list-track .track_kind.options a.btn {
.grid-list-track .track-kind.options a.btn {
overflow: unset;
align-self: self-start;
}

.grid-list-track .track_kind.options .dropdown #dropdownMenuButton {
.grid-list-track .track-kind.options .dropdown #track-menu-button {
background-color: var(--pod-primary);
color: #fff;
border-color: var(--pod-primary);
border-radius: 4px;
}

.grid-list-track .track_kind.options .dropdown .dropdown-item {
.grid-list-track .track-kind.options .dropdown .dropdown-item {
background-color: #fff;
}

.grid-list-track .track_kind.options .dropdown .btn {

.grid-list-track .track-kind.options .dropdown .btn {
width: 100%;
}

.grid-list-track .track_kind.options .dropdown {
.grid-list-track .track-kind.options .dropdown {
display: none;
background-color: #fff;
}

.grid-list-track .thead_title {
.grid-list-track .thead-title {
margin: 0;
padding-right: 20px;
color: var(--pod-primary);
Expand All @@ -139,30 +72,23 @@ table#table_list_contributors thead th.contributor_name {
margin-top: 1em;
}

.grid-list-track .track_kind.file {
.grid-list-track .track-kind.file {
word-break: break-word;
}

.track_kind.options {
.track-kind.options {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 10px;
}

.track_kind.options .btn {
margin: 0;
padding: 0.2em 0.4em;
font-size: 1rem;
box-sizing: border-box;
}

@media only screen and (max-width: 840px) {
.grid-list-track .track_kind.options .dropdown {
@media only screen and (width <= 840px) {
.grid-list-track .track-kind.options .dropdown {
display: inline-block;
}

.grid-list-track .track_kind.options > form,
.grid-list-track .track_kind.options > #modifCapSubFile {
.grid-list-track .track-kind.options > form,
.grid-list-track .track-kind.options > #modif-cap-sub-file {
display: none;
}
}
Expand All @@ -174,11 +100,9 @@ ul.css-tabs a {
box-sizing: content-box;
}

textarea#id_description {
line-height: normal;
}

/** Bootstrap override **/
.card-title {
margin: 0.45rem;
.caption{
padding-top: .5rem;
color: var(--bs-secondary-color);
text-align: left;
font-size: 1em;
}
69 changes: 20 additions & 49 deletions pod/completion/static/js/completion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,34 +7,8 @@
global fadeIn
*/

document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("li.contenuTitre").forEach(function (element) {
element.style.display = "none";
});
var accordeon_head = document.querySelectorAll("#accordeon li a.title");
if (accordeon_head.length <= 0) return;
accordeon_head[0].classList.add("active");
let sibling = accordeon_head[0].parentNode.nextElementSibling;
slideDown(sibling, 500);

// Click on .titre
accordeon_head.forEach((element) => {
addEventListener("click", (event) => {
if (event.target != element) return;
event.preventDefault();
if (element.getAttribute("class") != "title active") {
slideToggle(element.parentNode.nextElementSibling);
element.classList.add("active");
} else if (element.getAttribute("class") == "title active") {
slideUp(element.parentNode.nextElementSibling);
element.classList.remove("active");
}
});
});
});

// Video form
var num = 0;
//var num = 0;
var name = "";

function show_form(data, form) {
Expand All @@ -45,7 +19,6 @@ function show_form(data, form) {
form_el.querySelectorAll("script").forEach((item) => {
if (item.src) {
// external script

let script = document.createElement("script");
script.src = item.src;
document.body.appendChild(script);
Expand Down Expand Up @@ -85,7 +58,7 @@ document.addEventListener("submit", (e) => {
return;

e.preventDefault();
var jqxhr = "";
// var jqxhr = "";
var exp = /_([a-z]*)\s?/g;
var id_form = e.target.getAttribute("id");
var name_form = "";
Expand All @@ -104,7 +77,7 @@ document.addEventListener("submit", (e) => {
var list = "list_" + name_form;
var action = e.target.querySelector("input[name=action]").value;
sendAndGetForm(e.target, action, name_form, form, list)
.then((r) => "")
.then(() => "")
.catch((e) => console.log("error", e));
});

Expand All @@ -123,7 +96,6 @@ var sendAndGetForm = async function (elt, action, name, form, list) {
var href = elt.getAttribute("action");
let url = window.location.origin + href;
let token = elt.csrfmiddlewaretoken.value;
var id = elt.querySelector("input[name=id]").value;

if (action === "new" || action === "form_save_new") {
document.getElementById(form).innerHTML =
Expand Down Expand Up @@ -197,9 +169,10 @@ var sendAndGetForm = async function (elt, action, name, form, list) {
document.querySelectorAll("a.title").forEach(function (element) {
element.style.display = "none";
});
hide_others_sections(name);
//hide_others_sections(name);
}
if (action == "modify" || action == "form_save_modify") {
let id = elt.querySelector("input[name=id]").value;
let form_data = new FormData();
form_data.append("action", action);
form_data.append("id", id);
Expand Down Expand Up @@ -234,29 +207,29 @@ var sendAndGetForm = async function (elt, action, name, form, list) {
});

document.querySelector("a.title").style.display = "none";
hide_others_sections(name);
// hide_others_sections(name);
}
if (action == "delete") {
if (action === "delete") {
var deleteConfirm = "";
if (name == "track") {
if (name === "track") {
deleteConfirm = confirm(
gettext("Are you sure you want to delete this file?"),
);
} else if (name == "contributor") {
} else if (name === "contributor") {
deleteConfirm = confirm(
gettext("Are you sure you want to delete this contributor?"),
);
} else if (name == "document") {
} else if (name === "document") {
deleteConfirm = confirm(
gettext("Are you sure you want to delete this document?"),
);
} else if (name == "overlay") {
} else if (name === "overlay") {
deleteConfirm = confirm(
gettext("Are you sure you want to delete this overlay?"),
);
}
if (deleteConfirm) {
id = elt.querySelector("input[name=id]").value;
let id = elt.querySelector("input[name=id]").value;
url = window.location.origin + href;
token = document.querySelector("input[name=csrfmiddlewaretoken]").value;
let form_data = new FormData();
Expand Down Expand Up @@ -342,7 +315,7 @@ var sendAndGetForm = async function (elt, action, name, form, list) {
};

// Hide others sections
function hide_others_sections(name_form) {
/*function hide_others_sections(name_form) {
var allElements = document.querySelectorAll("a.title.active");
var sections = [];
let form = document.querySelector('a[id="section_' + name_form + '"]');
Expand All @@ -366,7 +339,7 @@ function hide_others_sections(name_form) {
section.firstElementChild.className = "glyphicon glyphicon-chevron-down";
}
}
}
}*/

// Refreshes the list
function refresh_list(data, form, list) {
Expand All @@ -375,9 +348,7 @@ function refresh_list(data, form, list) {
document.querySelectorAll("form").forEach(function (element) {
element.style.display = "block";
});
document.querySelectorAll("a.title").forEach(function (element) {
element.style.display = "initial";
});

if (data.player) {
document.getElementById("enrich_player").innerHTML = data.player;
}
Expand Down Expand Up @@ -434,11 +405,11 @@ function verify_fields(form) {
var new_role = document.getElementById("id_role").value;
var new_name = document.getElementById("id_name").value;
document
.querySelectorAll("#table_list_contributors tbody > tr")
.querySelectorAll("#list-contributor tbody > tr")
.forEach((tr) => {
if (
id != tr.querySelector("input[name=id]").value &&
tr.querySelector("td[class=contributor_name]").innerHTML ==
tr.querySelector("td[class=contributor-name]").innerHTML ==
new_name &&
tr.querySelector("td[class=contributor_role]").innerHTML == new_role
) {
Expand Down Expand Up @@ -514,18 +485,18 @@ function verify_fields(form) {
var is_duplicate = false;
var file_name = file_abs_path.match(/([\w\d_-]+)(\.vtt)/)[1].toLowerCase();
document
.querySelectorAll(".grid-list-track .track_kind.kind")
.querySelectorAll(".grid-list-track .track-kind.kind")
.forEach((elt) => {
if (
kind === elt.textContent.trim().toLowerCase() &&
lang ===
elt.parentNode
.querySelector("#" + elt.get("id") + ".track_kind.lang")
.querySelector("#" + elt.get("id") + ".track-kind.lang")
.textContent.trim()
.toLowerCase() &&
file_name ===
elt.parentNode
.querySelector("#" + elt.get("id") + ".track_kind.file")
.querySelector("#" + elt.get("id") + ".track-kind.file")
.textContent.trim()
.split(" ")[0]
.toLowerCase()
Expand Down
Loading

0 comments on commit b84f5f1

Please sign in to comment.