Added bootstrap select for quick start

[#52044647]
This commit is contained in:
Kurtis Seebaldt and Nick Street
2013-08-14 17:47:24 +01:00
parent 04efbcf66f
commit 14aec887f0
8 changed files with 125 additions and 38 deletions
+2 -2
View File
@@ -12,7 +12,7 @@
<div class="item--body--version">
<div class="item--left-column">
<p><%= release.fullName %></p>
<div class="icon <%= release.statusIconClass() %>"></div>
<div class="spring-icon <%= release.statusIconClass() %>"></div>
</div>
<div class="item--right-column">
<a href='<%= release.refDocUrl %>' class="docs-link reference-link">Reference</a>
@@ -29,7 +29,7 @@
<script type="text/html" id="project-quickstart-selector-template">
<select class='selector selectpicker'>
<% _.each(releases, function(release, index) { %>
<option value="<%= index %>" data-content="<span><%= release.fullName %></span><div class='icon <%= release.statusIconClass() %>'/>"> ()</option>
<option value="<%= index %>" data-content="<span><%= release.shortName %></span><div class='spring-icon <%= release.statusIconClass() %>'/>"> ()</option>
<% }); %>
</select>
</script>
+1 -1
View File
@@ -1,5 +1,5 @@
---
main_site_url: http://springframework.io
main_site_url: http://localhost:8080
forum_url: http://forum.springframework.io
---
+79 -10
View File
@@ -88,11 +88,69 @@
width: 100%;
}
.bootstrap-select.btn-group button {
font-weight: 400;
font-family: "Varela Round", sans-serif;
border: 1px solid #34302d;
min-width: 100%;
background: none;
padding: 0;
}
.bootstrap-select.btn-group.open button {
background-color: #6db33f;
color: #f1f1f1;
}
.bootstrap-select.btn-group button .filter-option {
padding: 6px 0 6px 19px;
}
.bootstrap-select.btn-group.open button .filter-option {
padding: 7px 0 5px 20px;
}
.bootstrap-select.btn-group > button.dropdown-toggle {
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.bootstrap-select.btn-group > .dropdown-toggle .item-dropdown--icon {
background-color: #34302d;
color: #cbcaca;
padding: 10px;
}
.bootstrap-select.btn-group.open > .dropdown-toggle .item-dropdown--icon {
padding: 10px 10px 10px 9px;
}
.bootstrap-select.btn-group > .dropdown-menu {
padding: 0;
}
.bootstrap-select.btn-group .dropdown-menu {
min-width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #34302d;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
margin: 0;
border: none;
}
.bootstrap-select.btn-group .dropdown-menu li.selected {
background-color: black;
}
.bootstrap-select.btn-group .dropdown-menu.inner {
@@ -100,12 +158,6 @@
border: 0;
padding: 0;
margin: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.bootstrap-select.btn-group .dropdown-menu dt {
@@ -130,6 +182,22 @@
cursor: pointer;
}
.bootstrap-select.btn-group .dropdown-menu > li > a {
color: #f1f1f1;
font-size: 14px;
line-height: 19px;
}
.bootstrap-select.btn-group .dropdown-menu > li > a:hover {
background: none;
}
.bootstrap-select.btn-group .spring-icon {
vertical-align: top;
margin: 2px 0 0 6px;
}
.bootstrap-select.btn-group .dropdown-menu li > dt small {
font-weight: normal;
}
@@ -153,10 +221,11 @@
padding-left: 0.5em;
}
.bootstrap-select.btn-group .dropdown-menu li:not(.disabled) > a:hover small,
.bootstrap-select.btn-group .dropdown-menu li:not(.disabled) > a:focus small {
color: #64b1d8;
color: rgba(255,255,255,0.4);
.bootstrap-select.btn-group .dropdown-menu li:not(.disabled):hover,
.bootstrap-select.btn-group .dropdown-menu li:not(.disabled):focus {
background-color: rgba(0,0,0,0.3);
}
.bootstrap-select.btn-group .dropdown-menu li > dt small {
+2 -2
View File
@@ -81,9 +81,9 @@
createDropdown: function() {
var drop =
"<div class='btn-group bootstrap-select'>" +
"<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'>" +
"<button type='button' class='dropdown-toggle' data-toggle='dropdown'>" +
"<div class='item-dropdown--icon icon-reorder pull-right'></div>" +
"<div class='filter-option pull-left'></div>&nbsp;" +
"<div class='caret'></div>" +
"</button>" +
"<div class='dropdown-menu open'>" +
"<ul class='dropdown-menu inner' role='menu'>" +
+33 -17
View File
@@ -1,88 +1,104 @@
.icon {
.spring-icon {
background-image: url("../img/iconsprite.png");
background-repeat: no-repeat;
display: inline-block !important;
}
.icon.project--logo.logo-spring-framework {
.spring-icon.project--logo.logo-spring-framework {
width: 135px;
height: 133px;
background-position: -483px 0;
margin-top: 2px;
}
.icon.project--logo.logo-spring-security {
.spring-icon.project--logo.logo-spring-security {
width: 99px;
height: 137px;
background-position: -483px -161px;
}
.icon.project--logo.logo-spring-data {
.spring-icon.project--logo.logo-spring-data {
width: 111px;
height: 111px;
background-position: -483px -325px;
margin-top: 13px;
}
.icon.project--logo.logo-spring-batch {
.spring-icon.project--logo.logo-spring-batch {
width: 104px;
height: 108px;
background-position: -641px 0;
margin-top: 14px;
}
.icon.project--logo.logo-spring-integration {
.spring-icon.project--logo.logo-spring-integration {
width: 145px;
height: 104px;
background-position: -641px -161px;
margin-top: 16px;
}
.icon.project--logo.logo-spring-amqp {
.spring-icon.project--logo.logo-spring-amqp {
width: 109px;
height: 98px;
background-position: -641px -325px;
margin: 19px;
}
.icon.project--logo.logo-spring-default {
.spring-icon.project--logo.logo-spring-default {
width: 100px;
height: 100px;
background-position: -805px 0;
margin-top: 18px;
}
.icon.project--logo.logo-spring-mobile {
.spring-icon.project--logo.logo-spring-mobile {
width: 104px;
height: 137px;
background-position: -805px -161px;
}
.icon.project--logo.logo-spring-android {
.spring-icon.project--logo.logo-spring-android {
width: 104px;
height: 126px;
background-position: -805px -325px;
margin-top: 10px;
}
.icon.project--logo.logo-spring-social {
.spring-icon.project--logo.logo-spring-social {
width: 130px;
height: 100px;
background-position: -483px -481px;
margin-top: 18px;
}
.icon.icon-projects {
.spring-icon.spring-icon-projects {
width: 28px;
height: 28px;
background-position: -641px -481px;
}
.icon.icon-projects:hover {
.spring-icon.spring-icon-projects:hover {
background-position: -641px -521px;
}
.icon.icon-forum {
.spring-icon.spring-icon-forum {
width: 32px;
height: 32px;
background-position: -409px -450px;
}
.icon.icon-forum:hover {
.spring-icon.spring-icon-forum:hover {
background-position: -449px -450px;
}
.icon.icon-current-version {
.spring-icon.spring-icon-current-version {
height: 13px;
width: 42px;
background-position: -284px -520px;
}
.icon.icon-pre-release {
.spring-icon.spring-icon-pre-release {
height: 13px;
width: 23px;
background-position: -344px -520px;
+3 -1
View File
@@ -16,9 +16,11 @@ body {
#scrim {
display: none;
background-color: rgba(0,127,0,0.5);
}
#scrim.js-show {
display: block;
background-color: rgba(127,0,0,0.5);
position: absolute;
top: 0;
bottom: 0;
@@ -598,7 +600,7 @@ input.floating-input:focus {
color: #5fa134;
}
.item-dropdown-widget .item--dropdown {
display: none;
display: block;
}
.item-dropdown-widget.js-open {
z-index: 801;
+2 -2
View File
@@ -59,12 +59,12 @@ title: Your Project Name Here
</ul>
</div>
<div class="project-body--section">
<div class="row-fluid quickstart--container">
<div class="row-fluid quickstart--container">
<div class="quickstart--header js-item-dropdown-widget--wrapper">
<div class="quickstart--title">
Quick Start (TBD)
</div>
<div class="js-quickstart-selector"></div>
<div class="item-slider-widget js-item-slider--wrapper">
+3 -3
View File
@@ -46,11 +46,11 @@ Spring.Release = function(data) {
Spring.Release.prototype = {
statusIconClass: function() {
if (this.preRelease) {
return "icon-pre-release";
return "spring-icon-pre-release";
} else if (this.current) {
return "icon-current-version";
return "spring-icon-current-version";
} else {
return "icon-supported-version";
return "spring-icon-supported-version";
}
}
}