Improved bio styling and fixed penis sizes.

assets/img/icons/scissors.svg

@@ -0,0 +1,4 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<path d="M12.218 16c-0.85-0-1.912-0.519-2.369-1.678-0.064-0.151-0.133-0.335-0.214-0.547-0.259-0.68-0.65-1.707-1.059-2.132-0.15-0.156-0.265-0.269-0.359-0.36-0.084-0.081-0.154-0.15-0.217-0.219-0.063 0.069-0.134 0.138-0.217 0.219-0.093 0.091-0.209 0.204-0.358 0.359-0.409 0.425-0.8 1.453-1.059 2.132-0.081 0.212-0.151 0.396-0.214 0.547-0.457 1.159-1.519 1.678-2.369 1.678-0.166 0-0.317-0.020-0.449-0.060-0.837-0.251-1.344-1.186-1.263-2.325l0.012-0.131c0.103-0.919 0.662-1.827 1.576-2.556 0.792-0.632 1.728-1.025 2.444-1.025 0.142 0 0.272 0.015 0.391 0.046l0.491-1.007c-0.505-1.263-1.223-3.149-1.785-4.801-0.313-0.921-0.545-1.675-0.69-2.241-0.23-0.897-0.215-1.2-0.122-1.379l0.269-0.52 3.345 6.858 3.345-6.858 0.269 0.52c0.093 0.179 0.107 0.483-0.122 1.379-0.145 0.566-0.377 1.321-0.69 2.241-0.562 1.652-1.28 3.538-1.785 4.801l0.491 1.007c0.119-0.031 0.25-0.046 0.391-0.046 0.715 0 1.652 0.393 2.444 1.025 0.781 0.624 1.304 1.378 1.503 2.158l0.037-0.018 0.048 0.548c0.081 1.139-0.426 2.073-1.263 2.325-0.132 0.040-0.283 0.060-0.449 0.060-0 0-0 0-0 0zM10.839 13.78c0.592 1.074 1.12 1.234 1.383 1.234 0.358 0 0.626-0.289 0.678-0.568 0.034-0.183 0.040-0.372 0.018-0.561-0.089-0.755-0.604-1.403-1.021-1.814-0.573-0.565-1.215-0.939-1.628-1.103-0.041-0.014-0.066-0.016-0.078-0.016-0.008 0-0.011 0.001-0.011 0.001-0.12 0.078-0.264 0.985 0.658 2.827zM5.723 10.968c-0.41 0.164-1.048 0.539-1.618 1.103-0.414 0.411-0.927 1.059-1.015 1.814-0.022 0.188-0.016 0.377 0.018 0.561 0.052 0.279 0.318 0.568 0.674 0.568 0.261 0 0.787-0.161 1.375-1.234 0.916-1.842 0.774-2.748 0.653-2.828 0 0-0 0-0 0s-0.004-0.001-0.010-0.001c-0.011-0-0.037 0.002-0.077 0.016z"></path>
+</svg>

assets/img/icons/scissors2.svg

@@ -0,0 +1,4 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<path d="M4.655 0l-0.269 0.52c-0.093 0.179-0.107 0.483 0.122 1.379 0.145 0.566 0.377 1.321 0.69 2.241 0.395 1.163 0.868 2.441 1.29 3.536l0.955-1.959-2.789-5.718zM13.93 13.616l-0.048-0.548-0.037 0.018c-0.199-0.78-0.722-1.534-1.503-2.158-0.792-0.633-1.729-1.025-2.444-1.025-0.142 0-0.272 0.015-0.391 0.046l-0.491-1.007c0.505-1.263 1.224-3.149 1.785-4.801 0.313-0.921 0.545-1.675 0.69-2.241 0.23-0.897 0.215-1.2 0.122-1.379l-0.269-0.52-4.852 9.948c-0.119-0.031-0.25-0.046-0.391-0.046-0.715 0-1.652 0.393-2.444 1.025-0.914 0.73-1.473 1.638-1.576 2.556l-0.012 0.131c-0.081 1.139 0.426 2.073 1.263 2.325 0.132 0.040 0.283 0.060 0.449 0.060 0.85 0 1.912-0.519 2.369-1.678 0.064-0.151 0.133-0.335 0.214-0.547 0.259-0.68 0.65-1.707 1.059-2.132 0.15-0.156 0.265-0.269 0.358-0.359 0.084-0.082 0.154-0.15 0.217-0.219 0.063 0.069 0.134 0.138 0.217 0.219 0.093 0.091 0.209 0.204 0.359 0.36 0.409 0.425 0.8 1.453 1.059 2.132 0.081 0.212 0.151 0.396 0.214 0.547 0.457 1.159 1.519 1.678 2.369 1.678 0 0 0 0 0 0 0.166 0 0.317-0.020 0.449-0.060 0.837-0.252 1.344-1.186 1.263-2.325zM5.157 13.78c-0.588 1.073-1.114 1.234-1.375 1.234-0.356 0-0.622-0.289-0.674-0.568-0.034-0.184-0.040-0.373-0.018-0.561 0.088-0.755 0.6-1.403 1.015-1.814 0.569-0.565 1.208-0.939 1.618-1.103 0.041-0.014 0.066-0.016 0.077-0.016 0.006 0 0.009 0.001 0.010 0.001s0 0 0-0c0.121 0.080 0.263 0.986-0.653 2.828zM12.9 14.446c-0.052 0.279-0.32 0.568-0.678 0.568-0.263 0-0.791-0.161-1.383-1.234-0.922-1.842-0.778-2.749-0.658-2.827 0 0 0.003-0.001 0.011-0.001 0.011 0 0.037 0.002 0.078 0.016 0.412 0.164 1.055 0.539 1.628 1.103 0.417 0.411 0.933 1.059 1.021 1.814 0.022 0.189 0.016 0.378-0.018 0.561z"></path>
+</svg>

