cosmetic responsiveness update

backend/multimail/static/multimail/css/simple-sidebar.css

@@ -4,47 +4,93 @@
  * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
  */
 
- #wrapper {
+#wrapper {
     overflow-x: hidden;
- }
+}
 
 #sidebar-wrapper {
-  min-height: 100vh;
+    min-height: 100vh;
-  margin-left: -15rem;
+    margin-left: -15rem;
-  -webkit-transition: margin .25s ease-out;
+    -webkit-transition: margin .25s ease-out;
-  -moz-transition: margin .25s ease-out;
+    -moz-transition: margin .25s ease-out;
-  -o-transition: margin .25s ease-out;
+    -o-transition: margin .25s ease-out;
-  transition: margin .25s ease-out;
+    transition: margin .25s ease-out;
 }
 
 #sidebar-wrapper .sidebar-heading {
-  padding: 0.875rem 1.25rem;
+    padding: 0.875rem 1.25rem;
-  font-size: 1.2rem;
+    font-size: 1.2rem;
 }
 
 #sidebar-wrapper .list-group {
-  width: 15rem;
+    width: 15rem;
 }
 
 #page-content-wrapper {
-  min-width: 100vw;
+    min-width: 100vw;
 }
 
 #wrapper.toggled #sidebar-wrapper {
-  margin-left: 0;
-}
-
-@media (min-width: 768px) {
-  #sidebar-wrapper {
     margin-left: 0;
-  }
-
-  #page-content-wrapper {
-    min-width: 0;
-    width: 100%;
-  }
-
-  #wrapper.toggled #sidebar-wrapper {
-    margin-left: -15rem;
-  }
 }
+
+.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
+    color: inherit;
+    text-decoration: inherit;
+}
+
+.optional-column-replacement {
+    display: none;
+}
+
+@media (min-width: 1024px) , (max-width: 700px) and (min-width: 610px) {
+    #sidebar-wrapper {
+        margin-left: 0;
+    }
+
+    #page-content-wrapper {
+        min-width: 0;
+        width: 100%;
+    }
+
+    #wrapper.toggled #sidebar-wrapper {
+        margin-left: -15rem;
+    }
+}
+
+
+@media (max-width: 700px) {
+
+    .card-columns {
+        column-count: 1;
+    }
+
+    .optional-column {
+        display: none;
+    }
+
+    .optional-column-replacement {
+        display: initial;
+    }
+}
+
+@media (min-width: 700px) and  (max-width: 1300px) {
+
+    .card-columns {
+        column-count: 2;
+    }
+}
+
+@media (min-width: 1300px) and  (max-width: 1700px) {
+
+    .card-columns {
+        column-count: 3;
+    }
+}
+
+@media (min-width: 1700px) {
+
+    .card-columns {
+        column-count: 4;
+    }
+}

backend/multimail/templates/multimail/aliases.html

@@ -4,11 +4,13 @@
     <h1 class="mt-4">Aliases</h1>
 
     {% if alias_list %}
-        <table class="table table-striped table-responsive-md btn-table">
+        <table class="table table-striped btn-table">
             <thead>
             <tr>
-                <th scope="col">Source</th>
+                <th scope="col">Source
-                <th scope="col">Destination</th>
+                <span class="optional-column-replacement">/ Destination</span>
+                </th>
+                <th scope="col" class="optional-column">Destination</th>
                 <th scope="col">Actions</th>
             </tr>
             </thead>
@@ -18,8 +20,9 @@
                 <tr>
                     <th scope="row"><a
                             href="{% url 'multimail:edit_alias' alias.id %}">{{ alias.source_username }}@{{ alias.source_domain }}</a>
+                        <span class="optional-column-replacement">{{ alias.destination_username }}@{{ alias.destination_domain }}</span>
                     </th>
-                    <th scope="row">{{ alias.destination_username }}@{{ alias.destination_domain }}</th>
+                    <th scope="row" class="optional-column">{{ alias.destination_username }}@{{ alias.destination_domain }}</th>
                     <td><a href="{% url 'multimail:delete_alias' alias.id %}"
                            class="btn btn-danger btn-sm m-0">Delete</a></td>
                 </tr>
@@ -30,15 +33,15 @@
             <tr>
                 <th scope="row">
                 </th>
-                <th scope="row"></th>
+                <td class="optional-column"></td>
-                <td><a href="{% url 'multimail:new_alias' %}" class="btn btn-primary btn-sm m-0">Add</a>
+                <td><a href="{% url 'multimail:new_alias' %}" class="btn btn-primary btn-sm m-0">Add Alias</a>
                 </td>
             </tr>
             </tfoot>
         </table>
     {% else %}
         <p>You haven't set up any aliases yet.</p>
-        <a href="{% url 'multimail:new_alias' %}" class="btn btn-primary btn-sm m-0">Add</a>
+        <a href="{% url 'multimail:new_alias' %}" class="btn btn-primary btn-sm m-0">Add Alias</a>
     {% endif %}
 
 {% endblock %}

