From 137e36497d68a946eb11d0d5ee2a83e01e8d3d8b Mon Sep 17 00:00:00 2001 From: Matt Rogers Date: Tue, 12 Jan 2016 21:37:44 -0600 Subject: [PATCH] Update the footer to be more responsive Matches the style of the existing footer and makes the links move to the next line instead of wrapping if the viewport is too small for all of the footer to fit on one line. Also moves the footer over to bootstrap styles --- app/assets/stylesheets/login.css.scss | 5 ----- app/assets/stylesheets/tracks.css.scss | 20 ++++++++++++++++++++ app/views/shared/_footer.html.erb | 19 ++++++++++++------- 3 files changed, 32 insertions(+), 12 deletions(-) diff --git a/app/assets/stylesheets/login.css.scss b/app/assets/stylesheets/login.css.scss index ed0bab56..72a242f6 100644 --- a/app/assets/stylesheets/login.css.scss +++ b/app/assets/stylesheets/login.css.scss @@ -44,8 +44,3 @@ body { @extend .form-group; } -.footer { - @include make-xs-column(12); - @include make-sm-column(6); - @include make-sm-column-offset(3); -} diff --git a/app/assets/stylesheets/tracks.css.scss b/app/assets/stylesheets/tracks.css.scss index 41b3edef..3c13b809 100644 --- a/app/assets/stylesheets/tracks.css.scss +++ b/app/assets/stylesheets/tracks.css.scss @@ -10,3 +10,23 @@ border-radius: 2px; } } + +.footer { + @include make-xs-column(12); + @include make-sm-column(10); + @include make-sm-column-offset(1); + font-size: 85%; + text-align: center; + color: #999; + margin: 20px 0 5px; +} + +.footer-line { + display: block; +} + +@media screen and (min-width: 1170px) { + .footer-line { + display: inline; + } +} diff --git a/app/views/shared/_footer.html.erb b/app/views/shared/_footer.html.erb index 718a4de7..6d48031f 100644 --- a/app/views/shared/_footer.html.erb +++ b/app/views/shared/_footer.html.erb @@ -1,8 +1,13 @@ -