github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-01 22:39:13 +08:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

Started on a design update

Browse Source 
- Added base of new grid system.
- Added new margin/padding/visiblity helpers.
- Made header collapse to overflow menu on mobile.
This commit is contained in:
Dan Brown
2018-10-16 18:49:16 +01:00
parent 85f330c79a
commit 89be30ff0e
24 changed files with 556 additions and 374 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
resources/views/base.blade.php
View File

@ -17,57 +17,14 @@
<script src="{{ baseUrl('/translations') }}"></script>
@yield('head')
@include('partials/custom-styles')
@include('partials.custom-styles')
@include('partials.custom-head')
</head>
<body class="@yield('body-class')" ng-app="bookStack">
<body class="@yield('body-class')">
@include('partials/notifications')
<header id="header">
<div class="container fluid">
<div class="row">
<div class="col-sm-4 col-md-3">
<a href="{{ baseUrl('/') }}" class="logo">
@if(setting('app-logo', '') !== 'none')
<img class="logo-image" src="{{ setting('app-logo', '') === '' ? baseUrl('/logo.png') : baseUrl(setting('app-logo', '')) }}" alt="Logo">
@endif
@if (setting('app-name-header'))
<span class="logo-text">{{ setting('app-name') }}</span>
@endif
</a>
</div>
<div class="col-sm-8 col-md-9">
<div class="float right">
<div class="header-search">
<form action="{{ baseUrl('/search') }}" method="GET" class="search-box">
<button id="header-search-box-button" type="submit">@icon('search') </button>
<input id="header-search-box-input" type="text" name="term" tabindex="2" placeholder="{{ trans('common.search') }}" value="{{ isset($searchTerm) ? $searchTerm : '' }}">
</form>
</div>
<div class="links text-center">
@if(userCan('bookshelf-view-all') || userCan('bookshelf-view-own'))
<a href="{{ baseUrl('/shelves') }}">@icon('bookshelf'){{ trans('entities.shelves') }}</a>
@endif
<a href="{{ baseUrl('/books') }}">@icon('book'){{ trans('entities.books') }}</a>
@if(signedInUser() && userCan('settings-manage'))
<a href="{{ baseUrl('/settings') }}">@icon('settings'){{ trans('settings.settings') }}</a>
@endif
@if(!signedInUser())
<a href="{{ baseUrl('/login') }}">@icon('login') {{ trans('auth.log_in') }}</a>
@endif
</div>
@if(signedInUser())
@include('partials._header-dropdown', ['currentUser' => user()])
@endif
</div>
</div>
</div>
</div>
</header>
@include('partials.notifications')
@include('common.header')
<section id="content" class="block">
@yield('content')
@ -78,8 +35,10 @@
@icon('chevron-up') <span>{{ trans('common.back_to_top') }}</span>
</div>
</div>
@yield('bottom')
<script src="{{ versioned_asset('dist/app.js') }}"></script>
@yield('scripts')
@yield('bottom')
<script src="{{ versioned_asset('dist/app.js') }}"></script>
@yield('scripts')
</body>
</html>

58
resources/views/common/header.blade.php Normal file
View File

