mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-09-20 00:06:42 +00:00
031067745b
Restructured tri-layout grid system, so the sidebars are contained in their own child grid system, mimicking the parent grid, so we can treat them as part of the same parent scroll container at smaller screen sizes for consistent scroll/sticky behavior. Tested on Firefox, Chromium, Gnome Web and Safari (MacOS). For #4394 Changes made during review of #4562
54 lines
1.8 KiB
PHP
54 lines
1.8 KiB
PHP
@extends('layouts.base')
|
|
|
|
@push('body-class', 'tri-layout ')
|
|
@section('content-components', 'tri-layout')
|
|
|
|
@section('content')
|
|
|
|
<div class="tri-layout-mobile-tabs print-hidden">
|
|
<div class="grid half no-break no-gap">
|
|
<button type="button"
|
|
refs="tri-layout@tab"
|
|
data-tab="info"
|
|
aria-label="{{ trans('common.tab_info_label') }}"
|
|
class="tri-layout-mobile-tab px-m py-m text-link">
|
|
{{ trans('common.tab_info') }}
|
|
</button>
|
|
<button type="button"
|
|
refs="tri-layout@tab"
|
|
data-tab="content"
|
|
aria-label="{{ trans('common.tab_content_label') }}"
|
|
aria-selected="true"
|
|
class="tri-layout-mobile-tab px-m py-m text-link active">
|
|
{{ trans('common.tab_content') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div refs="tri-layout@container" class="tri-layout-container" @yield('container-attrs') >
|
|
|
|
<div class="tri-layout-sides print-hidden">
|
|
<div class="tri-layout-sides-content">
|
|
<div class="tri-layout-right print-hidden">
|
|
<aside class="tri-layout-right-contents">
|
|
@yield('right')
|
|
</aside>
|
|
</div>
|
|
|
|
<div class="tri-layout-left print-hidden" id="sidebar">
|
|
<aside class="tri-layout-left-contents">
|
|
@yield('left')
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="@yield('body-wrap-classes') tri-layout-middle">
|
|
<div id="main-content" class="tri-layout-middle-contents">
|
|
@yield('body')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@stop
|