profile-pane 3.1.3 → 3.1.4

package/lib/styles/utilities.css

@@ -1,5 +1,26 @@
 /* Utility-first CSS classes for layout, spacing, and responsiveness */
 
+:root {
+  --profile-image-size: 3em;
+}
+
+@media (max-width: 1000px) {
+  .profile-grid,
+  .profile-grid * {
+    font-size: 2rem !important;
+  }
+
+  .profile-grid .actionButton,
+  .profile-grid .searchInput,
+  .profile-grid .flatButton,
+  .profile-grid .buttonSection button,
+  .profile-grid .groupButtonsList button {
+    min-height: calc(var(--min-touch-target) + 0.5em) !important;
+    font-size: 2rem !important;
+    padding: 1em 1em !important;
+  }
+}
+
 .actionButton {
   width: 100%;
   min-width: 180px;
@@ -14,7 +35,8 @@
 
 .profile-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));
+  /* Allow the grid to shrink below 30em on small viewports to avoid overflow */
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30em), 1fr));
   gap: var(--spacing-lg);
   background: var(--color-background);
 }
@@ -207,6 +229,13 @@
   box-shadow: none;
 }
 
+/* Prevent labels from appearing focusable to keyboard users. */
+label:focus,
+label:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
 /* Better focus for text elements */
 .focusable-text:focus {
   background-color: rgba(124, 77, 255, 0.1);

package/lib/texts.d.ts

@@ -9,12 +9,12 @@ export declare const logInAddMeToYourFriendsButtonText = "Login to add me to you
 export declare const logInToChatWithMeButtonText = "Login to chat with me";
 export declare const friendExistsAlreadyButtonText = "Already part of friends";
 export declare const chatWithMeButtonText = "Chat with me";
-export declare const yourContactInformationHeading = "Contact Information";
-export declare const otherPreferencesHeadingText = "Other Preferences";
-export declare const communitiesHeadingText = "Communities You Participate In";
+export declare const yourContactInformationHeading = "Your profile";
+export declare const otherPreferencesHeadingText = "Other preferences";
+export declare const communitiesHeadingText = "Your communities";
 export declare const resumeHeadingText = "Resume";
-export declare const socialAccountsHeadingText = "Social Accounts";
-export declare const sharedItemsHeadingText = "Shared Items";
+export declare const socialAccountsHeadingText = "Social accounts";
+export declare const sharedItemsHeadingText = "Shared items";
 export declare const friendsHeadingText = "Friends";
 export declare const contactHeadingText = "Contact";
 //# sourceMappingURL=texts.d.ts.map

package/lib/texts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"texts.d.ts","sourceRoot":"","sources":["../src/texts.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,mBAAmB,wCAAwC,CAAA;AAGxE,eAAO,MAAM,2BAA2B,2CAA2C,CAAA;AACnF,eAAO,MAAM,oBAAoB,+BAA+B,CAAA;AAChE,eAAO,MAAM,2BAA2B,sBAAsB,CAAA;AAG9D,eAAO,MAAM,mBAAmB,0BAA0B,CAAA;AAC1D,eAAO,MAAM,cAAc,eAAe,CAAA;AAG1C,eAAO,MAAM,4BAA4B,2BAA2B,CAAA;AACpE,eAAO,MAAM,iCAAiC,oCAAoC,CAAA;AAClF,eAAO,MAAM,2BAA2B,0BAA0B,CAAA;AAClE,eAAO,MAAM,6BAA6B,4BAA4B,CAAA;AACtE,eAAO,MAAM,oBAAoB,iBAAiB,CAAA;AAGlD,eAAO,MAAM,6BAA6B,wBAAwB,CAAA;AAClE,eAAO,MAAM,2BAA2B,sBAAsB,CAAA;AAC9D,eAAO,MAAM,sBAAsB,mCAAmC,CAAA;AACtE,eAAO,MAAM,iBAAiB,WAAW,CAAA;AACzC,eAAO,MAAM,yBAAyB,oBAAoB,CAAA;AAC1D,eAAO,MAAM,sBAAsB,iBAAiB,CAAA;AACpD,eAAO,MAAM,kBAAkB,YAAY,CAAA;AAC3C,eAAO,MAAM,kBAAkB,YAAY,CAAA"}
+{"version":3,"file":"texts.d.ts","sourceRoot":"","sources":["../src/texts.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,mBAAmB,wCAAwC,CAAA;AAGxE,eAAO,MAAM,2BAA2B,2CAA2C,CAAA;AACnF,eAAO,MAAM,oBAAoB,+BAA+B,CAAA;AAChE,eAAO,MAAM,2BAA2B,sBAAsB,CAAA;AAG9D,eAAO,MAAM,mBAAmB,0BAA0B,CAAA;AAC1D,eAAO,MAAM,cAAc,eAAe,CAAA;AAG1C,eAAO,MAAM,4BAA4B,2BAA2B,CAAA;AACpE,eAAO,MAAM,iCAAiC,oCAAoC,CAAA;AAClF,eAAO,MAAM,2BAA2B,0BAA0B,CAAA;AAClE,eAAO,MAAM,6BAA6B,4BAA4B,CAAA;AACtE,eAAO,MAAM,oBAAoB,iBAAiB,CAAA;AAGlD,eAAO,MAAM,6BAA6B,iBAAiB,CAAA;AAC3D,eAAO,MAAM,2BAA2B,sBAAsB,CAAA;AAC9D,eAAO,MAAM,sBAAsB,qBAAqB,CAAA;AACxD,eAAO,MAAM,iBAAiB,WAAW,CAAA;AACzC,eAAO,MAAM,yBAAyB,oBAAoB,CAAA;AAC1D,eAAO,MAAM,sBAAsB,iBAAiB,CAAA;AACpD,eAAO,MAAM,kBAAkB,YAAY,CAAA;AAC3C,eAAO,MAAM,kBAAkB,YAAY,CAAA"}

package/lib/texts.js

@@ -24,11 +24,11 @@ const friendExistsAlreadyButtonText = exports.friendExistsAlreadyButtonText = 'A
 const chatWithMeButtonText = exports.chatWithMeButtonText = 'Chat with me';
 
 // Profile & Edit profile texts 
-const yourContactInformationHeading = exports.yourContactInformationHeading = 'Contact Information';
-const otherPreferencesHeadingText = exports.otherPreferencesHeadingText = 'Other Preferences';
-const communitiesHeadingText = exports.communitiesHeadingText = 'Communities You Participate In';
+const yourContactInformationHeading = exports.yourContactInformationHeading = 'Your profile';
+const otherPreferencesHeadingText = exports.otherPreferencesHeadingText = 'Other preferences';
+const communitiesHeadingText = exports.communitiesHeadingText = 'Your communities';
 const resumeHeadingText = exports.resumeHeadingText = 'Resume';
-const socialAccountsHeadingText = exports.socialAccountsHeadingText = 'Social Accounts';
-const sharedItemsHeadingText = exports.sharedItemsHeadingText = 'Shared Items';
+const socialAccountsHeadingText = exports.socialAccountsHeadingText = 'Social accounts';
+const sharedItemsHeadingText = exports.sharedItemsHeadingText = 'Shared items';
 const friendsHeadingText = exports.friendsHeadingText = 'Friends';
 const contactHeadingText = exports.contactHeadingText = 'Contact';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "profile-pane",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "description": "A SolidOS compatible pane to display a personal profile page",
   "sideEffects": [
     "*.css"
@@ -52,9 +52,12 @@
     "validate-color": "^2.2.4"
   },
   "peerDependencies": {
-    "rdflib": "^2.3.5",
-    "solid-logic": "^4.0.2",
-    "solid-ui": "^3.0.4"
+    "rdflib": "^2.3.6",
+    "solid-logic": "^4.0.6",
+    "solid-ui": "^3.0.5"
+  },
+  "overrides": {
+    "solid-ui": "$solid-ui"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.6",
@@ -71,7 +74,7 @@
     "babel-loader": "^10.0.0",
     "babel-plugin-inline-import": "^3.0.0",
     "chat-pane": "^3.0.3",
-    "contacts-pane": "3.1.0-test.0",
+    "contacts-pane": "^3.0.3",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.4",
     "eslint": "^9.39.2",
@@ -83,7 +86,7 @@
     "node-polyfill-webpack-plugin": "^4.1.0",
     "rdflib": "^2.3.6",
     "solid-logic": "^4.0.6",
-    "solid-ui": "^3.0.5",
+    "solid-ui": "^3.0.6",
     "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.16",
     "ts-loader": "^9.5.4",

package/lib/styles/rdfFormsEnforced.css

@@ -1,186 +0,0 @@
-/* Solid-UI form sizing fixes scoped to Edit CV section */
-.profile-form .hoverControl:not(:has(> img:first-child)) {
-  border: 0.1em solid rgb(136, 136, 136) !important;
-}
-
-.profile-form .hoverControl:has(> img:first-child) {
-  background-color: transparent !important;
-  border: none !important;
-  margin: 0 !important;
-  border-radius: 0 !important;
-  padding: 0.7em !important;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.profile-form .hoverControlHide {
-  width: 1.5em !important;
-  height: 1.5em !important;
-  display: block;
-  margin-top: 0 !important;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  margin-bottom: 0.3em !important;
-}
-
-.profile-form .hoverControl:has(> img:first-child) > span {
-  display: inline-flex;
-  align-items: center;
-  margin-left: 0.3em;
-}
-
-.profile-form div[style*="padding: 0.5em"]:has(> img) {
-  display: inline-flex;
-  align-items: center;
-}
-
-.profile-form div[style*="padding: 0.5em"]:has(> img) > span {
-  margin-left: 0.3em;
-}
-
-.profile-form .hoverControl:has(> img:first-child):hover {
-  background-color: transparent !important;
-}
-
-.profile-form button:has(> img[src$=".svg"]) {
-  background-color: transparent !important;
-  border: none !important;
-  margin: 0 !important;
-  border-radius: 0 !important;
-}
-
-.profile-form button {
-
-}
-
-.profile-form input:not([type="color"]),
-.profile-form textarea,
-.profile-form select {
-  max-width: 100%;
-  min-width: 0;
-  box-sizing: border-box ;
-  background-color: #eef !important;
-  border: .05em solid #88c
-}
-
-.profile-form input[type="url"] {
-  width: 100%;
-}
-
-.profile-form .formFieldValue {
-  min-width: 0;
-  margin-bottom: var(--spacing-sm);
-}
-
-.profile-form .formFieldValue table {
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.profile-form .formFieldValue td {
-  padding: 0 !important;
-}
-
-.profile-form .formFieldValue input:not([type="color"]),
-.profile-form .formFieldValue textarea,
-.profile-form .formFieldValue select {
-  width: 100%;
-  max-width: 100%;
-}
-
-.profile-form select#formSelect {
-  width: 100%;
-  max-width: 97%;
-  box-sizing: border-box;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.profile-form span select {
-  max-width: 96% !important;
-  box-sizing: border-box;
-}
-
-/* Remove border/padding from the first wrapper div (and its first child wrapper). */
-.profile-form > div:first-of-type,
-.profile-form > div:first-of-type > div:first-of-type {
-  border: none !important;
-  padding: 0 !important;
-}
-
-/* Remove border/padding from the inner div of the first wrapper in the contact section. */
-section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:first-of-type > div:first-of-type {
-  border: none !important;
-  padding: 0 !important;
-}
-
-/* In contactPane, remove border/padding from all direct child divs. */
-.contactPane > div {
-  border: none !important;
-  padding: 0 !important;
-}
-
-/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://schema.org/"]),
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/solid/terms#"]),
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://xmlns.com/foaf/0.1/"]),
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/2006/vcard/ns"]),
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/org#"]) {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://schema.org/"]) + .formFieldValue,
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/solid/terms#"]) + .formFieldValue,
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://xmlns.com/foaf/0.1/"]) + .formFieldValue,
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/2006/vcard/ns"]) + .formFieldValue,
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/org#"]) + .formFieldValue {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-
-.profile-form textarea {
-  width: 100%;
-  box-sizing: border-box;
-  margin-top: var(--spacing-xs);
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-/* Add horizontal gap between label and textarea for all label+textarea pairs. */
-.profile-form div:has(> a) + div:has(textarea) {
-  margin-left: var(--spacing-sm);
-}
-
-/* Center textarea label vertically in flex rows. */
-.profile-form div[style*="display: flex"][style*="flex-direction: row"]:has(textarea) {
-  align-items: flex-start;
-}
-
-.profile-form div[style*="display: flex"][style*="flex-direction: row"]:has(textarea) > div:has(> a) {
-  padding-top: var(--spacing-xs);
-}
-
-.profile-form input:not([type="color"]) {
-  width: 100%;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-/* Remove padding from table cells within webidControl */
-.webidControl table td {
-  padding: 0 !important;
-}
-
-/* Remove padding from contactPane divs inside webidControl table cells */
-.webidControl table td div.contactPane.namedPane.fullWidth.individualPane {
-  padding: 0 !important;
-}
-
-.webidControl table td div.contactPane.namedPane {
-  border: none !important;
-}