[CSS][Attachments] Attachments page view done. Standardized left and right panels sections. Applying styling through key classes to be defined in docs.

plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig

@@ -1,6 +1,9 @@
-<div id="related-notes" style="margin: var(--unit-size);">
+<section class="section-widget section-widget-padded">
-    {{ 'Notes where this attachment appears' | trans }}
+    <div class="section-title">
+        {{ 'Notes related' | trans }}
+    </div>
+
     {% for note in related_notes %}
         {% include '/note/view.html.twig' with {'note' : note, 'hide_attachments': true, 'have_user': have_user} only %}
     {% endfor %}
-</div>
+</section>

plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig

@@ -1,9 +1,11 @@
-<div id="related-tags" style="margin: var(--unit-size);">
+<section class="section-widget section-widget-padded">
-    {{ 'Tags for this attachment' | trans }}
+    <div class="section-title">
-    <br/>
+        {{ 'Tags for this attachment' | trans }}
+    </div>
+
     {% for tag in related_tags %}
         <i>#{{ tag['tag'] }}</i>
     {% else %}
         {{ 'No tags' | trans }}
     {% endfor %}
-</div>
+</section>

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,
+@media only screen
-    #panel-right-icon {
+and (min-width : 1200px) {
-        display: none;
-    }
 
     .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;

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);
+    display: flex;
-}
+    flex-direction: column;
-.profile-navigation > * {
-    display: block;
 }
 
 /* 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;
+    }
+}

public/assets/css/reset.css

@@ -86,6 +86,7 @@ h1 {
 h2 {
     font-size: var(--medium-size);
     font-weight: 600;
+    margin-bottom: 10px;
 }
 
 h3 {

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;
+    }
 }

templates/attachments/show.html.twig

@@ -1,18 +1,13 @@
 {% extends 'stdgrid.html.twig' %}
 
-{% block stylesheets %}
-    {{ parent() }}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}"
-          media="screen and (min-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_mid.css') }}"
-          media="screen and (max-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_small.css') }}"
-          media="screen and (max-width: 750px)">
-{% endblock %}
-
 {% block body %}
     <div class="content">
-        <a href="{{ download }}"> {{ 'Download link' | trans }}</a>
+        <section class="section-widget section-widget-padded">
-        {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %}
+
+            {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %}
+
+            <a class="section-widget-button-like" href="{{ download }}"> {{ 'Download link' | trans }}</a>
+        </section>
+
     </div>
 {% endblock body %}

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 }}
+    <div class="note-attachments">
+        {{ block | raw }}
+    </div>
 {% endfor %}
 {% if not handled %}
     <div>

templates/note/view.html.twig

@@ -37,6 +37,7 @@
     <section tabindex="0" role="dialog" class="e-content entry-content note-content">
       {{ note.getRendered() | raw }}
       {% if hide_attachments is not defined %}
+
         <div class="note-attachments" tabindex="0" title="{{ 'Note attachments' | trans }}">
           {% for attachment in note.getAttachments() %}
             {% include '/attachments/view.html.twig' with {'attachment': attachment, 'note': note} only%}

templates/sidepanel/left/left.html.twig

@@ -5,13 +5,13 @@
     <a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
     <aside class="panel-content accessibility-target">
         {% if app.user %}
-            <section class='profile' title="{{ 'Your profile information.' | trans }}">
+            <section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
                 <a id="user" href="{{ path('settings') }}">
                     <img src='{{ user_avatar }}' class="icon icon-avatar" alt="{{ 'Your account\'s avatar.' | trans }}">
-                    <div id="user-info">
+                    <div class="user-info">
                         <strong id="user-nickname" title="{{ 'Your account\' nickname.' | trans }}">{{ user_nickname }}</strong>
 
-                        <nav id="user-tags">
+                        <nav class="user-tags">
                             {% if user_tags %}
                                 {% for tag in user_tags %}
                                     <a href='#'> #{{ tag }}</a>
@@ -27,54 +27,57 @@
                         </section>
                     </div>
                 </a>
-            </section>
 
-            {# {% for extra in profile_extras %}
-                {% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %}
-                {% endfor %} #}
 
-            <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
+                {# {% for extra in profile_extras %}
-                <strong id="timeline-nav-header">Profile</strong>
+                    {% include '/'~ extra.name ~ '/view.html.twig' with {'vars': extra.vars} only %}
+                    {% endfor %} #}
 
-                <a title='{{ 'Your messages.' | trans }}' href='{{ path('settings') }}' class='{{ active("replies") }}'>
+                <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
-                    Messages
+                    <a title='{{ 'Your messages.' | trans }}' href='{{ path('settings') }}' class='{{ active("replies") }}'>
-                </a>
+                        Messages
+                    </a>
 
-                <a title='{{ 'Replies to your notes.' | trans }}' href="{{ path('replies', {'nickname' : user_nickname}) }}" class='{{ active("replies") }}'>
+                    <a title='{{ 'Replies to your notes.' | trans }}' href="{{ path('replies', {'nickname' : user_nickname}) }}" class='{{ active("replies") }}'>
-                    Replies
+                        Replies
-                </a>
+                    </a>
 
-                {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
+                    {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
-                    {{ link | raw }}
+                        {{ link | raw }}
-                {% endfor %}
+                    {% endfor %}
 
-                <a title='{{ 'Access your account settings.' | trans }}' href="{{ path('settings') }}" class='{{ active('settings') }}'>
+                    <a title='{{ 'Access your account settings.' | trans }}' href="{{ path('settings') }}" class='{{ active('settings') }}'>
-                    Settings
+                        Settings
-                </a>
+                    </a>
 
-                <a title='{{ 'Logout from your account.' | trans }}' href='{{ path('logout') }}'>
+                    <a title='{{ 'Logout from your account.' | trans }}' href='{{ path('logout') }}'>
-                    Logout
+                        Logout
-                </a>
+                    </a>
-            </nav>
+                </nav>
 
-        {% else %}
+            {% else %}
-            <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
 
-                <a title='{{ 'Login with your existing account.' | trans }}' href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>
+                <section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}">
-                    Login
+                    <h2 class="section-title">Account</h2>
-                </a>
+                    <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">
 
-                <a title='{{ 'Register a new account!' | trans }}' href="{{ path('register') }}">
+                        <a title='{{ 'Login with your existing account.' | trans }}' href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>
-                    Register
+                            Login
-                </a>
+                        </a>
 
-            </nav>
+                        <a title='{{ 'Register a new account!' | trans }}' href="{{ path('register') }}">
-        {% endif %}
+                            Register
+                        </a>
 
-        <div class="timeline-nav">
+                    </nav>
+                </section>
+
+            {% endif %}
+        </section>
+
+        <section class="section-widget section-widget-padded">
+            <h2 class="section-title">Timeline</h2>
             <nav class='sec-nav' tabindex="0" title="{{ 'Navigate through each timeline.' | trans }}">
-                <strong id="timeline-nav-header">Timeline</strong>
-
                 <ul>
                     <li>
                         <a href="{{ path('main_public') }}" class='{{ active('main_public') }}'>
@@ -105,7 +108,7 @@
                     {% endif %}
                 </ul>
             </nav>
-        </div>
+        </section>
 
         <footer class="footer">
             <nav>

templates/sidepanel/right/right.html.twig

@@ -42,15 +42,11 @@
         {% set current_path = app.request.get('_route') %}
         {% if right_panel_vars is defined %}
             {% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}
-                <section class="section-widget">
+                {{ block | raw }}
-                    {{ block | raw }}
-                </section>
             {% endfor %}
         {% else %}
             {% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %}
-                <section class="section-widget">
+                {{ block | raw }}
-                    {{ block | raw }}
-                </section>
             {% endfor %}
         {% endif %}
     </aside>