refactor(apis_entities,apis_relations,core): move inline styles

Move leftover inline styles in HTML templates
to static CSS files.

Closes #1258

apis_core/apis_entities/static/css/E53_Place_popover.css

@@ -1,3 +1,6 @@
+#map {
+ height: 300px;
+}
 #popovermap {
  width: 500px;
  height: 500px;

apis_core/apis_entities/static/css/apis_entities.css

@@ -0,0 +1,23 @@
+/* single object view header */
+#single-object-header h2 {
+ text-align: center;
+}
+
+/* navigation between objects from single object view header */
+.prev-in-list {
+ float: right;
+}
+.next-in-list {
+ float: left;
+}
+
+/* additional object actions */
+.object-duplicate {
+ color: blueviolet;
+}
+.object-merge {
+ color: dodgerblue;
+}
+.object-history {
+ color: #007bff;
+}

apis_core/apis_entities/templates/apis_core/apis_entities/abstractentity.html

@@ -1,15 +1,21 @@
 {% extends "generic/generic_content.html" %}
+{% load static %}
+
+{% block styles %}
+ {{ block.super }}
+ <link href="{% static 'css/apis_entities.css' %}" rel="stylesheet" />
+{% endblock styles %}
 
 {% block content %}
  <div class="container-fluid">
  <div class="card">
  <div class="card-header">
 
  {% block card-header-content %}
- <div class="row">
+ <div id="single-object-header" class="row">
  <div class="col-md-2">{% include "apis_entities/partials/prev_url.html" %}</div>
  <div class="col-md-8">
- <h2 style="text-align: center;">
+ <h2>
  {% include "apis_entities/partials/listview_url.html" %}
  {{ object }}
 

apis_core/apis_entities/templates/apis_core/apis_entities/e53_place_detail.html

@@ -13,7 +13,6 @@
  <table class="table table-hover table-bordered">
  {% if object.latitude and object.longitude %}
  <td id="map"
- style="height: 300px"
  data-longitude="{{ object.longitude|floatformat:"4u" }}"
  data-latitude="{{ object.latitude|floatformat:"4u" }}">{{ object }}</td>
  {% endif %}

apis_core/apis_entities/templates/apis_entities/partials/entity_actions_nav.html

@@ -10,14 +10,11 @@
  </a>
  {% endif %}
  {% if object.get_add_permission in perms %}
- <a class="dropdown-item"
- style="color: blueviolet"
+ <a class="object-duplicate dropdown-item"
  href="{{ object.get_duplicate_url }}">
  <span class="material-symbols-outlined material-symbols-align">content_copy</span> Duplicate
  </a>
- <a class="dropdown-item"
- style="color: dodgerblue"
- href="{{ object.get_merge_url }}">
+ <a class="object-merge dropdown-item" href="{{ object.get_merge_url }}">
  <span class="material-symbols-outlined material-symbols-align">cell_merge</span> Merge
  </a>
  {% endif %}

apis_core/apis_entities/templates/apis_entities/partials/entity_base_nav.html

@@ -10,9 +10,8 @@
  href="{{ object.get_edit_url }}"><span class="material-symbols-outlined material-symbols-align">edit</span>Edit</a>
  </li>
  {% if object.history %}
- <li class="nav-item">
- <a class="nav-link {% if request.path == object.get_history_url %}active{% endif %} "
- style="color: #007bff"
+ <li class="object-history nav-item">
+ <a class="nav-link {% if request.path == object.get_history_url %}active{% endif %}"
  href="{{ object.get_history_url }}"><span class="material-symbols-outlined material-symbols-align">history</span>History</a>
  </li>
  {% endif %}

apis_core/apis_entities/templates/apis_entities/partials/next_url.html

@@ -1,7 +1,7 @@
 {% if object.get_next_id %}
  <h2>
- <a href="{% url request.resolver_match.view_name request.resolver_match.kwargs.contenttype object.get_next_id %}"
- style="float:left">
+ <a class="next-in-list"
+ href="{% url request.resolver_match.view_name request.resolver_match.kwargs.contenttype object.get_next_id %}">
  <span class="material-symbols-outlined">chevron_right</span>
  </a>
  </h2>

apis_core/apis_entities/templates/apis_entities/partials/prev_url.html

@@ -1,7 +1,7 @@
 {% if object.get_prev_id %}
  <h2>
