Refactored dark/light CSS + New Review Tab

apprise_api/api/templates/base.html

@@ -7,21 +7,23 @@
   <meta charset="utf-8">
   <!--Let browser know website is optimized for mobile-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
   <!--materialize-->
-  <link rel="stylesheet" href="{% get_static_prefix %}css/{{request.theme|safe}}/materialize.min.css" />
+  <link rel="stylesheet" href="{% get_static_prefix %}css/materialize.min.css" />
   <!--material-design-icons-->
   <link rel="stylesheet" href="{% static 'iconfont/material-icons.css' %}">
+  <!--highlightjs-->
+  <link rel="stylesheet" href="{% get_static_prefix %}css/highlight.min.css">
   <!--common-->
   <link rel="stylesheet" href="{% static 'css/base.css' %}" />
-  <!--highlightjs-->
-  <link rel="stylesheet" href="{% get_static_prefix %}css/{{request.theme|safe}}/highlight.min.css">
-  <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
   <!--materialize-->
   <script src="{% static 'js/materialize.min.js' %}"></script>
   <!--sweetalert2-->
   <script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
   <!--highlightjs-->
   <script src="{% static 'js/highlight.pack.js' %}"></script>
+  <!--theme-->
+  <link rel="stylesheet" href="{% get_static_prefix %}css/theme-{{request.theme|safe}}.min.css">
   <title>{% block title %}{% trans "Apprise API" %}{% endblock %}</title>
 </head>
 

apprise_api/api/templates/config.html

@@ -2,15 +2,17 @@
 {% load i18n %}
 {% block body %}
 {% if STATEFUL_MODE != 'disabled' %}
-<h4>{% trans "Management for Config ID:" %} <em>{{ key }}</em></h4>
+<h4>{% trans "Management for Config ID:" %} <code class="config-id">{{ key }}</code></h4>
 <div class="row">
   <div class="col s12">
     <ul class="tabs config-overview">
-      <li class="tab col s4"><a class="active" href="#overview"><i class="material-icons">info</i>
+      <li class="tab col s3"><a class="active" href="#overview"><i class="material-icons">info</i>
           {% trans "Overview" %}</a></li>
-      <li class="tab {% if CONFIG_LOCK %}tab-locked {% endif %}col s4"><a href="#config"><i class="material-icons">{% if not CONFIG_LOCK %}settings{% else %}lock{% endif %}</i> {%trans "Configuration" %}</a>
+      <li class="tab {% if CONFIG_LOCK %}tab-locked {% endif %}col s3"><a href="#config"><i class="material-icons">{% if not CONFIG_LOCK %}settings{% else %}lock{% endif %}</i> {%trans "Configuration" %}</a>
       </li>
-      <li class="tab col s4"><a href="#notify"><i class="material-icons">announcement</i> {%trans "Notifications" %}</a>
+      <li class="tab {% if CONFIG_LOCK %}tab-locked {% endif %}col s3"><a href="#review"><i class="material-icons">{% if not CONFIG_LOCK %}web{% else %}lock{% endif %}</i> {%trans "Review" %}</a>
+      </li>
+      <li class="tab col s3"><a href="#notify"><i class="material-icons">announcement</i> {%trans "Notifications" %}</a>
       </li>
     </ul>
   </div>
@@ -123,13 +125,6 @@ <h6>{% trans "Using CURL" %}</h6>
         &nbsp;&nbsp;&nbsp;&nbsp;"{{request.scheme}}://{{request.META.HTTP_HOST}}{{BASE_URL}}/notify/<em>{{key}}</em>"</code></pre>
         </p>
       </div>
-      <div class="section">
-        <h5>{% trans "Loaded Configuration" %}</h5>
-        <div id="url-list"></div>
-        <div id="url-list-progress" class="progress" style="width:70%">
-          <div class="indeterminate"></div>
-        </div>
-      </div>
     </div>
   </div>
   <div id="config" class="col s12">
@@ -150,6 +145,24 @@ <h5>{% trans "Your Configuration Is Locked" %}</h5>
     {% endif %}
   </div>
 
+  <div id="review" class="col s12">
+    {% if not CONFIG_LOCK %}
+    <p>
+      {% blocktrans %}The following URLs have been detected:{% endblocktrans %}
+    </p>
+    <div class="section">
+      <h5>{% trans "Loaded Configuration" %}</h5>
+      <div id="url-list"></div>
+      <div id="url-list-progress" class="progress" style="width:70%">
+        <div class="indeterminate"></div>
+      </div>
+    </div>
+    {% else %}
+    <h5>{% trans "Your Configuration Is Locked" %}</h5>
+    <p>{% blocktrans %}Access to your configuration has been disabled by your administrator.{% endblocktrans %}
+    {% endif %}
+  </div>
+
   <div id="notify" class="col s12">
     <p>
       {% blocktrans %}

apprise_api/static/css/base.css

@@ -179,3 +179,8 @@ h6 {
 #overview pre {
 	margin-left: 2.0rem
 }
+
+code.config-id {
+	font-size: 0.7em;
+	background: none;
+}