search

ndarville / pony-forum

A modern alternative to ancient forum CMSes like vBulletin and PHPBB in Python on Django. (Alpha stage.) (NB: dotCloud have since removed their free Sandbox tier.)
http://pony-forum.com
26 stars 7 forks source link

Refactor CSS/SCSS #126

Closed ndarville closed 10 years ago

ndarville commented 10 years ago 
.pagination,
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom,
#content a.button,
input[type="submit"] {
    font-size: $base-fontSize; /** Addresses weird font-size for <input> */
    font-height: $base-lineHeight;
    font-family: $button-font;
    font-variant: small-caps;
    margin: 1.5em 0;
    text-align: center;
    clear: both;
}

#board .pagination,
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom,
#content a.button,
input[type="submit"] {
    @include border-radius(0);
    border: none;
}

.pagination li,
#thread-buttons-top li,
#thread-mod-buttons-top li,
#thread-buttons-bottom li,
#thread-mod-buttons-bottom li,
#content a.button,
input[type="submit"] {
/** padding: 0 0.5em; */
    border: 1px solid $grey-border;
    display: inline-block;
    background-color: $grey-bg;
}

.pagination li:hover,
#thread-buttons-top li:hover,
#thread-mod-buttons-top li:hover,
#thread-buttons-bottom li:hover,
#thread-mod-buttons-bottom li:hover,
#content a.button:hover,
input[type="submit"]:hover {
    background-color: rgba(0,0,0, .1);
}

.pagination li:first-child,
#thread-buttons-top li:first-child,
#thread-mod-buttons-top li:first-child,
#thread-buttons-bottom li:first-child,
#thread-mod-buttons-bottom li:first-child,
#content a.button,
input[type="submit"] {
    @include border-corner-radius(top, left);
    @include border-corner-radius(bottom, left);
}

.pagination li:first-child a,
#thread-buttons-top li:first-child a,
#thread-mod-buttons-top li:first-child a,
#thread-buttons-bottom li:first-child a,
#thread-mod-buttons-bottom li:first-child a,
#content a.button,
input[type="submit"] {
    padding-left: 0.75em;
}

.pagination li:last-child,
#thread-buttons-top li:last-child,
#thread-mod-buttons-top li:last-child,
#thread-buttons-bottom li:last-child,
#thread-mod-buttons-bottom li:last-child,
#content a.button,
input[type="submit"] {
    @include border-corner-radius(top, right);
    @include border-corner-radius(bottom, right);
}

.pagination li:last-child a,
#thread-buttons-top li:last-child a,
#thread-mod-buttons-top li:last-child a,
#thread-buttons-bottom li:last-child a,
#thread-mod-buttons-bottom li:last-child a,
#content a.button,
input[type="submit"] {
    padding-right: 0.75em;
}

.pagination a,
#thread-buttons-top a,
#thread-mod-buttons-top a,
#thread-buttons-bottom a,
#thread-mod-buttons-bottom a {
    display: block;
    padding: 0 0.5em;
}
ndarville commented 10 years ago

