Skip to content

Commit 1219c8e

Browse files
authored
Merge pull request #59325 from mykh-hailo/fix/profile-ui
fix: profile page on small screens
2 parents e3e499a + d3ef95c commit 1219c8e

File tree

6 files changed

+40
-33
lines changed

6 files changed

+40
-33
lines changed

apps/profile/src/views/ProfileApp.vue

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,38 @@ $content-max-width: 640px;
369369
}
370370
}
371371
372+
.user-actions {
373+
display: flex;
374+
flex-direction: column;
375+
gap: 8px 0;
376+
margin-top: 20px;
377+
max-width: 300px;
378+
379+
&__primary {
380+
margin: 0 auto;
381+
max-width: 100%;
382+
383+
&__icon {
384+
filter: var(--primary-invert-if-dark);
385+
}
386+
}
387+
388+
&__other {
389+
display: flex;
390+
justify-content: center;
391+
gap: 0 4px;
392+
393+
&__icon {
394+
height: 20px;
395+
width: 20px;
396+
object-fit: contain;
397+
filter: var(--background-invert-if-dark);
398+
align-self: center;
399+
margin: 12px; // so we get 44px x 44px
400+
}
401+
}
402+
}
403+
372404
@media only screen and (max-width: 1024px) {
373405
.profile {
374406
&__header {
@@ -419,37 +451,12 @@ $content-max-width: 640px;
419451
position: unset;
420452
}
421453
}
422-
}
423454
424-
.user-actions {
425-
display: flex;
426-
flex-direction: column;
427-
gap: 8px 0;
428-
margin-top: 20px;
429-
max-width: 300px;
430-
431-
&__primary {
455+
.user-actions {
456+
width: unset;
457+
max-width: 600px;
432458
margin: 0 auto;
433-
max-width: 100%;
434-
435-
&__icon {
436-
filter: var(--primary-invert-if-dark);
437-
}
438-
}
439-
440-
&__other {
441-
display: flex;
442-
justify-content: center;
443-
gap: 0 4px;
444-
445-
&__icon {
446-
height: 20px;
447-
width: 20px;
448-
object-fit: contain;
449-
filter: var(--background-invert-if-dark);
450-
align-self: center;
451-
margin: 12px; // so we get 44px x 44px
452-
}
459+
padding: 20px 50px 0px 50px;
453460
}
454461
}
455462
</style>

dist/profile-main.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* extracted by css-entry-points-plugin */
2-
@import './profile-profile-main-YvNfSVUo.chunk.css';
2+
@import './profile-profile-main-65fj8xOs.chunk.css';
33
@import './NcIconSvgWrapper-De-2-ukl-C_oBIsvc.chunk.css';
44
@import './mdi-D7L4ZBkR.chunk.css';
55
@import './NcModal-kyWZ3UFC-DgqchLjq.chunk.css';

dist/profile-main.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
import{o as i,f as o,g as a,t,h as l,m as M,b as z,c as d,P as O,F as $,l as P,U as V,p as B,V as T,w as n,k as h,u as e,j as m,M as j,H as k,I as S,D as q,e as D}from"./preload-helper-DoJVKVMq.chunk.mjs";import{a as F,b as H,s as Y,u as Z}from"./index-Bp9-GhMo.chunk.mjs";import{a as G}from"./index-C1xmmKTZ-CmvjJKkk.chunk.mjs";import{_ as w,l as N}from"./public-CvthP4YJ.chunk.mjs";import{t as y}from"./translation-DoG5ZELJ-DJHEP2RB.chunk.mjs";import{N as J}from"./NcDateTime.vue_vue_type_script_setup_true_lang-B4upiZjL-L27IwP9h.chunk.mjs";import{a as K}from"./NcModal-kyWZ3UFC-BxKwwKAq.chunk.mjs";import{N as L,a as Q}from"./NcContent-D69ktIEB-DFgyD-CP.chunk.mjs";import{N as R}from"./NcAvatar-ruClKRzS-D00PbCEA.chunk.mjs";import{N as b}from"./mdi-BUoBIgaz.chunk.mjs";import{N as W}from"./NcEmptyContent-CDgWCt_m-MnlDvtO9.chunk.mjs";import{b as X}from"./index-CGU4a9vr.chunk.mjs";import{A as ee,l as se}from"./logger-CCXn6sb0.chunk.mjs";import{P as ie}from"./PencilOutline-BzoFsBsK.chunk.mjs";import"./modulepreload-polyfill-BxzAKjcf.chunk.mjs";import"./NcDialog-nDc1gW50-CpnK8gUQ.chunk.mjs";import"./NcIconSvgWrapper-De-2-ukl-CcvQeIAt.chunk.mjs";import"./Web-rJva_rmF.chunk.mjs";import"./TrashCanOutline-D66Xz3gd.chunk.mjs";import"./index-ClciYKp3.chunk.mjs";import"./util-Caafb9Jl.chunk.mjs";import"./colors-BfjxNgsx-Dyl_2CuU.chunk.mjs";import"./NcUserStatusIcon-JWiuiAXe-BJYvYIQF.chunk.mjs";import"./NcCheckboxRadioSwitch-D0gFwEVl-CZhGfPiT.chunk.mjs";import"./NcSelect-B1uITk_3-D769WsNG.chunk.mjs";import"./NcTextField.vue_vue_type_script_setup_true_lang-B-4HNjYH-C1HLa-yu.chunk.mjs";import"./NcInputField-CPL-a_MM-DHVwy56P.chunk.mjs";const ae={name:"MapMarkerIcon",emits:["click"],props:{title:{type:String},fillColor:{type:String,default:"currentColor"},size:{type:Number,default:24}}},re=["aria-hidden","aria-label"],oe=["fill","width","height"],te={d:"M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"},le={key:0};function ne(c,s,r,v,I,p){return i(),o("span",M(c.$attrs,{"aria-hidden":r.title?null:"true","aria-label":r.title,class:"material-design-icon map-marker-icon",role:"img",onClick:s[0]||(s[0]=u=>c.$emit("click",u))}),[(i(),o("svg",{fill:r.fillColor,class:"material-design-icon__svg",width:r.size,height:r.size,viewBox:"0 0 24 24"},[a("path",te,[r.title?(i(),o("title",le,t(r.title),1)):l("",!0)])],8,oe))],16,re)}const de=w(ae,[["render",ne]]),ce=z({__name:"ProfileSection",props:{section:{},userId:{}},setup(c){return(s,r)=>(i(),o("div",{class:$(s.$style.profileSection)},[(i(),d(O(c.section.tagName),M(c.section.params,{".user":c.userId}),null,48,[".user"]))],2))}}),pe="_profileSection_1o17g_2",ue={profileSection:pe},fe={$style:ue},_e=w(ce,[["__cssModules",fe]]),me={class:"profile__header"},he={class:"profile__header__container"},ye={class:"profile__header__container__displayname"},ve={key:0},ge={key:1,class:"profile__header__container__pronouns"},ke={class:"profile__wrapper"},be={class:"profile__content"},we={class:"profile__sidebar"},Ie={class:"user-actions"},Ae=["src"],Ce=["src"],Pe={class:"profile__blocks"},Se={key:0,class:"profile__blocks-details"},Ne={key:0,class:"detail"},Me={key:0},ze={key:1,class:"detail"},$e={key:0,class:"profile__blocks-headline"},xe=z({__name:"ProfileApp",setup(c){const s=N("profile","profileParameters",{userId:void 0,displayname:void 0,address:void 0,organisation:void 0,role:void 0,headline:void 0,biography:void 0,actions:[],isUserAvatarVisible:!1,pronouns:void 0}),r=P(N("profile","status",{})),v=P([]),I=q(()=>[...v.value].sort((f,g)=>g.order-f.order));V(()=>{v.value=window.OCA.Profile.ProfileSections.getSections()});const p=F()?.uid===s.userId,u=s.actions[0],x=s.actions.slice(1),U=H("/settings/user"),E=p?y("profile","You have not added any info yet"):y("profile","{user} has not added any info yet",{user:s.displayname||s.userId||""});B(()=>{document.title=`${s.displayname||s.userId} - ${document.title}`,Y("user_status:status.updated",A)}),T(()=>{Z("user_status:status.updated",A)});function A(f){p&&f.userId===s.userId&&(r.value=f)}function C(){if(!p)return;const f=document.querySelector(".user-status-menu-item");f?f.click():G(y("profile","Error opening the user status modal, try hard refreshing the page"))}return(f,g)=>(i(),d(e(Q),{appName:"profile"},{default:n(()=>[h(e(L),null,{default:n(()=>[a("div",me,[a("div",he,[g[0]||(g[0]=a("div",{class:"profile__header__container__placeholder"},null,-1)),a("div",ye,[a("h2",null,t(e(s).displayname||e(s).userId),1),e(s).pronouns?(i(),o("span",ve,"·")):l("",!0),e(s).pronouns?(i(),o("span",ge,t(e(s).pronouns),1)):l("",!0),p?(i(),d(e(b),{key:2,variant:"primary",href:e(U)},{icon:n(()=>[h(ie,{size:20})]),default:n(()=>[m(" "+t(e(y)("profile","Edit Profile")),1)]),_:1},8,["href"])):l("",!0)]),r.value.icon||r.value.message?(i(),d(e(b),{key:0,disabled:!p,variant:p?"tertiary":"tertiary-no-background",onClick:C},{default:n(()=>[m(t(r.value.icon)+" "+t(r.value.message),1)]),_:1},8,["disabled","variant"])):l("",!0)])]),a("div",ke,[a("div",be,[a("div",we,[h(e(R),{class:$(["avatar",{interactive:p}]),user:e(s).userId,size:180,disableMenu:!0,disableTooltip:!0,isNoUser:!e(s).isUserAvatarVisible,onClick:j(C,["prevent","stop"])},null,8,["class","user","isNoUser"]),a("div",Ie,[e(u)?(i(),d(e(b),{key:0,variant:"primary",class:"user-actions__primary",href:e(u).target,icon:e(u).icon,target:e(u).id==="phone"?"_self":"_blank"},{icon:n(()=>[a("img",{src:e(u).icon,alt:"",class:"user-actions__primary__icon"},null,8,Ae)]),default:n(()=>[m(" "+t(e(u).title),1)]),_:1},8,["href","icon","target"])):l("",!0),h(e(K),{class:"user-actions__other",inline:4},{default:n(()=>[(i(!0),o(k,null,S(e(x),_=>(i(),d(e(J),{key:_.id,closeAfterClick:!0,href:_.target,target:_.id==="phone"?"_self":"_blank"},{icon:n(()=>[a("img",{src:_.icon,alt:"",class:"user-actions__other__icon"},null,8,Ce)]),default:n(()=>[m(" "+t(_.title),1)]),_:2},1032,["href","target"]))),128))]),_:1})])]),a("div",Pe,[e(s).organisation||e(s).role||e(s).address?(i(),o("div",Se,[e(s).organisation||e(s).role?(i(),o("div",Ne,[a("p",null,[m(t(e(s).organisation)+" ",1),e(s).organisation&&e(s).role?(i(),o("span",Me,"•")):l("",!0),m(" "+t(e(s).role),1)])])):l("",!0),e(s).address?(i(),o("div",ze,[a("p",null,[h(de,{class:"map-icon",size:16}),m(" "+t(e(s).address),1)])])):l("",!0)])):l("",!0),e(s).headline||e(s).biography||v.value.length>0?(i(),o(k,{key:1},[e(s).headline?(i(),o("h3",$e,t(e(s).headline),1)):l("",!0),e(s).biography?(i(),d(e(X),{key:1,text:e(s).biography,useExtendedMarkdown:""},null,8,["text"])):l("",!0),(i(!0),o(k,null,S(I.value,_=>(i(),d(_e,{key:_.id,section:_,userId:e(s).userId},null,8,["section","userId"]))),128))],64)):(i(),d(e(W),{key:2,class:"profile__blocks-empty-info",name:e(E),description:e(y)("profile","The headline and about sections will show up here")},{icon:n(()=>[h(ee,{size:60})]),_:1},8,["name","description"]))])])])]),_:1})]),_:1}))}}),Ue=w(xe,[["__scopeId","data-v-4561b582"]]);class Ee{#e;constructor(){this.#e=new Map}registerSection(s){this.#e.has(s.id)&&se.warn(`Profile section with id '${s.id}' is already registered.`),this.#e.set(s.id,s)}getSections(){return[...this.#e.values()]}}window.OCA.Profile??={},window.OCA.Profile.ProfileSections=new Ee;const Oe=D(Ue);Oe.mount("#content");
1+
import{o as i,f as o,g as a,t,h as l,m as M,b as z,c as d,P as O,F as $,l as P,U as V,p as B,V as T,w as n,k as h,u as e,j as m,M as j,H as k,I as S,D as q,e as D}from"./preload-helper-DoJVKVMq.chunk.mjs";import{a as F,b as H,s as Y,u as Z}from"./index-Bp9-GhMo.chunk.mjs";import{a as G}from"./index-C1xmmKTZ-CmvjJKkk.chunk.mjs";import{_ as w,l as N}from"./public-CvthP4YJ.chunk.mjs";import{t as y}from"./translation-DoG5ZELJ-DJHEP2RB.chunk.mjs";import{N as J}from"./NcDateTime.vue_vue_type_script_setup_true_lang-B4upiZjL-L27IwP9h.chunk.mjs";import{a as K}from"./NcModal-kyWZ3UFC-BxKwwKAq.chunk.mjs";import{N as L,a as Q}from"./NcContent-D69ktIEB-DFgyD-CP.chunk.mjs";import{N as R}from"./NcAvatar-ruClKRzS-D00PbCEA.chunk.mjs";import{N as b}from"./mdi-BUoBIgaz.chunk.mjs";import{N as W}from"./NcEmptyContent-CDgWCt_m-MnlDvtO9.chunk.mjs";import{b as X}from"./index-CGU4a9vr.chunk.mjs";import{A as ee,l as se}from"./logger-CCXn6sb0.chunk.mjs";import{P as ie}from"./PencilOutline-BzoFsBsK.chunk.mjs";import"./modulepreload-polyfill-BxzAKjcf.chunk.mjs";import"./NcDialog-nDc1gW50-CpnK8gUQ.chunk.mjs";import"./NcIconSvgWrapper-De-2-ukl-CcvQeIAt.chunk.mjs";import"./Web-rJva_rmF.chunk.mjs";import"./TrashCanOutline-D66Xz3gd.chunk.mjs";import"./index-ClciYKp3.chunk.mjs";import"./util-Caafb9Jl.chunk.mjs";import"./colors-BfjxNgsx-Dyl_2CuU.chunk.mjs";import"./NcUserStatusIcon-JWiuiAXe-BJYvYIQF.chunk.mjs";import"./NcCheckboxRadioSwitch-D0gFwEVl-CZhGfPiT.chunk.mjs";import"./NcSelect-B1uITk_3-D769WsNG.chunk.mjs";import"./NcTextField.vue_vue_type_script_setup_true_lang-B-4HNjYH-C1HLa-yu.chunk.mjs";import"./NcInputField-CPL-a_MM-DHVwy56P.chunk.mjs";const ae={name:"MapMarkerIcon",emits:["click"],props:{title:{type:String},fillColor:{type:String,default:"currentColor"},size:{type:Number,default:24}}},re=["aria-hidden","aria-label"],oe=["fill","width","height"],te={d:"M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"},le={key:0};function ne(c,s,r,v,I,p){return i(),o("span",M(c.$attrs,{"aria-hidden":r.title?null:"true","aria-label":r.title,class:"material-design-icon map-marker-icon",role:"img",onClick:s[0]||(s[0]=u=>c.$emit("click",u))}),[(i(),o("svg",{fill:r.fillColor,class:"material-design-icon__svg",width:r.size,height:r.size,viewBox:"0 0 24 24"},[a("path",te,[r.title?(i(),o("title",le,t(r.title),1)):l("",!0)])],8,oe))],16,re)}const de=w(ae,[["render",ne]]),ce=z({__name:"ProfileSection",props:{section:{},userId:{}},setup(c){return(s,r)=>(i(),o("div",{class:$(s.$style.profileSection)},[(i(),d(O(c.section.tagName),M(c.section.params,{".user":c.userId}),null,48,[".user"]))],2))}}),pe="_profileSection_1o17g_2",ue={profileSection:pe},fe={$style:ue},_e=w(ce,[["__cssModules",fe]]),me={class:"profile__header"},he={class:"profile__header__container"},ye={class:"profile__header__container__displayname"},ve={key:0},ge={key:1,class:"profile__header__container__pronouns"},ke={class:"profile__wrapper"},be={class:"profile__content"},we={class:"profile__sidebar"},Ie={class:"user-actions"},Ae=["src"],Ce=["src"],Pe={class:"profile__blocks"},Se={key:0,class:"profile__blocks-details"},Ne={key:0,class:"detail"},Me={key:0},ze={key:1,class:"detail"},$e={key:0,class:"profile__blocks-headline"},xe=z({__name:"ProfileApp",setup(c){const s=N("profile","profileParameters",{userId:void 0,displayname:void 0,address:void 0,organisation:void 0,role:void 0,headline:void 0,biography:void 0,actions:[],isUserAvatarVisible:!1,pronouns:void 0}),r=P(N("profile","status",{})),v=P([]),I=q(()=>[...v.value].sort((f,g)=>g.order-f.order));V(()=>{v.value=window.OCA.Profile.ProfileSections.getSections()});const p=F()?.uid===s.userId,u=s.actions[0],x=s.actions.slice(1),U=H("/settings/user"),E=p?y("profile","You have not added any info yet"):y("profile","{user} has not added any info yet",{user:s.displayname||s.userId||""});B(()=>{document.title=`${s.displayname||s.userId} - ${document.title}`,Y("user_status:status.updated",A)}),T(()=>{Z("user_status:status.updated",A)});function A(f){p&&f.userId===s.userId&&(r.value=f)}function C(){if(!p)return;const f=document.querySelector(".user-status-menu-item");f?f.click():G(y("profile","Error opening the user status modal, try hard refreshing the page"))}return(f,g)=>(i(),d(e(Q),{appName:"profile"},{default:n(()=>[h(e(L),null,{default:n(()=>[a("div",me,[a("div",he,[g[0]||(g[0]=a("div",{class:"profile__header__container__placeholder"},null,-1)),a("div",ye,[a("h2",null,t(e(s).displayname||e(s).userId),1),e(s).pronouns?(i(),o("span",ve,"·")):l("",!0),e(s).pronouns?(i(),o("span",ge,t(e(s).pronouns),1)):l("",!0),p?(i(),d(e(b),{key:2,variant:"primary",href:e(U)},{icon:n(()=>[h(ie,{size:20})]),default:n(()=>[m(" "+t(e(y)("profile","Edit Profile")),1)]),_:1},8,["href"])):l("",!0)]),r.value.icon||r.value.message?(i(),d(e(b),{key:0,disabled:!p,variant:p?"tertiary":"tertiary-no-background",onClick:C},{default:n(()=>[m(t(r.value.icon)+" "+t(r.value.message),1)]),_:1},8,["disabled","variant"])):l("",!0)])]),a("div",ke,[a("div",be,[a("div",we,[h(e(R),{class:$(["avatar",{interactive:p}]),user:e(s).userId,size:180,disableMenu:!0,disableTooltip:!0,isNoUser:!e(s).isUserAvatarVisible,onClick:j(C,["prevent","stop"])},null,8,["class","user","isNoUser"]),a("div",Ie,[e(u)?(i(),d(e(b),{key:0,variant:"primary",class:"user-actions__primary",href:e(u).target,icon:e(u).icon,target:e(u).id==="phone"?"_self":"_blank"},{icon:n(()=>[a("img",{src:e(u).icon,alt:"",class:"user-actions__primary__icon"},null,8,Ae)]),default:n(()=>[m(" "+t(e(u).title),1)]),_:1},8,["href","icon","target"])):l("",!0),h(e(K),{class:"user-actions__other",inline:4},{default:n(()=>[(i(!0),o(k,null,S(e(x),_=>(i(),d(e(J),{key:_.id,closeAfterClick:!0,href:_.target,target:_.id==="phone"?"_self":"_blank"},{icon:n(()=>[a("img",{src:_.icon,alt:"",class:"user-actions__other__icon"},null,8,Ce)]),default:n(()=>[m(" "+t(_.title),1)]),_:2},1032,["href","target"]))),128))]),_:1})])]),a("div",Pe,[e(s).organisation||e(s).role||e(s).address?(i(),o("div",Se,[e(s).organisation||e(s).role?(i(),o("div",Ne,[a("p",null,[m(t(e(s).organisation)+" ",1),e(s).organisation&&e(s).role?(i(),o("span",Me,"•")):l("",!0),m(" "+t(e(s).role),1)])])):l("",!0),e(s).address?(i(),o("div",ze,[a("p",null,[h(de,{class:"map-icon",size:16}),m(" "+t(e(s).address),1)])])):l("",!0)])):l("",!0),e(s).headline||e(s).biography||v.value.length>0?(i(),o(k,{key:1},[e(s).headline?(i(),o("h3",$e,t(e(s).headline),1)):l("",!0),e(s).biography?(i(),d(e(X),{key:1,text:e(s).biography,useExtendedMarkdown:""},null,8,["text"])):l("",!0),(i(!0),o(k,null,S(I.value,_=>(i(),d(_e,{key:_.id,section:_,userId:e(s).userId},null,8,["section","userId"]))),128))],64)):(i(),d(e(W),{key:2,class:"profile__blocks-empty-info",name:e(E),description:e(y)("profile","The headline and about sections will show up here")},{icon:n(()=>[h(ee,{size:60})]),_:1},8,["name","description"]))])])])]),_:1})]),_:1}))}}),Ue=w(xe,[["__scopeId","data-v-596d11e3"]]);class Ee{#e;constructor(){this.#e=new Map}registerSection(s){this.#e.has(s.id)&&se.warn(`Profile section with id '${s.id}' is already registered.`),this.#e.set(s.id,s)}getSections(){return[...this.#e.values()]}}window.OCA.Profile??={},window.OCA.Profile.ProfileSections=new Ee;const Oe=D(Ue);Oe.mount("#content");
22
//# sourceMappingURL=profile-main.mjs.map

dist/profile-main.mjs.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/profile-profile-main-65fj8xOs.chunk.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)