@axium/contacts 0.2.10 → 0.3.0

package/lib/InitForm.svelte

@@ -207,6 +207,11 @@
 	.contact-name-title {
 		margin-left: 2em;
 		font-size: 2em;
+
+		@media (width < 700px) {
+			margin-left: 0;
+			margin-top: 0.5em;
+		}
 	}
 
 	.contact-init-header,
@@ -218,6 +223,7 @@
 
 		@media (width < 700px) {
 			width: calc(100% - 2em);
+			padding: 1em;
 		}
 	}
 
@@ -226,6 +232,14 @@
 		display: flex;
 		gap: 1em;
 		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.contact-init-header {
+		@media (width < 700px) {
+			flex-direction: column;
+			text-align: center;
+		}
 	}
 
 	.contact-init-actions > :not(span) {
@@ -238,7 +252,7 @@
 
 	.contact-init {
 		display: grid;
-		grid-template-columns: 1em 1fr 1em;
+		grid-template-columns: 1em minmax(0, 1fr) 1em;
 		gap: 1em;
 		border-radius: 1em;
 		background-color: var(--bg-menu);
@@ -270,8 +284,10 @@
 		gap: 0.5em;
 		grid-template-columns: 1fr;
 
-		&.with-label {
-			grid-template-columns: 1fr 1fr;
+		@media (width >= 700px) {
+			&.with-label {
+				grid-template-columns: 1fr 1fr;
+			}
 		}
 	}
 
@@ -280,8 +296,16 @@
 		gap: 0.5em;
 		grid-template-columns: 4em 1fr;
 
-		&.with-label {
-			grid-template-columns: 4em 1fr 1fr;
+		@media (width >= 700px) {
+			&.with-label {
+				grid-template-columns: 4em 1fr 1fr;
+			}
+		}
+
+		@media (width < 700px) {
+			&.with-label :global(> *:nth-child(3)) {
+				grid-column: 1 / -1;
+			}
 		}
 	}
 </style>

package/lib/List.svelte

@@ -21,9 +21,9 @@
 		<div class="list-item" onclick={() => (location.href = `/contacts/${contact.id}`)}>
 			<ContactPicture {contact} />
 			<span>{format.name(contact)}</span>
-			<span>{format.emailDefault(contact)}</span>
-			<span>{format.phoneDefault(contact)}</span>
-			<span>{format.job(contact)}</span>
+			<span class="mobile-hide">{format.emailDefault(contact)}</span>
+			<span class="mobile-hide">{format.phoneDefault(contact)}</span>
+			<span class="mobile-hide">{format.job(contact)}</span>
 		</div>
 	{:else}
 		<p class="list-empty">{text('contacts.list.empty')}</p>
@@ -34,4 +34,10 @@
 	.list-item {
 		grid-template-columns: 2em 2fr minmax(10em, 25em) minmax(10em, 20em) 1fr;
 	}
+
+	@media (width < 700px) {
+		.list-item {
+			grid-template-columns: 2em 1fr;
+		}
+	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/contacts",
-	"version": "0.2.10",
+	"version": "0.3.0",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Contacts for Axium",
 	"funding": {
@@ -38,7 +38,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.27.0",
+		"@axium/client": ">=0.27.1",
 		"@axium/core": ">=0.26.0",
 		"@axium/server": ">=0.43.0",
 		"@sveltejs/kit": "^2.27.3",

package/routes/contacts/[id]/+page.svelte

@@ -49,24 +49,24 @@
 		</button>
 	</a>
 
-	<span></span>
+	<span class="mobile-hide"></span>
 
-	<a href="/contacts/{contact.id}/edit">
+	<a class="mobile-hide" href="/contacts/{contact.id}/edit">
 		<button class="icon-text">
 			<Icon i="pencil" />
 			<span>{text('contacts.edit')}</span>
 		</button>
 	</a>
 
-	<button class="icon-text" command="show-modal" commandfor="delete-contact">
-		<Icon i="trash" />
-		<span>{text('contacts.delete')}</span>
-	</button>
-
-	<button class="icon-text" onclick={() => download(contactFileName + '.vcard', toVCard(contact))}>
+	<button class="icon-text mobile-hide" onclick={() => download(contactFileName + '.vcard', toVCard(contact))}>
 		<Icon i="file-export" />
 		<span>{text('contacts.export')}</span>
 	</button>
+
+	<button class="icon-text mobile-hide" command="show-modal" commandfor="delete-contact">
+		<Icon i="trash" />
+		<span>{text('contacts.delete')}</span>
+	</button>
 </div>
 
 {#snippet part(i: string, value: string | false | 0 | null | undefined)}
@@ -182,6 +182,25 @@
 	{@render part('regular/note', contact.notes)}
 </div>
 
+<div class="contact-actions mobile-only">
+	<a href="/contacts/{contact.id}/edit">
+		<button class="icon-text">
+			<Icon i="pencil" />
+			<span>{text('contacts.edit')}</span>
+		</button>
+	</a>
+
+	<button class="icon-text" onclick={() => download(contactFileName + '.vcard', toVCard(contact))}>
+		<Icon i="file-export" />
+		<span>{text('contacts.export')}</span>
+	</button>
+
+	<button class="icon-text danger" command="show-modal" commandfor="delete-contact">
+		<Icon i="trash" />
+		<span>{text('contacts.delete')}</span>
+	</button>
+</div>
+
 <FormDialog
 	id="delete-contact"
 	submitDanger
@@ -214,6 +233,11 @@
 	.contact-name-title {
 		margin-left: 2em;
 		font-size: 2em;
+
+		@media (width < 700px) {
+			margin-left: 0;
+			margin-top: 0.5em;
+		}
 	}
 
 	.contact-header,
@@ -229,10 +253,42 @@
 	}
 
 	.contact-header,
-	.contact-actions {
+	.contact-actions:not(.mobile-only) {
 		display: flex;
 		gap: 1em;
 		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.contact-actions.mobile-only {
+		background-color: var(--bg-menu);
+		border-radius: 1em;
+		flex-direction: column;
+
+		@media (width < 700px) {
+			display: flex;
+		}
+
+		> :not(:first-child) {
+			border-top: var(--border-alt);
+		}
+
+		button {
+			background-color: var(--bg-menu);
+			border: none;
+			display: flex;
+			justify-content: flex-start;
+			width: 100%;
+			border-radius: 0;
+			padding: 1em;
+		}
+	}
+
+	.contact-header {
+		@media (width < 700px) {
+			flex-direction: column;
+			text-align: center;
+		}
 	}
 
 	.contact-actions a {
@@ -245,7 +301,7 @@
 
 	.contact {
 		display: grid;
-		grid-template-columns: 1em 1fr;
+		grid-template-columns: 1em minmax(0, 1fr);
 		gap: 1em;
 		border-radius: 1em;
 		background-color: var(--bg-menu);