From b45fe2b18e9a7c5c4f3af2fcaa5e3c1d37c4eb5c Mon Sep 17 00:00:00 2001
From: Eric Barbour <ebarbour@redhat.com>
Date: Jul 18 2016 16:17:49 +0000
Subject: [PATCH 1/2] Basic ellipsizing of group owners


* Sort top owners by oldest
* Modal shows all owners alphabetically

---

diff --git a/hubs/widgets/rules.py b/hubs/widgets/rules.py
index edf141a..443f07c 100755
--- a/hubs/widgets/rules.py
+++ b/hubs/widgets/rules.py
@@ -7,6 +7,7 @@ from hubs.widgets import templating
 from hubs.utils import username2avatar
 from hubs import validators
 
+ELLIPSIS_LIMIT = 5
 chrome = panel()
 template = templating.environment.get_template('templates/rules.html')
 position = 'both'
@@ -26,10 +27,17 @@ position = 'both'
           help="Link to meeting minutes from past meetings..")
 def data(session, widget, link, schedule_text, schedule_link, minutes_link):
     owners = widget.hub.owners
+    oldest_owners = sorted(owners, key=lambda o: o.created_on)[:ELLIPSIS_LIMIT]
+    oldest_owners = [{
+        'username': o.username,
+        'avatar': username2avatar(o.username)
+    } for o in oldest_owners]
+
     owners = ordereddict([
         (o.username, username2avatar(o.username)) for o in owners
     ])
-    return dict(owners=owners, link=link,
+    return dict(oldest_owners=oldest_owners,
+                owners=owners, link=link,
                 schedule_text=schedule_text,
                 schedule_link=schedule_link,
                 minutes_link=minutes_link)
diff --git a/hubs/widgets/templates/rules.html b/hubs/widgets/templates/rules.html
index 2d986d1..20f86a6 100644
--- a/hubs/widgets/templates/rules.html
+++ b/hubs/widgets/templates/rules.html
@@ -5,12 +5,23 @@
   {% endif %}
   <h6>group owners</h6>
   <div class="row">
-    {% for owner in owners %}
+    {% if owners|length > 5%}
+      {% for owner in oldest_owners %}
         <div class="col-sm-6">
-            <img class="img-circle" src="{{owners[owner]}}"/>
-            <a href="{{ url_for('hub', name=owner)}}">{{owner}}</a>
+          <img class="img-circle owner-avatar-sm" src="{{owner['avatar']}}"/>
+          <a href="{{ url_for('hub', name=owner['username']) }}">{{owner['username']}}</a>
         </div>
-    {% endfor %}
+        {% endfor %}
+        <br/>
+        <a href="#" class="btn btn-default" data-toggle="modal" data-target="#ownersModal">View All</a>
+    {% else %}
+      {% for owner in owners %}
+        <div class="col-sm-6">
+          <img class="img-circle owner-avatar-sm" src="{{owners[owner]}}"/>
+          <a href="{{ url_for('hub', name=owner)}}">{{owner}}</a>
+        </div>
+      {% endfor %}
+    {% endif %}
   </div>
   {% if schedule_text or schedule_link or minutes_link %}
   <h6>meetings</h6>
@@ -30,6 +41,30 @@
   </p>
   {% endif %}
 </div>
+
+
+<!-- View all modal -->
+<div class="modal fade" id="ownersModal" tabindex="-1" role="dialog" aria-labelledby="ownersModal" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title" id="myModalLabel">All group owners</h4>
+      </div>
+      <div class="modal-body">
+        {% for owner in owners %}
+        <div class="col-sm-6">
+          <img class="img-circle owner-avatar-lg" src="{{owners[owner]}}"/>
+          <a href="{{ url_for('hub', name=owner)}}">{{owner}}</a>
+        </div>
+        {% endfor %}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <style>
   .rules-table {
     width: 180px
@@ -40,4 +75,12 @@
   .rules-table td {
     font-size: 32pt;
   }
+ .owner-avatar-sm {
+   height: 2em;
+   width: 2em;
+ }
+ .owner-avatar-lg {
+   height: 6em;
+   width: 6em;
+ }
 </style>

From 337b739939bca835d810b3ffffbd46587f695bfe Mon Sep 17 00:00:00 2001
From: Eric Barbour <ebarbour@redhat.com>
Date: Jul 19 2016 16:10:43 +0000
Subject: [PATCH 2/2] Global rule for avatar size


* Global rule for avatar size
* Additional rule for large avatars

---

diff --git a/hubs/static/css/style.css b/hubs/static/css/style.css
index c39f680..2e0f42d 100644
--- a/hubs/static/css/style.css
+++ b/hubs/static/css/style.css
@@ -368,3 +368,8 @@ font-size: 32pt;
 .edit_widget {
   cursor: pointer;
 }
+
+.img-circle {
+  height: 2em;
+  width: 2em;
+}
diff --git a/hubs/widgets/templates/rules.html b/hubs/widgets/templates/rules.html
index 20f86a6..9ab51e8 100644
--- a/hubs/widgets/templates/rules.html
+++ b/hubs/widgets/templates/rules.html
@@ -3,12 +3,12 @@
   <h6>community rules</h6>
   <p><a href="{{link}}">Community Rules and Guidelines</a></h6>
   {% endif %}
-  <h6>group owners</h6>
+  <h6>group owners ({{ owners|length }})</h6>
   <div class="row">
     {% if owners|length > 5%}
       {% for owner in oldest_owners %}
         <div class="col-sm-6">
-          <img class="img-circle owner-avatar-sm" src="{{owner['avatar']}}"/>
+          <img class="img-circle" src="{{owner['avatar']}}"/>
           <a href="{{ url_for('hub', name=owner['username']) }}">{{owner['username']}}</a>
         </div>
         {% endfor %}
@@ -17,7 +17,7 @@
     {% else %}
       {% for owner in owners %}
         <div class="col-sm-6">
-          <img class="img-circle owner-avatar-sm" src="{{owners[owner]}}"/>
+          <img class="img-circle" src="{{owners[owner]}}"/>
           <a href="{{ url_for('hub', name=owner)}}">{{owner}}</a>
         </div>
       {% endfor %}
@@ -50,10 +50,10 @@
       <div class="modal-header">
         <h4 class="modal-title" id="myModalLabel">All group owners</h4>
       </div>
-      <div class="modal-body">
+      <div id="owners">
         {% for owner in owners %}
         <div class="col-sm-6">
-          <img class="img-circle owner-avatar-lg" src="{{owners[owner]}}"/>
+          <img class="img-circle img-circle-lg" src="{{owners[owner]}}"/>
           <a href="{{ url_for('hub', name=owner)}}">{{owner}}</a>
         </div>
         {% endfor %}
@@ -75,12 +75,13 @@
   .rules-table td {
     font-size: 32pt;
   }
- .owner-avatar-sm {
-   height: 2em;
-   width: 2em;
+
+ .img-circle-lg {
+   height: 4em;
+   width: 4em;
+   padding: 10px;
  }
- .owner-avatar-lg {
-   height: 6em;
-   width: 6em;
+ .modal-header {
+   border-bottom: 0;
  }
 </style>