@ -0,0 +1,58 @@
<header id="header" header-mobile-toggle>
<div class="grid break-l mx-l">
<div>
<a href="{{ baseUrl('/') }}" class="logo">
@if(setting('app-logo', '') !== 'none')
<img class="logo-image" src="{{ setting('app-logo', '') === '' ? baseUrl('/logo.png') : baseUrl(setting('app-logo', '')) }}" alt="Logo">
@endif
@if (setting('app-name-header'))
<span class="logo-text">{{ setting('app-name') }}</span>
@endif
</a>
<div class="mobile-menu-toggle hide-over-l">@icon('more')</div>
</div>
<div class="header-search hide-under-l">
<form action="{{ baseUrl('/search') }}" method="GET" class="search-box">
<button id="header-search-box-button" type="submit">@icon('search') </button>
<input id="header-search-box-input" type="text" name="term" tabindex="2" placeholder="{{ trans('common.search') }}" value="{{ isset($searchTerm) ? $searchTerm : '' }}">
</form>
</div>
<div class="text-right">
<div class="header-links">
<div class="links text-center">
<a class="hide-over-l" href="{{ baseUrl('/search') }}">@icon('search'){{ trans('common.search') }}</a>
@if(userCan('bookshelf-view-all') || userCan('bookshelf-view-own'))
<a href="{{ baseUrl('/shelves') }}">@icon('bookshelf'){{ trans('entities.shelves') }}</a>
@endif
<a href="{{ baseUrl('/books') }}">@icon('book'){{ trans('entities.books') }}</a>
@if(signedInUser() && userCan('settings-manage'))
<a href="{{ baseUrl('/settings') }}">@icon('settings'){{ trans('settings.settings') }}</a>
@endif
@if(!signedInUser())
<a href="{{ baseUrl('/login') }}">@icon('login'){{ trans('auth.log_in') }}</a>
@endif
</div>
@if(signedInUser())
<?php $currentUser = user(); ?>
<div class="dropdown-container" dropdown>
<span class="user-name hide-under-l" dropdown-toggle>
<img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
<span class="name">{{ $currentUser->getShortName(9) }}</span> @icon('caret-down')
</span>
<ul>
<li>
<a href="{{ baseUrl("/user/{$currentUser->id}") }}" class="text-primary">@icon('user'){{ trans('common.view_profile') }}</a>
</li>
<li>
<a href="{{ baseUrl("/settings/users/{$currentUser->id}") }}" class="text-primary">@icon('edit'){{ trans('common.edit_profile') }}</a>
</li>
<li>
<a href="{{ baseUrl('/logout') }}" class="text-neg">@icon('logout'){{ trans('auth.logout') }}</a>
</li>
</ul>
</div>
@endif
</div>
</div>
</div>
</header>

74
resources/views/common/home.blade.php
View File

@ -1,57 +1,53 @@
@extends('simple-layout')
@section('toolbar')
<div class="col-sm-6 faded">
<div class="action-buttons text-left">
<a expand-toggle=".entity-list.compact .entity-item-snippet" class="text-primary text-button">@icon('expand-text'){{ trans('common.toggle_details') }}</a>
</div>
</div>
@stop
@section('body')
<div class="container" id="home-default">
<div class="row">
<div class="container px-xl py-l">
<a expand-toggle=".entity-list.compact .entity-item-snippet" class="text-muted">@icon('expand-text'){{ trans('common.toggle_details') }}</a>
</div>
<div class="col-sm-4">
@if(count($draftPages) > 0)
<div id="recent-drafts" class="card">
<h3>@icon('edit') {{ trans('entities.my_recent_drafts') }}</h3>
@include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact'])
</div>
@endif
<div class="grid contained thirds space-xl break-m" id="home-default">
<div>
@if(count($draftPages) > 0)
<div id="recent-drafts" class="card mb-xl">
<h3>{{ trans('entities.my_recent_drafts') }}</h3>
@include('partials/entity-list', ['entities' => $draftPages, 'style' => 'compact'])
</div>
@endif
<div class="card">
<h3>@icon($signedIn ? 'view' : 'star-circle') {{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}</h3>
<div id="{{ $signedIn ? 'recently-viewed' : 'recent-books' }}" class="card mb-xl">
<h3>{{ trans('entities.' . ($signedIn ? 'my_recently_viewed' : 'books_recent')) }}</h3>
@include('partials/entity-list', [
'entities' => $recents,
'style' => 'compact',
'emptyText' => $signedIn ? trans('entities.no_pages_viewed') : trans('entities.books_empty')
])
</div>
</div>
<div>
<div id="recent-pages" class="card mb-xl">
<h3><a class="no-color" href="{{ baseUrl("/pages/recently-updated") }}">{{ trans('entities.recently_updated_pages') }}</a></h3>
<div id="recently-updated-pages">
@include('partials/entity-list', [
'entities' => $recents,
'style' => 'compact',
'emptyText' => $signedIn ? trans('entities.no_pages_viewed') : trans('entities.books_empty')
])
'entities' => $recentlyUpdatedPages,
'style' => 'compact',
'emptyText' => trans('entities.no_pages_recently_updated')
])
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<h3>@icon('file') <a class="no-color" href="{{ baseUrl("/pages/recently-updated") }}">{{ trans('entities.recently_updated_pages') }}</a></h3>
<div id="recently-updated-pages">
@include('partials/entity-list', [
'entities' => $recentlyUpdatedPages,
'style' => 'compact',
'emptyText' => trans('entities.no_pages_recently_updated')
])
</div>
</div>
</div>
<div class="col-sm-4" id="recent-activity">
<div class="card">
<h3>@icon('time') {{ trans('entities.recent_activity') }}</h3>
<div>
<div id="recent-activity">
<div class="card mb-xl">
<h3>{{ trans('entities.recent_activity') }}</h3>
@include('partials/activity-list', ['activity' => $activity])
</div>
</div>
</div>
</div>