Better to swap the first two blocks of rules (#board .pagination vs. .pagination):

#board .pagination,
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom,
#content a.button,
input[type="submit"] {
    @include border-radius(0);
    border: none;
}

.pagination,
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom,
#content a.button,
input[type="submit"] {
    font-size: $base-fontSize; /** Addresses weird font-size for <input> */
    font-height: $base-lineHeight;
    font-family: $button-font;
    font-variant: small-caps;
    margin: 1.5em 0;
    text-align: center;
    clear: both;
}

.pagination li,
#thread-buttons-top li,
#thread-mod-buttons-top li,
#thread-buttons-bottom li,
#thread-mod-buttons-bottom li,
#content a.button,
input[type="submit"] {
/** padding: 0 0.5em; */
    border: 1px solid $grey-border;
    display: inline-block;
    background-color: $grey-bg;
}

.pagination li:hover,
#thread-buttons-top li:hover,
#thread-mod-buttons-top li:hover,
#thread-buttons-bottom li:hover,
#thread-mod-buttons-bottom li:hover,
#content a.button:hover,
input[type="submit"]:hover {
    background-color: rgba(0,0,0, .1);
}

.pagination li:first-child,
#thread-buttons-top li:first-child,
#thread-mod-buttons-top li:first-child,
#thread-buttons-bottom li:first-child,
#thread-mod-buttons-bottom li:first-child,
#content a.button,
input[type="submit"] {
    @include border-corner-radius(top, left);
    @include border-corner-radius(bottom, left);
}

.pagination li:first-child a,
#thread-buttons-top li:first-child a,
#thread-mod-buttons-top li:first-child a,
#thread-buttons-bottom li:first-child a,
#thread-mod-buttons-bottom li:first-child a,
#content a.button,
input[type="submit"] {
    padding-left: 0.75em;
}

.pagination li:last-child,
#thread-buttons-top li:last-child,
#thread-mod-buttons-top li:last-child,
#thread-buttons-bottom li:last-child,
#thread-mod-buttons-bottom li:last-child,
#content a.button,
input[type="submit"] {
    @include border-corner-radius(top, right);
    @include border-corner-radius(bottom, right);
}

.pagination li:last-child a,
#thread-buttons-top li:last-child a,
#thread-mod-buttons-top li:last-child a,
#thread-buttons-bottom li:last-child a,
#thread-mod-buttons-bottom li:last-child a,
#content a.button,
input[type="submit"] {
    padding-right: 0.75em;
}

.pagination a,
#thread-buttons-top a,
#thread-mod-buttons-top a,
#thread-buttons-bottom a,
#thread-mod-buttons-bottom a {
    display: block;
    padding: 0 0.5em;
}
ndarville commented 10 years ago

Refactored the code by separating the #content a.button and input[type="submit] rules from the rest, even if it results in redundancy:

#board .pagination, /** Stands out by including #board */
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom,
#content a.button,
input[type="submit"] {
    @include border-radius(0);
    border: none;
}

.pagination,
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom {
    font-size: $base-fontSize; /** Addresses weird font-size for <input> */
    font-height: $base-lineHeight;
    font-family: $button-font;
    font-variant: small-caps;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    li {
    /** padding: 0 0.5em; */
        border: 1px solid $grey-border;
        display: inline-block;
        background-color: $grey-bg;

        &:hover {
            background-color: rgba(0,0,0, .1);
        }

        &:first-child {
            @include border-corner-radius(top, left);
            @include border-corner-radius(bottom, left);

            a {
                padding-left: 0.75em;
            }
        }

        &:last-child {
            @include border-corner-radius(top, right);
            @include border-corner-radius(bottom, right);

            a {
                padding-right: 0.75em;
            }
        }
    }

    a {
        display: block;
        padding: 0 0.5em;
    }
}

#content a.button,
input[type="submit"] {
    font-size: $base-fontSize; /** Addresses weird font-size for <input> */
    font-height: $base-lineHeight;
    font-family: $button-font;
    font-variant: small-caps;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    /** padding: 0 0.5em; */
    border: 1px solid $grey-border;
    display: inline-block;
    background-color: $grey-bg;

    @include border-corner-radius(top, left);
    @include border-corner-radius(bottom, left);

    padding-left: 0.75em;

    @include border-corner-radius(top, right);
    @include border-corner-radius(bottom, right);

    padding-right: 0.75em;

    display: block;
    padding: 0 0.5em;

    &:hover {
        background-color: rgba(0,0,0, .1);
    }
}
ndarville commented 10 years ago

The removal of border-rounding and border colours for #content a.button and input[type="submit] doesn’t seem to make sense, so I removed the selectors in the first ruleset:

#board .pagination, /** Stands out by including #board */
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom {
    @include border-radius(0);
    border: none;
}

