Skip to content

Visual update idea #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hatefulcrawdad wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Visual update idea #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c3420a3
made sache bar sticky
hatefulcrawdad Feb 14, 2014
b27f09a
finished initial update, still need to check 404 and promote pages
hatefulcrawdad Feb 14, 2014
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
4 changes: 2 additions & 2 deletions app.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ class Extension < ActiveRecord::Base

post '/extensions' do
unless params[:project_url].empty?
#%r{github\.com[:/](.+?)/(.+?)(?:\.git|)$}i.match(params[:project_url])
#%r{github\.com[:/](.+?)/(.+?)(?:\.git|)$}i.match(params[:project_url])
begin
project_url = %r{github\.com[:/](.+?)/(.+?)(?:\.git)$}i.match(params[:project_url])
username = project_url[1]
Expand Down Expand Up @@ -163,7 +163,7 @@ class Extension < ActiveRecord::Base

def truncate w
words = w.split()
return words[0..40].join(' ') + (words.length > 40 ? '...' : '')
return words[0..30].join(' ') + (words.length > 40 ? '...' : '')
end

def sort_column
Expand Down
2 changes: 1 addition & 1 deletion app/css/main.css
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions app/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ $(function() {
$sachesearch = $('.sache-search input'),
fadeSpeed = 200;


// Close modaal method
var closeModal = function() {
$modalTarp.fadeOut(fadeSpeed);
$projectModal.removeClass('modal-open');
Expand Down Expand Up @@ -96,11 +98,12 @@ $(function() {
}
});

// Sortability
$("#main").on('click', 'th a', function() {

var el = $(this),
data = {sort: el.data('sort'), direction: el.data('direction')};

$.ajax({
url: '/',
data: data,
Expand All @@ -109,6 +112,6 @@ $(function() {
$("#main").html(table);
}
});
})
});

});
102 changes: 87 additions & 15 deletions sass/_extensions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,17 @@
// Feature cards

#featured {
margin-top: 30px;
margin-bottom: 50px;
@extend %container;

@include mq(medium) {
margin-top: 80px;
}

@include mq(xlarge) {
margin-top: 50px;
}
}

