Selaa lähdekoodia

Update fancy-input to use display-flex for root container element as well as setting width of container as well as sub-elements; update settings page to surround fancy-input in div container so that it takes up its own full line

sbkwgh 7 vuotta sitten
vanhempi
commit
d9d2e4539b

+ 2 - 1
frontend/src/components/FancyInput.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class='fancy_input'>
+	<div class='fancy_input' v-bind:style='{width: width || "auto"}'>
 		<div 
 			 style='position: relative; display: inline-block;'
 			 v-bind:style='{width: width || "10rem"}'
@@ -63,6 +63,7 @@
 	@import '../assets/scss/variables.scss';
 
 	.fancy_input {
+		display: inline-flex;
 		position: relative;
 		margin-top: 0.25rem;
 		margin-bottom: 0.5rem;

+ 16 - 12
frontend/src/components/routes/SettingsAccount.vue

@@ -15,18 +15,22 @@
 			<p class='p--condensed'>
 				For security, enter your current password
 			</p>
-			<fancy-input
-				placeholder='Current password'
-				v-model='password.current'
-				:error='password.errors["current password"]'
-				type='password'
-			></fancy-input>
-			<fancy-input
-				placeholder='New password'
-				v-model='password.new'
-				:error='password.errors["new password"]'
-				type='password'
-			></fancy-input>
+			<div>
+				<fancy-input
+					placeholder='Current password'
+					v-model='password.current'
+					:error='password.errors["current password"]'
+					type='password'
+				></fancy-input>
+			</div>
+			<div>
+				<fancy-input
+					placeholder='New password'
+					v-model='password.new'
+					:error='password.errors["new password"]'
+					type='password'
+				></fancy-input>
+			</div>
 			<loading-button
 				class='button button--green'
 				@click='savePassword'