From b8ae6be923f7be008bbc10f58f18cf2b0587cca9 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sat, 19 Dec 2020 16:18:58 +0100 Subject: [PATCH] users list --- src/pages/_data/people.json | 4 +- src/pages/_includes/cards/users-list-2.html | 18 ++++--- .../_includes/cards/users-list-headers.html | 32 ++++++++++++ src/pages/_includes/cards/users-list.html | 49 +++++++++++-------- src/pages/lists.html | 3 +- src/scss/_variables.scss | 17 ++++--- src/scss/ui/_lists.scss | 47 +++++++----------- 7 files changed, 102 insertions(+), 68 deletions(-) create mode 100644 src/pages/_includes/cards/users-list-headers.html diff --git a/src/pages/_data/people.json b/src/pages/_data/people.json index 864056a6..798688f3 100644 --- a/src/pages/_data/people.json +++ b/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", diff --git a/src/pages/_includes/cards/users-list-2.html b/src/pages/_includes/cards/users-list-2.html index c2b579d0..63acf967 100644 --- a/src/pages/_includes/cards/users-list-2.html +++ b/src/pages/_includes/cards/users-list-2.html @@ -5,17 +5,19 @@

{{ include.title | default: 'Top users' }}

-
+
{% 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 %} -
- - {% include ui/avatar.html person=person status=color %} - -
- {{ person.full_name }} - {{ forloop.index | random_date_ago: 6 | timeago }} +
+
+ + {% include ui/avatar.html person=person status=color %} + +
+ {{ person.full_name }} + {{ forloop.index | random_date_ago: 6 | timeago }} +
{% endfor %} diff --git a/src/pages/_includes/cards/users-list-headers.html b/src/pages/_includes/cards/users-list-headers.html new file mode 100644 index 00000000..9a521784 --- /dev/null +++ b/src/pages/_includes/cards/users-list-headers.html @@ -0,0 +1,32 @@ +
+
+

{{ include.title | default: 'People' }}

+
+ +
+ {% 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 %} +
{{ prev-letter }}
+ {% endif %} +
+
+
+ + {% include ui/avatar.html person=person %} + +
+
+ {{ person.full_name }} + {% assign i = forloop.index | plus: offset %} +
{{ site.data.commits[i].description }}
+
+
+
+ {% endfor %} +
+
\ No newline at end of file diff --git a/src/pages/_includes/cards/users-list.html b/src/pages/_includes/cards/users-list.html index 42c6f5e2..a2779cd5 100644 --- a/src/pages/_includes/cards/users-list.html +++ b/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: ',' %} -
+

{{ include.title | default: 'Last commits' }}

-
+
{% 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 %} -
- {% if include.checkbox %} -
- {% else %} -
- {% endif %} - - {% include ui/avatar.html person=person %} - -
- {{ person.full_name }} - {% assign i = forloop.index | plus: offset %} - {{ site.data.commits[i].description }} -
- {% if hoverable %} +
+
+ {% if include.checkbox %} +
+ {% else %} +
+ {% endif %} +
+ + {% include ui/avatar.html person=person %} + +
+ +
+ {{ person.full_name }} + {% assign i = forloop.index | plus: offset %} + {{ site.data.commits[i].description }} +
+ {% 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 %} - {% include ui/icon.html icon="star" class=star-color %} - {% endif %} +
+ {% include ui/icon.html icon="star" class=star-color %} +
+ {% endif %} +
{% endfor %}
diff --git a/src/pages/lists.html b/src/pages/lists.html index ff2931a3..4dd923be 100644 --- a/src/pages/lists.html +++ b/src/pages/lists.html @@ -11,6 +11,7 @@ menu: base.lists {% include cards/users-list.html offset=8 checkbox=true title="Contacts" %}
- {% 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 %}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index a48ffda1..e94199d0 100644 --- a/src/scss/_variables.scss +++ b/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; diff --git a/src/scss/ui/_lists.scss b/src/scss/ui/_lists.scss index 1bed97f9..68facca7 100644 --- a/src/scss/ui/_lists.scss +++ b/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; -- GitLab