Commit ab81f282 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Refactor expander and large expander HTML & CSS.

parent d47ffc45

template/app/view/comments/Expander.js

+12 −15
Original line number Diff line number Diff line
@@ -8,6 +8,7 @@ Ext.define('Docs.view.comments.Expander', { 
        'Docs.Comments',

        'Docs.view.comments.ListWithForm'

    ],

    componentCls: "comments-expander",



    /**

     * @cfg {String} type
@@ -31,12 +32,10 @@ Ext.define('Docs.view.comments.Expander', { 


    initComponent: function() {

        this.tpl = new Ext.XTemplate(

            '<div class="comments-div first-child">',

            '<a href="#" class="side toggleComments"><span></span></a>',

            '<a href="#" class="name toggleComments">',

                '{[this.renderCount(values.count)]}',

            '</a>',

            '</div>',

            {

                renderCount: this.renderCount

            }
@@ -78,15 +77,14 @@ Ext.define('Docs.view.comments.Expander', { 
     */

    expand: function() {

        this.expanded = true;

        var div = this.getEl().down(".comments-div");

        div.addCls('open');

        div.down('.name').setStyle("display", "none");

        this.getEl().addCls('open');

        this.getEl().down('.name').setStyle("display", "none");



        if (this.list) {

            this.list.show();

        }

        else {

            this.loadComments(div);

            this.loadComments();

        }

    },
@@ -95,21 +93,20 @@ Ext.define('Docs.view.comments.Expander', { 
     */

    collapse: function() {

        this.expanded = false;

        var div = this.getEl().down(".comments-div");

        div.removeCls('open');

        div.down('.name').setStyle("display", "block");

        this.getEl().removeCls('open');

        this.getEl().down('.name').setStyle("display", "block");



        if (this.list) {

            this.list.hide();

        }

    },



    loadComments: function(div) {

    loadComments: function() {

        var target = [this.type, this.className, this.memberId];

        this.list = new Docs.view.comments.ListWithForm({

            target: target,

            newCommentTitle: this.newCommentTitle,

            renderTo: div

            renderTo: this.getEl()

        });



        Docs.Comments.load(target, function(comments) {

template/app/view/comments/LargeExpander.js

+1 −1
Original line number Diff line number Diff line
@@ -8,7 +8,7 @@ Ext.define('Docs.view.comments.LargeExpander', { 
    ],



    html: [

        '<div class="comments-section">',

        '<div class="comments-large-expander">',

            '<h3 class="icon-comment">Comments</h3>',

            '<div></div>',

        '</div>'

template/resources/sass/_comments.scss

+6 −6
Original line number Diff line number Diff line
@@ -26,8 +26,8 @@ $moderator-color-light: #94b773; 




// Large comments expander (Class/Guide/Video)

#center-container .comments-section {

  .comments-div {

#center-container .comments-large-expander {

  .comments-expander {

    @include member-expander; }

  // Header icon in large comments expander

  h3.icon-comment {
@@ -37,13 +37,15 @@ $moderator-color-light: #94b773; 




// Comments expander

.comments-div {

.comments-expander {

  color: $docs-text-color;

  border-width: 1px 0;

  border-style: solid;

  border-color: #e0e0e0;

  position: relative;

  padding: 0 0 10px 25px;

  &.open {

    min-height: 40px; }

  .loading {

    font-weight: bold;

    background: url(../images/ajax-loader.gif) no-repeat 0 9px;
@@ -51,9 +53,7 @@ $moderator-color-light: #94b773; 
  .name {

    padding: 10px 0 0 0px;

    display: block;

    font-weight: normal !important; }

  &.open {

    min-height: 40px; } }

    font-weight: normal !important; } }





// login form at the end of comments list.

template/resources/sass/_mixins.scss

+0 −1
Original line number Diff line number Diff line
@@ -69,7 +69,6 @@ 
    @include box-shadow(#d7d7d7 0 1px 0 0 inset); } }



@mixin member-expander {



  &.open > a.side.toggleComments,

  &.open > a.side.expandable {

    background: #EBF3FE;