.pagination,
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom {
    font-size: $base-fontSize; /** Addresses weird font-size for <input> */
    font-height: $base-lineHeight;
    font-family: $button-font;
    font-variant: small-caps;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    li {
    /** padding: 0 0.5em; */
        border: 1px solid $grey-border;
        display: inline-block;
        background-color: $grey-bg;

        &:hover {
            background-color: rgba(0,0,0, .1);
        }

        &:first-child {
            @include border-corner-radius(top, left);
            @include border-corner-radius(bottom, left);

            a {
                padding-left: 0.75em;
            }
        }

        &:last-child {
            @include border-corner-radius(top, right);
            @include border-corner-radius(bottom, right);

            a {
                padding-right: 0.75em;
            }
        }
    }

    a {
        display: block;
        padding: 0 0.5em;
    }
}

#content a.button,
input[type="submit"] {
    font-size: $base-fontSize; /** Addresses weird font-size for <input> */
    font-height: $base-lineHeight;
    font-family: $button-font;
    font-variant: small-caps;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    /** padding: 0 0.5em; */
    border: 1px solid $grey-border;
    display: inline-block;
    background-color: $grey-bg;

    @include border-corner-radius(top, left);
    @include border-corner-radius(bottom, left);

    padding-left: 0.75em;

    @include border-corner-radius(top, right);
    @include border-corner-radius(bottom, right);

    padding-right: 0.75em;

    display: block;
    padding: 0 0.5em;

    &:hover {
        background-color: rgba(0,0,0, .1);
    }
}
ndarville commented 10 years ago

Cleaned up the rules in the last ruleset:

#board .pagination, /** Stands out by including #board */
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom {
    @include border-radius(0);
    border: none;
}

.pagination,
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom {
    font-size: $base-fontSize; /** Addresses weird font-size for <input> */
    font-height: $base-lineHeight;
    font-family: $button-font;
    font-variant: small-caps;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    li {
    /** padding: 0 0.5em; */
        border: 1px solid $grey-border;
        display: inline-block;
        background-color: $grey-bg;

        &:hover {
            background-color: rgba(0,0,0, .1);
        }

        &:first-child {
            @include border-corner-radius(top, left);
            @include border-corner-radius(bottom, left);

            a {
                padding-left: 0.75em;
            }
        }

        &:last-child {
            @include border-corner-radius(top, right);
            @include border-corner-radius(bottom, right);

            a {
                padding-right: 0.75em;
            }
        }
    }

    a {
        display: block;
        padding: 0 0.5em;
    }
}

#content a.button,
input[type="submit"] {
    font-size: $base-fontSize; /** Addresses weird font-size for <input> */
    font-height: $base-lineHeight;
    font-family: $button-font;
    font-variant: small-caps;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    border: 1px solid $grey-border;
    background-color: $grey-bg;

    @include border-radius($radius);

    display: block;
    padding: 0 0.5em;

    &:hover {
        background-color: rgba(0,0,0, .1);
    }
}
ndarville commented 10 years ago

The rules have a typo in font-height, which has been fixed in future examples.

ndarville commented 10 years ago

Collapsed font-styling into font shorthand:

#board .pagination, /** Stands out by including #board */
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom {
    @include border-radius(0);
    border: none;
}

.pagination,
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    li {
    /** padding: 0 0.5em; */
        border: 1px solid $grey-border;
        display: inline-block;
        background-color: $grey-bg;

        &:hover {
            background-color: rgba(0,0,0, .1);
        }

        &:first-child {
            @include border-corner-radius(top, left);
            @include border-corner-radius(bottom, left);

            a {
                padding-left: 0.75em;
            }
        }

        &:last-child {
            @include border-corner-radius(top, right);
            @include border-corner-radius(bottom, right);

            a {
                padding-right: 0.75em;
            }
        }
    }

    a {
        display: block;
        padding: 0 0.5em;
    }
}

