Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix group profile page #5910

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix group profile page #5910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion kitsune/groups/jinja2/groups/edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@

{% block content %}
<article id="group-profile" class="main">
<h1>{{ _('Edit {group} profile information')|f(group=profile.group.name) }}</h1>
<h1>{{ _('Edit Group Description') }}</h1>
<strong>{{ _('Editing description for group {group}')|f(group=profile.group.name) }}</strong>

<form action="" method="post">
{% csrf_token %}
Expand Down
79 changes: 38 additions & 41 deletions kitsune/groups/jinja2/groups/profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,73 @@
{% extends "groups/base.html" %}
{% from "layout/errorlist.html" import errorlist %}
{% set title = _('{group} | Groups')|f(group=profile.group.name) %}
{% set avatar_alt = _('Avatar for {group} group')|f(group=profile.group.name) %}

{% block content %}
<article id="group-profile" class="main">
<section id="avatar-area">
<img src="{{ group_avatar(profile) }}" alt="" />
<img class='group-avatar' src="{{ group_avatar(profile) }}" alt="{{ avatar_alt }}" />
{% if user_can_edit %}
<p><a href="{{ url('groups.edit_avatar', profile.slug) }}" title="{{ _('Change avatar') }}">{{ _('Change') }}</a></p>
<p><a class="sumo-button button primary-button button-lg" href="{{ url('groups.edit_avatar', profile.slug) }}" title="{{ _('Change avatar') }}">{{ _('Change Group Avatar') }}</a></p>
{% if profile.avatar %}
<p><a href="{{ url('groups.delete_avatar', profile.slug) }}" title="{{ _('Delete avatar') }}">{{ _('Delete') }}</a></p>
<p><a class="sumo-button button primary-button button-lg" href="{{ url('groups.delete_avatar', profile.slug) }}" title="{{ _('Delete avatar') }}">{{ _('Delete Group Avatar') }}</a></p>
{% endif %}
{% endif %}
</section>
<section id="main-area">
{% if user.is_staff and user.has_perm('groups.change_groupprofile') %}
<a class="edit" href="{{ url('admin:groups_groupprofile_change', profile.id) }}">{{ _('Edit in admin') }}</a>
{% endif %}
<div id="group-info" class="editable">
<h1>{{ profile.group.name }}</h1>
{% if user_can_edit %}
<a class="edit" href="{{ url('groups.edit', profile.slug) }}">{{ _('Edit group profile') }}</a>
<section class="mzp-c-emphasis-box">
<div id="doc-content">
{% if profile.information_html %}
<blockquote>{{ profile.information_html|safe }}</blockquote>
{% endif %}
<div id="doc-content">
{{ profile.information_html|safe }}
</div>

<div id="group-leaders" class="editable">
{% if user_can_manage_leaders %}
<a class="edit" href="#group-leaders">{{ _('Edit group leaders') }}</a>
</div>
{% if user_can_edit %}
<a class="sumo-button button primary-button button-lg" href="{{ url('groups.edit', profile.slug) }}">{{ _('Edit group profile') }}</a>
{% endif %}
</section>
<div id="group-leaders">
<h2>{{ _('Group Leaders') }}</h2>
<ul class="users leaders">
{% for user in leaders %}
<li>
{{ user_row(user) }}
{% if user_can_manage_leaders %}
<div class="remove edit-mode">
<a href="{{ url('groups.remove_leader', profile.slug, user.id) }}" title="{{ _('Remove user from leaders') }}">&#x2716;</a>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{% if user_can_manage_leaders %}
<form id="add-member-form" class="edit-mode" action="{{ url('groups.add_leader', profile.slug) }}" method="POST">
<form id="add-member-form" action="{{ url('groups.add_leader', profile.slug) }}" method="POST">
{% csrf_token %}
{{ errorlist(leader_form) }}
{{ leader_form.users|safe }}
<input type="submit" value="{{ _('Add Leader') }}" />
<section class="mzp-c-emphasis-box">
<p>{{ _('Search for a user or users below. When you are ready to add them, click the Add Leaders button.') }}</p>
{{ leader_form.users|safe }}
<input type="submit" class="sumo-button button primary-button button-lg" value="{{ _('Add Leader(s)') }}" />
</section>
</form>
{% endif %}
</div>

<div id="group-members" class="editable">
{% if user_can_edit %}
<a class="edit" href="#group-members">{{ _('Edit group members') }}</a>
{% endif %}
<div id="group-members">
<h2>{{ _('Group Members') }}</h2>
{% if user_can_edit %}
<form id="add-member-form" class="edit-mode" action="{{ url('groups.add_member', profile.slug) }}" method="POST">
{% csrf_token %}
{{ errorlist(member_form) }}
{{ member_form.users|safe }}
<input type="submit" value="{{ _('Add Member') }}" />
</form>
{% endif %}
<ul class="users members container_12 cf">
{% for user in members %}
<li class="grid_4">
{{ user_row(user) }}
{% if user_can_edit %}
<div class="remove edit-mode">
<a href="{{ url('groups.remove_member', profile.slug, user.id) }}" title="{{ _('Remove user from group') }}">&#x2716;</a>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
{% if user_can_edit %}
<form id="add-member-form" action="{{ url('groups.add_member', profile.slug) }}" method="POST">
{% csrf_token %}
{{ errorlist(member_form) }}
<section class="mzp-c-emphasis-box">
<p>{{ _('Search for a user or users below. When you are ready to add them, click the Add Members button.') }}</p>
{{ member_form.users|safe }}
<input type="submit" class="sumo-button button primary-button button-lg" value="{{ _('Add Member(s)') }}" />
</section>
</form>
{% endif %}
</div>
{% if is_paginated %}
<div class="pagination">
Expand Down Expand Up @@ -106,5 +97,11 @@ <h2>{{ _('Group Members') }}</h2>
<div class="info">
<a rel="nofollow" href="{{ profile_url(user) }}">{{ display_name(user) }}</a>
{{ private_message(user) }}
{% if user_can_manage_leaders and user in leaders %}
<a class="sumo-button warning-button button-sm" href="{{ url('groups.remove_leader', profile.slug, user.id) }}" title="{{ _('Remove user from leaders') }}">Remove From Leaders</a>
{% endif %}
{% if user_can_edit %}
<a class="sumo-button warning-button button-sm" href="{{ url('groups.remove_member', profile.slug, user.id) }}" title="{{ _('Remove user from group') }}">Remove From Group</a>
{% endif %}
</div>
{%- endmacro %}
35 changes: 34 additions & 1 deletion kitsune/sumo/static/sumo/scss/layout/_contributors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,11 +231,17 @@ ol.headings-list {
}
}


.users {
display: flex;
flex-wrap: wrap;
margin: p.$spacing-lg 0;

img {
width: 200px;
height: 200px;
}

li {
flex: 1 1 100%;
max-width: 340px;
Expand Down Expand Up @@ -263,4 +269,31 @@ ol.headings-list {
}
}
}
}
}
.avatar, .info {
display: flex;
flex-direction: column; // Stack children vertically
align-items: center; // Center-align children horizontally
justify-content: center; // Center-align children vertically, if there's enough height

img {
margin: 0 auto; // Center-align the image specifically if needed
width: 200px;
height: 200px;
}

.pm {
width: 100%; // Ensure the paragraph fills the width to center the button inside it
display: flex;
justify-content: center; // Center-align the button
}
}

.group-avatar {
width: 200px;
height: 200px;
}

.button {
width: 200px;
}