remove inline css (#372)

* rm inline styles from login page * use bootstrap instead of inline styles * use meter elements * apply bootstrap styling to <meter> * prevent inline styles
MPIB · May 20, 2021 · 08880cb · 08880cb
1 parent ef1345a
commit 08880cb
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 34 deletions.
diff --git a/static/css/main.css b/static/css/main.css
@@ -122,3 +122,31 @@ table tr th, table tr td {
         0 0 0 2.1em #212529,
         0 0 0 2.6em #95a5a6;
 }
+
+.login {
+    background-color: var(--light, #eee);
+}
+.login main {
+    max-width: 330px;
+    margin: 40px auto;
+}
+
+meter.progress {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: none;
+    width: 100%;
+}
+meter.progress::-webkit-meter-inner-element {
+    display: block;
+}
+meter.progress::-webkit-meter-bar {
+    border: 0;
+    border-radius: 0;
+}
+meter.progress::-webkit-meter-optimum-value {
+    background: var(--primary);
+}
+meter.progress::-moz-meter-bar {
+    background: var(--primary);
+}
diff --git a/templates/base.html b/templates/base.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8"/>
     <meta http-equiv="Content-Security-Policy" content="default-src 'self';
         script-src 'self' 'unsafe-inline' 'unsafe-eval';
-        style-src 'self' 'unsafe-inline' http://fonts.googleapis.com https://fonts.googleapis.com;
+        style-src 'self' http://fonts.googleapis.com https://fonts.googleapis.com;
         connect-src 'self' https://localhost:41951 https://127.0.0.1:41951;
         font-src 'self' http://fonts.gstatic.com https://fonts.gstatic.com;
         img-src 'self' data:; ">
@@ -21,10 +21,9 @@
     <link rel="shortcut icon" href="{% static "images/favicon.ico" %}">
     <link rel="apple-touch-icon" href="{% static "images/apple-touch-icon.png" %}">
 
-    {% block extracss %}{% endblock %}
     <script src="{% static "alpinejs/dist/alpine.js" %}"></script>
 </head>
-<body>
+<body class="{% block body_class%}{% endblock %}">
 {% if not nochrome %}
 <header class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top mb-3">
     <a class="navbar-brand" href="/"><i class="fa fa-archive"></i> {{ SITE_NAME }}</a>

diff --git a/templates/devices/detail/device_detail.html b/templates/devices/detail/device_detail.html
@@ -346,7 +346,7 @@ <h4>{% trans "Description" %}</h4>
         </div>
     </div>
 
-    <ul class="nav nav-tabs mb-3" style="margin-top: 20px;">
+    <ul class="nav nav-tabs my-3">
         {% if can_change_device %}
             <li class="nav-item"><a class="nav-link active" href="#notes" data-toggle="tab">{% trans "Notes" %}</a></li>
         {% endif %}

diff --git a/templates/devices/forms/device_form_automatic.html b/templates/devices/forms/device_form_automatic.html
@@ -35,7 +35,7 @@
             </div>
             <div x-show="hasDevice()">
                 <hr />
-                <div class="row" style="margin-bottom: 12px">
+                <div class="row mb-3">
                     <div class="col-md-6">
                         <h4>Lagerregal ID: <b x-text="device.id"></b></h4>
                     </div>

diff --git a/templates/registration/login.html b/templates/registration/login.html
@@ -3,25 +3,10 @@
 
 {% block title %}{% trans "Log in" %}{% endblock %}
 
-{% block extracss %}
-    <style>
-        body {
-            background-color: #eee;
-        }
-
-        h1 {
-            color: #1abc9c;
-        }
-
-        main {
-            max-width: 330px;
-            margin: 40px auto;
-        }
-    </style>
-{% endblock %}
+{% block body_class %}login{% endblock %}
 
 {% block content %}
-    <h1 class="mb-5 text-center"><i class="fa fa-archive"></i> {{ SITE_NAME }}</h1>
+    <h1 class="mb-5 text-center text-success"><i class="fa fa-archive"></i> {{ SITE_NAME }}</h1>
     {% if form.errors %}
         <div data-alert class="alert-danger alert">
             {% trans "Your username and password didn't match. Please try again." %}

diff --git a/templates/snippets/widgets/statistics.html b/templates/snippets/widgets/statistics.html
@@ -21,12 +21,7 @@
                 {% trans "Devices" %}
             </div>
             <div class="col-md-9">
-                <div class="progress mb-0">
-                    <div class="progress-bar progress-bar-{{ device_percentcolor }}" role="progressbar"
-                         aria-valuenow="{{ device_percent }}" aria-valuemin="0" aria-valuemax="100"
-                         style="width: {{ device_percent }}%;">
-                    </div>
-                </div>
+                <meter class="progress" max="100" value="{{ device_percent }}"></meter>
                 <span>{{ device_available }}</span>
                 <span class="pull-right">{{ device_all }}</span>
             </div>
@@ -37,12 +32,7 @@
                 {% trans "IP-Addresses" %}
             </div>
             <div class="col-md-9">
-                <div class="progress mb-0">
-                    <div class="progress-bar progress-bar-{{ ipaddress_percentcolor }}" role="progressbar"
-                         aria-valuenow="{{ ipaddress_percent }}" aria-valuemin="0" aria-valuemax="100"
-                         style="width: {{ ipaddress_percent }}%;">
-                    </div>
-                </div>
+                <meter class="progress" max="100" value="{{ ipaddress_percent }}"></meter>
                 <span>{{ ipaddress_available }}</span>
                 <span class="pull-right">{{ ipaddress_all }}</span>
             </div>