Merge pull request #44 from H2-invent/feature/refactorSidenavWindows

refactor the modals for serversettings and profile
H2-invent · Jan 26, 2021 · fd5d6b4 · fd5d6b4
2 parents a4f5a6c + 081373d
commit fd5d6b4
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 52 deletions.
diff --git a/.env b/.env
@@ -56,6 +56,7 @@ SUPPORT_MAIL=support@lokal.lokal
 ###ODC Parameters###
 imprint=test
 dataPrivacy=test
+helpUrl=https://h2-invent.com/post/howtos/jitsi-meeting-erstellen
 
 ###Cron Parameters###
 CRON_TOKEN=tpyv5yDIV54ifahrVJmuJ40qExRdNa2344DFADFsdsfenN3rCMkQW8Br1o1W9JP9uUc1N

diff --git a/.env.sample b/.env.sample
@@ -17,6 +17,7 @@ MAILER_TRANSPORT=smtp
 ###ODC Parameters###
 imprint=</impressum>
 dataPrivacy=</datenschutzhinweis>
+helpUrl=</help>
 
 ###Cron Parameters###
 CRON_TOKEN=<sha256>

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -610,4 +610,13 @@ label.required:after {
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     content: "\f0d8";;
-}
+}
+.iconSytle{
+    max-height: 25px;
+}
+
+@media only screen and (min-width: 768px) {
+    .iconSytle {
+        max-height: 30px;
+    }
+}
diff --git a/config/packages/twig.yaml b/config/packages/twig.yaml
@@ -9,6 +9,7 @@ twig:
     globals:
         imprint: '%env(imprint)%'
         dataPrivacy: '%env(dataPrivacy)%'
+        helpUrl: '%env(helpUrl)%'
         laf_version: '%env(laF_version)%'
         matomo_enable: '%env(matomo_enable)%'
         matomo_id: '%env(matomo_id)%'

diff --git a/public/images/question.png b/public/images/question.png
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -18,13 +18,15 @@
                          style="height: 40px; width: auto">
                 </a>
                 {% block CTA %}{% endblock %}
-
                 {{ include('base/__topnav.html.twig') }}
 
             </div>
         </nav>
         {% block body %}{% endblock %}
+
         {{ include('base/__addressBookModal.html.twig') }}
+        {{ include('servers/__serverModal.html.twig') }}
+        {{ include('base/__profileModal.html.twig') }}
         {{ include('base/__snack.html.twig') }}
         {{ include('base/__footer.html.twig') }}
     </div>

diff --git a/templates/base/__addressBookModal.html.twig b/templates/base/__addressBookModal.html.twig
@@ -2,7 +2,7 @@
     <div class="modal-dialog modal-full-height modal-right" role="document">
         <div class="modal-content" style="height: 100vh;display: flex; flex-direction: column">
             <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalPreviewLabel">{{ 'Adressbuch'|trans }}</h5>
+                <h4 class="h4-responsive" id="exampleModalPreviewLabel">{{ 'Adressbuch'|trans }}</h4>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>

diff --git a/templates/base/__profileModal.html.twig b/templates/base/__profileModal.html.twig
@@ -0,0 +1,30 @@
+<div class="modal fade right" id="sideModalTR" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
+     aria-hidden="true">
+
+    <div class="modal-dialog modal-full-height modal-right" role="document">
+
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title w-100" id="myModalLabel">{% trans %}Profil{% endtrans %}</h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>
+                    {% trans %}Name{% endtrans %}: {{ app.user.firstName }} {{ app.user.lastName }}<br>
+                    {% trans %}Email{% endtrans %}: {{ app.user.email }}
+                </p>
+                <a class="btn btn-primary btn-sm"
+                   href="{{ path('connect_keycloak_edit') }}"
+                   target="_blank">{% trans %}Profil bearbeiten{% endtrans %}</a>
+                <a class="btn btn-primary btn-sm"
+                   href="{{ path('connect_keycloak_edit') }}"
+                   target="_blank">{% trans %}Passwort ändern{% endtrans %}</a>
+            </div>
+            <div class="modal-footer">
+                <a href="{{ path('app_logout') }}" class="btn btn-danger btn-sm">{% trans %}Logout{% endtrans %}</a>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/templates/base/__topnav.html.twig b/templates/base/__topnav.html.twig
@@ -1,60 +1,32 @@
 <ul class="nav navbar-nav ml-auto">
     <div class="row mr-1">
         <!-- Button trigger modal -->
+
         <a class="ml-auto mr-2"