backend/multimail/templates/multimail/base.html

@@ -26,10 +26,13 @@
 
     <!-- Sidebar -->
     <div class="bg-light border-right" id="sidebar-wrapper">
-        <div class="sidebar-heading">Multimail</div>
+        <div class="sidebar-heading">
+            <a href="{% url 'multimail:index' %}" class="link-unstyled">Multimail</a>
+        </div>
         <div class="list-group list-group-flush">
             <a href="{% url 'multimail:domains' %}" class="list-group-item list-group-item-action bg-light">Domains</a>
-            <a href="{% url 'multimail:mailboxes' %}" class="list-group-item list-group-item-action bg-light">Mailboxes</a>
+            <a href="{% url 'multimail:mailboxes' %}"
+               class="list-group-item list-group-item-action bg-light">Mailboxes</a>
             <a href="{% url 'multimail:aliases' %}" class="list-group-item list-group-item-action bg-light">Aliases</a>
         </div>
     </div>
@@ -41,9 +44,9 @@
         <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
             <button class="btn btn-link btn-lg" id="menu-toggle"><i class="fas fa-bars"></i></button>
 
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
+            <button class="navbar-toggler btn btn-link btn-lg" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                     aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
+                <i class="fas fa-user"></i>
             </button>
 
             <div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -57,7 +60,7 @@
                     <li class="nav-item dropdown">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            {{user}}
+                            {{ user }}
                         </a>
                         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                             <a class="dropdown-item" href="#">Nothing</a>

backend/multimail/templates/multimail/domains.html

@@ -25,14 +25,14 @@
             <tr>
                 <th scope="row">
                 </th>
-                <td><a href="{% url 'multimail:new_domain' %}" class="btn btn-primary btn-sm m-0">Add</a>
+                <td><a href="{% url 'multimail:new_domain' %}" class="btn btn-primary btn-sm m-0">Add Domain</a>
                 </td>
             </tr>
             </tfoot>
         </table>
     {% else %}
         <p>You haven't set up any domains yet.</p>
-        <a href="{% url 'multimail:new_domain' %}" class="btn btn-primary btn-sm m-0">Add</a>
+        <a href="{% url 'multimail:new_domain' %}" class="btn btn-primary btn-sm m-0">Add Domain</a>
     {% endif %}
 
 {% endblock %}

backend/multimail/templates/multimail/index.html

@@ -1,16 +1,92 @@
 {% extends 'multimail/base.html' %}
 
 {% block content %}
-    <h1 class="mt-4">Domains</h1>
+    <div class="pt-3">
-
     {% if domain_list %}
-        <ul>
+        <div class="card-columns">
-            {% for question in domain_list %}
+            {% for domain in domain_list %}
-                <li><a href="{% url 'multimail:detail' question.id %}">{{ question.domain }}</a></li>
+                <div class="card">
-            {% endfor %}
+                    <h5 class="card-header"><a
-        </ul>
+                            href="{% url 'multimail:edit_domain' domain.id %}">{{ domain.domain }}</a></h5>
-    {% else %}
+                    <table class="table table-striped btn-table mb-0">
-        <p>No multimail are available.</p>
+                        {% if domain.mailboxes %}
-    {% endif %}
+                            <thead>
+                            <tr>
+                                <th scope="col">Mailboxes</th>
+                                <th scope="col"></th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            {% for mailbox in domain.mailboxes %}
+                                <tr>
+                                    <th scope="row"><a
+                                            href="{% url 'multimail:edit_mailbox' mailbox.id %}">{{ mailbox.username }}@{{ mailbox.domain }}</a>
+                                    </th>
+                                    <td><a href="{% url 'multimail:delete_mailbox' mailbox.id %}"
+                                           class="btn btn-outline-danger btn-sm m-0"><i
+                                            class="fas fa-trash"></i></a></td>
+                                </tr>
+                            {% endfor %}
+                            </tbody>
+                        {% else %}
+                            <tbody>
+                            <tr>
+                                <td colspan="2" class="text-muted"><small>You dont't have any mailboxes for this domain yet.</small></td>
+                            </tr>
+                            </tbody>
+                        {% endif %}
+                        {% if domain.aliases %}
+                            <tbody>
+                            <tr class="bg-white">
+                                <th scope="col">Aliases</th>
+                                <th scope="col"></th>
+                            </tr>
+                            </tbody>
+                            <tbody>
 
