Change profile page layout

src/blog/static/css/blog.css

@@ -2,7 +2,7 @@
 #blog-area,
 #clipping-area,
 #posts-area{
-    max-width: 600px;
+    max-width: 100%;
     margin: 0 auto;
 }
 .post{
@@ -31,7 +31,7 @@
 /* Post Detail Page */
 #post,
 #post-area{
-    max-width: 600px;
+    max-width: 100%;
     margin: 1.5em auto;
 }
 #post{

src/config/settings.py

@@ -154,6 +154,7 @@ def debug(_):
 
 PAGE_SIZE = 20
 MODAL_PAGE_SIZE = 40
+OBJECT_MODAL_PAGE_SIZE = 16
 
 REST_FRAMEWORK = {
     "DEFAULT_RENDERER_CLASSES": [

src/core/admin.py

@@ -131,7 +131,7 @@ class MarkerAdmin(BaseMarkerObjectAdmin):
     ]
 
     def image_preview(self, obj):
-        return format_html(obj.as_html_thumbnail(), "")
+        return format_html(obj.as_html(height=64, width=64, thumbnail=True), "")
 
 
 @admin.action(description="Generate spritesheets for selected GIF objects")
@@ -215,7 +215,7 @@ class ObjectAdmin(BaseMarkerObjectAdmin):
     actions = [generate_spritesheets, "populate_dimensions"]
 
     def image_preview(self, obj):
-        return format_html(obj.as_html_thumbnail(), "")
+        return format_html(obj.as_html(height=64, width=64), "")
 
     def has_spritesheet(self, obj):
         return bool(obj.spritesheet_file and obj.spritesheet_metadata)
@@ -294,13 +294,13 @@ def exhibits_count(self, obj):
     exhibits_count.short_description = "Exhibits Count"
 
     def marker_preview(self, obj):
-        return format_html(obj.marker.as_html_thumbnail(), "")
+        return format_html(obj.marker.as_html(height=64, width=64, thumbnail=True), "")
 
     marker_preview.short_description = "Marker"
     marker_preview.allow_tags = True
 
     def augmented_preview(self, obj):
-        return format_html(obj.augmented.as_html_thumbnail(), "")
+        return format_html(obj.augmented.as_html(height=64, width=64), "")
 
     augmented_preview.short_description = "Augmented Object"
     augmented_preview.allow_tags = True
@@ -391,4 +391,4 @@ def _owner(self, obj):
         return format_html(HTML_LINK, link, obj.owner.user.username)
 
     def preview(self, obj):
-        return format_html(obj.as_html_thumbnail().replace(obj.title, ""), "")
+        return format_html(obj.as_html(), "")

src/core/jinja2/core/components/action-menu.jinja2

@@ -0,0 +1,43 @@
+{# Three-dot action menu component.
+   Variables:
+     - element: the model instance
+     - element_type: string like "marker", "object", "artwork", "sound", "ar-exhibit", "mr-exhibit"
+     - can_edit: boolean
+     - can_delete: boolean
+     - has_preview: boolean (only markers and artworks)
+     - edit_reason: string explaining why edit is disabled (optional)
+     - delete_reason: string explaining why delete is disabled (optional)
+#}
+<div class="action-menu-container">
+    <button type="button"
+            class="action-menu-trigger"
+            aria-label="{{ _('Actions') }}">
+        <svg width="20" height="20" viewBox="0 0 16 16" fill="currentColor">
+            <circle cx="8" cy="3" r="1.5" /><circle cx="8" cy="8" r="1.5" /><circle cx="8" cy="13" r="1.5" />
+        </svg>
+    </button>
+    <div class="action-menu-dropdown">
+        {% if element_type == "ar-exhibit" or element_type == "mr-exhibit" %}
+            {% set edit_url = url('edit-' ~ element_type) ~ '?id=' ~ element.id %}
+        {% else %}
+            {% set edit_url = url('edit-' ~ element_type) ~ '?id=' ~ element.id %}
+        {% endif %}
+        <a class="action-menu-item{% if not can_edit %} disabled{% endif %}"
+           {% if can_edit %} href="{{ edit_url }}" {% else %} href="#" data-disabled="true" data-reason="{{ edit_reason }}" {% endif %}>
+            {{ _("Edit") }}
+        </a>
+        {% if has_preview %}
+            {% if element_type == "marker" %}
+                {% set preview_url = url('marker-preview') ~ '?id=' ~ element.id %}
+            {% elif element_type == "artwork" %}
+                {% set preview_url = url('artwork-preview') ~ '?id=' ~ element.id %}
+            {% endif %}
+            <a class="action-menu-item" href="{{ preview_url }}">{{ _("Preview") }}</a>
+        {% endif %}
+        {% set delete_url = url('delete-content') ~ '?content_type=' ~ element_type ~ '&id=' ~ element.id %}
+        <a class="action-menu-item action-menu-delete{% if not can_delete %} disabled{% endif %}"
+           {% if can_delete %} href="{{ delete_url }}" data-confirm="{{ _('Are you sure you want to delete this item?') }}" {% else %} href="#" data-disabled="true" data-reason="{{ delete_reason }}" {% endif %}>
+            {{ _("Delete") }}
+        </a>
+    </div>
+</div>

src/core/jinja2/core/components/item-list.jinja2

@@ -6,7 +6,27 @@
         {% for element in repository_list %}
             <div {% if element_type != "ar-exhibit" and element_type != "mr-exhibit" and htmx != "false" %} hx-get="/api/v1/{{ element_type }}s/{{ element.id }}/?format=modal" hx-target="#modal" hx-trigger="click" class="repository-item trigger-modal" {% else %} class="repository-item" {% endif %}
                  id="{{ element_type }}-{{ element.id }}">
-                {{ element.as_html_thumbnail(editable=editable) | safe }}
+                {% if element_type == "marker" %}
+                    {% with marker=element %}
+                        {% include "core/templates/marker_thumbnail.jinja2" %}
+                    {% endwith %}
+                {% elif element_type == "object" %}
+                    {% with object=element %}
+                        {% include "core/templates/object_thumbnail.jinja2" %}
+                    {% endwith %}
+                {% elif element_type == "sound" %}
+                    {% with sound=element %}
+                        {% include "core/templates/sound_thumbnail.jinja2" %}
+                    {% endwith %}
+                {% elif element_type == "artwork" %}
+                    {% with artwork=element %}
+                        {% include "core/templates/artwork_thumbnail.jinja2" %}
+                    {% endwith %}
+                {% elif element_type == "ar-exhibit" or element_type == "mr-exhibit" %}
+                    {% with exhibit=element %}
+                        {% include "core/templates/exhibit_thumbnail.jinja2" %}
+                    {% endwith %}
+                {% endif %}
             </div>
         {% endfor %}
     </section>

src/core/jinja2/core/exhibit_create_ar.jinja2

@@ -3,6 +3,7 @@
     <section class="create-exhibit">
         {# FIXME: maybe this can be improved #}
         <link rel="stylesheet" href="{{ static ('css/marker-creation.css') }}">
+        <link rel="stylesheet" href="{{ static ('css/repository-list.css') }}">
         <link rel="stylesheet" href="{{ static ('css/label.css') }}">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
         <link rel="stylesheet"
@@ -37,7 +38,6 @@
                     <div id="artwork-modal" class="tab">
                         <h4 class="modal-title">{{ _("Select Artworks") }}</h4>
                         {% if artworks %}
-                            <p class="gallery-title">{{ _("Choose from your repository") }}</p>
                             {% with repository_list = artworks, element_type="artwork", htmx="false", selected=selected_artworks %}
                                 {% include "core/components/item-list.jinja2" %}
                             {% endwith %}
@@ -103,7 +103,7 @@
 
             selected_artworks.split(",").forEach(function(id){
                 artworks[id] = id
-                $("#artwork-"+id).css("border-bottom","3px solid #a6a6a6");
+                $("#artwork-"+id).css("border-bottom","3px solid #05f7ae");
             });
 
         }
@@ -126,7 +126,7 @@
                     else
                         console.error("Unknown item type: " + item_type);
                 }else{
-                    $(this).css("border-bottom","3px solid #a6a6a6");
+                    $(this).css("border-bottom","3px solid #05f7ae");
                     if (item_type === "artwork")
                         artworks[item_id] = item_id;
                     else

src/core/jinja2/core/exhibit_create_mr.jinja2

@@ -3,6 +3,7 @@
     <section class="create-exhibit">
         {# FIXME: maybe this can be improved #}
         <link rel="stylesheet" href="{{ static ('css/marker-creation.css') }}">
+        <link rel="stylesheet" href="{{ static ('css/repository-list.css') }}">
         <link rel="stylesheet" href="{{ static ('css/label.css') }}">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
         <link rel="stylesheet"
@@ -38,29 +39,23 @@
                 {{ form.visible_fields()[4] .errors }}
                 <div id="form-modal" class="modal">
                     <div id="object-modal" class="tab">
-                        <h4 class="modal-title">{{ _("Select Objects") }}</h4>
-                        <div id="navigation-buttons"
-                             style="display: flex;
-                                    justify-content: space-between;
-                                    margin-bottom: 15px">
-                            <button style="width:2.5em;
-                                           font-size: larger;
-                                           margin:0"
+                        <div class="modal-nav-header">
+                            <button class="modal-nav-btn"
                                     id="previous-button-objects"
                                     hx-get="/elements/"
                                     hx-vals='js:{page: get_page_objects(-1), element_type: "object"}'
                                     hx-target="#repo-object"
                                     hx-swap="outerHTML">
                                 <
                             </button>
-                            <button style="width:2.5em;
-                                           font-size: larger;
-                                           margin:0"
+                            <h4 class="modal-title">{{ _("Select Objects") }}</h4>
+                            <button class="modal-nav-btn"
                                     id="next-button-objects"
                                     hx-get="/elements/"
                                     hx-vals='js:{page: get_page_objects(1), element_type: "object"}'
                                     hx-target="#repo-object"
-                                    hx-swap="outerHTML">></button>
+                                    hx-swap="outerHTML"
+                                    {% if total_object_pages <= 1 %}disabled="disabled"{% endif %}>></button>
                         </div>
                         {% with repository_list = objects, element_type="object", htmx="false" %}
                             {% include "core/components/item-list.jinja2" %}
@@ -73,29 +68,23 @@
                            onclick="validateSubmit()">{{ _("Okay") }}</a>
                     </div>
                     <div id="sound-modal" class="tab">
-                        <h4 class="modal-title">{{ _("Select Sounds") }}</h4>
-                        <div id="navigation-buttons"
-                             style="display: flex;
-                                    justify-content: space-between;
-                                    margin-bottom: 15px">
-                            <button style="width:2.5em;
-                                           font-size: larger;
-                                           margin:0"
+                        <div class="modal-nav-header">
+                            <button class="modal-nav-btn"
                                     id="previous-button-sounds"
                                     hx-get="/elements/"
                                     hx-vals='js:{page: get_page_sounds(-1), element_type: "sound"}'
                                     hx-target="#repo-sound"
                                     hx-swap="outerHTML">
                                 <
                             </button>
-                            <button style="width:2.5em;
-                                           font-size: larger;
-                                           margin:0"
+                            <h4 class="modal-title">{{ _("Select Sounds") }}</h4>
+                            <button class="modal-nav-btn"
                                     id="next-button-sounds"
                                     hx-get="/elements/"
                                     hx-vals='js:{page: get_page_sounds(1), element_type: "sound"}'
                                     hx-target="#repo-sound"
-                                    hx-swap="outerHTML">></button>
+                                    hx-swap="outerHTML"
+                                    {% if total_sound_pages <= 1 %}disabled="disabled"{% endif %}>></button>
                         </div>
                         {% with repository_list = sounds, element_type="sound", htmx="false" %}
                             {% include "core/components/item-list.jinja2" %}
@@ -214,12 +203,12 @@
 
             selected_objects.split(",").forEach(function(id){
                 augmenteds[id] = id
-                $("#object-"+id).css("border-bottom","3px solid #a6a6a6");
+                $("#object-"+id).css("border-bottom","3px solid #05f7ae");
             });
 
             selected_sounds.split(",").forEach(function(id){
                 sounds[id] = id
-                $("#sound-"+id).css("border-bottom","3px solid #a6a6a6");
+                $("#sound-"+id).css("border-bottom","3px solid #05f7ae");
             });
 
         }
@@ -245,7 +234,7 @@
                     else
                         console.error("Unknown item type: " + item_type);
                 }else{
-                    $(this).css("border-bottom","3px solid #a6a6a6");
+                    $(this).css("border-bottom","3px solid #05f7ae");
                     if (item_type === "object")
                         augmenteds[item_id] = item_id;
                     else if (item_type === "sound")

src/core/jinja2/core/exhibit_select.jinja2

@@ -1,4 +1,4 @@
-{% extends '/core/arviewer.jinja2' %}
+{% extends '/core/focused_layout.jinja2' %}
 {% block content %}
     {# FIXME: maybe this can be improved #}
     <link rel="stylesheet" href="{{ static ('css/signup.css') }}">

src/core/jinja2/core/arviewer.jinja2 → src/core/jinja2/core/focused_layout.jinja2

@@ -23,13 +23,6 @@
         {% block extra_css %}{% endblock %}
         {% block extra_js %}{% endblock %}
     </head>
-    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
-            integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
-            crossorigin="anonymous"></script>
-    <script src="{{ static('js/bowser.js') }}"></script>
-    <script src="{{ static('js/detect.js') }}"></script>
-    <script src="{{ static('js/safari-only-warning.js') }}"></script>
-    {# <script src="{{ static('js/main.js') }}"></script> #}
     <body class="colorful">
         {% if content is defined %}
             <section>

src/core/jinja2/core/header.jinja2

@@ -7,10 +7,20 @@
         </div>
         <div class="aside">
             {% if request.user.is_authenticated %}
-                <div class="welcome">
-                    <p>
-                        {{ _("Welcome, ") }}<a href="{{ url('profile') }}">{{ request.user.username }}</a>
-                    </p>
+                <div class="user-menu-wrapper">
+                    <span class="welcome-text">{{ _("Welcome,") }}</span>
+                    <button id="user-menu-btn" type="button" class="user-menu-button">{{ request.user.username }} ▾</button>
+                    <div id="user-menu-list" class="user-menu-list">
+                        <a href="{{ url('profile') }}" class="user-menu-option">{{ _("My Creations") }}</a>
+                        <a href="{{ url('edit-profile') }}" class="user-menu-option">{{ _("Edit profile") }}</a>
+                        <form id="logout-form"
+                              method="post"
+                              action="{{ url('logout') }}"
+                              style="margin:0">
+                            {{ csrf_input }}
+                            <button type="submit" class="user-menu-option">{{ _("Log out") }}</button>
+                        </form>
+                    </div>
                 </div>
             {% else %}
                 <div class="signup-btn">
@@ -24,3 +34,21 @@
         </div>
     </div>
 </div>
+<script>
+    (function() {
+        const btn = document.getElementById('user-menu-btn');
+        const list = document.getElementById('user-menu-list');
+        if (!btn || !list) return;
+
+        btn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            list.classList.toggle('show');
+        });
+
+        document.addEventListener('click', function(e) {
+            if (!list.contains(e.target) && e.target !== btn) {
+                list.classList.remove('show');
+            }
+        });
+    })();
+</script>