imp: Improve the look of popups

Probesys · Dec 9, 2022 · 4a1bf43 · 4a1bf43
1 parent 63c6d9d
commit 4a1bf43
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 8 deletions.
diff --git a/assets/icons/caret-down.svg b/assets/icons/caret-down.svg
diff --git a/assets/stylesheets/components/popups.css b/assets/stylesheets/components/popups.css
@@ -31,8 +31,8 @@
     bottom: 0;
     left: 0;
 
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
 
     font-size: 0.9em;
 
@@ -102,6 +102,7 @@
 }
 
 .popup__title {
+    margin-bottom: 1rem;
     padding-right: 1.5rem;
     padding-left: 1.5rem;
 
@@ -111,8 +112,7 @@
 
 .popup__separator {
     height: 0.2rem;
-    margin-right: 1.5rem;
-    margin-left: 1.5rem;
+    margin: 1rem 1.5rem;
 
     background-color: var(--color-primary7);
     border-radius: 0.75rem;

diff --git a/docs/developers/popups.md b/docs/developers/popups.md
@@ -11,10 +11,11 @@ The HTML of popups is based on the [`<details>`](https://developer.mozilla.org/f
     <summary class="popup__opener">
         <span class="button">
             {{ 'Actions' | trans }}
+            {{ icon('caret-down') }}
         </span>
     </summary>
 
-    <nav class="popup__container popup__container--left flow-small">
+    <nav class="popup__container popup__container--left">
     </nav>
 </details>
 ```

diff --git a/public/icons.svg b/public/icons.svg
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -67,7 +67,7 @@
                                 </span>
                             </summary>
 
-                            <nav class="popup__container popup__container--large popup__container--left flow-small">
+                            <nav class="popup__container popup__container--large popup__container--left">
                                 <div class="popup__title">{{ app.user.email }}</div>
 
                                 <a class="popup__item" href="{{ path('preferences') }}">
@@ -98,6 +98,7 @@
                                 <span class="button">
                                     {{ icon('language') }}
                                     {{ 'Language' | trans }}
+                                    {{ icon('caret-down') }}
                                 </span>
                             </summary>
 

diff --git a/templates/tickets/show.html.twig b/templates/tickets/show.html.twig
@@ -231,10 +231,11 @@
                             <span class="button">
                                 {{ icon('ellipsis') }}
                                 {{ 'Actions' | trans }}
+                                {{ icon('caret-down') }}
                             </span>
                         </summary>
 
-                        <nav class="popup__container popup__container--left flow-small">
+                        <nav class="popup__container popup__container--left">
                             <form action="{{ path('update ticket type', { uid: ticket.uid }) }}" method="post">
                                 <input type="hidden" name="_csrf_token" value="{{ csrf_token('update ticket type') }}">
                                 {% if ticket.type == 'request' %}