+                            {% for alias in domain.aliases %}
+                                <tr>
+                                    <th scope="row"><a
+                                            href="{% url 'multimail:edit_alias' alias.id %}">{{ alias.source_username }}@{{ alias.source_domain }}</a>
+                                        {{ alias.destination_username }}@{{ alias.destination_domain }}
+                                    </th>
+                                    <td><a href="{% url 'multimail:delete_alias' alias.id %}"
+                                           class="btn btn-outline-danger btn-sm m-0"><i
+                                            class="fas fa-trash"></i></a></td>
+                                </tr>
+                            {% endfor %}
+
+                            </tbody>
+                        {% else %}
+                            <tbody>
+                            <tr>
+                                <td colspan="2" class="text-muted"><small>You dont't have any aliases for this domain yet.</small></td>
+                            </tr>
+                            </tbody>
+                        {% endif %}
+                    </table>
+                    <div class="card-footer">
+                        <div class="btn-group btn-block" data-toggle="buttons">
+                            <a href="{% url 'multimail:new_mailbox' %}"
+                               class="btn btn-primary btn-sm">Add Mailbox</a>
+                            <a href="{% url 'multimail:new_alias' %}"
+                               class="btn btn-primary btn-sm">Add Alias</a>
+                            <a href="{% url 'multimail:delete_domain' domain.id %}"
+                               class="btn btn-outline-danger btn-sm">Delete Domain</a>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+            <div class="card">
+                <div class="card-body">
+                    <h5 class="card-title">New Domain</h5>
+                    <a href="{% url 'multimail:new_domain' %}" class="btn btn-primary btn-sm m-0">Add Domain</a>
+                </div>
+            </div>
+        </div>
+    {% else %}
+        <p>You haven't set up any domains yet.</p>
+        <a href="{% url 'multimail:new_domain' %}" class="btn btn-primary btn-sm m-0">Add Domain</a>
+    {% endif %}
+</div>
 {% endblock %}

backend/multimail/templates/multimail/mailboxes.html

@@ -8,6 +8,10 @@
             <thead>
             <tr>
                 <th scope="col">Mailbox</th>
+                <th scope="col" class="optional-column">Username</th>
+                <th scope="col" class="optional-column">Domain</th>
+                <th scope="col" class="optional-column">Sendonly</th>
+                <th scope="col" class="optional-column">Active</th>
                 <th scope="col">Actions</th>
             </tr>
             </thead>
@@ -16,6 +20,10 @@
             {% for mailbox in mailbox_list %}
                 <tr>
                     <th scope="row"><a href="{% url 'multimail:edit_mailbox' mailbox.id %}">{{ mailbox.username }}@{{ mailbox.domain }}</a></th>
+                    <td class="optional-column">{{ mailbox.username }}</td>
+                    <td class="optional-column">{{ mailbox.domain }}</td>
+                    <td class="optional-column">{{ mailbox.sendonly }}</td>
+                    <td class="optional-column">{{ mailbox.enabled }}</td>
                     <td><a href="{% url 'multimail:delete_mailbox' mailbox.id %}" class="btn btn-danger btn-sm m-0">Delete</a></td>
                 </tr>
             {% endfor %}
@@ -23,16 +31,16 @@
             </tbody>
             <tfoot>
             <tr>
-                <th scope="row">
+                <th scope="row"> </th>
-                </th>
+                <td class="optional-column" colspan="4"></td>
-                <td><a href="{% url 'multimail:new_mailbox' %}" class="btn btn-primary btn-sm m-0">Add</a>
+                <td><a href="{% url 'multimail:new_mailbox' %}" class="btn btn-primary btn-sm m-0">Add Mailbox</a>
                 </td>
             </tr>
             </tfoot>
         </table>
     {% else %}
         <p>You haven't set up any mailboxes yet.</p>
-        <a href="{% url 'multimail:new_mailbox' %}" class="btn btn-primary btn-sm m-0">Add</a>
+        <a href="{% url 'multimail:new_mailbox' %}" class="btn btn-primary btn-sm m-0">Add Mailbox</a>
     {% endif %}
 
 {% endblock %}

backend/multimail/urls.py

@@ -6,7 +6,7 @@ from . import actions
 
 app_name = 'multimail'
 urlpatterns = [
-    path('', views.DomainListView.as_view(), name='index'),
+    path('', views.IndexView.as_view(), name='index'),
 
     path('domains/', views.DomainListView.as_view(), name='domains'),
     path('domain/new/', forms.new_domain, name='new_domain'),

backend/multimail/views.py

@@ -10,6 +10,23 @@ class UserLoginView(LoginView):
     template_name = 'multimail/login.html'
 
 
+class IndexView(LoginRequiredMixin, generic.ListView):
+    login_url = 'login/'
+    template_name = 'multimail/index.html'
+    context_object_name = 'domain_list'
+
+    def fill_related(self, domains):
+        for domain in domains:
+            domain.mailboxes = Mailbox.objects.filter(domain=domain)
+            domain.aliases = Alias.objects.filter(source_domain=domain)
+            yield domain
+
+    def get_queryset(self):
+        """Return the last five published questions."""
+        user = user_from_request(self.request)
+        return self.fill_related(Domain.objects.filter(admin__admin=user['name'], admin__source=user['source']))
+
+
 class DomainListView(LoginRequiredMixin, generic.ListView):
     login_url = 'login/'
     template_name = 'multimail/domains.html'