MightyPork/datatable.directory
1
0
Fork 1
Code Issues 25 Pull Requests Releases Wiki Activity

Make table infobox work better at ~900px, fix menu button alignment on small screens

Browse Source
This commit is contained in:
cpsdqs
2018-08-12 12:39:12 +02:00
parent 577a5349c4
commit 693d3b9c93
4 changed files with 58 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/sass/_helpers.scss
Vendored
+2 -1
View File
@@ -30,7 +30,8 @@
cursor: pointer;
}
.noscript-hide {
.noscript-hide,
#mainNavContent.noscript-hide { // hack to circumvent bootstrap’s very liberal use of !important
display: none !important;
}
resources/assets/sass/bootstrap-customizations/_responsive.scss
Vendored
+28
View File
@@ -7,3 +7,31 @@
border: 0 none !important;
}
}
@media (min-width: 769px) and (max-width: 991px) {
#table-infobox {
flex-direction: column-reverse;
}
#infobox-tabContent,
#infobox-tab-container {
max-width: 100%;
}
#infobox-tab {
flex-direction: row !important;
}
}
@media (max-width: 991px) {
#table-infobox {
border-left: none !important;
}
#table-title-container {
flex-wrap: wrap;
justify-content: space-between;
}
#table-id {
width: 100%;
}
#table-title {
margin-left: 0 !important;
}
}
resources/views/layouts/main-nav.blade.php
+23 -25
View File
@@ -23,33 +23,31 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="noscript-hide">
<div class="collapse navbar-collapse" id="mainNavContent">
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest()
@include('layouts.guest-buttons')
@else
{{-- Logged in --}}
@include('layouts.nav-buttons', ['dropdown' => false])
<li class="nav-item dropdown no-mobile">
<a id="mainNavDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" v-pre>
@icon(fa-user-circle-o fa-pr){{--
--}}{{ user()->title }} <span class="caret"></span>
</a>
<div class="collapse navbar-collapse noscript-hide" id="mainNavContent">
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest()
@include('layouts.guest-buttons')
@else
{{-- Logged in --}}
@include('layouts.nav-buttons', ['dropdown' => false])
<li class="nav-item dropdown no-mobile">
<a id="mainNavDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" v-pre>
@icon(fa-user-circle-o fa-pr){{--
--}}{{ user()->title }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="mainNavDropdown">
@include('layouts.nav-buttons', ['dropdown' => true])
</div>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="mainNavDropdown">
@include('layouts.nav-buttons', ['dropdown' => true])
</div>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</li>
@endif
</ul>
</div>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</li>
@endif
</ul>
</div>
<noscript>
resources/views/table/view.blade.php
+5 -5
View File
@@ -8,20 +8,20 @@
@section('content')
<div class="row justify-content-start px-3">
<div class="d-flex w-100 align-items-center">
<small class="flex-grow-1" style="font-size: 120%;">
<div class="d-flex w-100 align-items-center" id="table-title-container">
<small class="flex-grow-1" style="font-size: 120%;" id="table-id">
<a href="{{route('profile.view', $table->owner->name)}}" class="link-no-color">{{ $table->owner->handle }}</a>{{--
--}}<span class="px-1">/</span>{{--
--}}<b>{{ $table->name }}</b>
</small>
<h1 class="mx-3">{{ $table->title }}</h1>
<h1 class="mx-3" id="table-title">{{ $table->title }}</h1>
@include('table._view-action-buttons')
</div>
</div>
<div class="row col-md-12 infobox">
<div class="row col-md-12 infobox" id="table-infobox">
{{-- Tab panels wrapper --}}
<div class="col-md-10 tab-content order-1" id="infobox-tabContent">
@@ -41,7 +41,7 @@
</div>{{-- End of tab panels wrapper --}}
{{-- Right column with menu --}}
<div class="col-md-2 border-left order-md-2 order-0 mb-md-0 mb-2">
<div class="col-md-2 border-left order-md-2 order-0 mb-md-0 mb-2" id="infobox-tab-container">
<div class="nav flex-md-column flex-row nav-pills pt-1 pb-1" role="tablist"
aria-label="Tabs for the table info box" id="infobox-tab">