73
resources/views/pages/list-item.blade.php
View File

@ -1,44 +1,51 @@
<div class="page {{$page->draft ? 'draft' : ''}} entity-list-item" data-entity-type="page" data-entity-id="{{$page->id}}">
<h4>
@if (isset($showPath) && $showPath)
<a href="{{ $page->book->getUrl() }}" class="text-book">
@icon('book'){{ $page->book->getShortName() }}
</a>
<span class="text-muted">&nbsp;&nbsp;&raquo;&nbsp;&nbsp;</span>
@if($page->chapter)
<a href="{{ $page->chapter->getUrl() }}" class="text-chapter">
@icon('chapter'){{ $page->chapter->getShortName() }}
<div class="entity-icon text-page">@icon('page')</div>
<div class="content">
<h4>
@if (isset($showPath) && $showPath)
<a href="{{ $page->book->getUrl() }}" class="text-book">
@icon('book'){{ $page->book->getShortName() }}
</a>
<span class="text-muted">&nbsp;&nbsp;&raquo;&nbsp;&nbsp;</span>
@if($page->chapter)
<a href="{{ $page->chapter->getUrl() }}" class="text-chapter">
@icon('chapter'){{ $page->chapter->getShortName() }}
</a>
<span class="text-muted">&nbsp;&nbsp;&raquo;&nbsp;&nbsp;</span>
@endif
@endif
@endif
<a href="{{ $page->getUrl() }}" class="text-page entity-list-item-link">@icon('page')<span class="entity-list-item-name break-text">{{ $page->name }}</span></a>
</h4>
<a href="{{ $page->getUrl() }}" class="entity-list-item-link"><span class="entity-list-item-name break-text">{{ $page->name }}</span></a>
</h4>
<div class="entity-item-snippet">
@if(isset($page->searchSnippet))
<p class="text-muted break-text">{!! $page->searchSnippet !!}</p>
@else
<p class="text-muted break-text">{{ $page->getExcerpt() }}</p>
<div class="entity-item-snippet">
@if(isset($page->searchSnippet))
<p class="text-muted break-text">{!! $page->searchSnippet !!}</p>
@else
<p class="text-muted break-text">{{ $page->getExcerpt() }}</p>
@endif
</div>
@if(isset($style) && $style === 'detailed')
<div class="row meta text-muted text-small">
<div class="col-md-6">
@include('partials.entity-meta', ['entity' => $page])
</div>
<div class="col-md-6">
<a class="text-book" href="{{ $page->book->getUrl() }}">@icon('book'){{ $page->book->getShortName(30) }}</a>
<br>
@if($page->chapter)
<a class="text-chapter" href="{{ $page->chapter->getUrl() }}">@icon('chapter'){{ $page->chapter->getShortName(30) }}</a>
@else
@icon('chapter') {{ trans('entities.pages_not_in_chapter') }}
@endif
</div>
</div>
@endif
</div>
@if(isset($style) && $style === 'detailed')
<div class="row meta text-muted text-small">
<div class="col-md-6">
@include('partials.entity-meta', ['entity' => $page])
</div>
<div class="col-md-6">
<a class="text-book" href="{{ $page->book->getUrl() }}">@icon('book'){{ $page->book->getShortName(30) }}</a>
<br>
@if($page->chapter)
<a class="text-chapter" href="{{ $page->chapter->getUrl() }}">@icon('chapter'){{ $page->chapter->getShortName(30) }}</a>
@else
@icon('chapter') {{ trans('entities.pages_not_in_chapter') }}
@endif
</div>
</div>
@endif
</div>

