setup UX improvements

Author: HarveyKandola

embed/bindata_assetfs.go

@@ -1,13 +1,15 @@
-<div class="page-setup container-fluid padding-100">
+<div class="container page-setup padding-100">
 	<div class="row">
-		<div class="col-lg-3 col-md-3 col-sm-3">
+		<div class="col-4">
 			<div>
 				<img src="/assets/img/setup/logo.png" alt="Documize" class="no-select no-outline margin-top-20" />
 			</div>
 			<div class="margin-top-150">
 				<img src="/assets/img/setup/cogs.png" width="157" height="187" alt="Setup new database" class="no-select no-outline" />
 			</div>
 		</div>
-		{{documize-setup model=model save=(action 'save')}}
+		<div class="col-8">
+			{{documize-setup model=model save=(action 'save')}}
+		</div>
 	</div>
 </div>

gui/app/pods/setup/template.hbs

@@ -14,6 +14,13 @@
 		}
 	}
 
+	> .empty {
+		font-size: 1.2rem;
+		color: $color-gray;
+		font-weight: normal;
+		margin: 20px 0 50px 0;
+	}
+
 	> .list {
 		margin: 30px 0;
 		padding: 0;

gui/app/styles/view/spaces.scss

@@ -1,32 +1,32 @@
-<div class="col-lg-9 col-md-9 col-sm-9">
+<div class="col-9">
 	<h1>Let's setup Documize</h1>
 	<h3>Database: {{model.dbname}}</h3>
 	<form class="my-5" {{action "save" on="submit"}}>
 		<div class="form-group">
 			<label>Team</label>
-			{{focus-input id="siteTitle" type="text" value=model.title class=(if hasEmptyTitleError 'form-control error' 'form-control')}}
+			{{focus-input id="siteTitle" type="text" value=model.title class=(if hasEmptyTitleError 'form-control is-invalid' 'form-control')}}
 			<small class="form-text text-muted">What's your tribe called?</small>
 		</div>
 		<div class="form-group">
 			<label for="adminFirstname">Firstname</label>
-			{{input id="adminFirstname" type="text" value=model.firstname class=(if hasEmptyFirstnameError 'form-control error' 'form-control')}}
+			{{input id="adminFirstname" type="text" value=model.firstname class=(if hasEmptyFirstnameError 'form-control is-invalid' 'form-control')}}
 			<small class="form-text text-muted">What do people call you?</small>
 		</div>
 		<div class="form-group">
 			<label for="adminLastname">Lastname</label>
-			{{input id="adminLastname" type="text" value=model.lastname class=(if hasEmptyLastnameError 'form-control error' 'form-control')}}
+			{{input id="adminLastname" type="text" value=model.lastname class=(if hasEmptyLastnameError 'form-control is-invalid' 'form-control')}}
 			<small class="form-text text-muted">How the government refers to you</small>
 		</div>
 		<div class="form-group">
 			<label for="adminEmail">Email</label>
-			{{input id="adminEmail" type="email" value=model.email class=(if hasEmptyEmailError 'form-control error' 'form-control')}}
+			{{input id="adminEmail" type="email" value=model.email class=(if hasEmptyEmailError 'form-control is-invalid' 'form-control')}}
 			<small class="form-text text-muted">No spam. Ever.</small>
 		</div>
 		<div class="form-group">
 			<label for="adminPassword">Password</label>
-			{{input id="adminPassword" type="password" value=model.password class=(if hasEmptyPasswordError 'form-control error' 'form-control')}}
+			{{input id="adminPassword" type="password" value=model.password class=(if hasEmptyPasswordError 'form-control is-invalid' 'form-control')}}
 			<small class="form-text text-muted">Something you can remember without writing it down</small>
 		</div>
-		<button type="submit" class="btn bt-success mt-5" {{action 'save'}}>Setup</button>
+		<button type="submit" class="btn btn-success mt-5" {{action 'save'}}>Setup</button>
 	</form>
 </div>

gui/app/templates/components/documize-setup.hbs

@@ -6,7 +6,7 @@
 				<div class="view-spaces">
 					<div class="heading">EVERYONE <div class="counter">({{publicFolders.length}})</div></div>
 					{{#unless hasPublicFolders}}
-						<p>No global spaces</p>
+						<p class="empty">No global spaces</p>
 					{{/unless}}
 					<ul class="list clearfix">
 						{{#each publicFolders as |folder|}}
@@ -19,7 +19,7 @@
 					{{#if session.authenticated}}
 						<div class="heading">TEAM <div class="counter">({{protectedFolders.length}})</div></div>
 						{{#unless hasProtectedFolders}}
-							<p>No team spaces</p>
+							<p class="empty">No team spaces</p>
 						{{/unless}}
 						<ul class="list clearfix">
 							{{#each protectedFolders as |folder|}}
@@ -31,7 +31,7 @@
 
 						<div class="heading">PERSONAL <div class="counter">({{privateFolders.length}})</div></div>
 						{{#unless hasPrivateFolders}}
-							<p>No personal spaces</p>
+							<p class="empty">No personal spaces</p>
 						{{/unless}}
 						<ul class="list clearfix">
 							{{#each privateFolders as |folder|}}