components/actors/bio.vue

@@ -197,20 +197,20 @@
 
 				<span>
 					<Icon
-						v-if="actor.circumcised"
+						v-if="actor.isCircumcised"
 						:title="'Circumcised'"
-						icon="page-break"
+						icon="pagebreak"
 						class="circumcised"
 					/>
 
-					<template v-if="actor.penisLengthMetric && actor.penisGirthMetric">
+					<template v-if="actor.penisLength && actor.penisGirth">
-						<span>{{ actor.penisLengthMetric }} * {{ actor.penisGirthMetric }} cm</span>
+						<span>{{ actor.penisLength.imperial }}" × {{ actor.penisLength.imperial }}"</span>
-						<span class="bio-segment">{{ actor.penisLengthImperial }}" * {{ actor.penisGirthImperial }}"</span>
+						<span class="bio-segment">{{ actor.penisLength.metric }} × {{ actor.penisGirth.metric }} cm</span>
 					</template>
 
-					<template v-else-if="actor.penisLengthMetric">
+					<template v-else-if="actor.penisLength">
-						<span>{{ actor.penisLengthMetric }} cm</span>
+						<span>{{ actor.penisLength.imperial }}"</span>
-						<span class="bio-segment">{{ actor.penisLengthImperial }}"</span>
+						<span class="bio-segment">{{ actor.penisLength.metric }} cm</span>
 					</template>
 				</span>
 			</li>
@@ -439,7 +439,7 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 
 	.icon {
 		width: 1.25rem;
-		height: 1.25rem;
+		height: auto;
 	}
 }
 </style>
@@ -527,6 +527,10 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
     &:not(:last-of-type) {
         border-bottom: solid 1px var(--highlight-weak-40);
     }
+
+	.icon {
+		height: auto; /* prevents jumping */
+	}
 }
 
 .bio-label,