.featured-cards {
Expand All @@ -20,33 +29,43 @@
width: 100%;

@include mq(medium) {
padding: 0 px2em(16px) 0;
width: 33.333%;
height: 100%;
display: table-cell;
position: relative;
&:first-child {
padding-left: 0;
> span {
border-right: none;
@include border-left-radius($border-radius);
}
}
&:last-child {
padding-right: 0;
> span {
border-left: none;
@include border-right-radius($border-radius);
}
}
}

> span {
// The actual card
> span {
background-color: #fff;
display: block;
position: relative;
border: $border-style;
height: 100%;
@include border-radius($border-radius);
}
}

.card-title {
font-size: px2em(22px);
line-height: 1.5;
padding: 20px 20px 0;
padding: 20px 25px 0;
@extend %reset-margin-top;

table & {
padding-left: 25px;
}
}

.title-link {
Expand All @@ -62,7 +81,6 @@
}

table & {
// margin-top: -4px;
font-size: px2em(14px);
margin-bottom: 12px;

Expand All @@ -76,7 +94,7 @@
.card-description-wrapper {
overflow: hidden;
padding-bottom: px2em(16px);
padding: 0 20px 20px;
padding: 0 25px 25px;
@include box-sizing(content-box);

@include mq(medium) {
Expand Down Expand Up @@ -150,7 +168,19 @@
.author {
position: relative;
cursor: pointer;
border-right: solid 1px #eee;
border-right: none;

@include mq(small) {
border-right: solid 1px #eee;
}

@include mq(medium) {
border-right: none;
}

@include mq(large) {
border-right: solid 1px #eee;
}

&:before {
content: " ";
Expand All @@ -168,7 +198,6 @@
}

table & {
// line-height: 1.5;
border-right: none;
font-size: 13px;
}
Expand Down Expand Up @@ -247,7 +276,11 @@
@extend %container;

h3 {
margin-top: 80px;
margin-top: 30px;

@include mq(medium) {
margin-top: 80px;
}

small {
color: lighten($text-color, 40%);
Expand All @@ -262,16 +295,36 @@

table {
width: 100%;
margin: 0 0 100px;
margin: 0;
padding: 0 15px;

@include mq(medium) {
@include border-top-radius($border-radius);
@include box-shadow(0 0 0 1px #ddd);
background-color: #fff;
}

thead {
background-color: darken(#F8F8FA, 7%);
font-weight: bold;
border-bottom: $border-style;
border-radius: 5px !important;
@include mq-max($mq-medium - 1) {
display: none;
}

tr {
th:first-child {
padding-left: 25px;
@include border-top-left-radius($border-radius);
}
th:last-child {
@include border-top-right-radius($border-radius);
}
}

th {

text-align: left;
}

Expand All @@ -290,17 +343,31 @@
padding: 20px 10px;
@include mq(medium) {
&:first-child {
padding-left: 0
padding-left: 25px;
}
}
@include mq-max($mq-medium - 1) {
padding: 0;
}
}
tr {
&:last-child {
td:first-child {
@include border-bottom-left-radius($border-radius);
}
td:last-child {
@include border-bottom-right-radius($border-radius);
}
}

&:nth-child(even) {
background-color: #fcfcfc;
}
}
}

tr {
border-bottom: $border-style;
border-bottom: solid 1px #eee;
color: #888;
@include mq-max($mq-medium - 1) {
display: block;
Expand All @@ -309,6 +376,11 @@
margin-bottom: 20px;
@include border-radius($border-radius);
}
&:last-child {
@include mq(medium) {
border-bottom: none;
}
}
}

td {
Expand Down Expand Up @@ -340,7 +412,7 @@
position: absolute;
right: 8px;
top: 15px;
background: url('../img/arrows.svg') #fff -36px -2px no-repeat;
background: url('../img/arrows.svg') -36px -2px no-repeat;
background-size: 50px auto;
@include opacity(0.4);
}
Expand Down
1 change: 1 addition & 0 deletions sass/_globals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ body {
}

body {
background: #f8f8fa url('../img/circle-pattern.png') 50% 45% no-repeat;
font-size: px2em(16px);
}

Expand Down
44 changes: 35 additions & 9 deletions sass/_header_title.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,42 @@
// Title header area

header {
background: #f8f8fa url('../img/circle-pattern.png') 50% 45% no-repeat;
margin-bottom: px2em(30px);
padding: px2em(20px) $container-padding-default px2em(26px);
position: relative;
text-align: center;

@include mq(medium) {
padding: px2em(50px) $container-padding-large px2em(60px);
padding: px2em(110px) $container-padding-default px2em(60px);
text-align: left;
}

@include mq(large) {
padding: px2em(110px) $container-padding-large px2em(60px);
}

@include mq(xlarge) {
padding: px2em(80px) $container-padding-xlarge px2em(94px);
padding: px2em(140px) $container-padding-xlarge px2em(94px);
}

&.secondary {
padding-bottom: 0;
}
}

.page-title {
margin-bottom: px2em(4px);
margin-bottom: 0;
font-size: px2em(32px);
line-height: 1.3;
color: $text-color;
@extend %reset-margin-top;

@include mq(medium) {
font-size: px2em(40px);
font-size: px2em(30px);
}

@include mq(large) {
font-size: px2em(46px);
font-size: px2em(40px);
}
}

Expand All @@ -47,6 +56,8 @@ header {
font-weight: 300;
color: lighten($text-color, 42%);
margin-right: 5px;
position: relative;
top: 3px;

@include mq(medium) {
font-size: px2em(42px);
Expand All @@ -64,9 +75,10 @@ header {
}

.page-description {
font-size: px2em(14px);
font-size: px2em(15px);
color: $text-color;
margin-bottom: 0;
margin-bottom: 10px;
margin-top: 10px;
line-height: 1.5;

@include mq(medium) {
Expand All @@ -87,17 +99,31 @@ header {
}
}

.title-cta {
@include mq(medium) {
float: left;
}
}

.cta-button {
background-color: darken(#F8F8FA, 7%);
padding: 10px 30px 11px 30px;
font-weight: bold;
font-size: 16px;
margin-top: 10px;
margin-top: 12px;
display: inline-block;
color: lighten($text-color, 15%) !important;
@include border-radius(2px);
&:hover {
background-color: darken(#F8F8FA, 12%);
color: $text-color !important;
}

@include mq(medium) {
float: right;
}

@include mq(large) {
margin-top: 18px;
}
}
2 changes: 1 addition & 1 deletion sass/_helpers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ $sass-pink: #c6538c;
$link-blue: #7ca4ab;
$text-color: #706c69;
$sache-bar-height: 60px;
$border-radius: 2px;
$border-radius: 4px;
$footer-height: 200px;
$mq-small: 520px;
$mq-medium: 768px;
Expand Down
Loading