diff --git a/Gemfile b/Gemfile index 951c5addc..9f03d3da7 100644 --- a/Gemfile +++ b/Gemfile @@ -60,8 +60,6 @@ gem 'redcarpet' group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug' - # Access an IRB console on exception pages or by using <%= console %> in views - gem 'web-console', '~> 2.0' # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' gem 'spring-commands-rspec' @@ -86,8 +84,10 @@ group :test do gem 'database_cleaner' gem 'poltergeist' gem 'coveralls', require: false -end - -group :test do gem 'email_spec' end + +group :development do + # Access an IRB console on exception pages or by using <%= console %> in views + gem 'web-console', '~> 3.0' +end diff --git a/Gemfile.lock b/Gemfile.lock index c734081c0..f0f5a9dbe 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -65,10 +65,8 @@ GEM ancestry (2.1.0) activerecord (>= 3.0.0) arel (6.0.3) - ast (2.1.0) + ast (2.2.0) bcrypt (3.1.10) - binding_of_caller (0.7.2) - debug_inspector (>= 0.0.1) browser (1.0.1) builder (3.2.2) bullet (4.14.10) @@ -89,7 +87,7 @@ GEM capistrano-rvm (0.1.2) capistrano (~> 3.0) sshkit (~> 1.2) - capistrano3-delayed-job (1.4.2) + capistrano3-delayed-job (1.5.0) capistrano (>= 3.0.0) capybara (2.5.0) mime-types (>= 1.16) @@ -106,9 +104,9 @@ GEM cliver (0.3.2) cocaine (0.5.8) climate_control (>= 0.0.3, < 1.0) - coffee-rails (4.1.0) + coffee-rails (4.1.1) coffee-script (>= 2.2.0) - railties (>= 4.0.0, < 5.0) + railties (>= 4.0.0, < 5.1.x) coffee-script (2.4.1) coffee-script-source execjs @@ -122,7 +120,7 @@ GEM thor (~> 0.19.1) tins (~> 1.6.0) daemons (1.2.3) - dalli (2.7.4) + dalli (2.7.5) database_cleaner (1.5.1) debug_inspector (0.0.2) delayed_job (4.1.1) @@ -175,7 +173,7 @@ GEM fuubar (2.0.0) rspec (~> 3.0) ruby-progressbar (~> 1.4) - geocoder (1.2.12) + geocoder (1.2.13) globalid (0.3.6) activesupport (>= 4.1.0) groupdate (2.5.0) @@ -234,7 +232,7 @@ GEM net-ssh (3.0.1) netrc (0.11.0) newrelic_rpm (3.14.1.311) - nokogiri (1.6.7) + nokogiri (1.6.7.1) mini_portile2 (~> 2.0.0.rc2) nori (2.6.0) oauth (0.4.7) @@ -244,9 +242,9 @@ GEM multi_json (~> 1.3) multi_xml (~> 0.5) rack (~> 1.2) - omniauth (1.2.2) + omniauth (1.3.1) hashie (>= 1.2, < 4) - rack (~> 1.0) + rack (>= 1.0, < 3) omniauth-facebook (3.0.0) omniauth-oauth2 (~> 1.2) omniauth-google-oauth2 (0.2.10) @@ -315,14 +313,14 @@ GEM redcarpet (3.3.3) referer-parser (0.3.0) request_store (1.2.1) - responders (2.1.0) - railties (>= 4.2.0, < 5) + responders (2.1.1) + railties (>= 4.2.0, < 5.1) rest-client (1.8.0) http-cookie (>= 1.0.2, < 2.0) mime-types (>= 1.16, < 3.0) netrc (~> 0.7) rinku (1.7.3) - rollbar (2.7.0) + rollbar (2.7.1) multi_json rspec (3.4.0) rspec-core (~> 3.4.0) @@ -353,7 +351,7 @@ GEM sprockets (>= 2.8, < 4.0) sprockets-rails (>= 2.0, < 4.0) tilt (>= 1.1, < 3) - sassc (1.8.1) + sassc (1.8.2) bundler ffi (~> 1.9.6) sass (>= 3.3.0) @@ -378,7 +376,7 @@ GEM json (~> 1.8) simplecov-html (~> 0.10.0) simplecov-html (0.10.0) - spring (1.5.0) + spring (1.6.1) spring-commands-rspec (1.0.4) spring (>= 0.9.1) sprockets (3.5.2) @@ -424,11 +422,10 @@ GEM wasabi (3.5.0) httpi (~> 2.0) nokogiri (>= 1.4.2) - web-console (2.2.1) - activemodel (>= 4.0) - binding_of_caller (>= 0.7.2) - railties (>= 4.0) - sprockets-rails (>= 2.0, < 4.0) + web-console (3.0.0) + activemodel (>= 4.2) + debug_inspector + railties (>= 4.2) websocket-driver (0.6.3) websocket-extensions (>= 0.1.0) websocket-extensions (0.1.2) @@ -503,7 +500,7 @@ DEPENDENCIES turnout uglifier (>= 1.3.0) unicorn (~> 5.0.1) - web-console (~> 2.0) + web-console (~> 3.0) whenever BUNDLED WITH diff --git a/app/assets/fonts/merriweather-bold-webfont.eot b/app/assets/fonts/merriweather-bold-webfont.eot deleted file mode 100755 index c77b53bdd..000000000 Binary files a/app/assets/fonts/merriweather-bold-webfont.eot and /dev/null differ diff --git a/app/assets/fonts/merriweather-bold-webfont.svg b/app/assets/fonts/merriweather-bold-webfont.svg deleted file mode 100755 index 3227239df..000000000 --- a/app/assets/fonts/merriweather-bold-webfont.svg +++ /dev/null @@ -1,294 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/fonts/merriweather-bold-webfont.ttf b/app/assets/fonts/merriweather-bold-webfont.ttf deleted file mode 100755 index 44f33c239..000000000 Binary files a/app/assets/fonts/merriweather-bold-webfont.ttf and /dev/null differ diff --git a/app/assets/fonts/merriweather-bold-webfont.woff b/app/assets/fonts/merriweather-bold-webfont.woff deleted file mode 100755 index a728400d5..000000000 Binary files a/app/assets/fonts/merriweather-bold-webfont.woff and /dev/null differ diff --git a/app/assets/fonts/merriweather-bold-webfont.woff2 b/app/assets/fonts/merriweather-bold-webfont.woff2 deleted file mode 100755 index ff3bddfbd..000000000 Binary files a/app/assets/fonts/merriweather-bold-webfont.woff2 and /dev/null differ diff --git a/app/assets/fonts/merriweather-italic-webfont.eot b/app/assets/fonts/merriweather-italic-webfont.eot deleted file mode 100755 index 884185441..000000000 Binary files a/app/assets/fonts/merriweather-italic-webfont.eot and /dev/null differ diff --git a/app/assets/fonts/merriweather-italic-webfont.svg b/app/assets/fonts/merriweather-italic-webfont.svg deleted file mode 100755 index 46f8fe18e..000000000 --- a/app/assets/fonts/merriweather-italic-webfont.svg +++ /dev/null @@ -1,283 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/fonts/merriweather-italic-webfont.ttf b/app/assets/fonts/merriweather-italic-webfont.ttf deleted file mode 100755 index 3180e526d..000000000 Binary files a/app/assets/fonts/merriweather-italic-webfont.ttf and /dev/null differ diff --git a/app/assets/fonts/merriweather-italic-webfont.woff b/app/assets/fonts/merriweather-italic-webfont.woff deleted file mode 100755 index d7071e3c2..000000000 Binary files a/app/assets/fonts/merriweather-italic-webfont.woff and /dev/null differ diff --git a/app/assets/fonts/merriweather-italic-webfont.woff2 b/app/assets/fonts/merriweather-italic-webfont.woff2 deleted file mode 100755 index f8660d06f..000000000 Binary files a/app/assets/fonts/merriweather-italic-webfont.woff2 and /dev/null differ diff --git a/app/assets/fonts/merriweather-light-webfont.eot b/app/assets/fonts/merriweather-light-webfont.eot deleted file mode 100755 index 4115d282b..000000000 Binary files a/app/assets/fonts/merriweather-light-webfont.eot and /dev/null differ diff --git a/app/assets/fonts/merriweather-light-webfont.svg b/app/assets/fonts/merriweather-light-webfont.svg deleted file mode 100755 index 96c41ee1d..000000000 --- a/app/assets/fonts/merriweather-light-webfont.svg +++ /dev/null @@ -1,299 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/fonts/merriweather-light-webfont.ttf b/app/assets/fonts/merriweather-light-webfont.ttf deleted file mode 100755 index 03cfa4253..000000000 Binary files a/app/assets/fonts/merriweather-light-webfont.ttf and /dev/null differ diff --git a/app/assets/fonts/merriweather-light-webfont.woff b/app/assets/fonts/merriweather-light-webfont.woff deleted file mode 100755 index 9b3427536..000000000 Binary files a/app/assets/fonts/merriweather-light-webfont.woff and /dev/null differ diff --git a/app/assets/fonts/merriweather-light-webfont.woff2 b/app/assets/fonts/merriweather-light-webfont.woff2 deleted file mode 100755 index e53e4b531..000000000 Binary files a/app/assets/fonts/merriweather-light-webfont.woff2 and /dev/null differ diff --git a/app/assets/fonts/merriweather-regular-webfont.eot b/app/assets/fonts/merriweather-regular-webfont.eot deleted file mode 100755 index c4cde6d01..000000000 Binary files a/app/assets/fonts/merriweather-regular-webfont.eot and /dev/null differ diff --git a/app/assets/fonts/merriweather-regular-webfont.svg b/app/assets/fonts/merriweather-regular-webfont.svg deleted file mode 100755 index 47b2ff823..000000000 --- a/app/assets/fonts/merriweather-regular-webfont.svg +++ /dev/null @@ -1,294 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/fonts/merriweather-regular-webfont.ttf b/app/assets/fonts/merriweather-regular-webfont.ttf deleted file mode 100755 index 3889a6065..000000000 Binary files a/app/assets/fonts/merriweather-regular-webfont.ttf and /dev/null differ diff --git a/app/assets/fonts/merriweather-regular-webfont.woff b/app/assets/fonts/merriweather-regular-webfont.woff deleted file mode 100755 index 1969d2ed0..000000000 Binary files a/app/assets/fonts/merriweather-regular-webfont.woff and /dev/null differ diff --git a/app/assets/fonts/merriweather-regular-webfont.woff2 b/app/assets/fonts/merriweather-regular-webfont.woff2 deleted file mode 100755 index 3023ce73c..000000000 Binary files a/app/assets/fonts/merriweather-regular-webfont.woff2 and /dev/null differ diff --git a/app/assets/images/annotator_adder.png b/app/assets/images/annotator_adder.png new file mode 100644 index 000000000..0a514c551 Binary files /dev/null and b/app/assets/images/annotator_adder.png differ diff --git a/app/assets/images/annotator_help.gif b/app/assets/images/annotator_help.gif new file mode 100644 index 000000000..edad9de26 Binary files /dev/null and b/app/assets/images/annotator_help.gif differ diff --git a/app/assets/images/annotator_items.png b/app/assets/images/annotator_items.png new file mode 100644 index 000000000..847714ac2 Binary files /dev/null and b/app/assets/images/annotator_items.png differ diff --git a/app/assets/images/icon_home.png b/app/assets/images/icon_home.png new file mode 100644 index 000000000..2284856eb Binary files /dev/null and b/app/assets/images/icon_home.png differ diff --git a/app/assets/javascripts/annotatable.js.coffee b/app/assets/javascripts/annotatable.js.coffee new file mode 100644 index 000000000..49757f16a --- /dev/null +++ b/app/assets/javascripts/annotatable.js.coffee @@ -0,0 +1,38 @@ +_t = (key) -> new Gettext().gettext(key) + +App.Annotatable = + initialize: -> + current_user_id = $('html').data('current-user-id') + if current_user_id == "" + annotator.ui.editor.Editor.template = [ + '
Necesitas iniciar sesión o registrarte para continuar.
" + }, + en: { + "Comments": "Coments", + "No comment": "No comment", + "Cancel": "Cancel", + "Save": "Save", + "Edit": "Edit", + "Delete": "Delete", + "Unregistered": "You need to sign in or sign up to continue." + } +} + +window.Gettext = (key) -> + gettext: (key) -> + locale_id = $('html').attr('lang') + locale = i18n[locale_id] + if locale && locale[key] + return locale[key] + key diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 66adef5de..5d3418748 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -205,7 +205,7 @@ body.admin { .delete { border-bottom: 1px dotted #CF2A0E; color: $delete; - font-size: rem-calc(12); + font-size: $small-font-size; &:hover, &:active, &:focus { border-bottom: 1px dotted white; diff --git a/app/assets/stylesheets/annotator_overrides.scss b/app/assets/stylesheets/annotator_overrides.scss new file mode 100644 index 000000000..0a8dd92bb --- /dev/null +++ b/app/assets/stylesheets/annotator_overrides.scss @@ -0,0 +1,99 @@ +// Overrides styles of annotator.min +// + +.annotator-editor .annotator-controls, +.annotator-filter, .annotator-filter +.annotator-filter-navigation button { + background: #F3F3F3; + background-image: none; + border: 0; + border-radius: 0; + border-top: 1px solid $border; + box-shadow: none; + padding: $line-height/2 $line-height/4; +} + +.annotator-adder { + background-image: image-url("annotator_adder.png"); + margin-top: -52px; +} + +.annotator-widget { + background: white; + border: 1px solid $border; + border-radius: 0; + bottom: $line-height; + box-shadow: 0 0 5px rgba(0,0,0,0.05); + font-family: $font-sans; + font-size: $base-font-size; + line-height: $line-height; + min-width: $line-height*13; + + p { + color: $text; + padding: $line-height/2; + } +} + +.annotator-item, +.annotator-editor .annotator-item input:focus, +.annotator-editor .annotator-item textarea:focus { + background: white; +} + +.annotator-widget:after, +.annotator-editor.annotator-invert-y .annotator-widget:after { + background-image: image-url("annotator_items.png"); +} + +.annotator-editor a, +.annotator-filter .annotator-filter-property label { + padding: 0 $line-height/4; +} + +.annotator-editor a { + background: none; + background-image: none; + border: none; + box-shadow: none; + color: $link; + font-family: $font-sans; + font-size: $base-font-size; + font-weight: normal; + text-shadow: none; + padding: 0; + + &:hover, &:active, &:focus { + background: none; + background-image: none; + color: $link-hover; + text-decoration: underline; + text-shadow: none; + } + + &:after { + content: none; + } + + &.annotator-cancel { + background: #F04124; + color: white; + padding: $line-height/4 $line-height/2; + + &:hover { + background: darken(#F04124, 20); + text-decoration: none; + } + } + + &.annotator-save { + background: #43AC6A; + color: white; + padding: $line-height/4 $line-height/2; + + &:hover { + background: darken(#43AC6A, 20); + text-decoration: none; + } + } +} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index b9f9ca39e..0dedc20b6 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -3,7 +3,10 @@ @import "fonts"; @import "icons"; @import "variables"; +@import "mixins"; @import "admin"; @import "layout"; @import "participation"; -@import "c3"; \ No newline at end of file +@import "c3"; +@import "annotator.min"; +@import "annotator_overrides"; \ No newline at end of file diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss index d69496252..e8fe6a4bf 100644 --- a/app/assets/stylesheets/fonts.scss +++ b/app/assets/stylesheets/fonts.scss @@ -1,8 +1,7 @@ // Fonts // // 01. Source Sans Pro (https://www.google.com/fonts/specimen/Source+Sans+Pro) -// 02. Merriweather (https://www.google.com/fonts/specimen/Merriweather) -// 03. Lato (https://www.google.com/fonts/specimen/Lato) +// 02. Lato (https://www.google.com/fonts/specimen/Lato) // // 01. Source Sans Pro @@ -56,58 +55,7 @@ font-url('sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg'); } -// 02. Merriweather -// - - - - - - - - - - - - - - - - - - - - - - - - - - -@font-face { - font-family: 'Merriweather'; - font-style: normal; - font-weight: 300; - src: font-url('merriweather-light-webfont.eot'); - src: font-url('merriweather-light-webfont.eot?#iefix') format('embedded-opentype'), - font-url('merriweather-light-webfont.woff2') format('woff2'), - font-url('merriweather-light-webfont.woff') format('woff'), - font-url('merriweather-light-webfont.ttf') format('truetype'), - font-url('merriweather-light-webfont.svg#source_sans_proregular') format('svg'); -} - -@font-face { - font-family: 'Merriweather'; - font-style: normal; - font-weight: 400; - src: font-url('merriweather-regular-webfont.eot'); - src: font-url('merriweather-regular-webfont.eot?#iefix') format('embedded-opentype'), - font-url('merriweather-regular-webfont.woff2') format('woff2'), - font-url('merriweather-regular-webfont.woff') format('woff'), - font-url('merriweather-regular-webfont.ttf') format('truetype'), - font-url('merriweather-regular-webfont.svg#source_sans_proitalic') format('svg'); -} - -@font-face { - font-family: 'Merriweather'; - font-style: italic; - font-weight: 400; - src: font-url('merriweather-italic-webfont.eot'); - src: font-url('merriweather-italic-webfont.eot?#iefix') format('embedded-opentype'), - font-url('merriweather-italic-webfont.woff2') format('woff2'), - font-url('merriweather-italic-webfont.woff') format('woff'), - font-url('merriweather-italic-webfont.ttf') format('truetype'), - font-url('merriweather-italic-webfont.svg#source_sans_proitalic') format('svg'); -} - -@font-face { - font-family: 'Merriweather'; - font-style: normal; - font-weight: 700; - src: font-url('merriweather-bold-webfont.eot'); - src: font-url('merriweather-bold-webfont.eot?#iefix') format('embedded-opentype'), - font-url('merriweather-bold-webfont.woff2') format('woff2'), - font-url('merriweather-bold-webfont.woff') format('woff'), - font-url('merriweather-bold-webfont.ttf') format('truetype'), - font-url('merriweather-bold-webfont.svg#source_sans_probold') format('svg'); -} - -// 03. Lato +// 02. Lato // - - - - - - - - - - - - - - - - - - - - - - - - - @font-face { diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 02c2c5d20..c6d9c414c 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1,127 +1,50 @@ // Table of Contents // -// 01. Variables -// 02. Mixins -// 03. Global styles -// 04. Header -// 05. Footer -// 06. Tags -// 07. Auth pages -// 08. Forms -// 09. Alerts -// 10. User account -// 11. Filters & search -// 12. Official levels -// 13. Pagination -// 14. Tables -// 15. Social -// 16. Pages -// 17. Verification -// 18. Comments -// 19. Flags -// 20. Accesibility -// 21. Activity +// 01. Global styles +// 02. Header +// 03. Footer +// 04. Tags +// 05. Auth pages +// 06. Forms +// 07. Alerts +// 08. User account +// 09. Filters & search +// 10. Official levels +// 11. Pagination +// 12. Tables +// 13. Social +// 14. Pages +// 15. Verification +// 16. Comments +// 17. Flags +// 18. Activity // -// 01. Variables +// 01. Global styles // - - - - - - - - - - - - - - - - - - - - - - - - - -@import "variables"; +*, html { + margin: 0; + padding: 0; +} -// 02. Mixins -// - - - - - - - - - - - - - - - - - - - - - - - - - +html, body { + height: 100%; +} -@mixin back { - color: $text-medium; +body { + background: white; + color: $text; font-family: $font-sans; - font-size: $small-font-size; + font-size: $base-font-size; } -@mixin logo { - color: white; - font-family: $font-logo; - font-weight: lighter; - - @media (min-width: $small-breakpoint) { - font-size: rem-calc(24); - line-height: rem-calc(48); - } - - img { - height: 48px; - width: 48px; - - @media (min-width: $small-breakpoint) { - height: 80px; - margin-right: rem-calc(12); - margin-top: 0; - width: 80px; - } - } -} - -@mixin title { - font-size: $title-font-size; +h1, h2, h3, h4, h5, h6 { + clear: both; + font-family: $font-sans; font-weight: $font-bold; } -@mixin h1 { - font-family: $font-sans; - font-size: $h2-font-size; - font-weight: $font-bold; - - @media (min-width: $small-breakpoint) { - font-size: $h1-font-size; - } -} - -@mixin h2 { - font-family: $font-sans; - font-size: $h3-font-size; - font-weight: $font-bold; - - @media (min-width: $small-breakpoint) { - font-size: $h2-font-size; - } -} - -@mixin h3 { - font-family: $font-sans; - font-size: $h4-font-size; - font-weight: $font-bold; - - @media (min-width: $small-breakpoint) { - font-size: $h3-font-size; - } -} - -@mixin h4 { - font-family: $font-sans; - font-size: $h5-font-size; - font-weight: $font-bold; - - @media (min-width: $small-breakpoint) { - font-size: $h4-font-size; - } -} - -@mixin h5 { - font-family: $font-sans; - font-size: $h6-font-size; - font-weight: $font-bold; - - @media (min-width: $small-breakpoint) { - font-size: $h5-font-size; - } -} - -@mixin h6 { - font-family: $font-sans; - font-size: $h6-font-size; - font-weight: $font-normal; - text-transform: uppercase; -} - h1 { @include h1(); } @@ -144,64 +67,13 @@ h5 { h6 { @include h6(); -} - -h1, h2, h3, h4, h5, h6 { - - &.lead { - border-bottom: rem-calc(6) solid $brand; - } - - &.secondary { - color: $text-medium; - } -} - -// 03. Global styles -// - - - - - - - - - - - - - - - - - - - - - - - - - - -*, html { - margin: 0; - padding: 0; -} - -html, body { - height: 100%; -} - -body { - background: white; - color: $text; - font-family: $font-serif; - font-size: $base-font-size; - font-weight: normal; - text-rendering: optimizeLegibility; - - &::selection, ::-moz-selection { - background: $brand !important; - color: white !important; - } -} - -p, ul, table { - font-family: $font-serif; + font-weight: $font-normal; } p { - color: $text; + font-size: $base-font-size; + font-weight: $font-normal; line-height: $base-line-height; - margin: rem-calc(6) 0; -} - -ol, ul, li, p { - font-size: $small-font-size; -} - -h1, h2, h3, h4, h5, h6 { - clear: both; - font-family: $font-sans; - line-height: $heading-line-height; - margin: rem-calc(12) 0 rem-calc(6); } a { @@ -223,9 +95,7 @@ a { .button { background: $brand; - font-size: $small-font-size; - font-family: $font-sans !important; - padding: rem-calc(15) rem-calc(32); + font-family: $font-sans; &:hover { text-decoration: none !important; @@ -253,46 +123,22 @@ a { } .sidebar { - margin-top: rem-calc(24); - margin-bottom: rem-calc(48); + margin-top: $line-height; + margin-bottom: $line-height*2; } .sidebar-divider { border-top: 1px solid $border; - margin-top: rem-calc(24); + margin-top: $line-height; &:first-child { margin-top: 0; } } -.sub-nav { - background-color: #f2f2f2; - border-radius: rem-calc(3); - padding: rem-calc(10) rem-calc(10) rem-calc(10) 0; - margin: rem-calc(12) 0; -} - -.sub-nav dt, .sub-nav dd, .sub-nav li { - padding: rem-calc(3) 0; - - &.active { - background: #008CBA; - border-radius: rem-calc(3); - color: white; - cursor: default; - font-weight: normal; - padding: rem-calc(3) rem-calc(14); - - a:hover { - color: #737373; - } - } -} - .f-dropdown { li a { - font-size: rem-calc(12); + font-size: $small-font-size; &:hover { color: $link-hover; @@ -329,14 +175,9 @@ a { } } -.progress { - background-color: rgba(0,0,0,.06); - border: 0; -} - .wrapper { min-height: 100%; - margin: 0 auto rem-calc(-288); + margin: 0 auto (-$line-height)*12; height: auto !important; height: 100%; } @@ -347,7 +188,7 @@ a { .footer, .push { clear: both; - min-height: rem-calc(288); + min-height: $line-height*12; } .ie-alert-box { @@ -356,109 +197,43 @@ a { width: 100%; a.close { - font-size: 36px; + font-size: $h2-font-size; top: 20%; } } -.moderator-actions { - margin: rem-calc(24) 0; +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; } -.text-medium { - font-size: rem-calc(16) !important; +#drop-help.f-dropdown.content { + + @media (min-width: $small-breakpoint) { + max-width: $line-height*15; + } } -// 04. Header +// 02. Header // - - - - - - - - - - - - - - - - - - - - - - - - - header { - background: #E7F2FC; - border-bottom: rem-calc(1) solid $border; - - a { - font-family: $font-sans; - } - - h1 { - margin: rem-calc(24) 0; - } - - h2 { - font-size: rem-calc(16); - font-weight: normal; - line-height: rem-calc(30); - } - - .button { - background: white; - color: $brand; - font-family: inherit; - font-size: rem-calc(16); - margin-top: 0; - - &.see-more { - width: 100%; - - @media (min-width: $small-breakpoint) { - width: auto; - } - } - } + background: $highlight; + border-bottom: 1px solid $border; .home-page { - text-align: center; - - @media (min-width: $small-breakpoint) { - text-align: left; - } - } - - .more-info { - display: block; - margin-bottom: rem-calc(24); - text-decoration: underline; - - @media (min-width: $small-breakpoint) { - display: inline-block; - margin-bottom: 0; - margin-left: rem-calc(12); - } - } - - .icon-home-big { - color: $brand; - font-size: rem-calc(300); - line-height: rem-calc(300); - opacity: .75; - } - - .icon-home-small { - color: $brand; - font-size: rem-calc(100); - opacity: .75; - position: absolute; - right: rem-calc(24); - } - - .icon-external { - display: inline-block; - font-size: rem-calc(12); - opacity: .5; - padding-top: rem-calc(3); - vertical-align: top; - - @media (min-width: $small-breakpoint) { - padding-top: 0; - position: absolute; - right: -18px; - top: 3px; - } + padding: $line-height 0; } .selected { border-bottom: 2px solid white; - padding-bottom: rem-calc(2); + padding-bottom: $line-height/12; position: relative; } @@ -468,11 +243,7 @@ header { @media (min-width: $small-breakpoint) { float: left; - margin-left: rem-calc(12); - } - - .icon-language { - vertical-align: text-top; + margin-left: $line-height/2; } } @@ -487,7 +258,7 @@ header { } .search-form { - padding-top: rem-calc(6); + padding-top: $line-height/4; margin-bottom: 0 !important; .postfix { @@ -506,9 +277,9 @@ header { .top-bar { background: $brand !important; color: white; - min-height: rem-calc(48); + min-height: $line-height*2; max-width: 1170px !important; - padding: 0 rem-calc(12); + padding: 0 $line-height/2; @media (min-width: $small-breakpoint) { height: auto; @@ -518,15 +289,15 @@ header { .name { @media (min-width: $small-breakpoint) { - margin-left: rem-calc(12); + margin-left: $line-height/2; } a { @include logo; - line-height: rem-calc(48); + line-height: $line-height*2; @media (min-width: $small-breakpoint) { - line-height: rem-calc(80); + line-height: rem-calc(80); // Same as logo image height } } } @@ -548,7 +319,7 @@ header { } &.menu-icon a { - padding: 0 rem-calc(24); + padding: 0 $line-height; span::after { right: 0; @@ -558,28 +329,55 @@ header { &.expanded .toggle-topbar a { color: white; - } - &.expanded .toggle-topbar a span::after { - box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF; + span::after { + box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF; + } } } .top-bar-section { - margin-right: rem-calc(24); + margin-right: $line-height; width: 100%; ul { - margin-left: 0; - margin-right: rem-calc(12); + margin-left: $line-height/2; @media (min-width: $small-breakpoint) { - margin-left: rem-calc(24); + margin-left: 0; } - } - ul li { - background: none; + li { + background: none; + + &:not(.has-form) a:not(.button) { + background: none; + color: white; + + &:hover { + background: none; + } + + @media (min-width: $small-breakpoint) { + background: none; + line-height: rem-calc(80); // Same as logo image height + padding: 0 $line-height/2; + } + } + + &:hover { + background: none; + color: white; + text-decoration: underline; + transition: text-decoration 275ms; + } + + &.active:not(.has-form) a:not(.button) { + background: none; + height: $line-height*4; + line-height: $line-height*4; + } + } } ul li > a { @@ -590,6 +388,10 @@ header { line-height: $line-height*1.5; text-align: left; background: none; + + &:hover, &:focus { + background-color: #007095 !important; + } } @media (min-width: $small-breakpoint) { @@ -604,61 +406,13 @@ header { } } } - - ul li > a { - font-size: $small-font-size; - } - - ul li > a.button:hover, .top-bar-section ul li > a.button:focus { - background-color: #007095 !important; - } - - ul li, ul li:hover:not(.has-form) > a:not(.button) { - - @media (min-width: $small-breakpoint) { - background: none; - border: 0; - line-height: rem-calc(80); - } - } - - ul { - margin-left: rem-calc(12); - - @media (min-width: $small-breakpoint) { - margin-left: 0; - } - - li:not(.has-form) a:not(.button) { - background: none; - color: white; - - @media (min-width: $small-breakpoint) { - line-height: rem-calc(80); - padding: 0 rem-calc(12); - } - - &:hover { - background: none; - color: white; - text-decoration: underline; - transition: text-decoration 275ms; - } - } - - li.active:not(.has-form) a:not(.button) { - background: none; - height: rem-calc(96); - line-height: $line-height*4; - } - } } .top-links { background: $dark; color: white; font-size: $small-font-size; - padding-right: rem-calc(12); + padding-right: $line-height/2; a { color: white; @@ -677,7 +431,7 @@ header { .subnavigation { background: white; clear: both; - padding-left: rem-calc(12); + padding-left: $line-height/2; @media (min-width: $small-breakpoint) { padding-left: 0; @@ -690,21 +444,22 @@ header { a { color: $text; display: inline-block; + font-family: $font-sans; font-weight: bold; line-height: $line-height*2; position: relative; text-align: left; @media (min-width: $small-breakpoint) { - margin-left: rem-calc(12); - margin-right: rem-calc(36); + margin-left: $line-height/2; + margin-right: $line-height*1.5; margin-right: 12px\9; } &:after { color: $border; content: "|"; - padding: 0 rem-calc(12); + padding: 0 $line-height/2; @media (min-width: $small-breakpoint) { content: none; @@ -730,33 +485,34 @@ header { } } -// 05. Footer +// 03. Footer // - - - - - - - - - - - - - - - - - - - - - - - - - footer { - color: #171819; + color: $footer-color; - .logo { - @include logo; + .logo a { + font-family: $font-logo; + text-decoration: none; - a { - color: #454A4C; - line-height: rem-calc(36); - padding-left: 0; - text-decoration: none; + &:hover { + text-decoration: underline; } } p { font-size: $small-font-size; + + .info a { + text-decoration: underline; + } } a, a:active, a:focus { - color: #454A4C; - text-decoration: underline; + color: $footer-link; &:hover { - color: #171819; + color: $footer-color; } } @@ -764,35 +520,32 @@ footer { padding-left: 0; } - h4 { + h2 a { - a { - border-bottom: 1px solid #BFC1C3; - display: block; - padding-bottom: rem-calc(6); - text-decoration: none; - } + border-bottom: 1px solid $footer-border; + display: block; + font-size: $h3-font-size; + line-height: $h3-line-height; + padding-bottom: $line-height/4; + text-decoration: none; } } .footer { - background: #DEE0E2; - border-top: rem-calc(6) solid $brand; + background: $footer-bg; + border-top: 6px solid $brand; padding-top: $line-height; } .subfooter { - border-top: 1px solid #BFC1C3; - opacity: .75; - margin-top: rem-calc(24); - padding-top: rem-calc(12); + border-top: 1px solid $footer-border; + padding-top: $line-height/2; } -// 06. Tags +// 04. Tags // - - - - - - - - - - - - - - - - - - - - - - - - - .tags, .tag-cloud { - font-family: $font-sans; a { background: $border; @@ -800,8 +553,8 @@ footer { color: #4d4d4d; display: inline-block; font-size: $small-font-size; - margin-bottom: rem-calc(8); - padding: 0 rem-calc(8); + margin-bottom: $line-height/3; + padding: 0 $line-height/3; &:hover { color: $link; @@ -819,14 +572,14 @@ footer { font-family: $font-family-sans-serif; font-size: rem-calc(16); margin: -1px 0 rem-calc(12); - padding-top: rem-calc(6); + padding-top: $line-height/4; text-transform: uppercase; } a { background: white; border: 2px solid $border; - padding: rem-calc(6) rem-calc(8); + padding: $line-height/4 $line-height/3; .label { color: white; @@ -845,7 +598,7 @@ footer { } } -// 07. Auth pages +// 05. Auth pages // - - - - - - - - - - - - - - - - - - - - - - - - - .auth-page { @@ -854,7 +607,7 @@ footer { background-size: cover; @media (min-width: $small-breakpoint) { - padding-top: rem-calc(48); + padding-top: $line-height*2; } h1 { @@ -863,7 +616,7 @@ footer { a { color: white; display: block; - line-height: rem-calc(80); + line-height: rem-calc(80); // Same as logo image height text-align: center; @media (min-width: $small-breakpoint) { @@ -875,7 +628,7 @@ footer { } .auth { - min-height: rem-calc(480); + min-height: $line-height*20; .back, .icon-angle-left { @include back; @@ -897,7 +650,7 @@ footer { } } -// 08. Forms +// 06. Forms // - - - - - - - - - - - - - - - - - - - - - - - - - form.locale-form { @@ -921,7 +674,7 @@ form.locale-form { margin-bottom: 0; outline: none; padding-left: rem-calc(3); - padding-right: rem-calc(24); + padding-right: $line-height; } } } @@ -950,7 +703,7 @@ form { input[type]:not([type=submit]):not([type=file]):not([type=checkbox]) { background: $input-bg; - height: rem-calc(48); + height: $line-height*2; margin-bottom: rem-calc(16); &.search-form { @@ -969,13 +722,13 @@ form { } input[type=file] { - margin: rem-calc(12) 0 rem-calc(12) rem-calc(6); + margin: $line-height/2 0 $line-height/2 $line-height/4; } .note, .note-marked { display: block; font-size: rem-calc(13); - margin-bottom: rem-calc(12); + margin-bottom: $line-height/2; } .note-marked { @@ -989,7 +742,7 @@ form { } .ckeditor { - min-height: rem-calc(312); + min-height: $line-height*13; } .checkbox { @@ -1001,7 +754,7 @@ form { .captcha { border: 0; - padding: rem-calc(12) 0; + padding: $line-height/2 0; input { margin-bottom: 0 !important; @@ -1009,7 +762,7 @@ form { } .button.margin-top { - margin-top: rem-calc(24); + margin-top: $line-height; } } @@ -1020,7 +773,7 @@ form { } } -// 09. Alerts +// 07. Alerts // - - - - - - - - - - - - - - - - - - - - - - - - - .alert-box { @@ -1071,7 +824,7 @@ span.error, small.error { background: $alert-bg; color: $alert-color; display: inline-block; - margin: 0 rem-calc(6); + margin: 0 $line-height/4; } label.error, label.error a { @@ -1080,83 +833,34 @@ label.error, label.error a { .alert-messages { background-color: white; - padding-top: rem-calc(24); + padding-top: $line-height; } -// 10. User account +// 08. User account // - - - - - - - - - - - - - - - - - - - - - - - - - .account { background: white; - padding-top: rem-calc(24); - - a { - font-family: $font-sans; - } - - .icon-debates { - color: $debates; - font-size: rem-calc(60); - line-height: $line-height; - opacity: .5; - } - - .avatar { - margin-bottom: rem-calc(24); - } - - .initialjs-avatar { - margin-bottom: $line-height; - } - - h1.avatar { - margin-left: rem-calc(12); - } - - h3 { - clear: both; - font-size: rem-calc(20); - font-weight: bold; - line-height: $line-height; - margin: 0; - margin-bottom: rem-calc(12); - } - - .recommendations { - list-style-type: none; - margin-left: 0; - margin-top: rem-calc(24); - - li { - font-size: rem-calc(12); - margin: rem-calc(12) 0; - - &:before { - color: $debates; - content: "l "; - font-family: "icons" !important; - } - } - } + padding-top: $line-height; select { - height: rem-calc(48); - margin-right: rem-calc(12); + height: $line-height*2; + margin-right: $line-height/2; } .verify-account { - padding-right: rem-calc(12); + padding-right: $line-height/2; } .final-votes-info { background: $warning-bg; border: 1px solid $warning-border; color: $warning-color; - margin-top: rem-calc(24); - padding: rem-calc(12); + margin-top: $line-height; + padding: $line-height/2; ul li { - margin: rem-calc(12) 0; + margin: $line-height/2 0; } .icon-box { @@ -1177,9 +881,9 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { background-color: rgba(255,255,255,.5); color: rgba(0,0,0,.4); font-size: rem-calc(40); - left: rem-calc(11); + left: 11px; position: absolute; - top: rem-calc(72); + top: 72px; } .user-deleted { @@ -1202,7 +906,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { li { font-size: $small-font-size; - margin-bottom: rem-calc(12); + margin-bottom: $line-height/2; span { color: $text-medium; @@ -1220,7 +924,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { } } -// 11. Filters & search +// 09. Filters & search // - - - - - - - - - - - - - - - - - - - - - - - - - .filters, .search-results { @@ -1228,24 +932,24 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { h2 { display: inline-block; font-size: rem-calc(24); - margin: rem-calc(12) 0; + margin: $line-height/2 0; @media (min-width: $small-breakpoint) { - margin: rem-calc(24) 0; + margin: $line-height 0; } } select { background-color: #DEE0E2; height: auto; - margin-bottom: rem-calc(24); - min-width: rem-calc(180); + margin-bottom: $line-height; + min-width: $line-height*7.5; outline: 0; - padding: rem-calc(12); + padding: $line-height/2; width: auto; @media (min-width: $small-breakpoint) { - margin: 0 0 rem-calc(24) rem-calc(12); + margin: 0 0 $line-height $line-height/2; } optgroup { @@ -1281,13 +985,13 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { display: inline-block; font-family: $font-family-sans-serif; font-size: rem-calc(16); - margin: -1px 0 rem-calc(12); - padding-top: rem-calc(6); + margin: -1px 0 $line-height/2; + padding-top: $line-height/4; text-transform: uppercase; } } -// 12. Officials levels +// 10. Officials levels // - - - - - - - - - - - - - - - - - - - - - - - - - [class^="level-"] { @@ -1326,18 +1030,18 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar { background: $level-5; } -// 13. Pagination +// 11. Pagination // - - - - - - - - - - - - - - - - - - - - - - - - - ul.pagination { - margin-top: rem-calc(24); + margin-top: $line-height; li { color: $text-medium; } } -// 14. Tables +// 12. Tables // - - - - - - - - - - - - - - - - - - - - - - - - - table { @@ -1349,7 +1053,7 @@ table { td { line-height: $line-height; - padding: rem-calc(12) rem-calc(6); + padding: $line-height/2 $line-height/4; } &:nth-child(odd) { @@ -1362,7 +1066,7 @@ table { } } -// 15. Social +// 13. Social // - - - - - - - - - - - - - - - - - - - - - - - - - .button.button-twitter { @@ -1384,9 +1088,9 @@ table { .social-share-button-twitter { background: #45B0E3; color: white; - height: rem-calc(48); + height: $line-height*2; position: relative; - width: rem-calc(48); + width: $line-height*2; &:before { content: "f"; @@ -1464,9 +1168,9 @@ table { .social-share-button-google_plus { background: #DE4C34; color: white; - height: rem-calc(48); + height: $line-height*2; position: relative; - width: rem-calc(48); + width: $line-height*2; &:before { content: "B"; @@ -1486,8 +1190,8 @@ table { } .social { - margin-top: rem-calc(24); - padding-top: rem-calc(6); + margin-top: $line-height; + padding-top: $line-height/4; text-align: center; vertical-align: middle; @@ -1498,8 +1202,8 @@ table { a { font-size: rem-calc(24); - line-height: rem-calc(24); - margin: 0 rem-calc(12); + line-height: $line-height; + margin: 0 $line-height/2; text-decoration: none; vertical-align: middle; @@ -1527,9 +1231,9 @@ table { .social-share-button-twitter { background: none; color: white; - height: rem-calc(24); + height: $line-height; position: relative; - width: rem-calc(48); + width: $line-height*2; &:before { content: "f"; @@ -1594,28 +1298,28 @@ table { } } -// 16. Pages +// 14. Pages // - - - - - - - - - - - - - - - - - - - - - - - - - .page { - padding-bottom: rem-calc(48); + padding-bottom: $line-height*2; .menu { - margin-top: rem-calc(24); + margin-top: $line-height; ul { list-style-type: none; margin-left: 0; & ul { - margin-left: rem-calc(12); + margin-left: $line-height/2; } } a { display: block; font-size: rem-calc(13); - margin-bottom: rem-calc(12); + margin-bottom: $line-height/2; } } @@ -1624,19 +1328,19 @@ table { } .text { - margin-top: rem-calc(24); + margin-top: $line-height; h1, h2, h3, h4, h5, h6 { text-align: left; } ul, ol { - margin-left: rem-calc(12); + margin-left: $line-height/2; li { font-size: rem-calc(15); line-height: rem-calc(30); - margin-bottom: rem-calc(12); + margin-bottom: $line-height/2; } } @@ -1647,7 +1351,7 @@ table { } .more-information { - margin-top: rem-calc(24); + margin-top: $line-height; ul { list-style-type: none; @@ -1657,7 +1361,7 @@ table { border-bottom: 1px solid $border; font-size: rem-calc(16); font-weight: bold; - padding-bottom: rem-calc(12); + padding-bottom: $line-height/2; position: relative; text-align: left; @@ -1685,15 +1389,15 @@ table { } } -// 17. Verification +// 15. Verification // - - - - - - - - - - - - - - - - - - - - - - - - - .verification { - min-height: rem-calc(600); + min-height: $line-height*25; @media (min-width: $small-breakpoint) { .left + .left { - margin-left: rem-calc(12); + margin-left: $line-height/2; } } @@ -1710,10 +1414,10 @@ table { } .progress { - height: rem-calc(72); + height: $line-height*3; @media (min-width: $small-breakpoint) { - height: rem-calc(48); + height: $line-height*2; } &.success .meter { @@ -1725,12 +1429,12 @@ table { font-family: $font-sans; font-weight: bold; line-height: rem-calc(20); - padding-top: rem-calc(6); + padding-top: $line-height/4; text-transform: uppercase; vertical-align: top; @media (min-width: $small-breakpoint) { - line-height: rem-calc(48); + line-height: $line-height*2; padding: 0; } @@ -1773,7 +1477,7 @@ table { .button + form { display: inline-block; - margin-left: rem-calc(12); + margin-left: $line-height/2; } .verification-list { @@ -1783,17 +1487,17 @@ table { span { display: inline-block; - min-width: rem-calc(288); + min-width: $line-height*12; } } } .verify-account { - padding-right: rem-calc(12); + padding-right: $line-height/2; .already-verified { color: $check; - line-height: rem-calc(48); + line-height: $line-height*2; .icon-check { font-size: rem-calc(24); @@ -1804,8 +1508,8 @@ table { } .verify { - margin-bottom: rem-calc(48); - margin-top: rem-calc(24); + margin-bottom: $line-height*2; + margin-top: $line-height; h1 { color: $check; @@ -1827,22 +1531,22 @@ table { background: white; color: $info-color; font-size: rem-calc(24); - margin-left: rem-calc(-27); - padding: 0 rem-calc(12); + margin-left: -27px; + padding: 0 $line-height/2; position: absolute; - top: rem-calc(-12); + top: -12px; } } } -// 18. Comments +// 16. Comments // - - - - - - - - - - - - - - - - - - - - - - - - - .comments { background: $white; background-repeat: repeat-x; - padding-top: rem-calc(24); - padding-bottom: rem-calc(96); + padding-top: $line-height; + padding-bottom: $line-height*4; h2 { margin: 0; @@ -1856,7 +1560,7 @@ table { } .comment { - margin: rem-calc(6) 0; + margin: $line-height/4 0; p { margin-bottom: 0; @@ -1867,7 +1571,7 @@ table { font-family: $font-sans; font-size: $small-font-size; line-height: $line-height; - margin: rem-calc(10) rem-calc(12) rem-calc(6) 0; + margin: rem-calc(10) $line-height/2 $line-height/4 0; a { color: $text-light; @@ -1906,40 +1610,40 @@ table { } .comment-user { - margin-top: rem-calc(6); - padding: rem-calc(6) 0; + margin-top: $line-height/4; + 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: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } @elseif $n == "1" { background: none; - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } @else { background: $comment-official; - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } } } &.is-author { background: $comment-author; - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } &.is-admin, &.is-moderator { background: $comment-admin; - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } &.level-5 { background: $comment-level-5; - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } } } @@ -1947,13 +1651,13 @@ table { .is-deleted { background: $deleted; margin-left: rem-calc(42); - padding: rem-calc(6) rem-calc(12); + padding: $line-height/4 $line-height/2; } .comment-children { border-left: 1px dashed $border; margin-left: rem-calc(42); - padding-left: rem-calc(6); + padding-left: $line-height/4; @media only screen and (max-width: 40em) { margin-left: rem-calc(16); @@ -1964,7 +1668,7 @@ table { color: $text-medium; font-family: $font-sans; font-size: $small-font-size; - margin-top: rem-calc(6); + margin-top: $line-height/4; vertical-align: middle; span.user-name { @@ -1989,7 +1693,7 @@ table { } label { - padding-right: rem-calc(12); + padding-right: $line-height/2; float: none; @media (min-width: $small-breakpoint) { @@ -1998,7 +1702,7 @@ table { } } -// 19. Flags +// 17. Flags // - - - - - - - - - - - - - - - - - - - - - - - - - .flag-content { @@ -2011,7 +1715,7 @@ table { } .flag-disable, .flag-active { - line-height: rem-calc(24); + line-height: $line-height; vertical-align: middle; } @@ -2023,38 +1727,20 @@ table { color: $delete; } -// 20. Accesibility -// - - - - - - - - - - - - - - - - - - - - - - - - - - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} - -// 21. Activity +// 18. Activity // - - - - - - - - - - - - - - - - - - - - - - - - - .activity { - margin-bottom: rem-calc(48); - margin-top: rem-calc(24); + margin-bottom: $line-height*2; + margin-top: $line-height; .sub-nav { - background: none; border-bottom: 1px solid $border; - border-radius: 0; - padding-bottom: 0; dd.active { - background: none; border-bottom: 2px solid $brand; - border-radius: 0; color: $brand; + padding-bottom: $line-height/4; } } @@ -2062,7 +1748,7 @@ table { border: 0; td { - padding-left: rem-calc(36); + padding-left: $line-height*1.5; position: relative; &:before { @@ -2071,7 +1757,6 @@ table { font-size: rem-calc(24); left: 4px; position: absolute; - } } diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss new file mode 100644 index 000000000..f913ed464 --- /dev/null +++ b/app/assets/stylesheets/mixins.scss @@ -0,0 +1,92 @@ +// Table of Contents +// +// 01. Mixins +// + +// 01. Mixins +// - - - - - - - - - - - - - - - - - - - - - - - - - + +@mixin back { + color: $text-medium; + font-family: $font-sans; + font-size: $small-font-size; +} + +@mixin logo { + color: white; + font-family: $font-logo; + font-weight: lighter; + + @media (min-width: $small-breakpoint) { + font-size: rem-calc(24); + line-height: rem-calc(48); + } + + img { + height: 48px; + width: 48px; + + @media (min-width: $small-breakpoint) { + height: 80px; + margin-right: rem-calc(12); + margin-top: 0; + width: 80px; + } + } +} + +@mixin h1 { + font-size: $h2-font-size; + line-height: $h2-line-height; + + @media (min-width: $small-breakpoint) { + font-size: $h1-font-size; + line-height: $h1-line-height; + } +} + +@mixin h2 { + font-size: $h3-font-size; + line-height: $h3-line-height; + + @media (min-width: $small-breakpoint) { + font-size: $h2-font-size; + line-height: $h2-line-height; + } +} + +@mixin h3 { + font-size: $h4-font-size; + line-height: $h4-line-height; + + @media (min-width: $small-breakpoint) { + font-size: $h3-font-size; + line-height: $h3-line-height; + } +} + +@mixin h4 { + font-size: $h5-font-size; + line-height: $h5-line-height; + + @media (min-width: $small-breakpoint) { + font-size: $h4-font-size; + line-height: $h4-line-height; + } +} + +@mixin h5 { + font-size: $h6-font-size; + line-height: $h6-line-height; + + @media (min-width: $small-breakpoint) { + font-size: $h5-font-size; + line-height: $h5-line-height; + } +} + +@mixin h6 { + font-size: $h6-font-size; + line-height: $h6-line-height; + text-transform: uppercase; +} \ No newline at end of file diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 486d46881..57110299c 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -165,8 +165,6 @@ .progress { background-color: rgba(255,255,255,.8); height: rem-calc(12); - margin-bottom: rem-calc(6); - margin-top: rem-calc(4); .meter { background: $votes-like; @@ -178,8 +176,8 @@ color: $brand; vertical-align: top; position: absolute; - top: 17px; - right: 18px; + top: 13px; + right: 20px; } abbr { @@ -295,22 +293,14 @@ 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: rem-calc(24); + margin-top: $line-height; li { - font-size: rem-calc(12); - margin: rem-calc(12) 0; + font-size: $small-font-size; + margin: $line-height/2 0; &:before { content: "l "; @@ -334,7 +324,7 @@ } } -// 02. Show participation +// 03. Show participation // - - - - - - - - - - - - - - - - - - - - - - - - - .debate-show, .proposal-show { @@ -344,18 +334,6 @@ @include back; } - h1 { - clear: both; - font-size: rem-calc(30); - font-weight: bold; - margin: 0; - text-transform: lowercase; - - &:first-letter { - text-transform: uppercase; - } - } - h4 { margin: rem-calc(12) 0; } @@ -367,7 +345,7 @@ .debate-info, .proposal-info { clear: both; color: $text-medium; - font-family: $font-sans; + font-size: $small-font-size; line-height: $line-height*2; position: relative; @@ -376,7 +354,7 @@ } p { - font-size: rem-calc(15); + font-size: $small-font-size; line-height: $line-height; margin: 0; } @@ -634,7 +612,7 @@ .debate-info, .proposal-info { color: $text-medium; - font-family: $font-sans; + font-size: $small-font-size; margin: rem-calc(6) 0 0; .icon-comments { diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss index 494775a8b..72fb27788 100644 --- a/app/assets/stylesheets/variables.scss +++ b/app/assets/stylesheets/variables.scss @@ -11,28 +11,35 @@ // 01. Typography // - - - - - - - - - - - - - - - - - - - - - - - - - -$base-font-size: rem-calc(17); -$small-font-size: rem-calc(14); -$lead-font-size: rem-calc(20); -$title-font-size: rem-calc(52); -$h1-font-size: rem-calc(40); -$h2-font-size: rem-calc(30); -$h3-font-size: rem-calc(20); -$h4-font-size: rem-calc(17); -$h5-font-size: rem-calc(15); -$h6-font-size: rem-calc(13); -$base-line-height: 1.5; -$heading-line-height: 1.3; -$lead-line-height: 1.7; - -$font-sans: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif; -$font-serif: 'Merriweather', 'Georgia', 'Times New Roman', serif; $font-logo: 'Lato' !important; +$font-sans: 'Source Sans Pro', 'Helvetica', 'Arial', sans-serif !important; $font-normal: 400; $font-bold: 700; -$line-height: rem-calc(24); +$base-font-size: rem-calc(17); +$base-line-height: rem-calc(26); + +$h1-font-size: rem-calc(44); +$h1-line-height: rem-calc(57); + +$h2-font-size: rem-calc(34); +$h2-line-height: rem-calc(44); + +$h3-font-size: rem-calc(24); +$h3-line-height: rem-calc(31); + +$h4-font-size: rem-calc(19); +$h4-line-height: rem-calc(25); + +$h5-font-size: rem-calc(16); +$h5-line-height: rem-calc(21); + +$h6-font-size: rem-calc(13); +$h6-line-height: rem-calc(17); + +$small-font-size: rem-calc(14); +$line-height: rem-calc(24); // 02. Colors // - - - - - - - - - - - - - - - - - - - - - - - - - @@ -65,6 +72,13 @@ $check: #46DB91; $proposals: #FFA42D; $proposals-border: #CC8425; +$highlight: #E7F2FC; + +$footer-bg: #DEE0E2; +$footer-color: #171819; +$footer-link: #454A4C; +$footer-border: #BFC1C3; + // 03. Forms // - - - - - - - - - - - - - - - - - - - - - - - - - @@ -115,9 +129,3 @@ $small-breakpoint: em-calc(640); $medium-breakpoint: em-calc(1024); $large-breakpoint: em-calc(1440); $xlarge-breakpoint: em-calc(1920); - -$small-range: (0, $small-breakpoint); -$medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint); -$large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint); -$xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint); -$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)); diff --git a/app/controllers/annotations_controller.rb b/app/controllers/annotations_controller.rb new file mode 100644 index 000000000..d70a2e9be --- /dev/null +++ b/app/controllers/annotations_controller.rb @@ -0,0 +1,40 @@ +class AnnotationsController < ApplicationController + skip_before_action :verify_authenticity_token + load_and_authorize_resource + + def create + @annotation = Annotation.new(annotation_params) + @annotation.user = current_user + if @annotation.save + render json: @annotation.to_json(methods: :permissions) + end + end + + def update + @annotation = Annotation.find(params[:id]) + if @annotation.update_attributes(annotation_params) + render json: @annotation.to_json(methods: :permissions) + end + end + + def destroy + @annotation = Annotation.find(params[:id]) + @annotation.destroy + render json: { status: :ok } + end + + def search + @annotations = Annotation.where(legislation_id: params[:legislation_id]) + annotations_hash = { total: @annotations.size, rows: @annotations } + render json: annotations_hash.to_json(methods: :permissions) + end + + private + + def annotation_params + params + .require(:annotation) + .permit(:quote, :text, ranges: [:start, :startOffset, :end, :endOffset]) + .merge(legislation_id: params[:legislation_id]) + end +end diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index ecd057d14..841b32498 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -10,6 +10,7 @@ class ApplicationController < ActionController::Base before_action :ensure_signup_complete before_action :set_locale before_action :track_email_campaign + before_action :set_return_url check_authorization unless: :devise_controller? self.responder = ApplicationResponder @@ -17,7 +18,10 @@ class ApplicationController < ActionController::Base protect_from_forgery with: :exception rescue_from CanCan::AccessDenied do |exception| - redirect_to main_app.root_url, alert: exception.message + respond_to do |format| + format.html { redirect_to main_app.root_url, alert: exception.message } + format.json { render json: {error: exception.message}, status: :forbidden } + end end layout :set_layout @@ -98,4 +102,10 @@ class ApplicationController < ActionController::Base ahoy.track campaign.name if campaign.present? end end + + def set_return_url + if !devise_controller? && controller_name != 'welcome' && is_navigational_format? + store_location_for(:user, request.path) + end + end end diff --git a/app/controllers/legislations_controller.rb b/app/controllers/legislations_controller.rb new file mode 100644 index 000000000..a95f95ef2 --- /dev/null +++ b/app/controllers/legislations_controller.rb @@ -0,0 +1,8 @@ +class LegislationsController < ApplicationController + load_and_authorize_resource + + def show + @legislation = Legislation.find(params[:id]) + end + +end \ No newline at end of file diff --git a/app/controllers/moderation/proposals_controller.rb b/app/controllers/moderation/proposals_controller.rb index 7d48a7c07..4883bd378 100644 --- a/app/controllers/moderation/proposals_controller.rb +++ b/app/controllers/moderation/proposals_controller.rb @@ -4,7 +4,7 @@ class Moderation::ProposalsController < Moderation::BaseController has_filters %w{pending_flag_review all with_ignored_flag}, only: :index has_orders %w{flags created_at}, only: :index - before_filter :load_resources, only: [:index, :moderate] + before_action :load_resources, only: [:index, :moderate] load_and_authorize_resource diff --git a/app/controllers/moderation/users_controller.rb b/app/controllers/moderation/users_controller.rb index fc8b4488e..6ff22f94a 100644 --- a/app/controllers/moderation/users_controller.rb +++ b/app/controllers/moderation/users_controller.rb @@ -1,6 +1,6 @@ class Moderation::UsersController < Moderation::BaseController - before_filter :load_users, only: :index + before_action :load_users, only: :index load_and_authorize_resource diff --git a/app/controllers/users/sessions_controller.rb b/app/controllers/users/sessions_controller.rb index d1c1509f1..046d0a6f2 100644 --- a/app/controllers/users/sessions_controller.rb +++ b/app/controllers/users/sessions_controller.rb @@ -1,15 +1,19 @@ class Users::SessionsController < Devise::SessionsController - def after_sign_in_path_for(resource) - if !verifying_via_email? && resource.show_welcome_screen? - welcome_path - else - super - end - end - private + def after_sign_in_path_for(resource) + if !verifying_via_email? && resource.show_welcome_screen? + welcome_path + else + super + end + end + + def after_sign_out_path_for(resource) + request.referrer.present? ? request.referrer : super + end + def verifying_via_email? return false unless resource.present? stored_path = session[stored_location_key_for(resource)] || "" diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index b01720543..c5f2e6aca 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -11,10 +11,6 @@ module ApplicationHelper request.path == '/opendata' end - def header_css - home_page? || opendata_page? ? '' : 'results' - end - # if current path is /debates current_path_with_query_params(foo: 'bar') returns /debates?foo=bar # notice: if query_params have a param which also exist in current path, it "overrides" (query_params is merged last) def current_path_with_query_params(query_parameters) diff --git a/app/helpers/proposals_helper.rb b/app/helpers/proposals_helper.rb index d4d7bca64..f01abc053 100644 --- a/app/helpers/proposals_helper.rb +++ b/app/helpers/proposals_helper.rb @@ -3,13 +3,13 @@ module ProposalsHelper def progress_bar_percentage(proposal) case proposal.cached_votes_up when 0 then 0 - when 1..Proposal.votes_needed_for_success then (proposal.cached_votes_up.to_f * 100 / Proposal.votes_needed_for_success).floor + when 1..Proposal.votes_needed_for_success then (proposal.total_votes.to_f * 100 / Proposal.votes_needed_for_success).floor else 100 end end def supports_percentage(proposal) - percentage = (proposal.cached_votes_up.to_f * 100 / Proposal.votes_needed_for_success) + percentage = (proposal.total_votes.to_f * 100 / Proposal.votes_needed_for_success) case percentage when 0 then "0%" when 0..(0.1) then "0.1%" diff --git a/app/models/abilities/administrator.rb b/app/models/abilities/administrator.rb index ab3db9c2b..4af32a75c 100644 --- a/app/models/abilities/administrator.rb +++ b/app/models/abilities/administrator.rb @@ -32,6 +32,8 @@ module Abilities can :comment_as_administrator, [Debate, Comment, Proposal] can [:search, :create, :index, :destroy], ::Moderator + + can :manage, Annotation end end end diff --git a/app/models/abilities/common.rb b/app/models/abilities/common.rb index 1b3a12f96..181238d2c 100644 --- a/app/models/abilities/common.rb +++ b/app/models/abilities/common.rb @@ -40,6 +40,9 @@ module Abilities can :vote_featured, Proposal end + can :create, Annotation + can [:update, :destroy], Annotation, user_id: user.id + end end end diff --git a/app/models/abilities/everyone.rb b/app/models/abilities/everyone.rb index 691735b10..d6b2a6d57 100644 --- a/app/models/abilities/everyone.rb +++ b/app/models/abilities/everyone.rb @@ -5,7 +5,9 @@ module Abilities def initialize(user) can :read, Debate can :read, Proposal + can :read, Legislation can :read, User + can [:search, :read], Annotation end end end diff --git a/app/models/annotation.rb b/app/models/annotation.rb new file mode 100644 index 000000000..66abb2db2 --- /dev/null +++ b/app/models/annotation.rb @@ -0,0 +1,10 @@ +class Annotation < ActiveRecord::Base + serialize :ranges, Array + + belongs_to :legislation + belongs_to :user + + def permissions + { update: [user_id], delete: [user_id], admin: [] } + end +end diff --git a/app/models/legislation.rb b/app/models/legislation.rb new file mode 100644 index 000000000..d918c0255 --- /dev/null +++ b/app/models/legislation.rb @@ -0,0 +1,3 @@ +class Legislation < ActiveRecord::Base + has_many :annotations +end diff --git a/app/views/account/show.html.erb b/app/views/account/show.html.erb index d10cc78c0..9397b79f9 100644 --- a/app/views/account/show.html.erb +++ b/app/views/account/show.html.erb @@ -6,9 +6,9 @@ <%= link_to t("account.show.erase_account_link"), users_registrations_delete_form_path, class: "delete" %> - <%= avatar_image(@account, seed: @account.id, size: 60) %> + <%= avatar_image(@account, seed: @account.id, size: 100, class: "margin-bottom") %> -+
<%= t("layouts.footer.description", open_source: link_to(t("layouts.footer.open_source"), t("layouts.footer.open_source_url"), target: "blank"), consul: link_to(t("layouts.footer.consul"), t("layouts.footer.consul_url"), target: "blank")).html_safe @@ -19,23 +19,23 @@
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index 67012211e..e9d21f40d 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -1,4 +1,4 @@ -+ <%= t("layouts.header.open_city_slogan_html") %> + <%= link_to t("layouts.header.more_information"), page_path('more_information') %> +
+<%= t("pages.verify.info") %>
-