better organization of groups less

main
psychobunny 9 years ago
parent f2d3b5550c
commit 9a26cc6c36

@ -1,46 +1,6 @@
[component="groups/container"] {
.groups.details {
margin-top: 200px;
[component="groups/summary"] {
.panel-body {
min-height: 72px;
}
.list-cover {
background-size: cover;
min-height: 125px;
background-position: 50% 50%;
.pointer;
h3 {
background-color: rgba(0,0,0,0.5);
display: inline-block;
padding: 0.25em 0.5em;
color: white;
font-weight: bold;
text-transform: capitalize;
}
}
.members {
padding-left: 0;
> li {
list-style-type: none;
display: inline-block;
img {
width: 32px;
height: 32px;
}
}
.truncated {
vertical-align: bottom;
}
}
}
[component="groups/cover"] {
background-size: cover;
background-repeat: no-repeat;
@ -166,4 +126,46 @@
}
}
}
}
.groups.list {
[component="groups/summary"] {
.panel-body {
min-height: 72px;
}
.list-cover {
background-size: cover;
min-height: 125px;
background-position: 50% 50%;
.pointer;
h3 {
background-color: rgba(0,0,0,0.5);
display: inline-block;
padding: 0.25em 0.5em;
color: white;
font-weight: bold;
text-transform: capitalize;
}
}
.members {
padding-left: 0;
> li {
list-style-type: none;
display: inline-block;
img {
width: 32px;
height: 32px;
}
}
.truncated {
vertical-align: bottom;
}
}
}
}

@ -1,10 +1,13 @@
<div class="account">
<!-- IMPORT partials/account_menu.tpl -->
<!-- IMPORT partials/account_menu.tpl -->
<div component="groups/container" id="groups-list" class="groups row">
<!-- IF !groups.length -->
<div class="alert alert-warning">[[groups:no_groups_found]]</div>
<!-- ELSE -->
<!-- IMPORT partials/groups/list.tpl -->
<!-- ENDIF !groups.length -->
</div>
<div class="groups list">
<div component="groups/container" id="groups-list" class="row">
<!-- IF !groups.length -->
<div class="alert alert-warning">[[groups:no_groups_found]]</div>
<!-- ELSE -->
<!-- IMPORT partials/groups/list.tpl -->
<!-- ENDIF !groups.length -->
</div>
</div>
</div>

@ -1,4 +1,4 @@
<div component="groups/container" class="details row">
<div component="groups/container" class="groups details row">
<div component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
<div class="controls">
<span class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></span>

@ -1,40 +1,42 @@
<!-- IMPORT partials/breadcrumbs.tpl -->
<div class="groups list">
<!-- IMPORT partials/breadcrumbs.tpl -->
<div class="row">
<div class="col-lg-4">
<!-- IF allowGroupCreation -->
<button class="btn btn-primary" data-action="new"><i class="fa fa-plus"></i> [[groups:new_group]]</button>
<!-- ENDIF allowGroupCreation -->
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-xs-3 text-left pull-right">
<select class="form-control" id="search-sort">
<option value="alpha">[[groups:details.group_name]]</option>
<option value="count">[[groups:details.member_count]]</option>
<option value="date">[[groups:details.creation_date]]</option>
</select>
</div>
<div class="col-xs-5 text-left pull-right">
<div class="input-group">
<input type="text" class="form-control" placeholder="[[global:search]]" name="query" value="" id="search-text">
<span id="search-button" class="input-group-addon search-button"><i class="fa fa-search"></i></span>
<div class="row">
<div class="col-lg-4">
<!-- IF allowGroupCreation -->
<button class="btn btn-primary" data-action="new"><i class="fa fa-plus"></i> [[groups:new_group]]</button>
<!-- ENDIF allowGroupCreation -->
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-xs-3 text-left pull-right">
<select class="form-control" id="search-sort">
<option value="alpha">[[groups:details.group_name]]</option>
<option value="count">[[groups:details.member_count]]</option>
<option value="date">[[groups:details.creation_date]]</option>
</select>
</div>
<div class="col-xs-5 text-left pull-right">
<div class="input-group">
<input type="text" class="form-control" placeholder="[[global:search]]" name="query" value="" id="search-text">
<span id="search-button" class="input-group-addon search-button"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<hr />
<hr />
<div component="groups/container" class="row" id="groups-list" data-nextstart={nextStart}>
<!-- IF groups.length -->
<!-- IMPORT partials/groups/list.tpl -->
<!-- ELSE -->
<div class="col-xs-12">
<div class="alert alert-warning">
[[groups:no_groups_found]]
<div component="groups/container" class="row" id="groups-list" data-nextstart={nextStart}>
<!-- IF groups.length -->
<!-- IMPORT partials/groups/list.tpl -->
<!-- ELSE -->
<div class="col-xs-12">
<div class="alert alert-warning">
[[groups:no_groups_found]]
</div>
</div>
<!-- ENDIF groups.length -->
</div>
<!-- ENDIF groups.length -->
</div>
</div>
Loading…
Cancel
Save