diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss index de42fa1ce..dfaf4629f 100644 --- a/app/assets/stylesheets/debates.scss +++ b/app/assets/stylesheets/debates.scss @@ -5,13 +5,16 @@ // 03. Header // 04. Footer // 05. Debates -// 05.1. Debates Index -// 05.2. Debates Show +// 05.1. Debates index +// 05.2. Debate show +// 05.3. Debate new // 06. Comments // 07. Tags // 08. Login and Sign Up // 08.1. Login // 08.2. Sign Up +// 09. Forms +// 10. Alerts // // 01. Variables @@ -162,6 +165,12 @@ header { // 05. Debates // - - - - - - - - - - - - - - - - - - - - - - - - - +@mixin back { + color: $text-light; + font-size: rem-calc(13); + line-height: $line-height; +} + @mixin votes { border-top: 1px solid $votes-border; padding: rem-calc(14) rem-calc(12); @@ -244,7 +253,7 @@ header { } } -// 05.1. Debates Index +// 05.1. Debates index // - - - - - - - - - - - - .debate-featured { @@ -414,7 +423,7 @@ header { } } -// 05.2. Debates Show +// 05.2. Debate show // - - - - - - - - - - - - .debate-show { @@ -422,9 +431,7 @@ header { padding: 0 rem-calc(12); .back { - color: $text-light; - font-size: rem-calc(13); - line-height: $line-height; + @include back; } .icon-angle-left { @@ -497,6 +504,61 @@ header { } } +// 05.3. Debate new +// - - - - - - - - - - - - + +.debate-new { + background: white; + padding-top: $line-height; + + .back { + @include back; + } + + h1 { + clear: both; + font-size: rem-calc(36); + font-weight: bold; + line-height: $line-height*2; + margin-bottom: $line-height; + } + + .icon-comment-quotes { + color: $debates; + font-size: rem-calc(60); + line-height: $line-height; + opacity: .5; + } + + h2 { + clear: both; + font-size: rem-calc(20); + font-weight: bold; + line-height: $line-height; + margin: 0; + } + + .recommendations { + list-style-type: none; + margin-left: 0; + margin-top: $line-height; + + li { + font-size: rem-calc(12); + margin: rem-calc(12) 0; + + &:before { + color: $debates; + content: "l "; + font-family: "icons" !important; + } + } + } +} + + + + // 06. Comments // - - - - - - - - - - - - - - - - - - - - - - - - - @@ -627,7 +689,71 @@ header { } } +// 09. Forms +// - - - - - - - - - - - - - - - - - - - - - - - - - + +form { + + label { + font-weight: bold; + line-height: $line-height; + } + + input[type]:not([type=submit]) { + background: $input-bg; + height: $line-height*2; + margin-bottom: rem-calc(16); + } + + .note { + display: block; + font-size: rem-calc(13); + margin-bottom: rem-calc(12); + } + + .ckeditor { + margin-bottom: $line-height; + min-height: $line-height*14; + } + + .checkbox { + display: inline-block; + font-size: rem-calc(14); + line-height: $line-height*2; + margin: 0 0 0 rem-calc(6); + vertical-align: top; + } +} +// 10. Alerts +// - - - - - - - - - - - - - - - - - - - - - - - - - + +.alert-box { + + &.success { + background-color: $success-bg; + border-color: $success-border; + color: $success-color; + } + + &.info { + background-color: $info-bg; + border-color: $info-border; + color: $info-color; + } + + &.warning { + background-color: $warning-bg; + border-color: $warning-border; + color: $warning-color; + } + + &.alert { + background-color: $alert-bg; + border-color: $alert-border; + color: $alert-color; + } +} diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss index 79de3eaf9..f9607af9c 100644 --- a/app/assets/stylesheets/variables.scss +++ b/app/assets/stylesheets/variables.scss @@ -2,21 +2,23 @@ // // 01. Fonts // 02. Colors +// 03. Forms +// 04. Alerts // // 01. Fonts -// - - - - - - - - - - - - +// - - - - - - - - - - - - - - - - - - - - - - - - - $font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $line-height: rem-calc(24); // 02. Colors -// - - - - - - - - - - - - +// - - - - - - - - - - - - - - - - - - - - - - - - - $background: #EDEFF0; $border: #DEE0E3; $brand: #0077B9; - +$check: #46DB91; $debates: #008CCF; $comments-bg: #F1F1F1; @@ -39,7 +41,31 @@ $votes-background: #0081B3; $votes-border: #005b80; $votes-like: #7BD2A8; $votes-like-act: #5D9E7F; -$votes-neutral: #CCCCCC; +$votes-neutral: #CCCCCC; $votes-text: #FFFFFF; $votes-unlike: #EF8585; -$votes-unlike-act: #BD6A6A; \ No newline at end of file +$votes-unlike-act: #BD6A6A; + +// 03. Forms +// - - - - - - - - - - - - - - - - - - - - - - - - - + +$input-bg: #F8F8F8; + +// 04. Alerts +// - - - - - - - - - - - - - - - - - - - - - - - - - + +$success-bg: #DFF0D8; +$success-border: #D6E9C6; +$success-color: #3C763D; + +$info-bg: #D9EDF7; +$info-border: #BCE8F1; +$info-color: #31708F; + +$warning-bg: #FCF8E3; +$warning-border: #FAEBCC; +$warning-color: #8A6D3B; + +$alert-bg: #F2DEDE; +$alert-border: #EBCCD1; +$alert-color: #A94442; diff --git a/app/views/debates/_form.html.erb b/app/views/debates/_form.html.erb index 28a0419a8..c38d2c476 100644 --- a/app/views/debates/_form.html.erb +++ b/app/views/debates/_form.html.erb @@ -1,37 +1,47 @@ <%= form_for(@debate) do |f| %> - <% if @debate.errors.any? %> -
<%= pluralize(@debate.errors.count, t("debates.form.one_error"), t("debates.form.multiple_errors")) %> <%= t("debates.form.not_saved") %>:
-<%= t("debates.form.debate_title") %>
-<%= t("debates.form.title_instructions") %>
- <%= f.text_field :title, maxlength: Debate::TITLE_LENGTH %> - -<%= t("debates.form.debate_text") %>
-<%= t("debates.form.text_instructions") %>
- <%= f.cktext_area :description, ckeditor: { language: I18n.locale } %> -<%= pluralize(@debate.errors.count, t("debates.form.error"), t("debates.form.errors")) %> <%= t("debates.form.not_saved") %>
+