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

Refactor class-categories styles to separate file. 

Remove old style rules for guides and legend sections on categories
page which are there no more.

Rename the main class into class-categories.

Remove extra 'classes' class from sections - there's now only
one type of sections.

Rename column classes with better names.
parent ae18eebb

lib/jsduck/categories.rb

+2 −2
Original line number Diff line number Diff line
@@ -75,7 +75,7 @@ module JsDuck 


      html = @categories.map do |category|

        [

          "<div class='section classes'>",

          "<div class='section'>",

          "<h1>#{category['name']}</h1>",

          render_columns(category['groups']),

          "<div style='clear:both'></div>",
@@ -91,7 +91,7 @@ module JsDuck 
    end



    def render_columns(groups)

      align = ["lft", "mid", "rgt"]

      align = ["left-column", "middle-column", "right-column"]

      i = -1

      return split(groups, 3).map do |col|

        i += 1

template/app/view/cls/Index.js

+1 −1
Original line number Diff line number Diff line
@@ -7,7 +7,7 @@ Ext.define('Docs.view.cls.Index', { 
    requires: [

        'Docs.ContentGrabber'

    ],

    cls: 'class-list iScroll',

    cls: 'class-categories iScroll',

    margin: '15 10',

    autoScroll: true,

template/resources/sass/_categories.scss

0 → 100644
+39 −0
Original line number Diff line number Diff line 
// Styles for classes categories page

@import "mixins";



.class-categories {

  // Main heading at the top of the page

  h1.top {

    margin-bottom: 12px; }

  // Optional notice box at the top of the page

  .notice {

    background-color: #ffc;

    text-align: center;

    color: #434343;

    font-weight: bold;

    padding: 8px 0; margin: 0 20px 15px 0;

    @include border-radius(8px); }

  // All sections are inside gray round-corners bubbles

  .section {

    @include border-radius(5px);

    background-color: #f7f7f7;

    border: 1px solid #ebebeb;

    padding: 20px 10px 20px 20px;

    margin: 0 10px 20px 0;

    clear: both;

    // sections are divided into three columns

    .left-column {

      float: left;

      width: 250px;

      margin-left: 20px; }

    .middle-column {

      float: left;

      width: 280px; }

    .right-column {

      float: left; }

    // A list of links

    .links {

      margin-left: 1.5em;

      a {

        display: block; } } } }

template/resources/sass/viewport.scss

+1 −78
Original line number Diff line number Diff line
@@ -14,17 +14,10 @@ 
@import "hover_menu";

@import "trees";

@import "thumb_list";

@import "categories";



@include icons;



.notice {

  background-color: #ffc;

  text-align: center;

  color: #434343;

  font-weight: bold;

  padding: 8px 0; margin: 0 20px 15px 0;

  @include border-radius(8px); }



#center-container {

  h1 {

    font-family: $docs-heading-font;
@@ -90,76 +83,6 @@ 
    padding: 1em 0 0.4em 0;

    font-weight: normal; } }



// Styles for index page

#center-container .class-list {

  // Main heading at the top of the page

  h1.top {

    margin-bottom: 12px; }

  // All sections are inside gray round-corners bubbles

  .section {

    @include border-radius(5px);

    background-color: #f7f7f7;

    border: 1px solid #ebebeb;

    padding: 0 15px 15px 10px;

    margin: 0 10px 20px 0;

    // Icons legend, floated to right

    &.legend {

      width: 120px;

      float: right;

      @include gray-h4;

      ul {

        float: left; }

      .icon {

        padding-left: 22px; }

      a {

        display: block; } }

    // Guides section at top left

    &.guides {

      padding: 15px 35px 15px 15px;

      line-height: 1.7em;

      float: left;

      h1 {

        font-size: 1.7em !important; }

      .lft, .mid, .rgt {

        float: left;

        margin-left: 20px; }

      a {

        display: block;

        height: 32px;

        margin: 10px 0;

        padding-left: 40px; }

      // Link to examples

      .examples {

        clear: both;

        border-top: 1px solid #ebebeb;

        a {

          padding-left: 10px;

          margin: 10px 0 0 0;

          height: auto; } }

      // Default icon for guide

      .guide {

        background: url(../images/guide-icon.png) no-repeat; } }

    // Sections for class lists

    &.classes {

      clear: both;

      padding: 20px 10px 20px 20px;

      .lft {

        float: left;

        width: 250px;

        margin-left: 20px; }

      .mid {

        float: left;

        width: 280px; }

      .rgt {

        float: left; }

      .links {

        margin-left: 1.5em;

        a {

          display: block; }

        a.more {

          font-weight: bold; } } } } }





.class-overview {

  .hierarchy {

    @include border-radius(5px);