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

Refactoring of index page styles. 

- Renamed some classes with more sensible names.
  Instead of two two divs having .legend class, we now have
  .section class that's applied to all main divs on index page.

- Removed extra </div>

- Moved all index-page styles to one place.

- Reduced some of the duplication.
parent 68ec169e

template/app/view/index/Container.js

+26 −25
Original line number Diff line number Diff line
@@ -11,21 +11,21 @@ Ext.define('Docs.view.index.Container', { 
        var data = this.classData;



        var tpl = new Ext.XTemplate(

            '<h1 class="pb">{title}</h1>',

            '<h1 class="top">{title}</h1>',

            '<tpl if="notice">',

                '<div class="notice">{notice}</div>',

            '</tpl>',

            '<div class="legend icons">',

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

                '<h4>Legend</h4>',

                '<ul>',

                  '<li class="icn icon-pkg">Package</li>',

                  '<li class="icn icon-class">Class</li>',

                  '<li class="icn icon-singleton">Singleton</li>',

                  '<li class="icn icon-component">Component</li>',

                  '<li class="icn icon-guide">Guide</li>',

                    '<li class="icon icon-pkg">Package</li>',

                    '<li class="icon icon-class">Class</li>',

                    '<li class="icon icon-singleton">Singleton</li>',

                    '<li class="icon icon-component">Component</li>',

                    '<li class="icon icon-guide">Guide</li>',

                '</ul>',

            '</div>',

              '<div class="legend guides">',

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

                '<h1>Guides</h1>',

                '<div class="lft">',

                    '<a class="guide getting_started" rel="getting_started" href="guides/getting_started/index.html">Getting Started</a>',
@@ -39,17 +39,18 @@ Ext.define('Docs.view.index.Container', { 
                    '<a class="guide tree" rel="tree" href="guides/tree/index.html">Trees</a>',

                    '<a class="guide drawing_and_charting" rel="drawing_and_charting" href="guides/drawing_and_charting/index.html">Charts</a>',

                '</div>',

                '<div class="right">',

                '<div class="rgt">',

                    '<a class="guide components" rel="components" href="guides/components/index.html">Components</a>',

                    '<a class="guide theming" rel="theming" href="guides/theming/index.html">Theming</a>',

                    '<a class="guide direct" rel="direct" href="guides/direct/index.html">Direct</a>',

                    '<a class="guide accessibility" rel="accessibility" href="guides/accessibility/index.html">Accessibility</a>',

                '</div>',

                '<div class="egLink"><a href="http://dev.sencha.com/deploy/ext-4.0.3/examples/index.html">View the Ext 4.0 examples &rarr;</a></div>',

                '<div class="examples">',

                    '<a href="http://dev.sencha.com/deploy/ext-4.0.3/examples/index.html">View the Ext 4.0 examples &rarr;</a>',

                '</div>',

            '</div>',

            '<tpl for="organisation">',

                '<div class="category">',

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

                    '<h1>{name}</h1>',

                    '<tpl for="categories">',

                        '<div class="{align}">',

template/resources/sass/viewport.scss

+92 −93
Original line number Diff line number Diff line
@@ -299,33 +299,61 @@ a { 
  h3 {

    font-size: 1.2em;

    padding: 1em 0 0.4em 0;

    font-weight: normal; }

  .legend.guides {

    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 20px 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;

    width: 560px !important;

      width: 560px;

      line-height: 1.7em;

      h1 {

        font-size: 1.7em !important; }

      .lft {

        float: left;

      width: 200px; }

        width: 200px;

        margin-left: 20px }

      .mid {

        float: left;

        width: 100px;

        margin-left: 20px; }

    .right {

      .rgt {

        margin-left: 370px; }

      a {

        display: block;

        height: 32px;

        margin: 10px 0;

        padding-left: 40px; }

    .egLink {

      // Link to examples

      .examples {

        border-top: 1px solid #ebebeb;

        a {

          padding-left: 10px;

          margin: 10px 0 0 0;

          height: auto; } }

      // Icons for each guide

      .getting_started {

        background: url(../images/guides.png) no-repeat 0px 0px; }

      .drawing_and_charting {
@@ -350,15 +378,10 @@ a { 
        background: url(../images/guides.png) no-repeat 0px -387px; }

      .accessibility {

        background: url(../images/guides.png) no-repeat 0px -453px; } }

  .category {

    // Sections for class lists

    &.classes {

      clear: both;

    background-color: #f7f7f7;

    border: 1px solid #ebebeb;

      padding: 20px 10px 20px 20px;

    margin: 0 20px 20px 0;

    @include border-radius(10px); }

  .category:last-child {

    margin-bottom: 0; }

      .lft {

        float: left;

        width: 250px;
@@ -373,31 +396,7 @@ a { 
        a {

          display: block; }

        a.more {

      font-weight: bold; } }



  .legend {

    @include border-radius(5px);

    background-color: #f7f7f7;

    border: 1px solid #ebebeb;

    padding: 0 15px 15px 10px;

    margin: 0 20px 10px 0;

    &.icons {

      width: 120px;

      float: right; }

    ul {

      float: left; }

    .icn {

      padding-left: 22px; }

    a {

      display: block; }

    @include gray-h4; } }





#center-container .class-list {

  h1 {

    padding-bottom: 10px;

    &.pb {

      margin-bottom: 12px; } } }

          font-weight: bold; } } } } }





#nested-west-region-container {