-           data-toggle="modal"
-           data-target="#modalAdressbook">
-            <img src="{{ asset('images/agenda.png') }}" style="max-height: 30px">
+           href="{{ helpUrl }}" target="_blank">
+            <img src="{{ asset('images/question.png') }}" class="iconSytle">
+        </a> <a class="ml-auto mr-2"
+                data-toggle="modal"
+                data-target="#modalAdressbook">
+            <img src="{{ asset('images/agenda.png') }}" class="iconSytle">
         </a>
         <a class="ml-auto mr-2"
            data-toggle="modal"
            data-target="#settings">
-            <img src="{{ asset('images/settings.png') }}" style="max-height: 30px">
+            <img src="{{ asset('images/settings.png') }}" class="iconSytle">
         </a>
         <!-- Button trigger modal -->
         <a class="ml-auto mr-2"
            data-toggle="modal"
            data-target="#sideModalTR">
-            <img src="{{ asset('images/profil.svg') }}" style="max-height: 30px">
+            <img src="{{ asset('images/profil.svg') }}" class="iconSytle">
         </a>
 
-        <a href="{{ path('app_logout') }}"><img src="{{ asset('images/logout.svg') }}" style="max-height: 30px"></a>
+        <a href="{{ path('app_logout') }}"><img src="{{ asset('images/logout.svg') }}" class="iconSytle"></a>
 
     </div>
 
     <!-- To change the direction of the modal animation change .right class -->
-    <div class="modal fade right" id="sideModalTR" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
-         aria-hidden="true">
-
-        <!-- Add class .modal-side and then add class .modal-top-right (or other classes from list above) to set a position to the modal -->
-        <div class="modal-dialog modal-side modal-top-right" role="document">
-
-
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title w-100" id="myModalLabel">{% trans %}Profil{% endtrans %}</h4>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <p>
-                        {% trans %}Name{% endtrans %}: {{ app.user.firstName }} {{ app.user.lastName }}<br>
-                        {% trans %}Email{% endtrans %}: {{ app.user.email }}
-                    </p>
-                        <a class="btn btn-primary btn-sm"
-                           href="{{ path('connect_keycloak_edit') }}"
-                           target="_blank">{% trans %}Profil bearbeiten{% endtrans %}</a>
-                        <a class="btn btn-primary btn-sm"
-                           href="{{ path('connect_keycloak_edit') }}"
-                           target="_blank">{% trans %}Passwort ändern{% endtrans %}</a>
-                </div>
-                <div class="modal-footer">
-                    <a href="{{ path('app_logout') }}" class="btn btn-danger btn-sm">{% trans %}Logout{% endtrans %}</a>
-                </div>
-            </div>
-        </div>
-    </div>
     <!-- Side Modal Top Right -->
-    {{ include('servers/__serverModal.html.twig') }}
+
 </ul>
diff --git a/templates/dashboard/__roomCard.html.twig b/templates/dashboard/__roomCard.html.twig
@@ -20,19 +20,18 @@
 
             {% endif %}
             <div class="dropdown d-none d-lg-block ">
-                <button class="btn btn-primary dropdown-toggle" type="button"
+                <button class="caretdown btn btn-primary dropdown-toggle" type="button"
                         id="dropdownMenu1"
                         data-toggle="dropdown" aria-haspopup="true"
-                        aria-expanded="true">
+                        aria-expanded="false">
                     Starten
                 </button>
 
                 <ul class="dropdown-menu p-1" aria-labelledby="dropdownMenu1">
-                    <li><a href="{{ path('room_join',{'t':'b','room':room.id}) }}"
+                    <li><a class="dropdown-item" href="{{ path('room_join',{'t':'b','room':room.id}) }}"
                            target="_blank">Im
                             Browser</a></li>
-                    <li role="separator" class="divider"></li>
-                    <li><a title="In der Electron Jitsi Meet App"
+                    <li><a class="dropdown-item" title="In der Electron Jitsi Meet App"
                            href="{{ path('room_join',{'t':'a','room':room.id}) }}"
                            target="_blank">In
                             der App</a></li>

diff --git a/templates/servers/__serverModal.html.twig b/templates/servers/__serverModal.html.twig
@@ -1,14 +1,12 @@
 <!-- To change the direction of the modal animation change .right class -->
-<div class="modal fade left" id="settings" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
+<div class="modal fade right" id="settings" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
      aria-hidden="true">
 
     <!-- Add class .modal-side and then add class .modal-top-right (or other classes from list above) to set a position to the modal -->
-    <div class="modal-dialog modal-top-center" role="document">
-
-
+    <div class="modal-dialog modal-full-height modal-right" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h4 class="modal-title w-100" id="myModalLabel">{% trans %}Jitsi Meet Servereinstellungen{% endtrans %}</h4>
+                <h4 class="h4-responsive w-100" id="myModalLabel">{% trans %}Jitsi Meet Servereinstellungen{% endtrans %}</h4>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>