diff --git a/app/assets/javascripts/local.js b/app/assets/javascripts/local.js index caee771..5bc13e1 100644 --- a/app/assets/javascripts/local.js +++ b/app/assets/javascripts/local.js @@ -151,9 +151,13 @@ $(function() { }, 2000); }); + $user_tabs = $("#user-profile .tabs"); + // User page - $("#user-profile li a").click(function(){ - $("#user-data").fadeOut("fast"); + $("#user-profile li a").click(function() { + $user_tabs.find("li").removeClass("activeli"); + $(this).parent().addClass("activeli"); + $.ajax({ type: "GET", url: window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + ".js?page=" + $(this).attr('id'), diff --git a/app/assets/stylesheets/_variables.scss b/app/assets/stylesheets/_variables.scss index 92062df..4c10de5 100644 --- a/app/assets/stylesheets/_variables.scss +++ b/app/assets/stylesheets/_variables.scss @@ -40,24 +40,24 @@ $header-font-family: $montserrat; $base-font-size: 1em; $base-line-height: $base-font-size * 1.5; -$base-border-radius: em(3); +$base-border-radius: em(5); /* Colours */ $red: #de8650; -$green: #68cc90; -$blue: #0A8FC8; -$purple: #6a5a8c; +$green: darken(#68cc90, 10); +$blue: darken(#0A8FC8, 10); $gold: #FFD700; -$dark-blue: #0072A6; +$dark-blue: darken(#0072A6, 10); +$deep-blue: darken(#12526E, 10); $dark-gray: #21262A; $medium-gray: #2F383D; -$light-blue: #2FB0E7; +$light-blue: darken(#2FB0E7, 10); $light-gray: #ECF1F5; $light-red: #e56c69; $light-yellow: #FFF6BF; @@ -102,6 +102,7 @@ $input-text: #232323; $input-border-width: em(2); $input-border-colour: darken($light-gray, 10%); $input-padding: em(11); +$input-border-radius: $base-border-radius; $input-dark-background-colour: $medium-gray; $input-dark-border-colour: $light-gray; diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 7319d3f..dd27d4f 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -19,6 +19,7 @@ Layout */ +@import "layout/hacks"; @import "layout/body"; @import "layout/typography"; @import "layout/header"; diff --git a/app/assets/stylesheets/components/_comments.scss b/app/assets/stylesheets/components/_comments.scss index d490bbb..bbdc4f7 100644 --- a/app/assets/stylesheets/components/_comments.scss +++ b/app/assets/stylesheets/components/_comments.scss @@ -29,7 +29,7 @@ $comment-detail-color: transparentize($comment-color, .5); $comment-image-vert-alignment: top; - display: table; + position: relative; width: 100%; margin-bottom: $base-line-height; padding-bottom: 1em; @@ -90,11 +90,12 @@ font-style: italic; font-size: .9em; color: $comment-detail-color; + margin-top: em(10); } .controls { position: absolute; - top: 0; + top: - em(5); right: 0; } } diff --git a/app/assets/stylesheets/components/_forms.scss b/app/assets/stylesheets/components/_forms.scss index aaf9785..3276900 100644 --- a/app/assets/stylesheets/components/_forms.scss +++ b/app/assets/stylesheets/components/_forms.scss @@ -41,6 +41,7 @@ form { .select-wrapper { $select-padding: em(7); + border-radius: $input-border-radius; background-color: $input-primary; border: $input-border-colour solid $input-border-width; position: relative; @@ -92,7 +93,7 @@ form { border: $input-border-width solid lighten($input-secondary, 20%); &:after { - border-left: $input-border-width solid $input-secondary; + border-left: $input-border-width solid lighten($input-secondary, 20%); color: $base-font-color; } } @@ -107,10 +108,11 @@ form { input[type=password], input[type=email], textarea { + border-radius: $input-border-radius; background-color: $input-primary; color: $input-text; font-size: $input-font-size; - padding: $input-padding; + padding: 0 $input-padding; height: em(40); border: $input-border-colour solid $input-border-width; @@ -122,10 +124,24 @@ form { border: $input-border-width solid $input-secondary; outline: none; } + + &[disabled] { + + &:hover { + border-color: $input-border-colour; + cursor: not-allowed; + } + } + } + + textarea { + padding: $input-padding; + font-family: $open-sans; } input[type=checkbox] { @include appearance(none); + border-radius: $input-border-radius; width: em(40); height: em(40); font-size: $input-font-size; @@ -174,7 +190,9 @@ form { button, input[type=submit] { - @include button($button-secondary); + @include button($button-primary); + border-radius: $input-border-radius; + border: $input-border-width solid $button-primary; margin-bottom: 0; outline: none; } @@ -258,6 +276,23 @@ form.square { width: 100%; } } + + + &.wide { + + > .field_with_errors { + width: 100%; + } + + label { + width: 100%; + } + + textarea, + .mceLayout { + width: 100%; + } + } } .controls { diff --git a/app/assets/stylesheets/components/_shoutbox.scss b/app/assets/stylesheets/components/_shoutbox.scss index e9d749b..bc6f609 100644 --- a/app/assets/stylesheets/components/_shoutbox.scss +++ b/app/assets/stylesheets/components/_shoutbox.scss @@ -8,7 +8,7 @@ .timestamp { font-size: em(14); border-radius: em(3); - background: $light-blue; + background: $blue; color: white; display: inline-block; font-style: italic; diff --git a/app/assets/stylesheets/components/_tables.scss b/app/assets/stylesheets/components/_tables.scss index 31e78f4..cd08ecd 100644 --- a/app/assets/stylesheets/components/_tables.scss +++ b/app/assets/stylesheets/components/_tables.scss @@ -1,3 +1,7 @@ +/* + Generic Tables +*/ + table { border-collapse: collapse; margin: ($base-line-height / 2) 0; @@ -20,3 +24,17 @@ td { tr, td, th { vertical-align: middle; } + +table.striped > tbody { + > tr > td:first-child { + padding-left: ($base-line-height / 2); + } + + > tr > td:last-child { + padding-right: ($base-line-height / 2); + } + + > tr:nth-child(2n) td { + background-color: transparentize($light-blue, 0.9); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/_tabs.scss b/app/assets/stylesheets/components/_tabs.scss index f7e8849..94c6429 100644 --- a/app/assets/stylesheets/components/_tabs.scss +++ b/app/assets/stylesheets/components/_tabs.scss @@ -19,7 +19,7 @@ li { float: left; display: block; - background-color: $light-blue; + background-color: $blue; a { border: $tabs-border-width solid $tabs-border-colour; @@ -28,6 +28,10 @@ float: left; display: block; color: white; + + &:hover { + cursor: pointer; + } } &:last-child a { @@ -36,7 +40,7 @@ &.activeli { z-index: 100; - background-color: $blue; + background-color: $light-blue; a { padding-bottom: $tabs-padding-vertical + $tabs-border-width; diff --git a/app/assets/stylesheets/layout/_body.scss b/app/assets/stylesheets/layout/_body.scss index 5bd8990..556ef98 100644 --- a/app/assets/stylesheets/layout/_body.scss +++ b/app/assets/stylesheets/layout/_body.scss @@ -2,7 +2,7 @@ Main Containers */ -$container-padding: em(20); +$container-padding: em(30); html, body { @@ -79,4 +79,25 @@ h1, h2, h3, h4, h5, h6 { z-index: 1; } } -} \ No newline at end of file +} + +/* + Text +*/ + +#main { + ul.disc, + ol { + list-style-type: disc; + margin: em(20) 0; + + li { + margin-left: em(40); + display: list-item; + } + } + + ol { + list-style-type: decimal; + } +} diff --git a/app/assets/stylesheets/layout/_hacks.scss b/app/assets/stylesheets/layout/_hacks.scss new file mode 100644 index 0000000..ca49d1e --- /dev/null +++ b/app/assets/stylesheets/layout/_hacks.scss @@ -0,0 +1,9 @@ +/* + Firefox select hacks +*/ + +select { + -moz-appearance: none; + text-indent: 0.01px; + text-overflow: ''; +} \ No newline at end of file diff --git a/app/assets/stylesheets/layout/_header.scss b/app/assets/stylesheets/layout/_header.scss index b915b17..125517a 100644 --- a/app/assets/stylesheets/layout/_header.scss +++ b/app/assets/stylesheets/layout/_header.scss @@ -1,116 +1,9 @@ -nav.top { - $navigation-background: $medium-gray; - $navigation-color: transparentize(white, 0.3); - $navigation-color-hover: white; - $navigation-height: em(40); - - background-color: $navigation-background; - border-bottom: 1px solid $medium-gray; - font-family: $montserrat; - height: $navigation-height; - width: 100%; - z-index: 999; - - .menu-wrapper { - @include outer-container; - position: relative; - z-index: 9999; - } - - .navigation-menu-button { - color: $navigation-color; - cursor: pointer; - display: block; - float: right; - font-family: $montserrat; - font-weight: 700; - line-height: $navigation-height; - margin: 0; - padding-right: 1em; - text-transform: uppercase; - - @include media ($large-screen) { - display: none; - } - - &:hover { - color: $navigation-color-hover; - } - } - - .nav { - @include media ($large-screen) { - float: left; - } - } - - #navigation-menu { - @include span-columns(12); - - .gathers { - @include span-columns(6); - } - - .pages { - @include span-columns(6); - @include omega; - - text-align: right; - - li:last-child { - padding-right: 0; - } - } - } - - #navigation-menu ul { - -webkit-transform-style: preserve-3d; // stop webkit flicker - display: none; - margin: 0 auto; - overflow: hidden; - padding: 0; - width: 100%; - z-index: 9999; - - @include media ($large-screen) { - display: block; - margin: 0; - padding: 0; - } - } - - ul li { - background: $navigation-background; - display: block; - line-height: $navigation-height; - overflow: hidden; - padding-right: .8em; - text-align: right; - width: 100%; - z-index: 9999; - - @include media ($large-screen) { - background: transparent; - display: inline; - line-height: $navigation-height; - padding-right: 2em; - text-decoration: none; - width: auto; - } - - a { - font-weight: 400; - color: $navigation-color; - - &:hover { - color: $navigation-color-hover; - } - } - } -} +/* + Banner +*/ header .banner { - @include linear-gradient($dark-blue, #12526E); + @include linear-gradient($dark-blue, $deep-blue); height: em(295); #logo { @@ -143,6 +36,14 @@ header .banner { display: inline; } + &.admin { + margin-top: em(10); + + .profile { + padding-top: em(20); + } + } + .fields { @include span-columns(12); @@ -192,17 +93,24 @@ header .banner { } .profile { + vertical-align: middle; .avatar { @include span-columns(12); + height: em(135); background: transparentize($light-gray, 0.5); - margin: 0 em(20) em(20) 0; + margin: 0 em(20) 0 0; text-align: center; border-radius: 75px; + vertical-align: middle; img { padding: em(10); float: left; + max-width: em(135); + width: 100%; + height: auto; + border-radius: 75px; } } diff --git a/app/assets/stylesheets/layout/_navigation.scss b/app/assets/stylesheets/layout/_navigation.scss index 7738dd4..a2b538e 100644 --- a/app/assets/stylesheets/layout/_navigation.scss +++ b/app/assets/stylesheets/layout/_navigation.scss @@ -6,7 +6,6 @@ @include span-columns(12); font-family: $montserrat; height: em(60); - max-height: em(60); margin-top: - em(60); nav { @@ -22,12 +21,27 @@ ul.navigation { float: left; width: 100%; background: transparent; + overflow: hidden; + max-width: $max-width; + max-height: em(60); > li { float: left; - width: $max-width/7; + width: ($max-width - em(1))/7; border-right: em(1) solid transparent; + .count { + float: right; + font-size: em(14); + border-radius: em(25); + background-color: $light-blue; + display: inline-block; + color: white; + line-height: em(14); + padding: em(5) em(8); + margin-top: - em(2); + } + > a { width: 100%; color: white; @@ -35,11 +49,16 @@ ul.navigation { line-height: em(16); padding: em(22); float: left; + position: relative; background-color: $navbar-primary; &:hover, &.active { background-color: $navbar-secondary; + + .count { + background-color: lighten($light-blue, 20); + } } } @@ -49,15 +68,16 @@ ul.navigation { &.icon { - > a { + i { + color: lighten($light-blue, 30); + max-height: 60px; + position: absolute; + top: 0; + right: 0; font-size: em(24); - line-height: em(24); - padding: em(18); - - i { - width: em(24); - height: em(24); - } + line-height: 1em; + padding: em(12); + padding-right: em(14); } } @@ -72,6 +92,7 @@ ul.navigation { position: relative; ul { + box-shadow: $content-shadow; display: block; position: absolute; top: em(60); @@ -110,4 +131,4 @@ ul.navigation { } } } -} \ No newline at end of file +} diff --git a/app/assets/stylesheets/layout/_sidebar.scss b/app/assets/stylesheets/layout/_sidebar.scss index e608524..f51e053 100644 --- a/app/assets/stylesheets/layout/_sidebar.scss +++ b/app/assets/stylesheets/layout/_sidebar.scss @@ -3,7 +3,7 @@ .widget { @include span-columns(12); box-shadow: $content-shadow; - margin-bottom: em(20); + margin-bottom: em(30); padding: em(20); background: white; @@ -18,10 +18,19 @@ .separator { color: white; - background: $light-blue; + background: $blue; padding: em(12) em(24); margin: 0 -20px; margin-bottom: em(12); + + a { + color: white; + float: right; + } + } + + &:last-child { + margin-bottom: 0; } } diff --git a/app/assets/stylesheets/mixins/_buttons.scss b/app/assets/stylesheets/mixins/_buttons.scss index c89754d..a377896 100644 --- a/app/assets/stylesheets/mixins/_buttons.scss +++ b/app/assets/stylesheets/mixins/_buttons.scss @@ -3,17 +3,24 @@ */ @mixin button($background: $button-primary, $text: $button-text) { + @include linear-gradient($blue, $dark-blue); + border-radius: $base-border-radius; font-family: $montserrat; font-size: em(16); background-color: $background; color: $text; height: em(40); - padding: em(9) em(18); + padding: 0 em(18); + line-height: em(40); float: left; margin: 0 em(20) em(20) 0; border: 0; text-transform: uppercase; cursor: pointer; + + &:hover { + color: lighten($light-blue, 30); + } } button, @@ -21,14 +28,12 @@ a.button { @include button; &.tiny { - background-color: $green; + @include linear-gradient($light-blue, $blue); + background-color: transparent; border-radius: em(14); + line-height: em(25); height: em(25); - padding: em(1) em(12); + padding: 0 em(12); margin: 0 em(10) 0 0; - - &:hover { - color: $light-gray; - } } } diff --git a/app/assets/stylesheets/pages/_contests.scss b/app/assets/stylesheets/pages/_contests.scss index 6216300..ad2f39a 100644 --- a/app/assets/stylesheets/pages/_contests.scss +++ b/app/assets/stylesheets/pages/_contests.scss @@ -39,6 +39,14 @@ table.contest { &:nth-child(4) { text-align: left; } + + &.actions { + text-align: right; + + i { + padding-left: em(5); + } + } } thead { diff --git a/app/assets/stylesheets/pages/_forums.scss b/app/assets/stylesheets/pages/_forums.scss index ebb9c3c..5c646ff 100644 --- a/app/assets/stylesheets/pages/_forums.scss +++ b/app/assets/stylesheets/pages/_forums.scss @@ -141,7 +141,6 @@ div#categories { .content { @include span-columns(9); @include omega; - background: image-url('images/layout/forum-bg-pattern.png') top left; .text, .signature { diff --git a/app/assets/stylesheets/pages/_news.scss b/app/assets/stylesheets/pages/_news.scss index f636657..857de55 100644 --- a/app/assets/stylesheets/pages/_news.scss +++ b/app/assets/stylesheets/pages/_news.scss @@ -1,3 +1,7 @@ +/* + Articles +*/ + div.article { @include span-columns(12); border-bottom: 1px solid rgba(35, 35, 35, 0.1); @@ -73,3 +77,14 @@ div.article-links { } } } + +/* + Article Form +*/ + +form.article { + + h4 { + margin-bottom: em(20); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/pages/_teams.scss b/app/assets/stylesheets/pages/_teams.scss index e088654..f18487f 100644 --- a/app/assets/stylesheets/pages/_teams.scss +++ b/app/assets/stylesheets/pages/_teams.scss @@ -16,7 +16,7 @@ } .irc { - width: 20%; + width: 25%; } .members { @@ -24,7 +24,7 @@ } .actions { - width: 20%; + width: 15%; text-align: right; } diff --git a/app/assets/stylesheets/pages/_users.scss b/app/assets/stylesheets/pages/_users.scss index 6bba522..0a2ad51 100644 --- a/app/assets/stylesheets/pages/_users.scss +++ b/app/assets/stylesheets/pages/_users.scss @@ -12,7 +12,7 @@ .username, .name { - width: 25%; + width: 30%; } .steamid { diff --git a/app/views/about/adminpanel.html.erb b/app/views/about/adminpanel.html.erb index c52f363..45035ea 100644 --- a/app/views/about/adminpanel.html.erb +++ b/app/views/about/adminpanel.html.erb @@ -2,7 +2,7 @@

Admin Menu

-