diff --git a/assets/development/scripts/organization.js b/assets/development/scripts/organization.js index 5ba95f8..3bd379e 100644 --- a/assets/development/scripts/organization.js +++ b/assets/development/scripts/organization.js @@ -25,22 +25,27 @@ document.querySelectorAll('.schedule-category').forEach(node => { */ let description = document.querySelector('.description-cutted') let descriptionActions = document.querySelector('.description-actions-container') + let descriptionOpened = false let defaultMaxHeight = "" if (description !== null) { let btn = document.querySelector('.description-btn') + let btnIcon = document.getElementById('description-btn-icon') + let btnText = document.getElementById('description-btn-text') btn.onclick = () => { if (!descriptionOpened) { // open the full description descriptionActions.className = descriptionActions.className.replace(' closed', '') defaultMaxHeight = description.style.maxHeight description.style.maxHeight = description.scrollHeight + "px" - btn.textContent = "Fermer la description" + btnText.textContent = "Fermer la description" + btnIcon.style.transform = 'rotate(180deg)' } else { // initial max Height descriptionActions.className += ' closed' description.style.maxHeight = defaultMaxHeight - btn.textContent = "Ouvrir la description" + btnText.textContent = "Ouvrir la description" + btnIcon.style.transform = 'rotate(0deg)' } descriptionOpened = !descriptionOpened } diff --git a/assets/development/styles/main.css b/assets/development/styles/main.css index ad711c1..e33a5d9 100644 --- a/assets/development/styles/main.css +++ b/assets/development/styles/main.css @@ -57,14 +57,13 @@ body { padding: .5em 1em; color: white; border-radius: 7px; - background: #2c3e50; + background: #95a5a6; border: 0; cursor: pointer; } .btn:focus { - outline: 0; - opacity: 0.8; + box-shadow: 0 0 8px 0px rgba(0,0,0,0.1); } @media (max-width: 1600px) { diff --git a/assets/development/styles/organization.css b/assets/development/styles/organization.css index 6f24647..9ffb586 100644 --- a/assets/development/styles/organization.css +++ b/assets/development/styles/organization.css @@ -422,6 +422,33 @@ section { margin-bottom: -62px; } +.description-btn-container { + display: flex; + justify-content: center; +} + +.description-btn { + width: 13em; + display: flex; + justify-content: space-between; + align-items: center; +} + +#description-btn-icon { + width: 1em; + height: 1em; + overflow: hidden; +} + +#description-btn-text { + margin-left: .5em; +} + +#description-btn-icon { + transition: all 0.1s ease-out; + transform: none; +} + /* ***************************************************************************** * SCHEDULE diff --git a/src/controllers/PublicController.ts b/src/controllers/PublicController.ts index ca8cdde..6332552 100644 --- a/src/controllers/PublicController.ts +++ b/src/controllers/PublicController.ts @@ -229,7 +229,7 @@ export default class PublicController { }) } - version.cutDescription = Utils.isStrUsable(version, 'descriptionLong') && version.descriptionLong.length > 200 + version.cutDescription = Utils.isStrUsable(version, 'descriptionLong') && version.descriptionLong.length > 800 // if (version.cutDescription) { // version.descriptionFirstHalf = version.descriptionLong.substr(0, 200) // not gonna lie diff --git a/views/organization.twig b/views/organization.twig index d4459fc..f6be8dd 100644 --- a/views/organization.twig +++ b/views/organization.twig @@ -104,13 +104,16 @@ {% if data.descriptionLong is not null and data.descriptionLong|length > 7 and not data.cutDescription %} {{ data.descriptionLong|raw }} {% elseif data.cutDescription %} +
+ +
{{ data.descriptionLong|raw }}
-
{% else %} {{ data.descriptionShort|e }}