diff --git a/src/styles/custom-grid.scss b/src/styles/custom-grid.scss index eaf04ae6505e5c0cf5355302834dac27b1a97408..4414b008763ac2c6a2da8055a905899e16f4392e 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 5bac30f489bcc865a77549df6b45737bf4cc247a..7a76753f9931504ab8f298685e6c4cf191501bf7 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 79e41802e1867c82bad0c13a5fd2d0827ecd8961..1b7f3fc3c6103539c40fe54ec6a0e1109611510c 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 138fc58748499f29636a484660f7d57d17e13c21..65d2d12f676fd7ba938289249a7d4a105871bdcd 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"