diff --git a/depicts/mediawiki_category.py b/depicts/mediawiki_category.py
new file mode 100644
index 0000000..ea10dd8
--- /dev/null
+++ b/depicts/mediawiki_category.py
@@ -0,0 +1,27 @@
+from .category import Category
+from .mediawiki import mediawiki_query
+from .type import CallParams
+
+
+def process_cats(cats: list[dict[str, str]], site: str) -> list[Category]:
+ """Process categories."""
+ return [Category(cat["title"], site) for cat in cats]
+
+
+def get_categories(titles: list[str], site: str) -> list[tuple[str, list[Category]]]:
+ """Get categories for pages with given titles."""
+ params: CallParams = {
+ "prop": "categories",
+ "clshow": "!hidden",
+ "cllimit": "max",
+ }
+ from_wiki = mediawiki_query(titles, params, site)
+ title_and_cats = []
+ for i in from_wiki:
+ if "categories" not in i:
+ continue
+ cats = process_cats(i["categories"], site)
+ if not cats:
+ continue
+ title_and_cats.append((i["title"], cats))
+ return title_and_cats
diff --git a/templates/base.html b/templates/base.html
index cc7c9f6..66a0fd2 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -2,7 +2,7 @@
-
+
@@ -27,8 +27,7 @@
{% block content %}{% endblock %}
<script src="{{ url_for('static', filename='javascript/jquery/jquery.min.js') }}"></script>
- {# <script src="{{ url_for('static', filename='javascript/popper.js/popper.min.js') }}"></script> #}
- <script src="{{ url_for('static', filename='javascript/bootstrap4/js/bootstrap.min.js') }}"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
{% block script %}{% endblock %}
</body>
diff --git a/templates/item.html b/templates/item.html
index cae96f2..5f8192d 100644
--- a/templates/item.html
+++ b/templates/item.html
@@ -6,16 +6,40 @@
<style>
div.description { margin-left: 2em; color: rgb(96, 96, 96); }
span.description { color: rgb(96, 96, 96); }
+
+#artwork {
+ position: fixed; /* This keeps the map in place when the page is scrolled */
+ top: 56px;
+ left: 0; /* Positioned on the right side */
+ width: 50%; /* Half the screen width */
+ bottom: 0px;
+ z-index: -1;
+}
+
+#artwork img {
+ object-fit: contain; /* The image will be scaled to maintain its aspect ratio */
+ width: 100%;
+ height: 100%;
+}
+
+
+#main {
+ float: right; /* Floats the main content to the right */
+ width: 48%; /* Adjusted width of the main content */
+ height: auto; /* Height is set to auto, allowing it to expand naturally */
+ margin-right: 1%;
+}
+
</style>
{% endblock %}
{% block content %}
-<div class="container-fluid mt-2">
- <div class="row">
- <div class="col-md">
- <img src="{{ image.thumburl }}" class="w-100" />
+ <div id="artwork">
+ <div class="w-100 h-100">
+ <img src="{{ image.thumburl }}" />
+ </div>
</div>
- <div class="col-md">
+ <div id="main">
<h1>{{ self.title() }}</h1>
{% if label_languages %}
<p>Label from:
@@ -179,8 +203,6 @@ span.description { color: rgb(96, 96, 96); }
</form>
{% endif %}
</div>
- </div>
-</div>
{% endblock %}
{% block script %}
diff --git a/templates/navbar.html b/templates/navbar.html
index bde2ebf..de3440f 100644
--- a/templates/navbar.html
+++ b/templates/navbar.html
@@ -5,40 +5,39 @@
{% endmacro %}
{% macro navbar_inner(name) %}
- <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <a class="navbar-brand" href="{{ url_for('browse_page') }}">Wikidata Art Depiction Explorer</a>
-
- <div class="collapse navbar-collapse" id="navbarSupportedContent">
- <ul class="navbar-nav mr-auto">
- <ul class="navbar-nav mr-auto">
- {{ nav_item('browse_page', 'Browse') }}
- {{ nav_item('list_edits', 'Recent changes') }}
- {{ nav_item('random_artwork', 'Random artwork') }}
- </ul>
- </ul>
- <ul class="navbar-nav">
- <li class="nav-item">
- {% if g.user %}
- <li class="nav-item">
- <a class="nav-link" href="{{ url_for('user_page', username=g.user) }}">{{ g.user }}</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="{{ url_for('oauth_disconnect', next=request.script_root + request.full_path) }}">switch user</a>
- </li>
- {% else %}
- <li class="nav-item">
- {% set login_url = url_for('start_oauth', next=request.script_root + request.full_path) %}
- <a class="nav-link" href="{{ login_url }}">connect with Wikidata</a>
- </li>
- {% endif %}
- </ul>
+ <div class="container-fluid">
+ <a class="navbar-brand" href="{{ url_for('browse_page') }}">Wikidata Art Depiction Explorer</a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
+ <ul class="navbar-nav me-auto">
+ {{ nav_item('browse_page', 'Browse') }}
+ {{ nav_item('list_edits', 'Recent changes') }}
+ {{ nav_item('random_artwork', 'Random artwork') }}
+ </ul>
+ <ul class="navbar-nav">
+ <li class="nav-item">
+ {% if g.user %}
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('user_page', username=g.user) }}">{{ g.user }}</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('oauth_disconnect', next=request.script_root + request.full_path) }}">switch user</a>
+ </li>
+ {% else %}
+ <li class="nav-item">
+ {% set login_url = url_for('start_oauth', next=request.script_root + request.full_path) %}
+ <a class="nav-link" href="{{ login_url }}">connect with Wikidata</a>
+ </li>
+ {% endif %}
+ </ul>
+ </div>
</div>
{% endmacro %}
{% macro navbar() %}
-<nav class="navbar navbar-toggleable-md navbar-expand-lg navbar-dark bg-dark">
+<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
{{ navbar_inner() }}
</nav>
{% endmacro %}