~sirn/fanboi2

7c6707af5bbec3eb9f8cee0dcb72beb6a00df053 — Kridsada Thanabulpong 4 years ago cdc478c
Add scroll to bottom and scroll to top buttons.

And revert the layout of header and footer to be more in line with 0.8.
A assets/app/assets/arrow.png => assets/app/assets/arrow.png +0 -0
A assets/app/assets/arrow@2x.png => assets/app/assets/arrow@2x.png +0 -0
A assets/app/assets/arrow@3x.png => assets/app/assets/arrow@3x.png +0 -0
A assets/app/assets/arrow_up.png => assets/app/assets/arrow_up.png +0 -0
A assets/app/assets/arrow_up@2x.png => assets/app/assets/arrow_up@2x.png +0 -0
A assets/app/assets/arrow_up@3x.png => assets/app/assets/arrow_up@3x.png +0 -0
M assets/app/assets/burger.png => assets/app/assets/burger.png +0 -0
M assets/app/assets/burger@2x.png => assets/app/assets/burger@2x.png +0 -0
M assets/app/assets/burger@3x.png => assets/app/assets/burger@3x.png +0 -0
M assets/app/stylesheets/app.scss => assets/app/stylesheets/app.scss +55 -10
@@ 64,6 64,26 @@ body {
    }
}

.header-scroll-button {
    $icon-width: 20px;
    $icon-height: 20px;

    @include retina-background("arrow", "png", $icon-width, $icon-height);
    height: $icon-height;
    position: absolute;
    right: $spacing-horizontal;
    text-indent: -10000em;
    top: 0;
    width: $icon-width;

    a {
        display: block;
        float: left;
        height: $icon-height;
        width: $icon-width;
    }
}

/* Site appendix
 * ------------------------------------------------------------------------ */



@@ 96,18 116,43 @@ body {

.footer {
    padding: $spacing-vertical 0;

    .container {
        position: relative;
    }
}

.footer-scroll-button {
    $icon-width: 20px;
    $icon-height: 20px;

    @include retina-background("arrow_up", "png", $icon-width, $icon-height);
    top: -2px; /* To centerize with responsibility line. */
    height: $icon-height;
    position: absolute;
    right: $spacing-horizontal;
    text-indent: -10000em;
    width: $icon-width;

    a {
        display: block;
        float: left;
        height: $icon-height;
        width: $icon-width;
    }

    @media (min-width: $bound-desktop) {
        right: 0;
    }
}

.footer-lines {
    font-size: $font-size-small;
    line-height: $font-size-small;
    margin: 0 0 $spacing-vertical-small;
    text-align: center;
    text-align: left;

    @media (min-width: $bound-tablet) {
        float: left;
        margin: 0;
        text-align: left;
    }
}



@@ 119,26 164,26 @@ body {

.footer-links {
    display: block;
    font-size: $font-size-smaller;
    line-height: $font-size-smaller;
    font-size: $font-size-small;
    line-height: $font-size-small;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    text-align: left;

    @media (min-width: $bound-tablet) {
        float: right;
        font-size: $font-size-small;
        line-height: $font-size-small;
        margin-right: 20px + $spacing-horizontal-small;
        text-align: right;
    }
}

.footer-links-item {
    display: inline;
    margin: 0 $spacing-vertical-smaller;
    margin: 0 $spacing-horizontal-smaller 0 0;

    @media (min-width: $bound-tablet) {
        margin: 0 $spacing-horizontal-smaller $spacing-vertical-smaller;
        display: block;
    }
}

M assets/app/stylesheets/js.scss => assets/app/stylesheets/js.scss +6 -1
@@ 65,7 65,7 @@

    @media (min-width: $bound-tablet) {
        left: auto;
        right: $spacing-horizontal;
        right: ($spacing-horizontal * 2) + $icon-width;
    }
}



@@ 78,6 78,11 @@
 * ------------------------------------------------------------------------ */

.js-theme-selector {
    margin: 0 0 $spacing-vertical-small;

    @media (min-width: $bound-tablet) {
        margin: 0;
    }
}

.js-theme-selector-title {

M fanboi2/templates/partials/_layout.mako => fanboi2/templates/partials/_layout.mako +6 -2
@@ 30,9 30,10 @@
</head>
<body id="${request.route_name}" class="${formatters.user_theme(request)}"${' ' + self.body_args() if hasattr(self, 'body_args') else ''}>

<header class="header" data-board-selector="true">
<header id="top" class="header" data-board-selector="true">
    <div class="container">
        <h1 class="header-brand"><a href="/">Fanboi Channel</a></h1>
        <div class="header-scroll-button"><a href="#bottom">Scroll to bottom</a></div>
    </div>
</header>



@@ 47,8 48,11 @@ ${self.body()}
    </section>
% endif

<footer class="footer">
<footer id="bottom" class="footer">
    <div class="container">
        <div class="footer-scroll-button">
          <a href="#top">Scroll to top</a>
        </div>
        <div class="footer-lines" data-theme-selector="true">
            <p class="footer-lines-item">All contents are responsibility of its posters.</p>
        </div>