Improved breadcrumb responsiveness

Closes #426

diff --git a/resources/assets/sass/_header.scss b/resources/assets/sass/_header.scss
index 16ed7554588f1fd2b06a33a514ed95c4d673b11f..ae8dd3ff51937b67f6bb62e15fb4b3ca7e260502 100644 (file)
--- 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 353018dbc76e0a8f9b2a5628dc56a1361404a67e..0e3bd4e17bbda758c61872ba930524a5c5b3e534 100644 (file)
--- 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 85aa252d190a6ac0a785514e780701483eafb00b..9ebd8d9c459efac91ad66f901a5a698200874ff8 100644 (file)
--- 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 6b2dc3c2319a7c7656fe4fb86c9926ed57dcb787..221ed44769393182553f5cebe59cca6dbc4a7e49 100644 (file)
--- 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>