pkp/pkp-lib#3594 Style option form fields

NateWr · May 30, 2018 · a2e9390 · a2e9390
1 parent 2a025c1
commit a2e9390
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 5 deletions.
diff --git a/src/components/Form/fields/FieldBase.vue b/src/components/Form/fields/FieldBase.vue
@@ -147,6 +147,7 @@ export default {
 
 .pkpFormField__description {
 	font-size: @font-sml;
+	line-height: 1.8em;
 }
 
 // Should be used for any text input and select fields to ensure consistency

diff --git a/src/components/Form/fields/FieldOptions.vue b/src/components/Form/fields/FieldOptions.vue
@@ -1,6 +1,6 @@
 <template>
 	<fieldset class="pkpFormField pkpFormField--options" :class="classes">
-		<legend>
+		<legend class="pkpFormField--options__legend">
 			{{ maybeLocalize(label, localeKey) }}
 			<span v-if="isRequired" class="pkpFormFieldLabel__required">
 				*
@@ -11,12 +11,12 @@
 			<help-button v-if="helpTopic" :id="describedByHelpId" :topic="helpTopic" :label="i18n.help" />
 		</legend>
 		<div v-if="description"
-			class="pkpFormField__description"
+			class="pkpFormField__description pkpFormField--options__description"
 			v-html="maybeLocalize(description, localeKey)"
 			:id="describedByDescriptionId"
 		/>
 		<div class="pkpFormField__control">
-			<label v-for="option in localizedOptions">
+			<label v-for="option in localizedOptions" class="pkpFormField--options__option">
 				<input
 					class="pkpFormField--options__input"
 					v-model="selectedValue"
@@ -106,4 +106,35 @@ export default {
 <style lang="less">
 @import '../../../styles/_import';
 
+.pkpFormField--options {
+	border: @bg-border;
+}
+
+.pkpFormField--options__legend {
+	padding: 0 @half;
+}
+
+.pkpFormField--options__description {
+	margin-bottom: @base;
+}
+
+.pkpFormField--options__option {
+	position: relative;
+	display: block;
+	padding-left: @base + @half;
+	font-size: @font-sml;
+	line-height: 1.8em;
+	cursor: pointer;
+
+	+ .pkpFormField--options__option {
+		margin-top: @half;
+	}
+}
+
+.pkpFormField--options__input {
+	position: absolute;
+	top: .9em;
+	left: 0;
+	transform: translateY(-50%);
+}
 </style>
diff --git a/src/docs/examples/Form/implementations/helpers/field-options-user-locales.js b/src/docs/examples/Form/implementations/helpers/field-options-user-locales.js
@@ -2,7 +2,7 @@ export default {
 	name: 'user-locales',
 	component: 'field-options',
 	label: 'Working Languages',
-	description: 'Disable language options that you can not use.',
+	description: 'We use this to adjust your email notifications and the information we request from you.',
 	value: [],
 	options: [
 		{

diff --git a/src/docs/examples/Form/implementations/helpers/group-preferences.js b/src/docs/examples/Form/implementations/helpers/group-preferences.js
@@ -1,5 +1,5 @@
 export default {
 	id: 'preferences',
 	label: 'Preferences',
-	description: 'Tailor how you would like interact with our journal.',
+	description: 'Tailor how you would like to interact with our journal.',
 };