From 42f9a6a79cb35a986a4ffaa43e0c26bde86484e8 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Thu, 16 Sep 2021 16:27:28 +0100 Subject: [PATCH] [CSS][Attachments] Attachments page view done. Standardized left and right panels sections. Applying styling through key classes to be defined in docs. --- .../attachmentRelatedNotes.html.twig | 9 ++- .../attachmentRelatedTags.html.twig | 10 ++- public/assets/css/base.css | 56 ++++++++----- public/assets/css/left/left.css | 28 ++++++- public/assets/css/reset.css | 1 + public/assets/css/right/right.css | 14 ++++ templates/attachments/show.html.twig | 19 ++--- templates/attachments/view.html.twig | 4 +- templates/note/view.html.twig | 1 + templates/sidepanel/left/left.html.twig | 81 ++++++++++--------- templates/sidepanel/right/right.html.twig | 8 +- 11 files changed, 144 insertions(+), 87 deletions(-) diff --git a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig index 2f12330c15..5eda018f2b 100644 --- a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig +++ b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig @@ -1,6 +1,9 @@ - + \ No newline at end of file diff --git a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig index 881dc2cdec..f0f8dc453c 100644 --- a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig +++ b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig @@ -1,9 +1,11 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 571a6d2c61..c6cc6bae5e 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -408,19 +408,19 @@ summary:hover .icon-details-open { border-radius: var(--unit-size); background-color: var(--translucent); padding: var(--small-size); + + width: auto; + height: auto; + max-width: 100%; } .note-attachments > figure figcaption { display: flex; + max-width: 100%; + word-break: break-all; padding-top: var(--small-size); } -.note-attachments > figure img, -.note-attachments > figure video { - width: 100%; - height: auto; -} - /* SECTIONS */ .section-widget { display: flex; @@ -430,10 +430,34 @@ summary:hover .icon-details-open { background-color: var(--translucent); border-radius: var(--unit-size); border: solid 2px var(--bg2); - margin-bottom: var(--unit-size); + margin-bottom: var(--medium-size); color: var(--white); } +.section-widget-padded { + padding: var(--unit-size); +} + +.section-title { + font-size: var(--main-size); + font-weight: 700; + margin: 0; +} + +.section-widget-button-like { + border: 2px solid var(--bg2); + border-radius: var(--unit-size); + background: var(--bg-button); + padding: 5px 10px; + margin-top: 5px; + + cursor: pointer; + float: right; + align-self: end; + + font-family: var(--main-font); + font-weight: 700; +} .section-title-details { font-size: var(--main-size); @@ -466,10 +490,6 @@ summary:hover .icon-details-open { padding: var(--unit-size); } -.section-form fieldset .form-group:last-of-type { - margin-bottom: unset; -} - .section-form-legend { margin-top: unset; margin-bottom: 10px; @@ -487,6 +507,7 @@ summary:hover .icon-details-open { display: flex; flex-direction: column; + margin-bottom: 10px; } .help-block { @@ -739,14 +760,12 @@ input[type=file] { padding: var(--unit-size); } -@media (min-width: 1200px) { - #panel-left-icon, - #panel-right-icon { - display: none; - } + +@media only screen +and (min-width : 1200px) { .panel .panel-content { - width: 100%; + width: 25rem; max-width: 20%; } @@ -757,7 +776,8 @@ input[type=file] { } } -@media (max-width: 1200px) { +@media only screen +and (max-width: 1200px) { /* content should occupy the entire width at this size */ .container { margin-left: unset; diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index ecf1e24588..2ebff8577d 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -17,6 +17,7 @@ } .panel-left nav { + padding-top: var(--unit-size); font-size: var(--medium-size); } @@ -52,11 +53,10 @@ font-size: var(--main-size); } + .profile-navigation { - margin-bottom: var(--main-size); -} -.profile-navigation > * { - display: block; + display: flex; + flex-direction: column; } /* TIMELINE NAVIGATION / PLUGINS */ @@ -91,3 +91,23 @@ margin-top: auto; font-size: var(--small-size); } + +@media only screen +and (min-width : 1200px) { + + #panel-left-icon { + display: none; + } +} + +@media only screen +and (min-width: 2200px) { + .panel-left > * { + margin-left: 10rem; + } + + .footer { + left: -10rem; + position: relative; + } +} \ No newline at end of file diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index 486bd16f55..f5a1eb730b 100644 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -86,6 +86,7 @@ h1 { h2 { font-size: var(--medium-size); font-weight: 600; + margin-bottom: 10px; } h3 { diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index 2d8d0ef056..5cab841cb2 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -14,4 +14,18 @@ #panel-right-icon { cursor: pointer !important; border: 2px solid transparent; +} + +@media only screen +and (min-width: 1200px) { + #panel-right-icon { + display: none; + } +} + +@media only screen +and (min-width: 2200px) { + .panel-right > * { + margin-right: 10rem; + } } \ No newline at end of file diff --git a/templates/attachments/show.html.twig b/templates/attachments/show.html.twig index f341847619..29f285fab9 100644 --- a/templates/attachments/show.html.twig +++ b/templates/attachments/show.html.twig @@ -1,18 +1,13 @@ {% extends 'stdgrid.html.twig' %} -{% block stylesheets %} - {{ parent() }} - - - -{% endblock %} - {% block body %}
- {{ 'Download link' | trans }} - {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %} +
+ + {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %} + + {{ 'Download link' | trans }} +
+
{% endblock body %} \ No newline at end of file diff --git a/templates/attachments/view.html.twig b/templates/attachments/view.html.twig index fac366c74d..1ba86ffc92 100644 --- a/templates/attachments/view.html.twig +++ b/templates/attachments/view.html.twig @@ -1,7 +1,9 @@ {% set handled = false %} {% for block in handle_event('ViewAttachment', {'attachment': attachment, 'note': note}) %} {% set handled = true %} - {{ block | raw }} +
+ {{ block | raw }} +
{% endfor %} {% if not handled %}
diff --git a/templates/note/view.html.twig b/templates/note/view.html.twig index 70c4884253..057ad30b25 100644 --- a/templates/note/view.html.twig +++ b/templates/note/view.html.twig @@ -37,6 +37,7 @@ - {# {% for extra in profile_extras %} - {% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %} - {% endfor %} #} - - {% else %} - + + + {% endif %} + + +
+

Timeline

-
+