Skip to content
This repository has been archived by the owner on Mar 22, 2019. It is now read-only.

Frontpage improvements #3648

Merged
merged 1 commit into from
Oct 20, 2018
Merged

Frontpage improvements #3648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 11 additions & 24 deletions source/about.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,6 @@ title: "A framework for ambitious web developers"
responsive: true
---
<% content_for :foot do %>
<script type="text/javascript">
$(function() {
$('#slider').bxSlider({
displaySlideQty: 4,
moveSlideQty: 4,
auto: true,
pager: true,
speed: 700,
pause: 5000
});

// Hack to force proper sizing
$('.bx-wrapper, .bx-window').css('width', 940);
});
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
Expand Down Expand Up @@ -58,33 +43,35 @@ responsive: true
<div class="feature">
<div class="structure feature-img"></div>
<p>No need to waste time on trivial choices. Ember's abstractions allow developers to focus on what makes your app <i>unique</i>.</p>

</div>
<div class="feature">
<div class="productivity feature-img"></div>
<p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help developers <i>efficiently</i> get the job done.</p>


</div>
</div>
<div class="users section">
<h2 class="text-center">Who's Using Ember.js?</h2>
<div class="surround">
<ul id="slider">
<% data.users.slice(0,12).each do |user| %>
<% data.users.slice(0,4).each do |user| %>
<li class="user">
<a href="<%= user.url %>" rel="nofollow">
<img src="/images/about/<%= user.image %>" width="210" height="103" alt="<%= user.alt %>"/>
</a>
</li>
<% end %>
<% data.users.slice(4,4).each do |user| %>
<li class="user desktop-only">
<a href="<%= user.url %>" rel="nofollow">
<img src="/images/about/<%= user.image %>" width="210" height="103" alt="<%= user.alt %>"/>
</a>
</li>
<% end %>
</ul>
</div>
<div class="about__listing-button">
<a class="ember-button ember-button--centered" href="/ember-users">
Meet More Users
</a>
</div>
<a class="ember-button ember-button--centered" href="/ember-users">
Meet More Users
</a>
</div>
<div class="gears section">
<h2 class="text-center">Buy Ember.js Gear and Support Development</h2>
Expand Down
190 changes: 44 additions & 146 deletions source/stylesheets/pages/about.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,7 @@

.section {
overflow: hidden;
table.columns {
margin: 0 auto;
td {
vertical-align: top;
padding-right: 50px;
}
}
margin: 4rem 0;
}

.features.section {
Expand Down Expand Up @@ -52,166 +46,68 @@
}

#content .users.section {
align-items: center;
display: flex;
flex-direction: column;

h2 {
margin-bottom: 2rem;
}

.surround {
@include clearfix;
background-color: #FFF;
background-color: #fff;
border-radius: 3px;
border: 1px solid #d1d1d1;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 0 #fff;
margin: 0 auto;
max-width: 100%;
// padding-top: 19px;
width: 940px;
margin: 0 2rem 2rem 2rem;
max-width: 940px;
padding: 1rem;

a:hover {
border: 0;
}

ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
}

.bx-wrapper,
.bx-window {
width: 940px;
max-width: 100%;
}

.bx-wrapper {

.bx-prev,
.bx-next {
background: no-repeat;
@include hidpi('about/carousel_controls', png);
float: left;
height: 28px;
width: 30px;
@media screen and (min-width: 958px) {
justify-content: space-between;
}

.bx-prev,
.bx-next,
.pager-link {
text-indent: -9999px;
}

.bx-prev {
background-position: left;
border-right: 1px solid #d1d1d1;
float: right;
position: absolute;
bottom: 0;
left: 0;
}

.bx-next {
background-position: right;
border-left: 1px solid #d1d1d1;
float: right;
position: absolute;
bottom: 0;
right: 1px;
}

.bx-window {
border-bottom: 1px solid #d1d1d1;
height: 124px;
.user.pager {
margin: 11px !important;
min-width: 177px;
}
}

.bx-pager {
@include clearfix;
background: bottom repeat-x #f4f4f4;
@include hidpi('about/carousel_pager_bg', png);
border-left: 1px solid #fafafa;
border-right: 1px solid #fafafa;
border-top: 1px solid #fefefe;
font-size: 0;
height: 28px;
line-height: 0;
margin: 0 29px;
padding-top: 9px;
text-align: center;

.pager-link {
background: 0 0 no-repeat;
@include hidpi('about/carousel_dots', png);
height: 11px;
width: 10px;
margin-left: 10px;
display: inline-block;

&.pager-active,
&.pager-active:hover {
background-position: -22px 0;
}

&:hover {
background-position: -11px 0;
}

&:first-of-type {
margin-left: 0;
}
}
}
}
}

.user {
position: relative;
float: left;
@media screen and (min-width: 0px) and (max-width:767px) {
width: 175px;
}
@media screen and (min-width:768px) {
width: 230px;
}

&.empty {
display: block;
height: 210px;
visibility: hidden; /*Take up space, but be invisible*/
}

a {
display: block;
height: 103px;
margin-left: 20px;
width: 210px;
}
}

p {
text-align: center;
.user a {
display: block;
height: 103px;
width: 210px;
}

.listed {
padding-top: 20px;
display:block;
margin: 0 auto;
width: 100%;
@media screen and (max-width: 767px) {
.desktop-only {
display: none;
}
}
}

.gears.section {
display: block;
clear: both;
max-width: 100%;
margin: 0 auto;

h2 {
margin-bottom: 2rem;
}

.gear {
text-align: center;
height: 120px;
max-width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 2rem;

a {
display: inline-block;
img {
display: block;
max-width: 100%;
margin: 0 auto;
}
margin: 0 0.5rem;
}
}
}
Expand Down Expand Up @@ -298,17 +194,19 @@ a.toc-anchor {
}

.about__listing-button-group {
width: 100%;
align-content: center;
display: flex;
justify-content: center;
align-content: center;
@media screen and (min-width:0) and (max-width: 991px) {
width: 100%;

@media screen and (max-width: 991px) {
flex-flow: row wrap;
}
}
.about__listing-button {
margin: 10px 10px 0 10px;
@media screen and (min-width:0) and (max-width: 991px) {
margin: 0 10px;

@media screen and (max-width: 991px) {
min-width: 100%;
margin: 10px auto;
}
Expand Down
18 changes: 0 additions & 18 deletions source/stylesheets/pages/resources.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,21 +145,3 @@ body.community_resources #content {
text-align: center;
}
}

.gears.section {
.gear {
text-align: center;
height: 120px;

.gearplus {
padding: 0px 30px 0px 30px;
display: inline;
line-height: 120px;

img {
vertical-align: top;
padding-top: 50px;
}
}
}
}