Add styling for contact list

itk-dev · Feb 28, 2022 · 7d43028 · 7d43028
1 parent b976247
commit 7d43028
Show file tree

Hide file tree

Showing 9 changed files with 119 additions and 31 deletions.
diff --git a/...iles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/variables/variables.scss b/...iles/custom/os2loop/themes/os2loop_theme/assets/bootstrap-custom/variables/variables.scss
@@ -67,3 +67,11 @@ $pagination-disabled-color: $loop-green-200;
 // Forms
 $input-color: $body-color;
 $form-group-margin-bottom: 20px;
+
+// Card
+$card-bg: $gray-100;
+
+$card-border-color: transparent;
+$card-border-radius: $border-radius-lg;
+
+$card-spacer-x: 20px;
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/custom-index.scss
@@ -18,6 +18,9 @@
 @import "forms/user-form.scss";
 @import "forms/node-os2loop-question-form.scss";
 
+// views
+@import "views/contact.scss";
+
 // search
 @import "search/filter-types.scss";
 @import "search/search-input.scss";

diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/user.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/layout/user.scss
@@ -31,14 +31,17 @@
 		color: inherit;
 		margin: 0;
 
-		font-size: $font-size-base;
-		font-weight: $badge-font-weight;
-
 		+ span {
 			margin-top: 7px;
 		}
 	}
 
