Skip to content

Commit 114f7bd

Browse files
SharonStratsSharonStrats
committed
add env layout and inputmode
1 parent 4c58419 commit 114f7bd

2 files changed

Lines changed: 216 additions & 1 deletion

File tree

‎src/social/socialPane.css‎

Lines changed: 201 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
.social-pane-host,
12
.social-pane {
3+
--profile-interactive-cursor: pointer;
24
display: block;
35
background: var(--color-background, #F8F9FB);
46
border-radius: var(--border-radius-base, 0.3125rem);
@@ -72,7 +74,7 @@
7274
appearance: none;
7375
border: 0;
7476
background: transparent;
75-
cursor: pointer;
77+
cursor: var(--profile-interactive-cursor, pointer);
7678
color: var(--slate-700, #314158);
7779
font-size: var(--font-size-sm, 0.875rem);
7880
font-weight: var(--font-weight-bold, 600);
@@ -1024,6 +1026,204 @@ div.social-pane {
10241026
text-decoration: underline;
10251027
}
10261028

1029+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-content {
1030+
display: grid;
1031+
grid-template-columns: 4.375rem minmax(0, 1fr) auto;
1032+
align-items: start;
1033+
column-gap: var(--spacing-md, 1rem);
1034+
row-gap: 0.25rem;
1035+
padding: 1rem 1rem 0;
1036+
}
1037+
1038+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-media {
1039+
display: contents;
1040+
}
1041+
1042+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-details {
1043+
grid-column: 2;
1044+
grid-row: 1;
1045+
display: flex;
1046+
flex-direction: column;
1047+
align-items: flex-start;
1048+
gap: 0.125rem;
1049+
min-width: 0;
1050+
}
1051+
1052+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-actions {
1053+
grid-column: 3;
1054+
grid-row: 1;
1055+
justify-self: end;
1056+
justify-content: flex-end;
1057+
width: auto;
1058+
gap: var(--spacing-2xs, 0.3125rem);
1059+
margin-left: 0;
1060+
}
1061+
1062+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-summary {
1063+
display: flex;
1064+
flex-direction: column;
1065+
gap: 0;
1066+
width: 100%;
1067+
}
1068+
1069+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__header-name, .social-pane__header-job-org, .social-pane__header-location) {
1070+
width: 100%;
1071+
text-align: left;
1072+
justify-content: flex-start;
1073+
}
1074+
1075+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-stats {
1076+
width: 100%;
1077+
justify-content: flex-start;
1078+
align-self: flex-start;
1079+
gap: var(--spacing-xs, 0.5rem);
1080+
margin-top: -0.4375rem;
1081+
}
1082+
1083+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-profile-links {
1084+
grid-column: 1 / -1;
1085+
grid-row: 2;
1086+
grid-template-columns: 1fr;
1087+
row-gap: var(--spacing-xxxs, 0.2rem);
1088+
justify-items: start;
1089+
padding-left: 0;
1090+
margin-top: -0.375rem;
1091+
}
1092+
1093+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane .social-primary__tabs,
1094+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-primary__tabs {
1095+
margin-top: -0.5rem;
1096+
}
1097+
1098+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__link-button {
1099+
justify-self: start;
1100+
padding-left: 0;
1101+
padding-right: 0;
1102+
}
1103+
1104+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__link-button > a {
1105+
font-size: var(--font-size-sm, 0.875rem);
1106+
text-align: left;
1107+
}
1108+
1109+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__dialog-field-header {
1110+
grid-template-columns: minmax(0, 1fr);
1111+
}
1112+
1113+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__header-hero, .social-pane__header-hero-icon) {
1114+
grid-column: 1;
1115+
grid-row: 1;
1116+
width: 5rem;
1117+
height: 5rem;
1118+
aspect-ratio: 1 / 1;
1119+
}
1120+
1121+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-name {
1122+
font-size: var(--font-size-xl, 1.375rem);
1123+
line-height: 1.15;
1124+
}
1125+
1126+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__header-job-org {
1127+
font-size: var(--font-size-md, 1rem);
1128+
line-height: 1.25;
1129+
}
1130+
1131+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane .social-friend-pronouns {
1132+
font-size: 0.6875rem;
1133+
}
1134+
1135+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__header-location, .social-pane__header-stat),
1136+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane .social-friend-location {
1137+
font-size: var(--font-size-xxs, 0.75rem);
1138+
}
1139+
1140+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__friend-action {
1141+
padding: var(--spacing-xxxs, 0.2rem) var(--spacing-xxs-old, 0.3rem);
1142+
font-size: var(--font-size-xs, 0.813rem);
1143+
border-radius: var(--border-radius-base, 0.3125rem);
1144+
}
1145+
1146+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__edit-button-label, .social-pane__edit-button .profile-section-collapsible__edit-label) {
1147+
display: none !important;
1148+
}
1149+
1150+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__edit-button {
1151+
--button-background: transparent;
1152+
--button-border-width: 0;
1153+
--button-border: transparent;
1154+
--button-text: var(--color-text, #1A1A1A);
1155+
--button-hover-background: var(--lavender-300, #e6dcff);
1156+
--button-hover-border: transparent;
1157+
--button-hover-text: var(--color-text, #1A1A1A);
1158+
--button-font-size-sm: clamp(0.9rem, 2.1vw, 1rem);
1159+
--button-font-weight: var(--font-weight-regular, 400);
1160+
--button-icon-size-sm: 0.875rem;
1161+
}
1162+
1163+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__edit-button-icon, .social-pane__edit-button .profile-section-collapsible__edit-icon) {
1164+
display: inline-flex;
1165+
align-items: center;
1166+
justify-content: center;
1167+
width: 0.875rem;
1168+
height: 0.875rem;
1169+
line-height: 0;
1170+
}
1171+
1172+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__edit-button-icon svg, .social-pane__edit-button .profile-section-collapsible__edit-icon svg) {
1173+
width: 0.875rem;
1174+
height: 0.875rem;
1175+
}
1176+
1177+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane__edit-button-icon svg path, .social-pane__edit-button .profile-section-collapsible__edit-icon svg path) {
1178+
fill: var(--color-text, #1A1A1A);
1179+
stroke: none;
1180+
}
1181+
1182+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__dialog-actions {
1183+
flex-direction: row;
1184+
align-items: center;
1185+
justify-content: center;
1186+
gap: var(--spacing-sm, 0.938rem);
1187+
padding: var(--spacing-md, 1rem) 0 0;
1188+
margin: var(--spacing-md, 1rem) auto 0;
1189+
box-sizing: border-box;
1190+
width: 100%;
1191+
}
1192+
1193+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__dialog-actions > solid-ui-button {
1194+
flex: 0 0 auto;
1195+
width: 10.8rem;
1196+
min-width: 8.5rem;
1197+
}
1198+
1199+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane__dialog-field-header solid-ui-button.social-pane__dialog-row-button--add::part(button) {
1200+
font-size: var(--font-size-sm, 0.875rem);
1201+
line-height: var(--line-height-base, 1.5);
1202+
}
1203+
1204+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane .social-friends-header-actions--standalone {
1205+
flex-wrap: wrap;
1206+
gap: var(--spacing-2xs, 0.625rem);
1207+
padding-top: 0.35rem;
1208+
}
1209+
1210+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] :is(.social-pane .social-layout, .social-pane .social-primary, .social-layout, .social-primary) {
1211+
display: block;
1212+
}
1213+
1214+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-pane .social-friends-grid,
1215+
:is(.social-pane-host, .social-pane)[data-layout='mobile'] .social-friends-grid {
1216+
display: block;
1217+
}
1218+
1219+
:is(.social-pane-host, .social-pane)[data-input-mode='touch'] {
1220+
--profile-interactive-cursor: auto;
1221+
}
1222+
1223+
:is(.social-pane-host, .social-pane)[data-input-mode='pointer'] {
1224+
--profile-interactive-cursor: pointer;
1225+
}
1226+
10271227
@media (max-width: 600px) {
10281228
.social-pane__header-content {
10291229
display: grid;

‎src/social/socialPane.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,20 @@ import {
2626
import type { ViewerMode } from './socialSections'
2727
import { FriendshipTriage, loadFriendshipTriage, triageFriends } from './triage'
2828

29+
function applyEnvironmentAttributes (
30+
element: HTMLElement,
31+
context: DataBrowserContext
32+
): void {
33+
const layout = context.environment?.layout ?? 'desktop'
34+
const theme = context.environment?.theme ?? 'light'
35+
const inputMode = context.environment?.inputMode ?? 'pointer'
36+
37+
element.classList.add('social-pane-host')
38+
element.dataset.layout = layout
39+
element.dataset.theme = theme
40+
element.dataset.inputMode = inputMode
41+
}
42+
2943
export const socialPane = {
3044
icon: icons.originalIconBase + 'foaf/foafTiny.gif',
3145

@@ -189,6 +203,7 @@ export const socialPane = {
189203
const kb = context.session.store
190204
const socialPane = dom.createElement('div')
191205
socialPane.classList.add('social-pane', 'flex-column', 'gap-xxs', 'p-lg')
206+
applyEnvironmentAttributes(socialPane, context)
192207
const foaf = ns.foaf
193208
const vcard = ns.vcard
194209
const me = authn.currentUser()

0 commit comments

Comments
 (0)