17
resources/views/partials/_header-dropdown.blade.php
View File

@ -1,17 +0,0 @@
<div class="dropdown-container" dropdown>
<span class="user-name" dropdown-toggle>
<img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
<span class="name">{{ $currentUser->getShortName(9) }}</span> @icon('caret-down')
</span>
<ul>
<li>
<a href="{{ baseUrl("/user/{$currentUser->id}") }}" class="text-primary">@icon('user') {{ trans('common.view_profile') }}</a>
</li>
<li>
<a href="{{ baseUrl("/settings/users/{$currentUser->id}") }}" class="text-primary">@icon('edit') {{ trans('common.edit_profile') }}</a>
</li>
<li>
<a href="{{ baseUrl('/logout') }}" class="text-neg">@icon('logout') {{ trans('auth.logout') }}</a>
</li>
</ul>
</div>

12
resources/views/partials/activity-item.blade.php
View File

@ -1,13 +1,13 @@
{{--Requires an Activity item with the name $activity passed in--}}
@if($activity->user)
<div class="left">
<img class="avatar" src="{{ $activity->user->getAvatar(30) }}" alt="{{ $activity->user->name }}">
</div>
@endif
<div>
@if($activity->user)
<img class="avatar" src="{{ $activity->user->getAvatar(30) }}" alt="{{ $activity->user->name }}">
@endif
</div>
<div class="right" v-pre>
<div v-pre>
@if($activity->user)
<a href="{{ $activity->user->getProfileUrl() }}">{{ $activity->user->name }}</a>
@else

13
resources/views/partials/entity-list-item.blade.php Normal file
View File

@ -0,0 +1,13 @@
<?php $type = $entity->getType(); ?>
<a href="{{ $entity->getUrl() }}" class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} entity-list-item" data-entity-type="{{$type}}" data-entity-id="{{$entity->id}}">
<div class="entity-icon text-{{$type}}">@icon($type)</div>
<div class="content">
<h4 class="entity-list-item-name break-text">{{ $entity->name }}</h4>
<div class="entity-item-snippet">
<p class="text-muted break-text">{{ $entity->getExcerpt() }}</p>
</div>
</div>
</a>

19
resources/views/partials/entity-list.blade.php
View File

@ -1,25 +1,12 @@
<div class="entity-list @if(isset($style)){{ $style }}@endif">
<div class="entity-list {{ $style ?? '' }}">
@if(count($entities) > 0)
@foreach($entities as $index => $entity)
@if($entity->isA('page'))
@include('pages/list-item', ['page' => $entity])
@elseif($entity->isA('book'))
@include('books/list-item', ['book' => $entity])
@elseif($entity->isA('chapter'))
@include('chapters/list-item', ['chapter' => $entity, 'hidePages' => true])
@elseif($entity->isA('bookshelf'))
@include('shelves/list-item', ['bookshelf' => $entity])
@endif
@if($index !== count($entities) - 1)
<hr>
@endif
@include('partials.entity-list-item', ['entity' => $entity])
@endforeach
@else
<p class="text-muted empty-text">
{{ $emptyText or trans('common.no_items') }}
{{ $emptyText ?? trans('common.no_items') }}
</p>
@endif
</div>

8
resources/views/simple-layout.blade.php
View File

@ -5,13 +5,7 @@
@section('content')
<div class="toolbar-container">
<div class="faded-small toolbar">
<div class="container fluid">
<div class="row">
@yield('toolbar')
</div>
</div>
</div>
@yield('toolbar')
</div>