Add an about modal, adjust documentation

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 2.0.0 - UNRELEASED
 * Replace material design with bootstrap4 theme
+* Add an about modal
 * Update deployment and release documentation and examples
 * Update dependencies and force PHP 7.3
 * Add fallback for values for `env` file

README.md

@@ -1,11 +1,11 @@
 # README
 
-**ts3web** is a web interface for any TeamSpeak 3 Server used with serverQuery login. Sources can be viewed
+ts3web is a web interface for one TeamSpeak 3 Server. It's using serverquery to login. Sources can be viewed
 [here](https://git.myservermanager.com/alexander.schaeferdiek/ts3web).
  
 This web interface aims to be as simple as possible. The minimalistic approach is intentional.
 
-Feel free to submit pull requests if you like to help.
+Feel free to submit pull requests if you like to help. More information are here: [https://hub.docker.com/r/varakh/ts3web](https://hub.docker.com/r/varakh/ts3web)
 
 Features which are currently **not supported**:
 

data/locale/en.yml

@@ -272,3 +272,14 @@ passwords.add.duration: "Duration (in seconds)"
 passwords.add.description: "Description"
 passwords.add.channel: "Channel (user joins)"
 passwords.add.channel_password: "Channelpassword"
+
+# about
+about.header: "About %name%"
+about.body: |
+  ts3web is a web interface for one TeamSpeak 3 Server. It's using serverquery to login. This web interface aims to be as simple as possible. The minimalistic approach is intentional.
+
+  Feel free to submit pull requests if you like to help. More information are here: https://hub.docker.com/r/varakh/ts3web
+
+  Features which are currently not supported:
+  - modify permissions (only viewing)
+  - modify files (only viewing)

src/View/bootstrap4/about.twig

@@ -0,0 +1,15 @@
+<div class="modal" id="aboutModal">
+    <div class="modal-dialog">
+        <div class="modal-content">
+
+            <div class="modal-header">
+                <h4 class="modal-title">{% trans with {'%name%': getenv('site_title') } %}about.header{% endtrans %}</h4>
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+            </div>
+
+            <div class="modal-body">
+                {{ 'about.body'|trans|nl2br }}
+            </div>
+        </div>
+    </div>
+</div>

src/View/bootstrap4/layout.twig

@@ -25,7 +25,7 @@
 <!-- Main content -->
 <main role="main" class="container">
     <div class="mainContainer">
-    <div class="container">
+        <div class="container">
             {% if flash is not empty %}
                 {% if flash.getMessage('info').0 %}
                     <div class="alert alert-dismissible alert-info" role="alert">
@@ -53,15 +53,18 @@
 
             {% block content %}
             {% endblock %}
-    </div>
+        </div>
     </div>
 </main><!-- /.container -->
 
 <!-- Footer -->
+{% include 'about.twig' %}
+
 <footer class="footer">
     <div class="text-center">
         <span class="text-muted">
-            <i class="fa fa-copyright"></i> {{ "now"|date("Y") }} {{ getenv('site_title') }}
+            <i class="fa fa-copyright"></i> {{ "now"|date("Y") }} {{ getenv('site_title') }} |
+            <a data-toggle="modal" data-target="#aboutModal"><i class="fa fa-question"></i></a>
         </span>
     </div>
 </footer>