lsm/initializr
1
0
Fork 0
mirror of https://gitee.com/dcren/initializr.git synced 2025-11-09 02:45:00 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Reorganize UI

Browse Source 
* move back project type and Boot version in form
* support for dependencies weight, group and keywords information
* hide non-essential info by default and show them when clicking on link
* add green top border in header
* add link to bring back simple version

See gh-145
This commit is contained in:
Brian Clozel
2015-10-01 13:37:05 +02:00
committed by Stephane Nicoll
parent ac970139e8
commit cdec30a664
3 changed files with 106 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
initializr/src/main/resources/static/css/spring.css
View File

@@ -6,23 +6,34 @@ body, h1, h2, h3 {
.start-header {
color: #eee;
background-color: #34302d;
height: auto;
padding: 0.8em 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
font-size: 25px;
text-align: center;
padding: 0.5em 0;
border-top: 4px solid #6db33f;
}
.start-header select {
font-size: 18px;
.start-header h1 {
text-transform: uppercase;
}
.start-header .help-block {
font-size: 0.6em;
.start-header small {
text-transform: none;
font-size: 50%;
}
.project-choice {
margin: 1em 0;
}
.project-choice select {
font-size: 22px;
}
#starters {
min-height: 3em;
}
button.btn-primary {
margin-top: 1em;
}
button kbd {
@@ -31,32 +42,6 @@ button kbd {
box-shadow: none;
}
.start-header button {
margin-top: 1em;
}
@media (min-width: 992px) {
.start-header button {
margin-top: 0;
}
}
.start-main {
margin-top: 270px;
}
@media (min-width: 768px) {
.start-main {
margin-top: 160px;
}
}
@media (min-width: 992px) {
.start-main {
margin-top: 110px;
}
}
input[type=text] {
font-family: monospace;
background-color: #fafafa;
@@ -77,6 +62,10 @@ input[type=text] {
margin-left: 0.2em;
}
.advanced {
margin: 1em 0;
}
/* autocomplete */
#autocomplete, .twitter-typeahead, .tt-hint {

23
initializr/src/main/resources/static/js/start.js
View File

@@ -94,6 +94,11 @@ $(function () {
var initializeSearchEngine = function (engine, bootVersion) {
$.getJSON("/ui/dependencies.json?version=" + bootVersion, function (data) {
engine.clear();
$.each(data.dependencies, function(idx, item) {
if(item.weight === undefined) {
item.weight = 0;
}
});
engine.add(data.dependencies);
});
};
@@ -108,14 +113,28 @@ $(function () {
refreshDependencies(this.value);
initializeSearchEngine(starters, this.value);
});
$(".tofullversion a").on("click", function() {
$(".full").removeClass("hidden");
$(".tofullversion").addClass("hidden");
$(".tosimpleversion").removeClass("hidden");
$("body").scrollTop(0);
return false;
});
$(".tosimpleversion a").on("click", function() {
$(".full").addClass("hidden");
$(".tofullversion").removeClass("hidden");
$(".tosimpleversion").addClass("hidden");
$("body").scrollTop(0);
return false;
});
var starters = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name', 'description'),
datumTokenizer: Bloodhound.tokenizers.obj.nonword('name', 'description', 'keywords', 'group'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function (obj) {
return obj.id;
},
sorter: function(a,b) {
return 0;
return b.weight - a.weight;
},
cache: false
});

99
initializr/src/main/resources/templates/home.html
View File

@@ -12,10 +12,15 @@
<body>
<form id="form" action="/starter.zip" method="get" role="form">
<div class="container-fluid">
<div class="row">
<div class="start-header">
<div class="row baseline form-inline">
<div class="form-group col-md-9">Generate a
<div class="row start-header">
<div class="container">
<h1>Spring Initializr <small>bootstrap your application now</small></h1>
</div>
</div>
<div class="container start-main">
<div class="row form-inline text-center">
<div class="form-group project-choice">
<h2>Generate a
<select tabindex="1" class="form-control" id="type" name="type">
<% types.content.each { %>
<option data-action="${it.action}" value="${it.id}" ${it.default==true ?
@@ -29,51 +34,46 @@
' selected' : ''}>${it.name}</option>
<% } %>
</select>
</div>
<div class="col-md-3">
<button tabindex="12" name="generate-project" type="submit" class="btn btn-lg btn-primary" role="button">
Generate Project
</button>
</div>
</h2>
</div>
</div>
</div>
<div class="container start-main">
<input id="baseDir" name="baseDir" type="hidden" value="${artifactId.content}">
<div class="row">
<h2>Project Metadata</h2>
<p>Artifact coordinates and packaging</p>
<div class="col-sm-12 col-md-6">
<h2>Project Metadata</h2>
<p>Artifact coordinates</p>
<div class="form-group">
<label for="groupId" class="control-label">${groupId.title}</label>
<input tabindex="3" id="groupId" class="form-control" type="text" value="${groupId.content}" name="groupId">
<input tabindex="3" id="groupId" class="form-control" type="text" value="${groupId.content}"
name="groupId">
</div>
<div class="form-group">
<label for="artifactId" class="control-label">${artifactId.title}</label>
<input tabindex="4" id="artifactId" class="form-control" type="text" value="${artifactId.content}"
<input tabindex="4" id="artifactId" class="form-control" type="text"
value="${artifactId.content}"
name="artifactId">
</div>
<div class="form-group">
<div class="form-group full hidden">
<label for="name" class="control-label">${name.title}</label>
<input tabindex="5" id="name" class="form-control" type="text" value="${name.content}" name="name">
<input tabindex="5" id="name" class="form-control" type="text" value="${name.content}"
name="name">
</div>
<div class="form-group">
<div class="form-group full hidden">
<label for="description" class="control-label">${description.title}</label>
<input tabindex="6" id="description" class="form-control" type="text"
value="${description.content}" name="description">
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<div class="form-group full hidden">
<label for="packageName" class="control-label">${packageName.title}</label>
<input tabindex="7" id="packageName" class="form-control" type="text" value="${packageName.content}"
<input tabindex="7" id="packageName" class="form-control" type="text"
value="${packageName.content}"
name="packageName">
</div>
<div class="form-group">
<div class="form-group full hidden">
<label for="packaging" class="control-label">${packagings.title}</label>
<select tabindex="8" class="form-control" id="packaging" name="packaging">
<% packagings.content.each { %>
@@ -82,15 +82,16 @@
<% } %>
</select>
</div>
<div class="form-group">
<div class="form-group full hidden">
<label for="javaVersion" class="control-label">${javaVersions.title}</label>
<select tabindex="9" class="form-control" name="javaVersion" id="javaVersion">
<% javaVersions.content.each { %>
<option value="${it.id}" ${it.default==true ? ' selected' : ''}>${it.name}</option>
<option value="${it.id}" ${it.default==true ?
' selected' : ''}>${it.name}</option>
<% } %>
</select>
</div>
<div class="form-group">
<div class="form-group full hidden">
<label for="language" class="control-label">${languages.title}</label>
<select tabindex="10" class="form-control" name="language" id="language">
<% languages.content.each { %>
@@ -100,25 +101,40 @@
</select>
</div>
</div>
</div>
<div class="row">
<h2>Dependencies</h2>
<div class="col-sm-12 col-md-6">
<h2>Dependencies</h2>
<p>Add Spring Boot Starters and dependencies to your application</p>
<p>Add Spring Boot Starters and dependencies to your application</p>
<div class="form-group col-md-6 col-sm-12">
<div class="form-group">
<input tabindex="11" id="autocomplete" class="form-control" type="text" placeholder="Search for Starters"
<label for="autocomplete" class="control-label">Search for dependencies</label>
<input tabindex="11" id="autocomplete" class="form-control" type="text"
placeholder="Web, Security, JPA, Actuator, Devtools..."
name="autocomplete">
</div>
</div>
<div class="form-group col-md-6 col-sm-12">
<div id="starters">
<div class="form-group">
<label for="starters" class="control-label">Selected Starters</label>
<div id="starters">
</div>
</div>
</div>
</div>
<div class="row hidden tosimpleversion">
<p>Too many options? <a href="#">Switch back to the simple version.</a></p>
</div>
<div class="row">
<div id="dependencies">
<p class="text-center">
<button tabindex="12" name="generate-project" type="submit" class="btn btn-lg btn-primary"
role="button">
Generate Project
</button>
</p>
</div>
<div class="row tofullversion">
<p>Don't know what to look for? Want more options? <a href="#">Switch to the full version.</a></p>
</div>
<div class="row">
<div id="dependencies" class="full hidden">
<% dependencies.content.each { %>
<div class="form-group col-sm-6">
<h3>${it.name}</h3>
@@ -135,9 +151,10 @@
<% } %>
</div>
</div>
<div class="row">
<div class="row full hidden">
<p class="text-center">
<button tabindex="14" name="generate-project" type="submit" class="btn btn-lg btn-primary" role="button">
<button tabindex="14" name="generate-project" type="submit" class="btn btn-lg btn-primary"
role="button">
Generate Project
</button>
</p>