| |
@@ -1,32 +1,24 @@
|
| |
- <div class="card-block">
|
| |
- {% if memberships|length > oldest_members|length %}
|
| |
- {% for member in oldest_members %}
|
| |
- <div class="card-block">
|
| |
- <img class="img-responsive membership-avatar" src="{{ member.avatar }}" alt="Hub avatar for {{ member.name }}">
|
| |
- <a href="{{ url_for('hub', hub_name=member.username, hub_type='u')}}">{{ member.username }}</a>
|
| |
- {% if member.username in owners %}
|
| |
- <p class="text-muted">Owner</p>
|
| |
- {% else %}
|
| |
- <p>Member</p>
|
| |
- {% endif %}
|
| |
- </div>
|
| |
- {% endfor %}
|
| |
- <a href="#" class="btn btn-secondary" data-toggle="modal" data-target="#membersModal">View All</a>
|
| |
- {% else %}
|
| |
- {% for member in memberships %}
|
| |
- <div class="card-block">
|
| |
- <img class="img-responsive membership-avatar" src="{{ member.avatar }}" alt="Hub avatar for {{ member.name }}">
|
| |
- <a href="{{ url_for('hub', hub_name=member.username, hub_type='u')}}">{{ member }}</a>
|
| |
- {% if member.username in owners %}
|
| |
- <p class="text-muted">Owner</p>
|
| |
- {% else %}
|
| |
- <p>Member</p>
|
| |
+ <div class="list-group list-group-flush membership-list">
|
| |
+ {% for member in oldest_members %}
|
| |
+ <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="{{ url_for('hub', hub_name=member.username, hub_type='u')}}">
|
| |
+ <div class="d-flex">
|
| |
+ <img class="img-responsive membership-avatar" src="{{ member.avatar }}" alt="Hub avatar for {{ member.name }}">
|
| |
+ <div class="align-self-center ml-3">
|
| |
+ <h5 class="text-primary"><strong>{{ member.username }}</strong></h5>
|
| |
+ {% if member.last_active %}
|
| |
+ <div><small class="text-muted">last active {{ member.last_active | relative_time }}</small></div>
|
| |
+ {% endif %}
|
| |
+ </div>
|
| |
+ </div>
|
| |
+ </a>
|
| |
+ {% endfor %}
|
| |
+
|
| |
+ </div>
|
| |
+ {% if memberships|length > oldest_members|length %}
|
| |
+ <a href="#" class="btn btn-secondary mt-2" data-toggle="modal" data-target="#membersModal">View All {{memberships|length}} Members</a>
|
| |
{% endif %}
|
| |
- </div>
|
| |
- {% endfor %}
|
| |
- {%endif%}
|
| |
- </div>
|
| |
|
| |
+ {% if memberships|length > oldest_members|length %}
|
| |
<!-- View all modal -->
|
| |
<div class="modal fade" id="membersModal" tabindex="-1" role="dialog" aria-labelledby="membersModal" aria-hidden="true">
|
| |
<div class="modal-dialog">
|
| |
@@ -38,20 +30,15 @@
|
| |
<div class="card-block">
|
| |
<div class="row">
|
| |
{% for member in memberships %}
|
| |
- <div class="col-sm-6">
|
| |
- <img class="img-responsive membership-avatar"
|
| |
- src="{{ member.avatar }}" alt="Hub avatar for {{ member.username }}">
|
| |
- <a href="{{ url_for('hub', hub_name=member.username, hub_type='u')}}">{{ member.username }}</a>
|
| |
- {% if member.username in owners %}
|
| |
- <p class="text-muted">Owner</p>
|
| |
- {% else %}
|
| |
- <p>Member</p>
|
| |
- {% endif %}
|
| |
- </div>
|
| |
- {% if (loop.index % 2) == 0 %}
|
| |
- </div>
|
| |
- <div class="row">
|
| |
- {% endif %}
|
| |
+ <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="{{ url_for('hub', hub_name=member.username, hub_type='u')}}">
|
| |
+ <div class="d-flex">
|
| |
+ <img class="img-responsive membership-avatar" src="{{ member.avatar }}" alt="Hub avatar for {{ member.name }}">
|
| |
+ <div class="align-self-center ml-3">
|
| |
+ <h5 class="text-primary"><strong>{{ member.username }}</strong></h5>
|
| |
+ <div><small class="text-muted">last active {{ member.last_active | relative_time }}</small></div>
|
| |
+ </div>
|
| |
+ </div>
|
| |
+ </a>
|
| |
{% endfor %}
|
| |
</div>
|
| |
<div class="modal-footer clearfix">
|
| |
@@ -60,12 +47,19 @@
|
| |
</div>
|
| |
</div>
|
| |
</div>
|
| |
-
|
| |
+ {% endif %}
|
| |
+
|
| |
<style>
|
| |
.membership-avatar {
|
| |
- height: 4em;
|
| |
- width: 4em;
|
| |
+ height: 72px;
|
| |
+ width: 72px;
|
| |
+ }
|
| |
+
|
| |
+ .modal-body .membership-avatar {
|
| |
+ height: 42px;
|
| |
+ width: 42px;
|
| |
}
|
| |
+
|
| |
.modal-header {
|
| |
border-bottom: 0;
|
| |
}
|
| |
@@ -73,4 +67,8 @@
|
| |
#owners {
|
| |
padding: 10px;
|
| |
}
|
| |
+
|
| |
+ .membership-list .list-group-item{
|
| |
+ border:none!important;
|
| |
+ }
|
| |
</style>
|
| |