Merge pull request #2284 from hawkrives/tweaked-manual-picker

Tweaked manual creation screen

modules/gob-web/modules/student-picker/student-list-item.js

@@ -44,10 +44,14 @@ const DeleteButton = styled(FlatButton)`
 const GoIcon = styled(Icon)`
 	margin-left: 1em;
 	margin-right: 0.5em;
+	flex-shrink: 0;
 `
 
 const StudentName = styled.div`
 	line-height: 1.5;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 `
 
 const StudentAreas = styled.div`
@@ -69,6 +73,7 @@ const AreaName = styled.span`
 const StudentInfo = styled.span`
 	flex: 1;
 	margin-left: 0.5em;
+	max-width: 90%;
 `
 
 const ListItemLink = styled(Link)`
@@ -81,6 +86,7 @@ const ListItemLink = styled(Link)`
 	flex: 1;
 	display: flex;
 	align-items: center;
+	width: 100%;
 
 	padding: 0.75em 0.5em;
 	position: relative;

modules/gob-web/modules/student/student-summary.scss

@@ -36,21 +36,6 @@
 		font-style: italic;
 		line-height: 1.6em;
 	}
-
-	.autosize-input {
-		input {
-			background-color: transparent;
-			border: 0;
-			border-bottom: 1px solid var(--gray-400);
-			padding: 0 0 0 0.125em;
-
-			&:focus {
-				outline: 0;
-				background-color: var(--blue-50);
-				border-color: var(--blue-500);
-			}
-		}
-	}
 }
 
 .student-summary--editor {

modules/gob-web/package.json

@@ -55,7 +55,6 @@
     "react-document-title": "^2.0.3",
     "react-dom": "^16.5.2",
     "react-dropzone": "^6.0.2",
-    "react-input-autosize": "^2.2.1",
     "react-loadable": "^5.5.0",
     "react-modal": "^3.6.1",
     "react-redux": "^5.0.7",

modules/gob-web/screens/create/method-manual.js

@@ -4,10 +4,10 @@ import React from 'react'
 import {RaisedButton} from '../../components/button'
 import cx from 'classnames'
 import {Set} from 'immutable'
-import Autosize from 'react-input-autosize'
 import {connect} from 'react-redux'
 import {Student} from '@gob/object-student'
 import {Header} from './components'
+import uniqueId from 'lodash/uniqueId'
 import {
 	action as initStudent,
 	type ActionCreator as InitStudentFunc,
@@ -124,35 +124,15 @@ class ManualCreationScreen extends React.Component<Props, State> {
 		this.props.navigate(`/student/${student.id}`)
 	}
 
-	render() {
-		let nameEl = (
-			<Autosize
-				className="autosize-input"
-				value={this.state.name}
-				onChange={this.handleNameChange}
-			/>
-		)
-
-		let matriculationEl = (
-			<Autosize
-				className={cx('autosize-input', {
-					invalid: !this.state.matriculationIsValid,
-				})}
-				value={String(this.state.matriculation)}
-				onChange={this.handleMatriculationChange}
-			/>
-		)
+	onSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
+		event.preventDefault()
+	}
 
-		let graduationEl = (
-			<Autosize
-				className={cx('autosize-input', {
-					invalid: !this.state.graduationIsValid,
-				})}
-				value={String(this.state.graduation)}
-				onChange={this.handleGraduationChange}
-			/>
-		)
+	nameLabelId = `student-editor--${uniqueId()}`
+	matriculationLabelId = `student-editor--${uniqueId()}`
+	graduationLabelId = `student-editor--${uniqueId()}`
 
+	render() {
 		return (
 			<div className="manual">
 				<Header>
@@ -163,12 +143,39 @@ class ManualCreationScreen extends React.Component<Props, State> {
 					<pre className="errors">{this.state.error}</pre>
 				)}
 
-				<div className="intro">
-					Hi! My name is {nameEl}.<br />I matriculated in{' '}
-					{matriculationEl}, and I plan to graduate in {graduationEl}.
-				</div>
+				<form onSubmit={this.onSubmit} className="student-editor">
+					<label htmlFor={this.nameLabelId}>Name:</label>
+					<input
+						id={this.nameLabelId}
+						onChange={this.handleNameChange}
+						onBlur={this.onSubmit}
+						value={this.state.name}
+					/>
+
+					<label htmlFor={this.matriculationLabelId}>
+						Matriculation:
+					</label>
+					<input
+						id={this.matriculationLabelId}
+						onChange={this.handleMatriculationChange}
+						onBlur={this.onSubmit}
+						value={this.state.matriculation}
+						type="number"
+						className={cx({
+							invalid: !this.state.matriculationIsValid,
+						})}
+					/>
+
+					<label htmlFor={this.graduationLabelId}>Graduation:</label>
+					<input
+						id={this.graduationLabelId}
+						onChange={this.handleGraduationChange}
+						onBlur={this.onSubmit}
+						value={this.state.graduation}
+						type="number"
+						className={cx({invalid: !this.state.graduationIsValid})}
+					/>
 
-				<div className="areas">
 					<AreaPicker
 						label="Degrees"
 						type="degree"
@@ -205,6 +212,12 @@ class ManualCreationScreen extends React.Component<Props, State> {
 						}
 						availableThrough={this.state.graduation}
 					/>
+				</form>
+
+				<div className="intro">
+					Hi! My name is {this.state.name}.<br />I matriculated in{' '}
+					{String(this.state.matriculation)}, and I plan to graduate
+					in {String(this.state.graduation)}.
 				</div>
 
 				<div className="actions">

modules/gob-web/screens/create/method-manual.scss

@@ -1,36 +1,44 @@
 @import '../../styles/variables.scss';
 
-.manual .autosize-input > input {
-	border: 0;
-	border-bottom: 1px solid $gray-400;
-	// padding: 0 0.125em 0 0;
-	padding: 0 0.0625em 0 0.125em;
-
-	&:focus {
-		outline: 0;
-		background-color: $blue-50;
-		border-bottom-color: $blue-400;
-	}
-}
-
-.manual .invalid > input {
-	border-color: red;
-}
-
-.manual .areas {
+.manual .student-editor {
 	display: grid;
 	grid-template-columns: max-content 1fr;
+	align-items: center;
 	grid-column-gap: 1em;
 	grid-row-gap: 1em;
-	align-items: center;
+
+	padding-left: 0.5em;
+	padding-right: 0.25em;
+	margin-bottom: 1em;
 
 	label {
 		grid-column: 1;
 		text-align: right;
 	}
-	.react-select {
+
+	.react-select,
+	input {
 		grid-column: 2;
 	}
+
+	& > input {
+		width: 100%;
+		border-radius: 0.2em;
+		padding: 6px 10px;
+		border: solid 1px hsl(0, 0%, 80%); // custom color to match react-select
+
+		--edge-color: var(--blue-500);
+
+		&:focus {
+			box-shadow: var(--edge-color) 0 0 0 1px;
+			border-color: var(--edge-color);
+			outline: 0;
+		}
+
+		&.invalid {
+			--edge-color: var(--red-500);
+		}
+	}
 }
 
 .manual .intro {

modules/gob-web/screens/student/share-student.js

@@ -23,7 +23,7 @@ type State = {
 
 const SizedCard = styled(Card)`
 	width: 300px;
-	height: 200px;
+	min-height: 200px;
 
 	margin: auto;
 	padding: 1em;