- <a href="{% url request.resolver_match.view_name request.resolver_match.kwargs.contenttype object.get_prev_id %}"
- style="float:right">
+ <a class="prev-in-list"
+ href="{% url request.resolver_match.view_name request.resolver_match.kwargs.contenttype object.get_prev_id %}">
  <span class="material-symbols-outlined">chevron_left</span>
  </a>
  </h2>

apis_core/apis_entities/templates/columns/duplicate.html

@@ -1,3 +1,4 @@
 <a title="duplicate"
- href="{{ record.get_duplicate_url }}"
- style="color: blueviolet"><span class="material-symbols-outlined">content_copy</span></a>
+ class="object-duplicate"
+ href="{{ record.get_duplicate_url }}">
+ <span class="material-symbols-outlined">content_copy</span></a>

apis_core/apis_relations/static/css/apis_relations.css

@@ -0,0 +1,11 @@
+/* navigation between objects from object detail view */
+/* TODO relates to potentially redundant relations_detail_generic.html template */
+.next-in-list {
+ float: right;
+}
+
+/* single object view header */
+/* TODO relates to potentially redundant relations_detail_generic.html template */
+#single-object-header h2:nth-of-type(2) {
+ text-align: center;
+}

apis_core/apis_relations/templates/apis_relations/relations_detail_generic.html

@@ -3,6 +3,11 @@
 
 {% block title %}{{ object }}{% endblock %}
 
+{% block styles %}
+ {{ block.super }}
+ <link href="{% static 'css/apis_relations.css' %}" rel="stylesheet" />
+{% endblock styles %}
+
 {% block scriptHeader %}
  {{ block.super }}
 {% endblock scriptHeader %}
@@ -11,7 +16,7 @@
  <div class="container-fluid">
  <div class="card">
  <div class="card-header">
- <div class="row">
+ <div id="single-object-header" class="row">
  <div class="col-md-2">
  {% if object.get_prev %}
  <h2>
@@ -22,7 +27,7 @@ <h2>
  {% endif %}
  </div>
  <div class="col-md-8">
- <h2 style="text-align: center;">
+ <h2>
  {% if object.get_listview_url %}
  <a href="{{ object.get_listview_url }}">
  <small>{{ entity_type }}s</small>
@@ -53,7 +58,7 @@ <h2 style="text-align: center;">
  <div class="col-md-2">
  <h2>
  {% if object.get_next %}
- <a href="{{ object.get_next }}" style="float:right">
+ <a class="next-in-list" href="{{ object.get_next }}">
  <i class="fas fa-chevron-right" title="next"></i>
  </a>
  </h2>

apis_core/core/static/css/core.css

@@ -5,3 +5,8 @@
 a #logo:hover {
  opacity: 0.5;
 }
+
+/* main modal in modal block */
+#main-modal .modal-dialog {
+ max-width: 800px;
+}

apis_core/core/static/css/override_bootstrap.min.css

@@ -0,0 +1,6 @@
+/* override of Bootstrap 4.6.2 generated (min) version to partially
+fix an issue with select2
+TODO remove after move to Boostrap 5 */
+.select2-container--default .select2-selection span.select2-selection__rendered {
+ line-height: initial;
+}

apis_core/core/templates/base.html

@@ -51,7 +51,13 @@
  href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" />
  <link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
- {% include "partials/bootstrap4_css.html" %}
+ {# Bootstrap 4.6.2 stylesheet, as suggested on #}
+ {# https://getbootstrap.com/docs/4.6/getting-started/introduction/ #}
+ <link rel="stylesheet"
+ href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+ integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
+ crossorigin="anonymous">
+ <link href="{% static 'css/override_bootstrap.min.css' %}" rel="stylesheet" />
  <link href="{% static 'css/material-symbols.css' %}" rel="stylesheet" />
  <link href="{% static 'css/core.css' %}" rel="stylesheet" />
  <link href="{% static 'css/E53_Place_popover.css' %}" rel="stylesheet" />
@@ -255,11 +261,11 @@
  {% block modal %}
  <!-- Modal -->
  <div class="modal fade"
- id="modal"
+ id="main-modal"
  tabindex="-1"
  aria-labelledby="modalLabel"
  aria-hidden="true">
- <div class="modal-dialog" style="max-width: 800px;">
+ <div class="modal-dialog">
  <div id="modal-here" class="modal-content"></div>
  </div>
  </div>