From 433cb9b3b2b85c371818495b5e636daff5c49457 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sat, 22 Jul 2017 15:20:36 +0100
Subject: [PATCH] Improved breadcrumb responsiveness

Closes #426
---
 resources/assets/sass/_header.scss      | 22 +++++++++++++++++++++-
 resources/views/books/show.blade.php    |  4 ++--
 resources/views/chapters/show.blade.php |  4 ++--
 resources/views/pages/show.blade.php    |  4 ++--
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index 16ed75545..ae8dd3ff5 100644
--- a/resources/assets/sass/_header.scss
+++ b/resources/assets/sass/_header.scss
@@ -142,7 +142,6 @@ form.search-box {
   color: #aaa;
   padding: 0 $-xs;
 }
-
 .faded {
   a, button, span, span > div {
     color: #666;
@@ -178,6 +177,8 @@ form.search-box {
     padding-left: 0;
   }
 }
+
+
 .action-buttons .dropdown-container:last-child a {
   padding-right: 0;
   padding-left: $-s;
@@ -196,6 +197,25 @@ form.search-box {
   }
 }
 
+@include smaller-than($m) {
+  .breadcrumbs .text-button, .action-buttons .text-button {
+    padding: $-s $-xs;
+  }
+  .action-buttons .dropdown-container:last-child a {
+    padding-left: $-xs;
+  }
+  .breadcrumbs .text-button {
+    font-size: 0;
+  }
+  .breadcrumbs a i {
+    font-size: $fs-m;
+    padding-right: 0;
+  }
+  .breadcrumbs span.sep {
+    padding: 0 $-xxs;
+  }
+}
+
 .nav-tabs {
   text-align: center;
   a, .tab-item {
diff --git a/resources/views/books/show.blade.php b/resources/views/books/show.blade.php
index 353018dbc..0e3bd4e17 100644
--- a/resources/views/books/show.blade.php
+++ b/resources/views/books/show.blade.php
@@ -5,10 +5,10 @@
     <div class="faded-small toolbar">
         <div class="container">
             <div class="row">
-                <div class="col-sm-6 faded">
+                <div class="col-sm-6 col-xs-1  faded">
                     @include('books._breadcrumbs', ['book' => $book])
                 </div>
-                <div class="col-sm-6">
+                <div class="col-sm-6 col-xs-11">
                     <div class="action-buttons faded">
                         <span dropdown class="dropdown-container">
                             <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>
diff --git a/resources/views/chapters/show.blade.php b/resources/views/chapters/show.blade.php
index 85aa252d1..9ebd8d9c4 100644
--- a/resources/views/chapters/show.blade.php
+++ b/resources/views/chapters/show.blade.php
@@ -5,10 +5,10 @@
     <div class="faded-small toolbar">
         <div class="container">
             <div class="row">
-                <div class="col-sm-8 faded" ng-non-bindable>
+                <div class="col-sm-6 col-xs-3 faded" ng-non-bindable>
                     @include('chapters._breadcrumbs', ['chapter' => $chapter])
                 </div>
-                <div class="col-sm-4 faded">
+                <div class="col-sm-6 col-xs-9 faded">
                     <div class="action-buttons">
                         <span dropdown class="dropdown-container">
                             <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>
diff --git a/resources/views/pages/show.blade.php b/resources/views/pages/show.blade.php
index 6b2dc3c23..221ed4476 100644
--- a/resources/views/pages/show.blade.php
+++ b/resources/views/pages/show.blade.php
@@ -5,10 +5,10 @@
     <div class="faded-small toolbar">
         <div class="container">
             <div class="row">
-                <div class="col-sm-6 faded">
+                <div class="col-sm-8 col-xs-5 faded">
                     @include('pages._breadcrumbs', ['page' => $page])
                 </div>
-                <div class="col-sm-6 faded">
+                <div class="col-sm-4 col-xs-7 faded">
                     <div class="action-buttons">
                         <span dropdown class="dropdown-container">
                             <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>