#content a.button,
input[type="submit"] {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    border: 1px solid $grey-border;
    background-color: $grey-bg;

    @include border-radius($radius);

    display: block;
    padding: 0 0.5em;

    &:hover {
        background-color: rgba(0,0,0, .1);
    }
}
ndarville commented 10 years ago

Cleaner code for the last ruleset:

#board .pagination, /** Stands out by including #board */
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom {
    @include border-radius(0);
    border: none;
}

.pagination,
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    li {
    /** padding: 0 0.5em; */
        border: 1px solid $grey-border;
        display: inline-block;
        background-color: $grey-bg;

        &:hover {
            background-color: rgba(0,0,0, .1);
        }

        &:first-child {
            @include border-corner-radius(top, left);
            @include border-corner-radius(bottom, left);

            a {
                padding-left: 0.75em;
            }
        }

        &:last-child {
            @include border-corner-radius(top, right);
            @include border-corner-radius(bottom, right);

            a {
                padding-right: 0.75em;
            }
        }
    }

    a {
        display: block;
        padding: 0 0.5em;
    }
}

#content a.button,
input[type="submit"] {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    padding: 0 0.5em;
    margin: 1.5em 0;
    display: block;
    clear: both;
    text-align: center;
    border: 1px solid $grey-border;
    background-color: $grey-bg;
    @include border-radius($radius);

    &:hover {
        background-color: rgba(0,0,0, .1);
    }
}
ndarville commented 10 years ago

Used $transparent variable:

#board .pagination, /** Stands out by including #board */
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom {
    @include border-radius(0);
    border: none;
}

.pagination,
#thread-buttons-top,
#thread-mod-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-bottom {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    li {
    /** padding: 0 0.5em; */
        border: 1px solid $grey-border;
        display: inline-block;
        background-color: $grey-bg;

        &:hover {
            background-color: $transparent;
        }

        &:first-child {
            @include border-corner-radius(top, left);
            @include border-corner-radius(bottom, left);

            a {
                padding-left: 0.75em;
            }
        }

        &:last-child {
            @include border-corner-radius(top, right);
            @include border-corner-radius(bottom, right);

            a {
                padding-right: 0.75em;
            }
        }
    }

    a {
        display: block;
        padding: 0 0.5em;
    }
}

#content a.button,
input[type="submit"] {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    padding: 0 0.5em;
    margin: 1.5em 0;
    display: block;
    clear: both;
    text-align: center;
    border: 1px solid $grey-border;
    background-color: $grey-bg;
    @include border-radius($radius);

    &:hover {
        background-color: $transparent;
    }
}
ndarville commented 10 years ago

Ordered the selectors:

#board .pagination, /** Stands out by including #board */
#thread-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-top,
#thread-mod-buttons-bottom {
    @include border-radius(0);
    border: none;
}

.pagination,
#thread-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-top,
#thread-mod-buttons-bottom {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    li {
    /** padding: 0 0.5em; */
        border: 1px solid $grey-border;
        display: inline-block;
        background-color: $grey-bg;

        &:hover {
            background-color: $transparent;
        }

        &:first-child {
            @include border-corner-radius(top, left);
            @include border-corner-radius(bottom, left);

            a {
                padding-left: 0.75em;
            }
        }

        &:last-child {
            @include border-corner-radius(top, right);
            @include border-corner-radius(bottom, right);

            a {
                padding-right: 0.75em;
            }
        }
    }

    a {
        display: block;
        padding: 0 0.5em;
    }
}

#content a.button,
input[type="submit"] {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    padding: 0 0.5em;
    margin: 1.5em 0;
    display: block;
    clear: both;
    text-align: center;
    border: 1px solid $grey-border;
    background-color: $grey-bg;
    @include border-radius($radius);

    &:hover {
        background-color: $transparent;
    }
}
ndarville commented 10 years ago

Rearranged order of rules to show overlap between the two selector groups:

#board .pagination, /** Stands out by including #board */
#thread-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-top,
#thread-mod-buttons-bottom {
    @include border-radius(0);
    border: none;
}

