diff --git a/app/assets/javascripts/app/pages/settings.js b/app/assets/javascripts/app/pages/settings.js index 0133e1f8d..517d17663 100644 --- a/app/assets/javascripts/app/pages/settings.js +++ b/app/assets/javascripts/app/pages/settings.js @@ -1,7 +1,7 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later app.pages.Settings = Backbone.View.extend({ initialize: function() { - $(".settings_visibility").tooltip({placement: "top"}); + $(".settings-visibility").tooltip({placement: "top"}); $(".profile-visibility-hint").tooltip({placement: "top"}); $("[name='profile[public_details]']").bootstrapSwitch(); } diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index b5993d6d9..aba3ee972 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -15,7 +15,7 @@ @import 'sprites'; @import 'hovercard'; @import 'base'; -@import 'new_styles/interactions'; +@import 'interactions'; @import 'spinner'; @import 'timeago'; @import 'vendor/fileuploader'; @@ -26,15 +26,15 @@ @import 'typography'; /* login */ -@import 'new_styles/login'; -@import 'new_styles/registration'; -@import 'new_styles/forms'; +@import 'login'; +@import 'registration'; +@import 'forms'; /* terms */ @import 'terms'; /* profile and settings pages */ -@import 'new_styles/settings'; +@import 'settings'; /* new SPV */ @import 'header'; diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss new file mode 100644 index 000000000..6e72e00c2 --- /dev/null +++ b/app/assets/stylesheets/forms.scss @@ -0,0 +1,96 @@ +// We need these to reset Bootstrap styles +// scss-lint:disable QualifyingElement +input, +input[type=email], +input[type=text], +input[type=password], +textarea { + &, + &:active, + &:invalid, + &:invalid:required, + &:focus, + &:active:focus, + &:invalid:focus, + &:invalid:required:focus { + border-color: $border-grey; + box-shadow: none; + color: $text-dark-grey; + } +} +// scss-lint:enable QualifyingElement + +// Forms described here are only used on the public pages at the moment +.block-form { + margin: 20px auto; + + fieldset { + background-color: $white; + margin-bottom: 1em; + position: relative; // To correctly place the entypo icon + + input { + border-bottom-width: 0; + border-radius: 0; + color: $text-dark-grey; + margin: 0; + } + + .form-control { + font-size: 16px; + height: 40px; + padding: 10px; + padding-left: 40px; + } + + .form-control:first-of-type, + .form-control:first-of-type:focus, + .form-control:first-of-type:invalid, + .form-control:first-of-type:invalid:focus, + .form-control:first-of-type:invalid:required, + .form-control:first-of-type:invalid:required:focus { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + + .form-control:last-of-type, + .form-control:last-of-type:focus, + .form-control:last-of-type:invalid, + .form-control:last-of-type:invalid:focus, + .form-control:last-of-type:invalid:required, + .form-control:last-of-type:invalid:required:focus { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-bottom-width: 1px; + } + + [class^="entypo-"], + [class*="entypo-"] { + color: $text-grey; + font-size: 20px; + left: 10px; + line-height: 20px; + position: absolute; + text-align: center; + top: 10px; + width: 20px; + } + + [class^="entypo-"]:nth-of-type(2), + [class*="entypo-"]:nth-of-type(2) { + top: 50px; + } + + [class^="entypo-"]:nth-of-type(3), + [class*="entypo-"]:nth-of-type(3) { + top: 90px; + } + + [class^="entypo-"]:nth-of-type(4), + [class*="entypo-"]:nth-of-type(4) { + top: 130px; + } + + ::placeholder { text-transform: uppercase; } + } +} diff --git a/app/assets/stylesheets/interactions.scss b/app/assets/stylesheets/interactions.scss new file mode 100644 index 000000000..90c5d0063 --- /dev/null +++ b/app/assets/stylesheets/interactions.scss @@ -0,0 +1,65 @@ +.control-icons { + a { + &:hover { text-decoration: none; } + + [class^="entypo-"], + [class*="entypo-"] { + color: $text-grey; + font-size: $font-size-base; + line-height: $line-height-base; + vertical-align: middle; + } + + [class^="entypo-"]:hover, + [class*="entypo-"]:hover { + color: $text; + } + + &.hide_conversation i { font-size: $line-height-computed * 1.5; } + &.delete_conversation i { font-size: $font-size-base * 1.5; } + &.destroy_participation i { color: $black; } + &.destroy_participation i:hover { color: $text-dark-grey; } + } +} + +.stream_container, +.single-post-interactions { + .control-icons { + float: right; + z-index: 6; + + .block_user, + .comment_report, + .create_participation, + .delete, + .destroy_participation, + .post_report { + display: inline-block; + } + + > a:hover { text-decoration: none; } + } +} + +.stream_element, +.comment, +.photo, +.stream_element:hover .comment { + .control-icons { + @include transition(opacity); + opacity: 0; + } + + &:hover .control-icons { opacity: 1; } +} + +.stream_element, +.comment, +.photo { + .control-icons > a { + @include transition(opacity); + opacity: .8; + } + + .control-icons > a:hover { opacity: 1; } +} diff --git a/app/assets/stylesheets/new_styles/_login.scss b/app/assets/stylesheets/login.scss similarity index 60% rename from app/assets/stylesheets/new_styles/_login.scss rename to app/assets/stylesheets/login.scss index d0da96428..b0336a8e0 100644 --- a/app/assets/stylesheets/new_styles/_login.scss +++ b/app/assets/stylesheets/login.scss @@ -1,16 +1,16 @@ -#login, -#forgot_password, -#reset_password { +.page-sessions.action-new, +.page-passwords.action-new, +.page-passwords.action-edit { padding-top: 25px; .logos-asterisk { - margin: auto; - width: 154px; height: 154px; + margin: auto; margin-bottom: 12px; + width: 154px; } - form.block-form { + .block-form { max-width: 400px; } } diff --git a/app/assets/stylesheets/new_styles/_forms.scss b/app/assets/stylesheets/new_styles/_forms.scss deleted file mode 100644 index 881e87b59..000000000 --- a/app/assets/stylesheets/new_styles/_forms.scss +++ /dev/null @@ -1,90 +0,0 @@ -input, -input[type=email], -input[type=text], -input[type=password], -textarea { /* Bootstrap reset */ - &, - &:active, - &:invalid, - &:invalid:required, - &:focus, - &:active:focus, - &:invalid:focus, - &:invalid:required:focus { - border-color: $border-grey; - box-shadow: none; - color : $text-dark-grey; - } -} - -/* autocomplete colors */ -input:-webkit-autofill{ - background-color: #fff !important; - background-image: none !important; -} - -/* Forms described here are only used on the public pages at the moment */ -form.block-form { - margin: 20px auto; - - fieldset { - margin-bottom: 1em; - background-color: #fff; - position: relative; /* To correctly place the entypo icon */ - - input { - color : $text-dark-grey; - margin: 0px; - border-bottom-width: 0px; - border-radius: 0px; - } - - .form-control { - font-size: 16px; - height: 40px; - padding: 10px; - padding-left: 40px; - } - - .form-control:first-of-type { - &, - &:focus, - &:invalid, - &:invalid:focus, - &:invalid:required, - &:invalid:required:focus { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - } - } - - .form-control:last-of-type { - &, - &:focus, - &:invalid, - &:invalid:focus, - &:invalid:required, - &:invalid:required:focus { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - border-bottom-width: 1px; - } - } - - [class^="entypo-"], [class*="entypo-"] { - position: absolute; - line-height: 20px; - top: 10px; - left: 10px; - width: 20px; - text-align: center; - color: $text-grey; - font-size: 20px; - &:nth-of-type(2) { top: 50px; } - &:nth-of-type(3) { top: 90px; } - &:nth-of-type(4) { top: 130px; } - } - - ::placeholder { text-transform: uppercase; } - } -} diff --git a/app/assets/stylesheets/new_styles/_interactions.scss b/app/assets/stylesheets/new_styles/_interactions.scss deleted file mode 100644 index 9fc583764..000000000 --- a/app/assets/stylesheets/new_styles/_interactions.scss +++ /dev/null @@ -1,59 +0,0 @@ -.control-icons { - a { - &:hover { text-decoration: none; } - - [class^="entypo-"], [class*="entypo-"] { - color: $text-grey; - font-size: $font-size-base; - line-height: $line-height-base; - vertical-align: middle; - &:hover { color: $text; } - &.cross { font-size: $line-height-base; } - } - - &.hide_conversation i { - font-size: $line-height-computed*1.5; - } - - &.delete_conversation i { - font-size: $font-size-base*1.5; - } - - &.destroy_participation i { - color: $black; - &:hover { color: $text-dark-grey; } - } - } -} - -.stream_container, #single-post-interactions { - .control-icons { - z-index: 6; - float: right; - - .block_user, - .comment_report, - .create_participation, - .delete, - .destroy_participation, - .post_report { - display: inline-block; - } - - & > a:hover { - text-decoration: none; - } - } - - .stream_element, .comment, .photo, .stream_element:hover .comment { - .control-icons > a { - @include transition(opacity); - opacity: 0; - } - - &:hover .control-icons { - & > a { opacity: 0.8; } - & > a:hover { opacity: 1; } - } - } -} diff --git a/app/assets/stylesheets/new_styles/_registration.scss b/app/assets/stylesheets/new_styles/_registration.scss deleted file mode 100644 index 170bab40d..000000000 --- a/app/assets/stylesheets/new_styles/_registration.scss +++ /dev/null @@ -1,52 +0,0 @@ -#registration { - .ball { - height: 633px; - max-width: 100%; - background: image-url("branding/ball.png") no-repeat; - background-size: contain; - } - - .v-center { - display: table; - height: 633px; - - .content { - display: table-cell; - vertical-align: middle; - - #pod-name { - text-align: center; - margin: 12px; - font-size : 35px; - } - } - } - - form { - max-width: 400px; - - .captcha_img { - position: absolute; - left: 10px; - width: 120px; - top: 169px; - } - - #user_captcha { - font-size: 16px; - height: 40px; - padding: 10px 10px 10px 130px; - line-height: $line-height-base; - box-sizing: border-box; - width: 100%; - border-bottom: 1px solid $border-grey; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - } - - #terms > a { - color: inherit; - text-decoration: underline; - } - } -} diff --git a/app/assets/stylesheets/new_styles/_settings.scss b/app/assets/stylesheets/new_styles/_settings.scss deleted file mode 100644 index 8eac7f8a3..000000000 --- a/app/assets/stylesheets/new_styles/_settings.scss +++ /dev/null @@ -1,31 +0,0 @@ -/* Specific styles for the settings pages (profile, user account, privacy, services) */ -#inner_account_delete { - width: 700px; -} - -.as-selections #tags { - box-shadow: none; -} - -.enclosed-checkbox label { - margin-bottom: 0; -} - -#profile_photo_upload { - text-align: center; - - .avatar { - height: auto; - width: auto; - max-width: 200px; - margin-bottom: 20px; - } -} - -.settings_visibility { margin-left: 10px; } - -#profile_bio { - width: 100%; - max-width: 100%; - min-width: 100%; -} diff --git a/app/assets/stylesheets/registration.scss b/app/assets/stylesheets/registration.scss new file mode 100644 index 000000000..6a98cbc8b --- /dev/null +++ b/app/assets/stylesheets/registration.scss @@ -0,0 +1,52 @@ +.page-registrations.action-new { + .ball { + background: image-url('branding/ball.png') no-repeat; + background-size: contain; + height: 633px; + max-width: 100%; + } + + .v-center { + display: table; + height: 633px; + } + + .content { + display: table-cell; + vertical-align: middle; + + h2 { + font-size: 35px; + margin: 12px; + text-align: center; + } + } + + form { + max-width: 400px; + } + + .captcha-img { + left: 10px; + position: absolute; + top: 169px; + width: 120px; + } + + .captcha-input { + border-bottom: 1px solid $border-grey; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + box-sizing: border-box; + font-size: 16px; + height: 40px; + line-height: $line-height-base; + padding: 10px 10px 10px 130px; + width: 100%; + } + + .terms > a { + color: inherit; + text-decoration: underline; + } +} diff --git a/app/assets/stylesheets/settings.scss b/app/assets/stylesheets/settings.scss new file mode 100644 index 000000000..c6bcf19f5 --- /dev/null +++ b/app/assets/stylesheets/settings.scss @@ -0,0 +1,22 @@ +// Specific styles for the settings pages (profile, user account, privacy, services) +.enclosed-checkbox label { + margin-bottom: 0; +} + +.profile-photo-upload { + text-align: center; + + .avatar { + height: auto; + margin-bottom: 20px; + max-width: 200px; + width: auto; + } +} + +.settings-visibility { margin-left: 10px; } + +.page-profiles.action-edit textarea { + max-width: 100%; + min-width: 100%; +} diff --git a/app/assets/templates/single-post-viewer_tpl.jst.hbs b/app/assets/templates/single-post-viewer_tpl.jst.hbs index 0d4ea63de..f06916a63 100644 --- a/app/assets/templates/single-post-viewer_tpl.jst.hbs +++ b/app/assets/templates/single-post-viewer_tpl.jst.hbs @@ -1,8 +1,8 @@
-
+
-
+
diff --git a/app/views/photos/_new_profile_photo.haml b/app/views/photos/_new_profile_photo.haml index 2a93082db..f89d5ac38 100644 --- a/app/views/photos/_new_profile_photo.haml +++ b/app/views/photos/_new_profile_photo.haml @@ -57,7 +57,7 @@ } window.onload = createUploader; -#profile_photo_upload +.profile-photo-upload#profile_photo_upload = owner_image_tag(:thumb_large) .small-horizontal-spacer .clearfix diff --git a/app/views/registrations/_form.haml b/app/views/registrations/_form.haml index 407ccb1fe..06c9b9099 100644 --- a/app/views/registrations/_form.haml +++ b/app/views/registrations/_form.haml @@ -46,12 +46,15 @@ aria: {labelledby: "passwordConfirmationLabel"} - if AppConfig.settings.captcha.enable? - = show_simple_captcha object: 'user', :code_type => 'numeric', input_html: {class: "form-control"} + = show_simple_captcha object: "user", + code_type: "numeric", + class: "simple-captcha-image", + input_html: {class: "form-control captcha-input"} = invite_hidden_tag(invite) - if AppConfig.settings.terms.enable? - %p#terms.text-center + %p.terms.text-center#terms = t('registrations.new.terms', terms_link: link_to(t('registrations.new.terms_link'), terms_path, target: "_blank")).html_safe = f.submit t('registrations.new.sign_up'), class: "btn btn-block btn-large btn-default", data: {disable_with: t('registrations.new.submitting')} diff --git a/app/views/simple_captcha/_simple_captcha.haml b/app/views/simple_captcha/_simple_captcha.haml index f8adfb468..e0ff398bf 100644 --- a/app/views/simple_captcha/_simple_captcha.haml +++ b/app/views/simple_captcha/_simple_captcha.haml @@ -1,3 +1,3 @@ -.captcha_img +.captcha-img = simple_captcha_options[:image] = simple_captcha_options[:field] diff --git a/app/views/users/_edit.haml b/app/views/users/_edit.haml index 8779adaa5..72158785a 100644 --- a/app/views/users/_edit.haml +++ b/app/views/users/_edit.haml @@ -20,7 +20,7 @@ .col-md-6 %h3 = t(".your_email") - %i.entypo-lock.gray.settings_visibility{title: t("users.edit.your_email_private")} + %i.entypo-lock.gray.settings-visibility{title: t("users.edit.your_email_private")} = form_for "user", url: user_path, diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index 7acb69cc0..e5bbfb275 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/features/step_definitions/custom_web_steps.rb @@ -88,6 +88,7 @@ And /^I hover over the "([^"]+)"$/ do |element| end When /^I prepare the deletion of the first post$/ do + find(".stream .stream_element", match: :first).hover within(find(".stream .stream_element", match: :first)) do ctrl = find(".control-icons") ctrl.hover @@ -96,6 +97,7 @@ When /^I prepare the deletion of the first post$/ do end When /^I prepare hiding the first post$/ do + find(".stream .stream_element", match: :first).hover within(find(".stream .stream_element", match: :first)) do ctrl = find(".control-icons") ctrl.hover