From 09cb8d315d656bd7115e0e54e042e2925e4a64a3 Mon Sep 17 00:00:00 2001 From: mrszympek Date: Mon, 13 May 2019 19:29:14 +0200 Subject: [PATCH] Profile components --- pages/_includes/cards/profile-2.html | 29 +++++++ pages/_includes/cards/profile-edit-big.html | 76 +++++++++++++++++ pages/_includes/cards/profile-edit.html | 39 +++++++++ pages/_includes/cards/profile-timeline.html | 92 +++++++++++++++++++++ pages/_includes/cards/profile.html | 17 ++++ pages/profile.html | 17 ++++ scss/ui/_cards.scss | 45 ++++++++++ scss/ui/_media.scss | 14 ++-- 8 files changed, 322 insertions(+), 7 deletions(-) create mode 100644 pages/_includes/cards/profile-2.html create mode 100644 pages/_includes/cards/profile-edit-big.html create mode 100644 pages/_includes/cards/profile-edit.html create mode 100644 pages/_includes/cards/profile-timeline.html create mode 100644 pages/_includes/cards/profile.html create mode 100644 pages/profile.html diff --git a/pages/_includes/cards/profile-2.html b/pages/_includes/cards/profile-2.html new file mode 100644 index 000000000..bbe1a3bfd --- /dev/null +++ b/pages/_includes/cards/profile-2.html @@ -0,0 +1,29 @@ +
+
+
+ {% include ui/avatar.html person-id=8 size="xl" %} +
+

{{ site.data.people[20].first_name }} {{ site.data.people[20].last_name }}

+

{{ site.data.people[20].job_title }}

+ + +
+
+
+
diff --git a/pages/_includes/cards/profile-edit-big.html b/pages/_includes/cards/profile-edit-big.html new file mode 100644 index 000000000..152ab2cec --- /dev/null +++ b/pages/_includes/cards/profile-edit-big.html @@ -0,0 +1,76 @@ +
+
+

Edit Profile

+ +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ +
+
diff --git a/pages/_includes/cards/profile-edit.html b/pages/_includes/cards/profile-edit.html new file mode 100644 index 000000000..b29a4d4a7 --- /dev/null +++ b/pages/_includes/cards/profile-edit.html @@ -0,0 +1,39 @@ +
+
+

My Profile

+
+
+
+
+
+ +
+
+
+ + +
+
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+
+
diff --git a/pages/_includes/cards/profile-timeline.html b/pages/_includes/cards/profile-timeline.html new file mode 100644 index 000000000..174983785 --- /dev/null +++ b/pages/_includes/cards/profile-timeline.html @@ -0,0 +1,92 @@ +
+
+
+ +
+ +
+
+
+ +
diff --git a/pages/_includes/cards/profile.html b/pages/_includes/cards/profile.html new file mode 100644 index 000000000..35dff432d --- /dev/null +++ b/pages/_includes/cards/profile.html @@ -0,0 +1,17 @@ +
+
+
+ + +

{{ site.data.people[4].first_name }} {{ site.data.people[4].last_name }}

+ +

+ Big belly rude boy, million dollar hustler. Unemployed. +

+ + +
+
diff --git a/pages/profile.html b/pages/profile.html new file mode 100644 index 000000000..3fb6327f1 --- /dev/null +++ b/pages/profile.html @@ -0,0 +1,17 @@ +--- +title: Profile +--- + +
+
+
+ {% include cards/profile.html %} + {% include cards/profile-2.html %} + {% include cards/profile-edit.html %} +
+
+ {% include cards/profile-timeline.html %} + {% include cards/profile-edit-big.html %} +
+
+
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index bf08b9cda..cc1c38229 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -217,3 +217,48 @@ Card Aside border-bottom-left-radius: 3px; background: no-repeat center/cover; } + +/* +Card profile + */ +.card-profile { + .card-header { + height: 9rem; + background-size: cover; + } +} + +.card-profile-img { + max-width: 6rem; + margin-top: -5rem; + margin-bottom: 1rem; + border: 3px solid #fff; + border-radius: 100%; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); +} + +/* +Card list group + */ +.card-list-group { + .card-body + & { + border-top: 1px solid $border-color; + } + + .list-group-item { + border-right: 0; + border-left: 0; + border-radius: 0; + + padding-left: $card-spacer-x; + padding-right: $card-spacer-x; + + &:last-child { + border-bottom: 0; + } + + &:first-child { + border-top: 0; + } + } +} diff --git a/scss/ui/_media.scss b/scss/ui/_media.scss index 954979a4f..7b8af4539 100644 --- a/scss/ui/_media.scss +++ b/scss/ui/_media.scss @@ -2,24 +2,24 @@ .media { position: relative; - display: block; + display: flex; flex-shrink: 0; padding: 0; overflow: hidden; border-top-left-radius: inherit; border-top-right-radius: inherit; - &::after { - display: block; - padding-top: 100%; - content: ""; - } - &:not(:first-child):not(:last-child):not(:only-child) { border-radius: 0; } } +.media-list { + margin: 0; + padding: 0; + list-style: none; +} + .media-overlay { position: absolute; top: 0;