Commit a9e79978 authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt ✊
Browse files

fix avatar-group list in sidebar. refs #535

parent ba6c1de5

features/groups/templates/groups/_sidebar_list.html

+3 −5
Original line number Diff line number Diff line
@@ -9,13 +9,11 @@ 
            </h2>

        </header>

        <div class="box-content">

            <ul class="avatars">

            <div class="avatars avatars-grouped">

                {% for group in groups %}

                    <li>

                    {% include 'groups/_avatar.html' with group=group link=True %}

                    </li>

                {% endfor %}

            </ul>

            </div>

        </div>

        <div class="btn-toolbar btn-toolbar-right">

            <a href="{% url 'group-index' %}" class="btn btn-link">

res/css/components/avatar.less

+34 −0
Original line number Diff line number Diff line
@@ -140,6 +140,40 @@ 
    overflow: hidden;

}



.avatars-grouped {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 0 -.25rem -.5rem -2.5rem;

    flex-wrap: wrap;



    .avatar {

        margin: 0 .25rem .5rem .25rem;

    }



    &::after {

        content: ' ';

        flex: auto;

    }



    @supports not (display: grid) {

        & {

            display: grid;

            // todo: this rule is specific to 64px avatars, maybe there’s something dynamic?

            grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));

            grid-gap: .5rem;

            grid-auto-flow: dense;

            margin: 0;



            .avatar-wrap {

                display: flex;

                align-items: flex-start;

                justify-content: center;

            }

        }

    }

}



.avatar-edit-inline {

    position: relative;

    display: inline-block;