+	:not(.h5) > a,
+	:not(.h5) > p {
+		font-size: $font-size-base;
+		font-weight: $badge-font-weight;
+	}
+
 	a:hover {
 		text-decoration: inherit;
 		color: inherit;

diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/views/contact.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-custom/views/contact.scss
@@ -0,0 +1,48 @@
+.views-view-contact {
+	.search {
+		.form-group {
+			@extend .mb-0;
+		}
+
+		.form-item-combine {
+			@extend .flex-grow-1;
+		}
+
+		.btn {
+			@extend .ml-20;
+
+			box-sizing: border-box;
+
+			height: 48px;
+			width: 72px;
+		}
+	}
+
+	.user-name {
+		margin-bottom: 3px;
+	}
+
+	.card-body {
+		.user-image {
+			@extend .mr-40;
+
+			width: $user-image-card-size;
+			height: $user-image-card-size;
+
+			font-size: 40px;
+
+			img {
+				min-width: $user-image-card-size;
+				min-height: $user-image-card-size;
+			}
+		}
+	}
+
+	.user-card:not(:first-of-type) + .user-card {
+		@extend .mt-30;
+	}
+
+	.user-contact-information + .user-contact-information {
+		@extend .mt-10;
+	}
+}
diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-variables/variables.scss b/web/profiles/custom/os2loop/themes/os2loop_theme/assets/signifly-variables/variables.scss
@@ -4,6 +4,7 @@ $user-contact-icon-size: 20px;
 $user-contact-icon-spacer: 22px;
 
 $user-image-size: 30px;
+$user-image-card-size: 120px;
 $user-image-profile-size: 150px;
 
 $icon-size: 30px;

diff --git a/...stom/os2loop/themes/os2loop_theme/templates/content-entities/user--card-display.html.twig b/...stom/os2loop/themes/os2loop_theme/templates/content-entities/user--card-display.html.twig
@@ -19,30 +19,46 @@
  */
 #}
 
+{% set show_location = user.os2loop_user_place.value or user.os2loop_user_address.value or user.os2loop_user_city.value %}
+{% set initials = (user.os2loop_user_given_name.value|first ~ user.os2loop_user_family_name.value|first)|upper %}
+{% set street_address = ((user.os2loop_user_address.value is not empty ? user.os2loop_user_address.value : '') ~ ', ' ~ (user.os2loop_user_postal_code.value is not empty ? user.os2loop_user_postal_code.value : '') ~ (user.os2loop_user_city.value is not empty ? ' ' ~ user.os2loop_user_city.value : ''))|trim(', ', 'left') %}
+
 <div class="card-body">
-  <h2 class="card-title h4">
-    <a href="{{ url('entity.user.canonical', {'user': user.id}) }}">
-      {{ user.os2loop_user_given_name.value }} {{ user.os2loop_user_family_name.value }}
-    </a>
-  </h2>
-  <div class="card-text">
-    <div class="row">
-      <div class="col-3">
-        {% if user.os2loop_user_image.value is not empty %}
-          <div class="rounded-circle bg-white text-center overflow-hidden">
-            {{ content.os2loop_user_image }}
-          </div>
-          {% else %}
-            <i class="bi bi-person-circle display-2"></i>
-          {% endif %}
+  <div class="card-text d-inline-flex">
+    <div class="user-image">
+      {{ user.os2loop_user_image.value is not empty ? content.os2loop_user_image : initials }}
+    </div>
+    <div class="user-profile">
+      <h5 class="card-title user-name">
+        <a href="{{ url('entity.user.canonical', {'user': user.id}) }}">
+          {{ user.os2loop_user_given_name.value }} {{ user.os2loop_user_family_name.value }}
+        </a>
+      </h5>
+      <div class="user-job">
+        <p>{{ user.os2loop_user_job_title.value }}</p>
       </div>
-      <div class="col">
-        <p class="mb-0">{{ user.os2loop_user_job_title.value }}</p>
-        <p class="mb-0">{{ user.email }}</p>
-        <p class="mb-0">{{ user.os2loop_user_phone_number.value }}</p>
-        <p class="mb-0 mt-2">{{ user.os2loop_user_place.value }}</p>
-        <p class="mb-0">{{ user.os2loop_user_address.value }}</p>
-        <p class="mb-0">{{ user.os2loop_user_city.value }} {% if user.os2loop_user_city.value %}-{% endif %} {{ user.os2loop_user_postal_code.value }}  </p>
+      <div class="mt-30">
+        {% if user.os2loop_user_phone_number.value %}
+        <div class="user-contact-information">
+          <i class="bi bi-telephone"></i>
+          <p class="mb-0">{{ user.os2loop_user_phone_number.value }}</p>
+        </div>
+        {% endif %}
+        {% if user.email %}
+        <div class="user-contact-information">
+          <i class="bi bi-envelope"></i>
+          <p class="mb-0">{{ user.email }}</p>
+        </div>
+        {% endif %}
+        {% if show_location %}
+        <div class="user-contact-information">
+          <i class="bi bi-geo-alt"></i>
+          <div>
+            <p class="mb-0">{{ user.os2loop_user_place.value }}</p>
+            <p class="mb-0">{{ street_address }}</p>
+          </div>
+        </div>
+        {% endif %}
       </div>
     </div>
   </div>

diff --git a/web/profiles/custom/os2loop/themes/os2loop_theme/templates/layout/page.html.twig b/web/profiles/custom/os2loop/themes/os2loop_theme/templates/layout/page.html.twig
@@ -44,13 +44,19 @@
  */
 #}
 
+{# TODO: shouldn't use page title this way #}
+{% if page['#title'] == 'user' %}
+  {% set page_class = 'block primary-gray' %}
+{% elseif page['#title'] == 'Kontaktliste' %}
+  {% set page_class = 'block primary-white' %}
+{% endif %}
+
 {{ page.header }}
 {# <main role="main" class="bg-secondary-white"> #}
 <main role="main">
   <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
 
-  {# TODO: shouldn't use page title this way #}
-  <div class="{{ os2loop_container_class }} {{ page['#title'] == 'user' ? 'block primary-gray' }} my-90">
+  <div class="{{ os2loop_container_class }} {{ page_class }} my-90">
     {{ page.content }}
   </div>{# /.layout-content #}
 

diff --git a/...m/os2loop/themes/os2loop_theme/templates/views/views-view--contact-list--page-1.html.twig b/...m/os2loop/themes/os2loop_theme/templates/views/views-view--contact-list--page-1.html.twig
@@ -38,12 +38,13 @@
     empty ? 'js-view-empty'
   ]
 %}
+
 <div{{ attributes.addClass(classes) }}>
   {{ title_prefix }}
   {{ title }}
   {{ title_suffix }}
-  <div class="row mb-3">
-    <div class="col-lg-5">
+  <div class="row mb-30">
+    <div class="col-lg-6">
       <div class="search">
         {{ exposed }}
         {{ attachment_before }}

diff --git a/...emes/os2loop_theme/templates/views/views-view-unformatted--contact-list--page-1.html.twig b/...emes/os2loop_theme/templates/views/views-view-unformatted--contact-list--page-1.html.twig
@@ -20,10 +20,12 @@
 
 {% for row in rows %}
   {% set row_classes = [
-      'col-lg-6 mb-3 d-flex'
+      'col-lg-6',
+      'd-flex',
+      'user-card'
     ] %}
   <div{{ row.attributes.addClass(row_classes) }}>
-    <div class="card bg-light w-100">
+    <div class="card w-100">
       {{- row.content -}}
     </div>
   </div>