.pagination,
#thread-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-top,
#thread-mod-buttons-bottom {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    li {
    /** padding: 0 0.5em; */
        border: 1px solid $grey-border;
        display: inline-block;
        background-color: $grey-bg;

        &:hover {
            background-color: $transparent;
        }

        &:first-child {
            @include border-corner-radius(top, left);
            @include border-corner-radius(bottom, left);

            a {
                padding-left: 0.75em;
            }
        }

        &:last-child {
            @include border-corner-radius(top, right);
            @include border-corner-radius(bottom, right);

            a {
                padding-right: 0.75em;
            }
        }
    }

    a {
        display: block;
        padding: 0 0.5em;
    }
}

#content a.button,
input[type="submit"] {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    margin: 1.5em 0;
    text-align: center;
    clear: both;

    padding: 0 0.5em;
    display: block;
    border: 1px solid $grey-border;
    background-color: $grey-bg;
    @include border-radius($radius);

    &:hover {
        background-color: $transparent;
    }
}
ndarville commented 10 years ago

Combined shared rules between the selector groups into one separate group:

#board .pagination, /** Stands out by including #board */
#thread-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-top,
#thread-mod-buttons-bottom {
    @include border-radius(0);
    border: none;
}

.pagination,
#thread-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-top,
#thread-mod-buttons-bottom,
#content a.button,
input[type="submit"] {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    margin: 1.5em 0;
    text-align: center;
    clear: both;
}

.pagination,
#thread-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-top,
#thread-mod-buttons-bottom {
    li {
    /** padding: 0 0.5em; */
        border: 1px solid $grey-border;
        display: inline-block;
        background-color: $grey-bg;

        &:hover {
            background-color: $transparent;
        }

        &:first-child {
            @include border-corner-radius(top, left);
            @include border-corner-radius(bottom, left);

            a {
                padding-left: 0.75em;
            }
        }

        &:last-child {
            @include border-corner-radius(top, right);
            @include border-corner-radius(bottom, right);

            a {
                padding-right: 0.75em;
            }
        }
    }

    a {
        display: block;
        padding: 0 0.5em;
    }
}

#content a.button,
input[type="submit"] {
    padding: 0 0.5em;
    display: block;
    border: 1px solid $grey-border;
    background-color: $grey-bg;
    @include border-radius($radius);

    &:hover {
        background-color: $transparent;
    }
}
ndarville commented 10 years ago

Reordered some rule to show similarities and disparities between the ruleset groups:

#board .pagination, /** Stands out by including #board */
#thread-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-top,
#thread-mod-buttons-bottom {
    @include border-radius(0);
    border: none;
}

.pagination,
#thread-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-top,
#thread-mod-buttons-bottom,
#content a.button,
input[type="submit"] {
    font: small-caps #{$base-fontSize}/#{$base-lineHeight} $button-font;
    margin: 1.5em 0;
    text-align: center;
    clear: both;
}

.pagination,
#thread-buttons-top,
#thread-buttons-bottom,
#thread-mod-buttons-top,
#thread-mod-buttons-bottom {
    li {
    /** padding: 0 0.5em; */
        border: 1px solid $grey-border;
        background-color: $grey-bg;
        display: inline-block;

        &:hover {
            background-color: $transparent;
        }

        &:first-child {
            @include border-corner-radius(top, left);
            @include border-corner-radius(bottom, left);

            a {
                padding-left: 0.75em;
            }
        }

        &:last-child {
            @include border-corner-radius(top, right);
            @include border-corner-radius(bottom, right);

            a {
                padding-right: 0.75em;
            }
        }
    }

    a {
        display: block;
        padding: 0 0.5em;
    }
}

#content a.button,
input[type="submit"] {
    border: 1px solid $grey-border;
    background-color: $grey-bg;
    display: block;
    padding: 0 0.5em;
    @include border-radius($radius);

    &:hover {
        background-color: $transparent;
    }
}
ndarville commented 10 years ago

That’s it for now.