Skip to content

Commit dd575fe

Browse files
agjohnsonagjohnson
authored
Fixes and update for new dashboard pointers (#524)
- Add new dashboard announcement template - Fix issues around spacing of top notifications - Drop unused block on build detail page 1cfe710 is a linting step ---- - Refs readthedocs/readthedocs.org#11543 - Refs readthedocs/readthedocs.org#11209 - Refs readthedocs/website#335 ---- - [x] Update blog url
1 parent 8474a66 commit dd575fe

File tree

6 files changed

+99
-56
lines changed

6 files changed

+99
-56
lines changed

‎readthedocsext/theme/templates/builds/build_detail.html

-15
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,6 @@
88
{% endblock title %}
99

1010
{% block content-header %}
11-
{% block build_detail_beta %}
12-
{% comment %}
13-
Temporary notification to point to the beta dashboard.
14-
url_switch_dashboard comes from the view
15-
{% endcomment %}
16-
{% if url_switch_dashboard %}
17-
<div class="ui small basic fitted center aligned segment">
18-
<i class="fad fa-sparkles violet icon"></i>
19-
<strong>You are using our new beta dashboard.</strong>
20-
<a href="{% url "support" %}">We would love to have your feedback</a>.
21-
If you encounter problems,
22-
<a href="{{ url_switch_dashboard }}">return to our normal dashboard</a>.
23-
</div>
24-
{% endif %}
25-
{% endblock build_detail_beta %}
2611
{% include "projects/partials/header.html" with builds_active="active" %}
2712
{% endblock content-header %}
2813

‎readthedocsext/theme/templates/organizations/partials/header.html

+33-34
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
{% load i18n %}
2-
{% load core_tags %}
3-
{% load privacy_tags %}
4-
{% load core_tags %}
5-
{% load gravatar %}
1+
{% load blocktrans trans from i18n %}
2+
{% load gravatar_url from gravatar %}
3+
{% load is_admin from privacy_tags %}
64

75
{% comment %}
86

@@ -15,20 +13,23 @@
1513
{% block organization_header %}
1614
{# Organization specific notifications only #}
1715
{% if organization %}
18-
<readthedocs-notification-list
19-
url="{% url "organizations-notifications-list" organization.slug %}"
20-
csrf-token="{{ csrf_token }}">
16+
<readthedocs-notification-list url="{% url "organizations-notifications-list" organization.slug %}"
17+
csrf-token="{{ csrf_token }}"
18+
class="ui basic segment relaxed list">
2119
</readthedocs-notification-list>
2220
{% endif %}
2321

24-
<div class="ui top attached segment" data-bind="using: CollapsingHeaderView(true)">
22+
<div class="ui top attached segment"
23+
data-bind="using: CollapsingHeaderView(true)">
2524

2625
{% block organization_header_metadata %}
2726
<div class="ui stacking grid">
2827

2928
{% block organization_header_title %}
3029
<div class="eight wide computer eight wide tablet sixteen wide mobile middle aligned column">
31-
<img class="ui micro rounded right spaced inline image" src="{% gravatar_url organization.email 48 %}" />
30+
<img class="ui micro rounded right spaced inline image"
31+
src="{% gravatar_url organization.email 48 %}"
32+
alt="{% blocktrans trimmed with organization_name=organization.name %}{{ organization_name }} organization{% endblocktrans %}" />
3233
<a class="ui medium text" href="{{ organization.get_absolute_url }}">
3334
{{ organization.name }}
3435
</a>
@@ -38,49 +39,45 @@
3839
{% block organization_header_labels %}
3940
<div class="right aligned eight wide computer eight wide tablet sixteen wide left aligned mobile column">
4041
{# The dropdown action button, to swap between expanded/collapsed #}
41-
<a class="ui icon primary label" data-bind="click: toggle_collapsed" data-content="{% trans "More organization information" %}">
42+
<a class="ui icon primary label"
43+
data-bind="click: toggle_collapsed"
44+
data-content="{% trans "More organization information" %}">
4245
<i class="fas fa-caret-down icon" data-bind="class: dropdown_class"></i>
4346
</a>
4447
</div>
4548
{% endblock organization_header_labels %}
4649

4750
{% block organization_header_metadata_left %}
48-
<div
49-
class="eight wide computer eight wide tablet sixteen wide mobile column"
50-
data-bind="visible: !is_collapsed()" style="display: none;">
51+
<div class="ko hidden eight wide computer eight wide tablet sixteen wide mobile column"
52+
data-bind="css: {hidden: is_collapsed()}">
5153

5254
{% block organization_header_description %}
5355
{% if organization.description %}
54-
<p>
55-
{{ organization.description|truncatewords:15 }}
56-
</p>
56+
<p>{{ organization.description|truncatewords:15 }}</p>
5757
{% endif %}
58-
{% endblock %}
58+
{% endblock organization_header_description %}
5959
</div>
6060
{% endblock organization_header_metadata_left %}
6161

6262
{% block organization_header_metadata_right %}
63-
<div
64-
class="right aligned eight wide computer eight wide tablet sixteen wide mobile column"
65-
data-bind="visible: !is_collapsed()" style="display: none;">
63+
<div class="ko hidden right aligned eight wide computer eight wide tablet sixteen wide mobile column"
64+
data-bind="css: {hidden: is_collapsed()}">
6665

6766
{% block organization_header_owners %}
68-
<div class="ui sub header">
69-
{% trans "Owners" %}
70-
</div>
67+
<div class="ui sub header">{% trans "Owners" %}</div>
7168

7269
<div class="ui overlapping avatar images">
7370
{% for user in organization.owners.all|slice:":8" %}
7471
<a href="{% url "profiles_profile_detail" user.username %}">
75-
<img class="ui image" src="{% gravatar_url user.email 32 %}" />
72+
<img class="ui image"
73+
src="{% gravatar_url user.email 32 %}"
74+
alt="{% blocktrans trimmed with username=user.username %}Profile for user {{ username }}{% endblocktrans %}" />
7675
</a>
7776
{% endfor %}
7877

7978
{% with more_owners=organization.owners.all|slice:"8:"|length %}
8079
{% if more_owners %}
81-
<span>
82-
{% trans "... and {more_maintainers} others" %}
83-
</span>
80+
<span>{% trans "... and {more_maintainers} others" %}</span>
8481
{% endif %}
8582
{% endwith %}
8683
</div>
@@ -96,18 +93,20 @@
9693

9794
{% block organization_header_navigation %}
9895
<div class="ui bottom attached stackable menu">
99-
<a class="item {{ projects_active }}" href="{{ organization.get_absolute_url }}">
100-
{% trans "Projects" %}
101-
</a>
102-
<a class="item {{ teams_active }}" href="{% url "organization_team_list" organization.slug %}">
96+
<a class="item {{ projects_active }}"
97+
href="{{ organization.get_absolute_url }}">{% trans "Projects" %}</a>
98+
<a class="item {{ teams_active }}"
99+
href="{% url "organization_team_list" organization.slug %}">
103100
{% trans "Teams" %}
104101
</a>
105-
<a class="item {{ members_active }}" href="{% url "organization_members" organization.slug %}">
102+
<a class="item {{ members_active }}"
103+
href="{% url "organization_members" organization.slug %}">
106104
{% trans "Members" %}
107105
</a>
108106
{% if request.user|is_admin:organization %}
109107
<div class="right menu">
110-
<a class="item {{ edit_active }}" href="{% url "organization_edit" organization.slug %}">
108+
<a class="item {{ edit_active }}"
109+
href="{% url "organization_edit" organization.slug %}">
111110
<i class="fa-duotone fa-gears icon"></i>
112111
{% trans "Settings" %}
113112
</a>

‎readthedocsext/theme/templates/profiles/base_edit.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
{% block notifications %}
66
{# User notifications only #}
77
<readthedocs-notification-list url="{% url "users-notifications-list" request.user.username %}"
8-
csrf-token="{{ csrf_token }}">
8+
csrf-token="{{ csrf_token }}"
9+
class="ui basic segment relaxed list">
910
</readthedocs-notification-list>
1011

1112
{{ block.super }}

‎readthedocsext/theme/templates/projects/base.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
{% extends 'base.html' %}
1+
{% extends "base.html" %}
22

33
{% block header %}
44
{% include "includes/header.html" with active_item="projects" %}
5-
{% endblock %}
5+
{% endblock header %}
66

77
{% block notifications %}
88
{# Project specific notifications only #}
99
{% if project %}
10-
<readthedocs-notification-list
11-
url="{% url "projects-notifications-list" project.slug %}"
12-
csrf-token="{{ csrf_token }}">
10+
<readthedocs-notification-list url="{% url "projects-notifications-list" project.slug %}"
11+
csrf-token="{{ csrf_token }}"
12+
class="ui basic segment relaxed list">
1313
</readthedocs-notification-list>
1414
{% endif %}
1515

‎readthedocsext/theme/templates/projects/base_dashboard.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
{% block notifications %}
1010
{# User notifications only #}
1111
<readthedocs-notification-list url="{% url "users-notifications-list" request.user.username %}"
12-
csrf-token="{{ csrf_token }}">
12+
csrf-token="{{ csrf_token }}"
13+
class="ui basic segment relaxed list">
1314
</readthedocs-notification-list>
1415

1516
{{ block.super }}

‎readthedocsext/theme/templates/projects/partials/announcements/new-dashboard.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
{% load blocktrans trans from i18n %}
2+
3+
{% with "https://about.readthedocs.com/blog/2024/11/rollout-of-our-new-dashboard/" as url_blog %}
4+
<div data-bind="using: new ProjectAnnouncementView('new-dashboard')">
5+
<div class="ui fluid card ko hidden" data-bind="css: { hidden: closed }">
6+
<div class="content">
7+
<i class="fa-solid fa-xmark right floated close icon"
8+
data-bind="click: close_announcement"></i>
9+
<div class="header">{% trans "About this dashboard" %}</div>
10+
<div class="description">
11+
<p>
12+
{% blocktrans trimmed %}
13+
Our new dashboard includes many new features that help make navigation, management, and finding what you need easier.
14+
We recommend exploring your projects and builds to familiarize yourself with these changes and new features.
15+
{% endblocktrans %}
16+
</p>
17+
18+
<div class="ui relaxed list">
19+
<div class="item">
20+
<div class="header">{% trans "What is changing?" %}</div>
21+
<p>
22+
{% blocktrans trimmed %}
23+
We discuss what is changing and what to expect as we retire our legacy dashboard on our blog:
24+
{% endblocktrans %}
25+
</p>
26+
27+
<div class="ui list">
28+
<div class="item">
29+
<i class="fad fa-newspaper icon"></i>
30+
<div class="content">
31+
<a class="header" href="{{ url_blog }}">{% trans "Updates on our new dashboard" %}</a>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
<div class="item">
37+
<div class="header">{% trans "Can I use the old dashboard?" %}</div>
38+
<p>
39+
{% blocktrans trimmed %}
40+
Our legacy dashboard is still available,
41+
but will be retired on <time datetime="2025-03-11">March 11th, 2025</time>.
42+
Until then, you can access the dashboard here:
43+
{% endblocktrans %}
44+
</p>
45+
{# djlint: off D018 #}
46+
<a class="ui fluid basic button"
47+
href="//{{ SWITCH_PRODUCTION_DOMAIN }}{% url "account_login" %}">
48+
{% trans "Open legacy dashboard" %}
49+
</a>
50+
{# djlint: on #}
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
{% endwith %}

0 commit comments

Comments
 (0)