Improved breadcrumb responsiveness

Closes #426
This commit is contained in:
Dan Brown 2017-07-22 15:20:36 +01:00
parent 7f43372dd4
commit 433cb9b3b2
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
4 changed files with 27 additions and 7 deletions

View File

@ -142,7 +142,6 @@ form.search-box {
color: #aaa; color: #aaa;
padding: 0 $-xs; padding: 0 $-xs;
} }
.faded { .faded {
a, button, span, span > div { a, button, span, span > div {
color: #666; color: #666;
@ -178,6 +177,8 @@ form.search-box {
padding-left: 0; padding-left: 0;
} }
} }
.action-buttons .dropdown-container:last-child a { .action-buttons .dropdown-container:last-child a {
padding-right: 0; padding-right: 0;
padding-left: $-s; 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 { .nav-tabs {
text-align: center; text-align: center;
a, .tab-item { a, .tab-item {

View File

@ -5,10 +5,10 @@
<div class="faded-small toolbar"> <div class="faded-small toolbar">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-6 faded"> <div class="col-sm-6 col-xs-1 faded">
@include('books._breadcrumbs', ['book' => $book]) @include('books._breadcrumbs', ['book' => $book])
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6 col-xs-11">
<div class="action-buttons faded"> <div class="action-buttons faded">
<span dropdown class="dropdown-container"> <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> <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>

View File

@ -5,10 +5,10 @@
<div class="faded-small toolbar"> <div class="faded-small toolbar">
<div class="container"> <div class="container">
<div class="row"> <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]) @include('chapters._breadcrumbs', ['chapter' => $chapter])
</div> </div>
<div class="col-sm-4 faded"> <div class="col-sm-6 col-xs-9 faded">
<div class="action-buttons"> <div class="action-buttons">
<span dropdown class="dropdown-container"> <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> <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>

View File

@ -5,10 +5,10 @@
<div class="faded-small toolbar"> <div class="faded-small toolbar">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-6 faded"> <div class="col-sm-8 col-xs-5 faded">
@include('pages._breadcrumbs', ['page' => $page]) @include('pages._breadcrumbs', ['page' => $page])
</div> </div>
<div class="col-sm-6 faded"> <div class="col-sm-4 col-xs-7 faded">
<div class="action-buttons"> <div class="action-buttons">
<span dropdown class="dropdown-container"> <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> <div dropdown-toggle class="text-button text-primary"><i class="zmdi zmdi-open-in-new"></i>{{ trans('entities.export') }}</div>