From 49c8145e766c4c3124dc6f438e8798fe2af0a27d Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Wed, 18 May 2016 18:39:35 +0200 Subject: [PATCH 1/5] Cleans scss --- app/assets/stylesheets/_settings.scss | 32 ----- .../stylesheets/datepicker_overrides.scss | 2 +- app/assets/stylesheets/layout.scss | 119 +++++++----------- app/assets/stylesheets/mixins.scss | 14 +-- app/assets/stylesheets/participation.scss | 30 ++--- 5 files changed, 69 insertions(+), 128 deletions(-) diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index e0ad848c4..8136cab6a 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -642,11 +642,6 @@ $footer-color: #171819; $footer-link: #454A4C; $footer-border: #BFC1C3; -// 03. Forms -// - - - - - - - - - - - - - - - - - - - - - - - - - - -$input-bg: #F8F8F8; - // 04. Alerts // - - - - - - - - - - - - - - - - - - - - - - - - - @@ -665,30 +660,3 @@ $color-warning: #8A6D3B; $alert-bg: #F2DEDE; $alert-border: #EBCCD1; $color-alert: #A94442; - -// 05. Levels -// - - - - - - - - - - - - - - - - - - - - - - - - - - -$level-1: #1ABC9C; -$level-2: #43AC6A; -$level-3: #43AC6A; -$level-4: #43AC6A; -$level-5: #F08A24; - -$author: #008CCF; -$association: #C0392B; -$deleted: #E7E7E7; - -$comment-author: rgba(45,144,248,.15); -$comment-level-5: rgba(255,241,204,1); -$comment-admin: rgba(45,144,248,.15); -$comment-official: rgba(70,219,145,.3); - -// 06. Responsive -// - - - - - - - - - - - - - - - - - - - - - - - - - - -$small: rem-calc(480); -$small-breakpoint: rem-calc(640); -$medium-breakpoint: rem-calc(1024); -$large-breakpoint: rem-calc(1440); -$xlarge-breakpoint: rem-calc(1920); diff --git a/app/assets/stylesheets/datepicker_overrides.scss b/app/assets/stylesheets/datepicker_overrides.scss index abab720e0..88f17c7cc 100644 --- a/app/assets/stylesheets/datepicker_overrides.scss +++ b/app/assets/stylesheets/datepicker_overrides.scss @@ -85,7 +85,7 @@ background: white; .ui-state-default { - background: $input-bg; + background: #F8F8F8; color: $text-medium; } } diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index e490bb0a1..f1618bb60 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -216,13 +216,6 @@ a { border: 0; } -#drop-help.f-dropdown.content { - - @media (min-width: $small-breakpoint) { - max-width: $line-height*15; - } -} - .menu.simple { border-bottom: 1px solid $border; margin: $line-height 0; @@ -277,7 +270,7 @@ header { float: none; height: $line-height*1.5; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { float: left; margin-left: $line-height/2; } @@ -288,7 +281,7 @@ header { padding: rem-calc(6) 0; text-align: center; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { float: right; } } @@ -302,7 +295,7 @@ header { padding-bottom: 0; padding-top: 0; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { padding: 0; } @@ -322,7 +315,7 @@ header { &.menu > li { display: block; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { display: table-cell; height: $line-height*3.5; } @@ -331,7 +324,7 @@ header { color: white; padding-left: 0; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { font-size: $small-font-size; padding: rem-calc(11) rem-calc(16); } @@ -339,7 +332,7 @@ header { &.button { text-align: left; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { background: white; color: $brand; text-align: center; @@ -377,7 +370,7 @@ header { .subnavigation { - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { background: white; padding-bottom: 0; } @@ -387,7 +380,7 @@ header { margin: 0; li { - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { display: inline-block; margin-right: rem-calc(36); } @@ -400,7 +393,7 @@ header { text-align: left; width: 100%; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { color: $text; display: block; font-weight: bold; @@ -416,7 +409,7 @@ header { &.active { color: white; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { border-bottom: 2px solid $brand; color: $brand; } @@ -428,7 +421,7 @@ header { .input-group { padding-top: $line-height/4; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { margin-bottom: 0; } } @@ -473,7 +466,7 @@ header { position: relative; text-align: left; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { margin-right: $line-height*1.5; } @@ -528,7 +521,6 @@ footer { } h2 a { - border-bottom: 1px solid $footer-border; display: block; font-size: $h3-font-size; @@ -604,7 +596,7 @@ h3.sidebar-title { line-height: rem-calc(80); // Same as logo image height text-align: center; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { display: inline-block; text-align: left; } @@ -710,7 +702,7 @@ form { } input[type]:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]) { - background: $input-bg; + background: #F8F8F8; height: $line-height*2; margin-bottom: rem-calc(16); @@ -1002,7 +994,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { float: left; margin: $line-height 0; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { float: right; margin-bottom: 0; margin-top: rem-calc(28); @@ -1019,8 +1011,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { height: $line-height*2; } - @media (max-width: $medium-breakpoint) { - + @include breakpoint(medium down) { .column { padding: 0; } @@ -1035,35 +1026,27 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { } .is-author { - background: $author; + background: #008CCF; } .is-association { - background: $association; + background: #C0392B; } .is-deleted { - background: $deleted; + background: #E7E7E7; } .level-1 { - background: $level-1; + background: #1ABC9C; } -.level-2 { - background: $level-2; -} - -.level-3 { - background: $level-3; -} - -.level-4 { - background: $level-4; +.level-2, .level-3, .level-4 { + background: #43AC6A; } .level-5 { - background: $level-5; + background: #F08A24; } // 12. Tables @@ -1358,7 +1341,7 @@ table { right: 0; top: 24px; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { content: 'c'; } } @@ -1371,7 +1354,7 @@ table { .verification { - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { .left + .left { margin-left: $line-height/2; } @@ -1383,7 +1366,7 @@ table { float: left; width: 30%; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { width: 25%; } } @@ -1392,7 +1375,7 @@ table { .progress { height: $line-height*3; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { height: $line-height*2; } @@ -1409,7 +1392,7 @@ table { text-transform: uppercase; vertical-align: top; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { line-height: $line-height*2; padding: 0; } @@ -1417,7 +1400,7 @@ table { .number { display: block; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { background-color: white; border-radius: rem-calc(30); color: #43AC6A; @@ -1596,42 +1579,32 @@ table { padding: $line-height/4 0; overflow: hidden; - @each $n in ("1", "2", "3","4", "5") { - &.level-#{$n} { - @if $n == "5" { - background: $comment-level-5; - padding: $line-height/4 $line-height/2; - } - @elseif $n == "1" { - background: none; - padding: $line-height/4 $line-height/2; - } - @else { - background: $comment-official; - padding: $line-height/4 $line-height/2; - } - } - } - - &.is-author { - background: $comment-author; + &.level-1, &.level-2, &.level-3, &.level-4, &.level-5, + &.is-author, &.is-admin, &.is-moderator { + background: rgba(70,219,145,.3); padding: $line-height/4 $line-height/2; } - &.is-admin, &.is-moderator { - background: $comment-admin; - padding: $line-height/4 $line-height/2; + &.level-1 { + background: none; } &.level-5 { - background: $comment-level-5; - padding: $line-height/4 $line-height/2; + background: rgba(255,241,204,1); + } + + &.is-author { + background: rgba(45,144,248,.15); + } + + &.is-admin, &.is-moderator { + background: rgba(45,144,248,.15); } } } .is-deleted { - background: $deleted; + background: #E7E7E7; margin-left: rem-calc(42); padding: $line-height/4 $line-height/2; } @@ -1669,7 +1642,7 @@ table { float: none; margin-top: 0; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { float: right; margin-top: rem-calc(-24); } @@ -1678,7 +1651,7 @@ table { padding-right: $line-height/2; float: none; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { float: right; } } diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index 4e99acaab..384185af9 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -18,7 +18,7 @@ font-size: $h3-font-size; font-weight: lighter; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { line-height: $line-height*2; margin-top: 0; } @@ -27,7 +27,7 @@ height: 48px; width: 48px; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { height: 80px; margin-right: $line-height/2; margin-top: 0; @@ -40,7 +40,7 @@ font-size: $h2-font-size; line-height: $h2-line-height; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { font-size: $h1-font-size; line-height: $h1-line-height; } @@ -50,7 +50,7 @@ font-size: $h3-font-size; line-height: $h3-line-height; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { font-size: $h2-font-size; line-height: $h2-line-height; } @@ -60,7 +60,7 @@ font-size: $h4-font-size; line-height: $h4-line-height; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { font-size: $h3-font-size; line-height: $h3-line-height; } @@ -70,7 +70,7 @@ font-size: $h5-font-size; line-height: $h5-line-height; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { font-size: $h4-font-size; line-height: $h4-line-height; } @@ -80,7 +80,7 @@ font-size: $h6-font-size; line-height: $h6-line-height; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { font-size: $h5-font-size; line-height: $h5-line-height; } diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 046cc58d2..b8cba9385 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -491,7 +491,7 @@ padding: rem-calc(24); } - @media (min-width: $small-breakpoint + rem-calc(1)) and (max-width:$medium-breakpoint) { + @include breakpoint(small + rem-calc(1) and medium down) { .in-favor, .against { text-align: left; width: rem-calc(100); @@ -502,7 +502,7 @@ display: none; } - @media (min-width: $medium-breakpoint) { + @include breakpoint(medium) { .divider { display: inline-block; } @@ -554,14 +554,14 @@ .debates-list, .proposals-list, .investment-projects-list { - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { margin-bottom: rem-calc(48); } } .investment-projects-list { - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { min-height: $line-height*15; } } @@ -580,7 +580,7 @@ min-height: rem-calc(192); padding: rem-calc(12) rem-calc(12) 0 rem-calc(12); - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { margin-bottom: rem-calc(-1); padding-bottom: rem-calc(12); } @@ -715,7 +715,7 @@ display: none; } - @media (min-width: $medium-breakpoint) { + @include breakpoint(medium) { .divider { display: inline-block; } @@ -729,7 +729,7 @@ border: 1px solid $votes-border; margin: 0 rem-calc(-12); - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { border-top-left-radius: 3px; border-bottom-left-radius: 3px; margin: 0 rem-calc(-25) 0 rem-calc(12); @@ -747,7 +747,7 @@ right: -1px; border-width: 13px 13px 0 0; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { content: ""; } } @@ -759,7 +759,7 @@ padding-top: rem-calc(12); vertical-align: top; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { display: block; float: none; line-height: $line-height*2; @@ -768,7 +768,7 @@ } } - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { .like, .unlike { span.percentage { @@ -787,7 +787,7 @@ border: 1px solid $proposals-border; margin: 0 rem-calc(-12); - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { border-top-left-radius: 3px; border-bottom-left-radius: 3px; margin: 0 rem-calc(-25) 0 rem-calc(12); @@ -805,7 +805,7 @@ right: -1px; border-width: 13px 13px 0 0; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { content: ""; } } @@ -816,7 +816,7 @@ padding-top: rem-calc(12); vertical-align: top; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { display: block; float: none; margin-left: 0; @@ -837,7 +837,7 @@ min-height: rem-calc(180); padding-top: 0; - @media (min-width: $small-breakpoint) { + @include breakpoint(small) { padding-top: $line-height*1.5; } @@ -929,7 +929,7 @@ .featured-debates, .featured-proposals { padding: $line-height/2 0; - @media (min-width: $medium-breakpoint) { + @include breakpoint(medium) { margin-left: 0 !important; margin-right: 0 !important; } From a59cb3481eda7e61971c5f06ea92e361e38c870f Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Thu, 19 May 2016 12:44:40 +0200 Subject: [PATCH 2/5] Removes unused scss --- app/assets/stylesheets/_settings.scss | 8 -- app/assets/stylesheets/layout.scss | 141 ++++++++++------------ app/assets/stylesheets/participation.scss | 12 +- 3 files changed, 72 insertions(+), 89 deletions(-) diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index 8136cab6a..6525e7381 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -83,8 +83,6 @@ $breakpoints: ( small: 0, medium: 640px, large: 1024px, - xlarge: 1200px, - xxlarge: 1440px, ); $breakpoint-classes: (small medium large); @@ -600,9 +598,6 @@ $small-font-size: rem-calc(14); $tiny-font-size: rem-calc(10); $line-height: rem-calc(24); -// 02. Colors -// - - - - - - - - - - - - - - - - - - - - - - - - - - $brand: #004A83; $body: #E9E9E9; $background: #EDEFF0; @@ -642,9 +637,6 @@ $footer-color: #171819; $footer-link: #454A4C; $footer-border: #BFC1C3; -// 04. Alerts -// - - - - - - - - - - - - - - - - - - - - - - - - - - $success-bg: #DFF0D8; $success-border: #D6E9C6; $color-success: #3C763D; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index f1618bb60..10c4098d8 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -10,17 +10,17 @@ // 08. User account // 09. Search // 10. Official levels -// 12. Tables -// 13. Social -// 14. Pages -// 15. Verification -// 16. Comments -// 17. Flags -// 18. Activity +// 11. Tables +// 12. Social +// 13. Pages +// 14. Verification +// 15. Comments +// 16. Flags +// 17. Activity // // 01. Global styles -// - - - - - - - - - - - - - - - - - - - - - - - - - +// ----------------- *, html { margin: 0; @@ -255,7 +255,7 @@ a { } // 02. Header -// - - - - - - - - - - - - - - - - - - - - - - - - - +// ---------- header { background: $brand; @@ -267,13 +267,9 @@ header { } .locale { - float: none; + float: left; height: $line-height*1.5; - - @include breakpoint(small) { - float: left; - margin-left: $line-height/2; - } + margin-left: $line-height/2; } .external-links { @@ -281,7 +277,7 @@ header { padding: rem-calc(6) 0; text-align: center; - @include breakpoint(small) { + @include breakpoint(medium) { float: right; } } @@ -295,7 +291,7 @@ header { padding-bottom: 0; padding-top: 0; - @include breakpoint(small) { + @include breakpoint(medium) { padding: 0; } @@ -315,7 +311,7 @@ header { &.menu > li { display: block; - @include breakpoint(small) { + @include breakpoint(medium) { display: table-cell; height: $line-height*3.5; } @@ -324,7 +320,7 @@ header { color: white; padding-left: 0; - @include breakpoint(small) { + @include breakpoint(medium) { font-size: $small-font-size; padding: rem-calc(11) rem-calc(16); } @@ -332,7 +328,7 @@ header { &.button { text-align: left; - @include breakpoint(small) { + @include breakpoint(medium) { background: white; color: $brand; text-align: center; @@ -370,7 +366,7 @@ header { .subnavigation { - @include breakpoint(small) { + @include breakpoint(medium) { background: white; padding-bottom: 0; } @@ -380,7 +376,7 @@ header { margin: 0; li { - @include breakpoint(small) { + @include breakpoint(medium) { display: inline-block; margin-right: rem-calc(36); } @@ -393,7 +389,7 @@ header { text-align: left; width: 100%; - @include breakpoint(small) { + @include breakpoint(medium) { color: $text; display: block; font-weight: bold; @@ -409,7 +405,7 @@ header { &.active { color: white; - @include breakpoint(small) { + @include breakpoint(medium) { border-bottom: 2px solid $brand; color: $brand; } @@ -421,7 +417,7 @@ header { .input-group { padding-top: $line-height/4; - @include breakpoint(small) { + @include breakpoint(medium) { margin-bottom: 0; } } @@ -466,7 +462,7 @@ header { position: relative; text-align: left; - @include breakpoint(small) { + @include breakpoint(medium) { margin-right: $line-height*1.5; } @@ -486,7 +482,7 @@ header { } // 03. Footer -// - - - - - - - - - - - - - - - - - - - - - - - - - +// ---------- footer { color: $footer-color; @@ -543,7 +539,7 @@ footer { } // 04. Tags -// - - - - - - - - - - - - - - - - - - - - - - - - - +// -------- .tags a , .tag-cloud a, .categories a, .geozone a, .sidebar-links a { background: #ececec; @@ -580,7 +576,7 @@ h3.sidebar-title { } // 05. Auth pages -// - - - - - - - - - - - - - - - - - - - - - - - - - +// -------------- .auth-page { background: $brand image-url("auth_bg.jpg"); @@ -596,7 +592,7 @@ h3.sidebar-title { line-height: rem-calc(80); // Same as logo image height text-align: center; - @include breakpoint(small) { + @include breakpoint(medium) { display: inline-block; text-align: left; } @@ -617,7 +613,7 @@ h3.sidebar-title { } // 06. Forms -// - - - - - - - - - - - - - - - - - - - - - - - - - +// --------- form.locale-form { display: inline-block; @@ -749,7 +745,7 @@ form { } // 07. Alerts -// - - - - - - - - - - - - - - - - - - - - - - - - - +// ---------- .callout { font-family: $font-sans; @@ -812,7 +808,7 @@ label.error, label.error a { } // 08. User account -// - - - - - - - - - - - - - - - - - - - - - - - - - +// ---------------- .account { @@ -969,32 +965,27 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { } // 09. Search -// - - - - - - - - - - - - - - - - - - - - - - - - - +// ---------- -.search-form { - - h3 { - border-top: 1px solid $votes-border; - display: inline-block; - font-size: rem-calc(16); - margin: -1px 0 $line-height/2; - padding-top: $line-height/4; - text-transform: uppercase; - } +.search-form h3 { + border-top: 1px solid $votes-border; + display: inline-block; + font-size: rem-calc(16); + margin: -1px 0 $line-height/2; + padding-top: $line-height/4; + text-transform: uppercase; } -.search-results { - - h2 { - margin-bottom: 0; - } +.search-results h2 { + margin-bottom: 0; } .advanced-search { float: left; margin: $line-height 0; + position: inherit; - @include breakpoint(small) { + @include breakpoint(medium) { float: right; margin-bottom: 0; margin-top: rem-calc(28); @@ -1011,15 +1002,15 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { height: $line-height*2; } - @include breakpoint(medium down) { - .column { + @include breakpoint(medium) { + & > .column { padding: 0; } } } // 10. Officials levels -// - - - - - - - - - - - - - - - - - - - - - - - - - +// -------------------- [class^="level-"] { color: white; @@ -1049,8 +1040,8 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { background: #F08A24; } -// 12. Tables -// - - - - - - - - - - - - - - - - - - - - - - - - - +// 11. Tables +// ---------- table { border: $border; @@ -1083,8 +1074,8 @@ table { } } -// 13. Social -// - - - - - - - - - - - - - - - - - - - - - - - - - +// 12. Social +// ---------- .button.button-twitter, .button.button-facebook, @@ -1301,8 +1292,8 @@ table { } } -// 14. Pages -// - - - - - - - - - - - - - - - - - - - - - - - - - +// 13. Pages +// --------- .more-information { @@ -1341,7 +1332,7 @@ table { right: 0; top: 24px; - @include breakpoint(small) { + @include breakpoint(medium) { content: 'c'; } } @@ -1349,12 +1340,12 @@ table { } } -// 15. Verification -// - - - - - - - - - - - - - - - - - - - - - - - - - +// 14. Verification +// ---------------- .verification { - @include breakpoint(small) { + @include breakpoint(medium) { .left + .left { margin-left: $line-height/2; } @@ -1366,7 +1357,7 @@ table { float: left; width: 30%; - @include breakpoint(small) { + @include breakpoint(medium) { width: 25%; } } @@ -1375,7 +1366,7 @@ table { .progress { height: $line-height*3; - @include breakpoint(small) { + @include breakpoint(medium) { height: $line-height*2; } @@ -1392,7 +1383,7 @@ table { text-transform: uppercase; vertical-align: top; - @include breakpoint(small) { + @include breakpoint(medium) { line-height: $line-height*2; padding: 0; } @@ -1400,7 +1391,7 @@ table { .number { display: block; - @include breakpoint(small) { + @include breakpoint(medium) { background-color: white; border-radius: rem-calc(30); color: #43AC6A; @@ -1500,8 +1491,8 @@ table { } } -// 16. Comments -// - - - - - - - - - - - - - - - - - - - - - - - - - +// 15. Comments +// ------------ .comments { background: $white; @@ -1642,7 +1633,7 @@ table { float: none; margin-top: 0; - @include breakpoint(small) { + @include breakpoint(medium) { float: right; margin-top: rem-calc(-24); } @@ -1651,14 +1642,14 @@ table { padding-right: $line-height/2; float: none; - @include breakpoint(small) { + @include breakpoint(medium) { float: right; } } } -// 17. Flags -// - - - - - - - - - - - - - - - - - - - - - - - - - +// 16. Flags +// --------- .flag-content { @@ -1685,8 +1676,8 @@ table { color: $text-medium; } -// 18. Activity -// - - - - - - - - - - - - - - - - - - - - - - - - - +// 17. Activity +// ------------ .activity { margin-bottom: $line-height*2; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index b8cba9385..848b3e5c4 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -1,4 +1,4 @@ -// Table of Contents - Styles for debates and proposals +// Table of Contents // // 01. Votes and supports // 02. New participation @@ -8,7 +8,7 @@ // // 01. Votes and supports -// - - - - - - - - - - - - - - - - - - - - - - - - - +// ---------------------- @mixin votes { background: $votes-bg; @@ -272,7 +272,7 @@ } // 02. New participation -// - - - - - - - - - - - - - - - - - - - - - - - - - +// --------------------- .debate-new, .debate-edit, .proposal-new, .proposal-edit, @@ -335,7 +335,7 @@ } // 03. Show participation -// - - - - - - - - - - - - - - - - - - - - - - - - - +// ---------------------- .debate-show, .proposal-show, .investment-project-show { @@ -550,7 +550,7 @@ } // 04. List participation -// - - - - - - - - - - - - - - - - - - - - - - - - - +// ---------------------- .debates-list, .proposals-list, .investment-projects-list { @@ -924,7 +924,7 @@ } // 05. Featured -// - - - - - - - - - - - - - - - - - - - - - - - - - +// ------------ .featured-debates, .featured-proposals { padding: $line-height/2 0; From ecf6999730dab0373681084ca71ed1eb97fc96a3 Mon Sep 17 00:00:00 2001 From: Alberto Garcia Cabeza Date: Thu, 19 May 2016 12:54:49 +0200 Subject: [PATCH 3/5] Improves layout --- app/assets/stylesheets/layout.scss | 10 ++-- app/views/notifications/index.html.erb | 4 +- app/views/pages/more_information.html.erb | 2 +- app/views/shared/_advanced_search.html.erb | 60 ++++++++++------------ 4 files changed, 36 insertions(+), 40 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 10c4098d8..6197cf0e4 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -909,8 +909,8 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { color: #ecf00b; font-size: $tiny-font-size; position: absolute; - right: 4px; - top: -6px; + right: 8px; + top: 6px; } } @@ -918,9 +918,9 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { background: $border; content: ''; height: 100%; - left: 28px; + left: 22px; position: absolute; - top: 84px; + top: 60px; width: 2px; } @@ -949,7 +949,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { color: $brand; content: "\4d"; font-family: "icons" !important; - left: 6px; + left: 0; position: absolute; } diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb index 5796dbfd7..889e5395d 100644 --- a/app/views/notifications/index.html.erb +++ b/app/views/notifications/index.html.erb @@ -1,5 +1,5 @@ -
-
+
+

<%= t("notifications.index.title") %>

diff --git a/app/views/pages/more_information.html.erb b/app/views/pages/more_information.html.erb index 08e733ebb..07105ef0f 100644 --- a/app/views/pages/more_information.html.erb +++ b/app/views/pages/more_information.html.erb @@ -1,6 +1,6 @@ <% provide :title do %><%= t('pages.titles.more_information') %><% end %>
-
+

<%= t('pages.titles.more_information') %>

  • diff --git a/app/views/shared/_advanced_search.html.erb b/app/views/shared/_advanced_search.html.erb index ecab790b6..7b9d3d6c4 100644 --- a/app/views/shared/_advanced_search.html.erb +++ b/app/views/shared/_advanced_search.html.erb @@ -6,50 +6,46 @@ <%= form_tag search_path, method: :get do %>