Added style and improved logic for add community station.

frontend/app/js/components/CustomInput.jsx

@@ -56,6 +56,16 @@ const dictionary = {
 			format: t("general:invalidCodeFormat"),
 		},
 	},
+	stationName: {
+		inputType: "text",
+		minLength: 2,
+		maxLength: 16,
+		regex: regex.az09_,
+		errors: {
+			//format: t("general:invalidUsernameFormat", { characters: `a-z, A-Z, 0-9${ t("general:and") } _` }),
+			format: "Invalid name format",
+		},
+	},
 	stationDisplayName: {
 		inputType: "text",
 		minLength: 2,
@@ -70,6 +80,7 @@ const dictionary = {
 		inputType: "text",
 		minLength: 2,
 		maxLength: 200,
+		isTextarea: true,
 		errors: {
 			//format: t("general:invalidUsernameFormat", { characters: `a-z, A-Z, 0-9${ t("general:and") } _` }),
 			format: "Invalid description format",
@@ -82,6 +93,7 @@ export default class CustomInput extends Component {
 		type: PropTypes.string,
 		name: PropTypes.string,
 		label: PropTypes.string,
+		showLabel: PropTypes.boolean,
 		placeholder: PropTypes.string,
 		onRef: PropTypes.func,
 	};
@@ -90,6 +102,7 @@ export default class CustomInput extends Component {
 		type: "",
 		name: "",
 		label: "",
+		showLabel: true,
 		placeholder: "",
 		valid: false,
 		onRef: () => {},
@@ -127,6 +140,7 @@ export default class CustomInput extends Component {
 
 		this.state = {
 			inputType: dictionary[props.type].inputType,
+			isTextarea: (typeof dictionary[props.type].isTextarea === "boolean") ? dictionary[props.type].isTextarea : false,
 			value: "",
 			original: "",
 			errors: [],
@@ -213,10 +227,12 @@ export default class CustomInput extends Component {
 	};
 
 	render() {
+		const ElementType = (!this.state.isTextarea) ? "input" : "textarea";
+
 		return (
 			<label htmlFor={ this.props.name }>
-				<span>{ this.props.label }</span>
-				<input
+				{(this.props.showLabel) ? <span>{ this.props.label }</span> : null}
+				<ElementType
 					placeholder={ this.props.placeholder }
 					type={ this.state.inputType }
 					name={ this.props.name }

frontend/app/js/views/Home/index.jsx

@@ -163,14 +163,15 @@ export default class Homepage extends Component {
 			this.messages.clearAddError(this.props.t("general:someFieldsAreIncorrectError"));
 		} else {
 			io.getSocket(socket => {
+				//TODO Add private value
 				socket.emit("stations.create", {
-					name: this.input.title.getValue().toLowerCase(),
+					name: this.input.stationName.getValue(),
 					type: "community",
-					displayName: this.input.title.getValue(),
-					description: this.input.description.getValue(),
+					displayName: this.input.stationDisplayName.getValue(),
+					description: this.input.stationDescription.getValue(),
 				}, res => {
 					if (res.status === "success") {
-						location.href = "/community/" + this.input.title.getValue().toLowerCase();//TODO Remove
+						location.href = "/community/" + this.input.stationName.getValue();//TODO Remove
 					} else {
 						this.messages.addError(res.message);
 					}
@@ -196,13 +197,20 @@ export default class Homepage extends Component {
 				<div className="community-stations stations">
 					{ (this.props.loggedIn) ? (
 						<div className="station-card">
-							<div className="station-media">
-								<img src="/assets/images/notes-transparent.png"/>
+							<div className="station-media station-media-icon">
+								<i className="material-icons" title="Add community station" onClick={ this.createCommunity }>add</i>
+							</div>
+							<div className="station-body">
+								<CustomInput key="stationDisplayName" type="stationDisplayName" name="stationDisplayName" showLabel={ false } placeholder="DisplayNameHere" onRef={ ref => (this.input.stationDisplayName = ref) } />
+								<CustomInput key="stationDescription" type="stationDescription" name="stationDescription" showLabel={ false } placeholder="Description here." onRef={ ref => (this.input.stationDescription = ref) } />
+							</div>
+							<div className="station-footer">
+								<div className="nameContainer">
+									<span>musare.com/c/</span>
+									<CustomInput key="stationName" type="stationName" name="stationName" showLabel={ false } placeholder="name_here" onRef={ ref => (this.input.stationName = ref) } />
+								</div>
+								{(this.state.createStation.private) ? <i className="material-icons" title="Make this station public" onClick={ this.togglePrivate }>lock</i> : <i className="material-icons active" title="Make this station private" onClick={ this.togglePrivate }>lock</i>}
 							</div>
-							<CustomInput type="stationDisplayName" name="title" label="Title" placeholder="Title" onRef={ ref => (this.input.title = ref) } />
-							<CustomInput type="stationDescription" name="description" label="Description" placeholder="Description" onRef={ ref => (this.input.description = ref) } />
-							<span onClick={this.togglePrivate}>Private</span>
-							<button onClick={this.createCommunity}>Add</button>
 						</div>
 					) : null }
 					{ this.listStations("community") }

frontend/app/styles/home.scss

@@ -1,5 +1,6 @@
 @import "colors";
 @import "breakpoints";
+@import "specific/form";
 
 main#homepage {
 	width: calc(100% - 24px);
@@ -12,8 +13,6 @@ main#homepage {
 		justify-content: center;
 		margin: -12px -12px 12px -12px;
 
-		//TODO Look into issue where margin-left might mess some stuff up sometimes for station-cards.
-
 		.station-card {
 			width: 296px;
 			background-color: $musare_color_white;
@@ -33,6 +32,17 @@ main#homepage {
 				}
 			}
 
+			.station-media-icon {
+				background-color: $musare_color_primary_blue;
+				color: #EFEFEF; //TODO Change this color and figure out proper sizes
+
+				> * {
+					font-size: 296px;
+					cursor: pointer;
+					user-select: none;
+				}
+			}
+
 			.station-body {
 				padding: 20px;
 				display: block;
@@ -48,11 +58,50 @@ main#homepage {
 					font-size: 15px;
 					line-height: 20px;
 					font-weight: 300;
+					height: 60px;
+					display: block;
+				}
+
+				label:first-child {
+					margin-bottom: 6px;
+
+					input {
+						border: 0;
+						padding: 0;
+						font-size: 23px;
+						line-height: 31px;
+						height: 31px;
+
+						color: $musare_color_primary_gray;
+
+						@include forPlaceholder() {
+							opacity: .75;
+						}
+					}
+				}
+
+				label:last-child {
+					margin-bottom: 0;
+
+					textarea {
+						border: 0;
+						padding: 0;
+						font-size: 15px;
+						line-height: 20px;
+						height: 60px;
+						font-weight: 300;
+
+						color: $musare_color_primary_gray;
+
+						@include forPlaceholder() {
+							opacity: .75;
+						}
+					}
 				}
 			}
 
 			.station-footer {
-				padding: 20px;
+				padding: 0 20px 20px 20px;
 				display: flex;
 				align-items: flex-end;
 				justify-content: space-between;
@@ -71,6 +120,44 @@ main#homepage {
 						line-height: 27px;
 					}
 				}
+
+				.nameContainer {
+					display: flex;
+					padding-top: 3px;
+
+					span {
+						font-size: 16px;
+						line-height: 21px;
+						height: 21px;
+					}
+
+					label {
+						margin-bottom: 0;
+
+						input {
+							border: 0;
+							padding: 0;
+							font-size: 16px;
+							line-height: 21px;
+
+							color: $musare_color_primary_gray;
+
+							@include forPlaceholder() {
+								opacity: .75;
+							}
+						}
+					}
+				}
+
+				i {
+					margin-left: 10px;
+					cursor: pointer;
+					user-select: none;
+
+					&.active {
+						color: $musare_color_primary_blue;
+					}
+				}
 			}
 
 			> a {

frontend/app/styles/specific/form.scss

@@ -14,7 +14,7 @@ label {
 		margin-bottom: 5px;
 	}
 
-	input {
+	input, textarea {
 		display: block;
 		box-sizing: border-box;
 		width: 100%;
@@ -22,6 +22,7 @@ label {
 		font-size: 15px;
 		line-height: 20px;
 		padding: 10px;
+		resize: none;
 
 		&.has-validation-errors {
 			border-color: $musare_color_primary_red;
@@ -36,4 +37,18 @@ label {
 		font-size: 12px;
 		line-height: 16px;
 	}
+}
+
+@mixin forPlaceholder() {
+	&::placeholder, &::-webkit-input-placeholder {
+		@content;
+	}
+
+	&:-moz-placeholder, &::-moz-placeholder {
+		@content;
+	}
+
+	&:-ms-input-placeholder, &::-ms-input-placeholder {
+		@content;
+	}
 }