Merge pull request #6460 from svbergerem/move-new-styles-2

Move new styles (2)

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();
   }

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 'login';
-@import 'new_styles/registration';
+@import 'registration';
-@import 'new_styles/forms';
+@import 'forms';
 
 /* terms */
 @import 'terms';
 
 /* profile and settings pages */
-@import 'new_styles/settings';
+@import 'settings';
 
 /* new SPV */
 @import 'header';

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; }
+  }
+}

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; }
+}

app/assets/stylesheets/login.scss

@@ -1,16 +1,16 @@
-#login,
+.page-sessions.action-new,
-#forgot_password,
+.page-passwords.action-new,
-#reset_password {
+.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;
   }
 }

app/assets/stylesheets/new_styles/_forms.scss

@@ -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; }
-  }
-}

app/assets/stylesheets/new_styles/_interactions.scss

@@ -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; }
-    }
-  }
-}

app/assets/stylesheets/new_styles/_registration.scss

@@ -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;
-    }
-  }
-}

app/assets/stylesheets/new_styles/_settings.scss

@@ -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%;
-}

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;
+  }
+}

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%;
+}

app/assets/templates/single-post-viewer_tpl.jst.hbs

@@ -1,8 +1,8 @@
 <div id='single-post-container' class='container-fluid'>
   <div class='row'>
-    <div id='single-post-content' class='col-md-6'>
+    <div id='single-post-content' class='col-md-6 single-post-content'>
     </div>
-    <div id='single-post-interactions' class='col-md-6'>
+    <div id='single-post-interactions' class='col-md-6 single-post-interactions'>
     </div>
   </div>
 </div>

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

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')}

app/views/simple_captcha/_simple_captcha.haml

@@ -1,3 +1,3 @@
-.captcha_img
+.captcha-img
   = simple_captcha_options[:image]
 = simple_captcha_options[:field]

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,

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