users list

src/pages/_data/people.json

@@ -3011,8 +3011,8 @@
   {
     "id": 117,
     "first_name": "Gayel",
-    "last_name": "de Quesne",
-    "full_name": "Gayel de Quesne",
+    "last_name": "Quesne",
+    "full_name": "Gayel Quesne",
     "email": "gde38@yahoo.co.jp",
     "gender": "Female",
     "company": "Meembee",

src/pages/_includes/cards/users-list-2.html

@@ -5,17 +5,19 @@
 		<h3 class="card-title">{{ include.title | default: 'Top users' }}</h3>
 	</div>
 	<div class="card-body">
-		<div class="row mb-n3">
+		<div class="row g-3">
 			{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
 			{% for person in site.data.people limit: limit offset: offset %}
 			{% assign color = forloop.index | plus: 5 | random_item: colors %}
-			<div class="col-6 row g-2 mb-3 align-items-center">
-				<a href="#" class="col-auto">
-					{% include ui/avatar.html person=person status=color %}
-				</a>
-				<div class="col text-truncate">
-					<a href="#" class="text-body d-block text-truncate">{{ person.full_name }}</a>
-					<small class="d-block text-muted text-truncate mt-n1">{{ forloop.index | random_date_ago: 6 | timeago }}</small>
+			<div class="col-6">
+				<div class="row g-3 align-items-center">
+					<a href="#" class="col-auto">
+						{% include ui/avatar.html person=person status=color %}
+					</a>
+					<div class="col text-truncate">
+						<a href="#" class="text-body d-block text-truncate">{{ person.full_name }}</a>
+						<small class="text-muted text-truncate mt-n1">{{ forloop.index | random_date_ago: 6 | timeago }}</small>
+					</div>
 				</div>
 			</div>
 			{% endfor %}

src/pages/_includes/cards/users-list-headers.html

+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">{{ include.title | default: 'People' }}</h3>
+	</div>
+
+	<div class="list-group list-group-flush overflow-auto" style="max-height: 35rem">
+		{% assign prev-letter = '' %}
+		{% assign people = site.data.people | sort: 'last_name' %}
+
+		{% for person in people %}
+			{% assign first-letter = person.last_name | slice: 0 %}
+			{% if prev-letter != first-letter %}
+				{% assign prev-letter = first-letter %}
+				<div class="list-group-header sticky-top">{{ prev-letter }}</div>
+			{% endif %}
+			<div class="list-group-item">
+				<div class="row">
+					<div class="col-auto">
+						<a href="#">
+							{% include ui/avatar.html person=person %}
+						</a>
+					</div>
+					<div class="col text-truncate">
+						<a href="#" class="text-body d-block">{{ person.full_name }}</a>
+						{% assign i = forloop.index | plus: offset %}
+						<div class="text-muted text-truncate mt-n1">{{ site.data.commits[i].description }}</div>
+					</div>
+				</div>
+			</div>
+		{% endfor %}
+	</div>
+</div>
\ No newline at end of file

src/pages/_includes/cards/users-list.html

@@ -2,36 +2,43 @@
 {% assign offset = include.offset | default: 0 %}
 {% assign hoverable = include.hoverable | default: false %}
 {% assign checked-ids = include.checked-ids | default: '3,5,6' | extract: ',' %}
-<div class="card">
+<div class="card{% if include.class %} {{ include.class }}{% endif %}">
 	<div class="card-header">
 		<h3 class="card-title">{{ include.title | default: 'Last commits' }}</h3>
 	</div>
-	<div class="list list-row{% if hoverable %} list-hoverable{% endif %}">
+	<div class="list-group list-group-flush{% if hoverable %} list-group-hoverable{% endif %}">
 		{% assign colors = 'green,red,yellow,x,x' | split: ',' %}
 		{% for person in site.data.people limit: limit offset: offset %}
 			{% assign color = forloop.index | plus: 5 | random_item: colors %}
-			<div class="list-item">
-				{% if include.checkbox %}
-					<div><input type="checkbox" class="form-check-input"{% if checked-ids contains forloop.index %} checked{% endif %}></div>
-				{% else %}
-					<div><span class="badge{% if color != 'x' %} bg-{{ color }}{% endif %}"></span></div>
-				{% endif %}
-				<a href="#">
-					{% include ui/avatar.html person=person %}
-				</a>
-				<div class="text-truncate">
-					<a href="#" class="text-body d-block">{{ person.full_name }}</a>
-					{% assign i = forloop.index | plus: offset %}
-					<small class="d-block text-muted text-truncate mt-n1">{{ site.data.commits[i].description }}</small>
-				</div>
-				{% if hoverable %}
+			<div class="list-group-item">
+				<div class="row align-items-center">
+					{% if include.checkbox %}
+					<div class="col-auto"><input type="checkbox" class="form-check-input"{% if checked-ids contains forloop.index %} checked{% endif %}></div>
+					{% else %}
+					<div class="col-auto"><span class="badge{% if color != 'x' %} bg-{{ color }}{% endif %}"></span></div>
+					{% endif %}
+					<div class="col-auto">
+						<a href="#">
+							{% include ui/avatar.html person=person %}
+						</a>
+					</div>
+
+					<div class="col text-truncate">
+						<a href="#" class="text-body d-block">{{ person.full_name }}</a>
+						{% assign i = forloop.index | plus: offset %}
+						<small class="d-block text-muted text-truncate mt-n1">{{ site.data.commits[i].description }}</small>
+					</div>
+					{% if hoverable %}
 					{% if checked-ids contains forloop.index %}
-						{% assign star-color = 'text-yellow' %}
+					{% assign star-color = 'text-yellow' %}
 					{% else %}
-						{% assign star-color = 'text-muted' %}
+					{% assign star-color = 'text-muted' %}
 					{% endif %}
-					<a href="#" class="list-item-actions{% if checked-ids contains forloop.index %} show{% endif %}">{% include ui/icon.html icon="star" class=star-color %}</a>
-				{% endif %}
+					<div class="col-auto">
+						<a href="#" class="list-group-item-actions{% if checked-ids contains forloop.index %} show{% endif %}">{% include ui/icon.html icon="star" class=star-color %}</a>
+					</div>
+					{% endif %}
+				</div>
 			</div>
 		{% endfor %}
 	</div>

src/pages/lists.html

@@ -11,6 +11,7 @@ menu: base.lists
 		{% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
 	</div>
 	<div class="col-md-6">
-		{% include cards/users-list.html hoverable=true checked-ids="2,5,8" %}
+		{% include cards/users-list.html class="mb-3" hoverable=true checked-ids="2,5,8" %}
+		{% include cards/users-list-headers.html %}
 	</div>
 </div>

src/scss/_variables.scss

@@ -318,7 +318,7 @@ $card-border-width: $border-width !default;
 $card-border-color: $border-color-transparent !default;
 $card-border-radius: $border-radius !default;
 
-$card-cap-bg: $min-black !default;
+$card-cap-bg: $light !default;
 $card-cap-color: $text-muted !default;
 $card-cap-padding-x: 1rem !default;
 $card-cap-padding-y: .75rem !default;
@@ -367,8 +367,11 @@ $dropdown-link-active-bg: $active-bg !default;
 $loader-size: 2.5rem !default;
 
 //lists
-$list-group-item-padding-y: .5rem !default;
-$list-group-item-padding-x: .75rem !default;
+$list-group-header-bg: $light !default;
+
+$list-group-border-color: $border-color !default;
+$list-group-item-padding-y: $card-cap-padding-y !default;
+$list-group-item-padding-x: $card-cap-padding-x !default;
 
 //modals
 $modal-backdrop-opacity: .24 !default;
@@ -479,10 +482,10 @@ $table-border-color: $border-color-transparent !default;
 $table-head-border-color: $border-color-transparent !default;
 $table-head-padding-y: .5rem !default;
 $table-head-color: $text-muted !default;
-$table-head-bg: $min-black !default;
+$table-head-bg: $light !default;
 $table-striped-order: even !default;
-$table-striped-bg: $min-black !default;
-$table-accent-bg: $min-black !default;
+$table-striped-bg: $light !default;
+$table-accent-bg: $light !default;
 $table-group-separator-color: $border-color-transparent !default;
 
 //toasts
@@ -505,7 +508,7 @@ $input-disabled-bg: $gray-100 !default;
 $input-border-color: $border-color-dark-transparent !default;
 $input-placeholder-color: $text-muted-light !default;
 
-$input-group-addon-bg: $min-black !default;
+$input-group-addon-bg: $light !default;
 $input-group-addon-color: $text-muted !default;
 
 $input-border-radius: $border-radius !default;

src/scss/ui/_lists.scss

@@ -3,16 +3,21 @@
   margin-right: 0;
 }
 
-.list-item {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-}
+.list-group-header {
+  background: $list-group-header-bg;
+  padding: .5rem $list-group-item-padding-x;
+  font-size: $h5-font-size;
+  font-weight: $font-weight-medium;
+  line-height: 1;
+  text-transform: uppercase;
+  color: $text-muted;
+  border-bottom: 1px solid $list-group-border-color;
 
-.list-item-actions {
-  margin-left: auto;
+  .list-group-flush > & {
+    &:last-child {
+      border-bottom-width: 0;
+    }
+  }
 }
 
 .list-bordered {
@@ -26,34 +31,18 @@
   }
 }
 
-.list-hoverable {
-  .list-item-actions {
+.list-group-hoverable {
+  .list-group-item-actions {
     opacity: 0;
     transition: .3s opacity;
   }
 
-  .list-item:hover .list-item-actions,
-  .list-item-actions.show {
+  .list-group-item:hover .list-group-item-actions,
+  .list-group-item-actions.show {
     opacity: 1;
   }
 }
 
-.list-row {
-  @extend .list-bordered;
-
-  .list-item {
-    flex-direction: row;
-    align-items: center;
-    padding: .5rem ($card-spacer-x / 2);
-
-    > * {
-      padding-left: ($card-spacer-x / 2);
-      padding-right: ($card-spacer-x / 2);
-    }
-  }
-}
-
-
 .list-timeline {
   position: relative;
   padding: 0;