From 246d832487e477388851f74a291b0ffa079adc5a Mon Sep 17 00:00:00 2001
From: antoine37120 <ant.dupre@gmail.com>
Date: Sat, 23 Sep 2023 13:50:08 +0200
Subject: [PATCH] fix: avatar second contact, territory spacing - responsive
---
src/styles/custom-grid.scss | 73 ++++++++++++++++++++++++++
src/styles/territory-profile.scss | 7 +++
src/views-terrytories.js | 4 +-
src/widjets-display-territory-tzcld.js | 12 ++---
4 files changed, 88 insertions(+), 8 deletions(-)
diff --git a/src/styles/custom-grid.scss b/src/styles/custom-grid.scss
index eaf04ae..4414b00 100644
--- a/src/styles/custom-grid.scss
+++ b/src/styles/custom-grid.scss
@@ -100,4 +100,77 @@
/* custom paddings */
.padding-right-60 {
padding-right: 60px;
+}
+
+$medium: "max-width: 1200px";
+.segment {
+ @media($medium) {
+ &.md {
+ &-hidden {
+ display: none;
+ }
+
+ &-quarter {
+ width: 25%;
+ }
+
+ &-third {
+ width: 33.333%;
+ }
+
+ &-half {
+ width: 50%;
+ }
+
+ &-two-third {
+ width: 66.666%;
+ }
+
+ &-three-quarter {
+ width: 75%;
+ }
+
+ &-full {
+ width: 100%;
+ }
+
+ &-auto {
+ width: auto;
+ }
+ }
+
+ &.md-children {
+ &-hidden>div>solid-display {
+ display: none;
+ }
+
+ &-quarter>div>solid-display {
+ width: 25%;
+ }
+
+ &-third>div>solid-display {
+ width: 33.333%;
+ }
+
+ &-half>div>solid-display {
+ width: 50%;
+ }
+
+ &-two-third>div>solid-display {
+ width: 66.666%;
+ }
+
+ &-three-quarter>div>solid-display {
+ width: 75%;
+ }
+
+ &-full>div>solid-display {
+ width: 100%;
+ }
+
+ &-auto>div>solid-display {
+ width: auto;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/styles/territory-profile.scss b/src/styles/territory-profile.scss
index 5bac30f..7a76753 100644
--- a/src/styles/territory-profile.scss
+++ b/src/styles/territory-profile.scss
@@ -134,5 +134,12 @@
}
}
}
+ .tzcld-territory-profile-ebe .segment.avatar-wrapper {
+ display: block;
+ .avatar.medium {
+ width: 100%;
+ height: 100%;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/views-terrytories.js b/src/views-terrytories.js
index 79e4180..1b7f3fc 100644
--- a/src/views-terrytories.js
+++ b/src/views-terrytories.js
@@ -787,7 +787,7 @@ import("./utils.js").then((utils) => {
let render = `
- <h2 class="margin-top-xxsmall margin-left-xsmall margin-bottom-medium sm-margin-none sm-margin-right-xsmall sm-margin-bottom-small sm-margin-left-xsmall text-xlarge text-bold text-color-heading text-uppercase">Auto-évaluation</h2>
+ <h2 class="margin-top-xxsmall margin-left-xsmall margin-bottom-medium sm-margin-none sm-margin-right-xsmall sm-margin-bottom-small sm-margin-left-xsmall text-xlarge text-bold text-color-heading text-uppercase">Suivoit interne</h2>
<div class="segment full shadow bg-color-white margin-bottom-xlarge padding-xlarge sm-padding-none whitespace-normal">
<h2 class="margin-bottom-large margin-top-none margin-left-none text-xlarge text-xbold text-color-heading text-color-dark-blue">Synthèse</h2>
@@ -897,7 +897,7 @@ import("./utils.js").then((utils) => {
<div id="${utils.TZCLD_URLS.my_territory_space}" data-view="${utils.TZCLD_URLS.my_territory_space}" hidden>
<div class="with-sidebar whitespace-normal jsMobileContentSidebarControl">
- <div class="scrollbar-content views-container padding-top-xlarge sidebar-is-closed">
+ <div class="scrollbar-content views-container padding-top-xlarge padding-right-small sidebar-is-closed">
<div id="${utils.TZCLD_URLS.my_territory_infos}" data-view="${utils.TZCLD_URLS.my_territory_infos}" class="community-my-community community-profile" hidden>
${this.viewMyCommunity()}
diff --git a/src/widjets-display-territory-tzcld.js b/src/widjets-display-territory-tzcld.js
index 138fc58..65d2d12 100644
--- a/src/widjets-display-territory-tzcld.js
+++ b/src/widjets-display-territory-tzcld.js
@@ -286,9 +286,9 @@ import("./utils.js").then((utils) => {
</div>` ;//tzcld-territory-profile-wrapper
- render += `<div id="tzcld-territory-profile-wrapper2" class="tzcld-territory-profile-wrapper2 segment full margin-top-large">`;
+ render += `<div id="tzcld-territory-profile-wrapper2" class="tzcld-territory-profile-wrapper2 segment full margin-top-large whitespace-normal">`;
- render += `<div class="tzcld-territory-profile-primary-contact segment width-30 padding-right-large">
+ render += `<div class="tzcld-territory-profile-primary-contact segment third padding-right-large sm-full">
` ;
@@ -345,7 +345,7 @@ import("./utils.js").then((utils) => {
</div>`;
}
render += `</div>`;
- render += `<div class="tzcld-territory-profile-ebe segment width-70">
+ render += `<div class="tzcld-territory-profile-ebe segment two-third sm-full">
<h2 class="tzcld-h2">Informations de contact</h2>
<div class="col-2-wrapper segment full shadow bg-color-white">`;
@@ -384,9 +384,9 @@ import("./utils.js").then((utils) => {
nested-field="members"
fields="segment1(segment2(member-picture(user.account.picture)), segment3(user.name, segment5(user.tzcld_profile.jobs)), user)"
class-segment1="segment bg-color-white shadow full text-top whitespace-normal"
- class-segment2="segment quarter padding-medium text-center whitespace-normal"
- class-segment3="segment three-quarter padding-top-xxsmall padding-right-small padding-bottom-small whitespace-normal"
- class-segment5="segment full padding-none padding-top-xsmall text-left whitespace-normal"
+ class-segment2="segment quarter md-full padding-medium text-center whitespace-normal"
+ class-segment3="segment three-quarter md-full padding-top-xxsmall padding-left-small padding-right-small padding-bottom-small whitespace-normal"
+ class-segment5="segment full padding-none padding-top-xsmall text-left whitespace-normal"
class-member-picture="segment avatar-wrapper"
class-user.account.picture="avatar medium"
class-user.name="block margin-top-xsmall margin-bottom-xxsmall text-xlarge text-bold text-color-heading whitespace-normal"
--
GitLab