@@ -562,6 +566,7 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 .flag {
     height: 1rem;
     margin: .25rem .5rem 0 0;
+	border-radius: 3px;
 }
 
 .bio-name {
@@ -604,7 +609,7 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 .penis-length-imperial,
 .bio-segment {
     padding: 0 0 0 .5rem;
-    border-left: solid 1px var(--highlight-weak);
+    border-left: solid 1px var(--highlight-weak-20);
     margin: 0 0 0 .5rem;
 }
 
@@ -612,6 +617,8 @@ const descriptions = Object.values(Object.fromEntries(props.actor.profiles
 .circumcised.icon {
     fill: var(--primary);
     padding: 0 .5rem;
+	margin-right: .25rem;
+	transform: translateY(2px);
 }
 
 .enhanced.icon {

components/stashes/heart.vue

@@ -209,7 +209,7 @@ async function reloadStashes(newStash) {
 
 	.icon {
 		width: 1.5rem;
-		height: 1.5rem;
+		height: auto; /* prevents jumping */
 		padding: .5rem .5rem;
 		fill: var(--glass);
 	}

pages/actors/@actorId/edit/+Page.vue

@@ -141,6 +141,48 @@
 							>{{ option?.label || option }}</option>
 						</select>
 
+						<div
+							v-if="item.type === 'size'"
+							class="figure size"
+						>
+							<div class="value-section">
+								<span class="value-label">Units</span>
+
+								<select
+									v-model="sizeUnits"
+									class="input"
+									:disabled="!editing.has(item.key)"
+								>
+									<option value="imperial">Imperial</option>
+									<option value="metric">Metric</option>
+								</select>
+							</div>
+
+							<span class="figure-bust">
+								<div class="value-section">
+									<span class="value-label">Bust</span>
+
+									<select
+										v-model="edits[item.key].bust"
+										class="select input"
+										placeholder="Bust"
+										:disabled="!editing.has(item.key)"
+									>
+										<option
+											:key="`${item.key}-bust-unknown`"
+											:value="null"
+										/>
+
+										<option
+											v-for="bust in bustSizes[figureUnits]"
+											:key="`${item.key}-bust-${bust}`"
+											:value="Array.isArray(bust) ? bust[0] : bust"
+										>{{ Array.isArray(bust) ? bust.join('/') : bust }}</option>
+									</select>
+								</div>
+							</span>
+						</div>
+
 						<div
 							v-if="item.type === 'place'"
 							class="place"
@@ -755,18 +797,12 @@ const fields = computed(() => [
 		},
 	},
 	{
-		key: 'height',
+		key: 'size',
-		type: 'number',
+		type: 'size',
-		value: actor.value.height?.metric,
+		value: {
-		unit: 'cm',
+			height: actor.value.height?.metric,
-		inline: true,
+			weight: actor.value.weight?.metric,
-	},
+		},
-	{
-		key: 'weight',
-		type: 'number',
-		value: actor.value.weight?.metric,
-		unit: 'kg',
-		inline: true,
 	},
 	{
 		key: 'figure',
@@ -866,8 +902,8 @@ const fields = computed(() => [
 		key: 'penis',
 		type: 'penis',
 		value: {
-			penisLength: actor.value.penisLength,
+			penisLength: actor.value.penisLength.imperial,
-			penisGirth: actor.value.penisGirth,
+			penisGirth: actor.value.penisGirth.imperial,
 			isCircumcised: actor.value.isCircumcised,
 		},
 	},
@@ -887,6 +923,7 @@ const comment = ref(null);
 const apply = ref(user.role !== 'user');
 const submitted = ref(false);
 
+const sizeUnits = ref('metric');
 const figureUnits = ref('us');
 const penisUnits = ref('imperial');
 

src/actors.js

@@ -49,6 +49,7 @@ const keyMap = {
 	penisGirth: 'penis_girth',
 	hasTattoos: 'has_tattoos',
 	hasPiercings: 'has_piercings',
+	isCircumcised: 'circumcised',
 };
 
 export function curateActor(actor, context = {}) {
@@ -65,7 +66,6 @@ export function curateActor(actor, context = {}) {
 		cup: actor.cup,
 		waist: actor.waist,
 		hip: actor.hip,
-		circumcised: actor.circumcised,
 		height: actor.height && {
 			metric: actor.height,
 			imperial: unit(actor.height, 'cm').splitUnit(['ft', 'in']).map((value) => Math.round(value.toNumber())),
@@ -74,6 +74,14 @@ export function curateActor(actor, context = {}) {
 			metric: actor.weight,
 			imperial: Math.round(unit(actor.weight, 'kg').toNumeric('lbs')),
 		},
+		penisLength: actor.penis_length && {
+			metric: actor.penis_length,
+			imperial: Math.round(unit(actor.penis_length, 'cm').toNumeric('in')),
+		},
+		penisGirth: actor.penis_girth && {
+			metric: actor.penis_girth,
+			imperial: Math.round(unit(actor.penis_girth, 'cm').toNumeric('in')),
+		},
 		eyes: actor.eyes,
 		tattoos: actor.tattoos,
 		piercings: actor.piercings,
@@ -812,6 +820,16 @@ export async function createActorRevision(actorId, {
 			};
 		}
 
+		if (['penisLength', 'penisGirth'].includes(key) && options.penisUnits === 'imperial') {
+			const convertedValue = Math.round(convert(value, 'inches').to('cm'));
+
+			return {
+				key,
+				value: convertedValue,
+				comment: `${key} converted from ${value} inches to ${convertedValue} cm`,
+			};
+		}
+
 		return { key, value };
 	}).filter(Boolean);