webapp/bookstack
webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-04-24 03:25:16 +03:00
Code

Cleaned some page pointer layout/styles up

Browse Source
This commit is contained in:
Dan Brown 2019-06-16 11:17:15 +01:00
parent 282c45f088
commit 56e31a5df7
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
5 changed files with 31 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
resources/assets/icons/copy.svg
View File

@ -1,4 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/> <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 253 B

After

Width:  |  Height:  |  Size: 211 B

1
resources/assets/icons/link.svg
View File

@ -1,4 +1,3 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/> <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 337 B

After

Width:  |  Height:  |  Size: 295 B

34
resources/assets/sass/_pages.scss
View File

@ -141,10 +141,12 @@
} }
.pointer { .pointer {
border: 1px solid #CCC; border: 1px solid #CCC;
display: inline-block; display: flex;
align-items: center;
justify-items: center;
padding: $-s $-s; padding: $-s $-s;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 8px 1px rgba(212, 209, 209, 0.35); box-shadow: 0 0 12px 1px rgba(212, 209, 209, 0.3);
position: absolute; position: absolute;
top: -60px; top: -60px;
background-color:#FFF; background-color:#FFF;
@ -171,13 +173,6 @@
border-right: 1px solid #CCC; border-right: 1px solid #CCC;
z-index: 56; z-index: 56;
} }
input {
background-color: #FFF;
border: 1px solid #DDD;
color: #666;
width: 172px;
z-index: 40;
}
input, button, a { input, button, a {
position: relative; position: relative;
border-radius: 0; border-radius: 0;
@ -186,14 +181,20 @@
vertical-align: top; vertical-align: top;
padding: 5px 16px; padding: 5px 16px;
} }
> i { input {
color: #888; background-color: #FFF;
font-size: 18px; border: 1px solid #DDD;
padding-top: 4px; color: #666;
width: 172px;
z-index: 40;
padding: 5px 10px;
} }
span.icon { span.icon {
fill: #444;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
display: inline-block;
line-height: 1;
} }
.input-group .button { .input-group .button {
line-height: 1; line-height: 1;
@ -201,11 +202,8 @@
box-shadow: none; box-shadow: none;
} }
a.button { a.button {
margin: 0 0 0 0; margin: 0;
color: #FFF;
&:hover {
fill: #fff;
}
} }
.svg-icon { .svg-icon {
width: 1.2em; width: 1.2em;

13
resources/views/pages/pointer.blade.php Normal file
View File

@ -0,0 +1,13 @@
<div class="pointer-container" id="pointer">
<div class="pointer anim {{ userCan('page-update', $page) ? 'is-page-editable' : ''}}" >
<span class="icon mr-xxs">@icon('link') @icon('include', ['style' => 'display:none;'])</span>
<div class="input-group inline block">
<input readonly="readonly" type="text" id="pointer-url" placeholder="url">
<button class="button outline icon" data-clipboard-target="#pointer-url" type="button" title="{{ trans('entities.pages_copy_link') }}">@icon('copy')</button>
</div>
@if(userCan('page-update', $page))
<a href="{{ $page->getUrl('/edit') }}" id="pointer-edit" data-edit-href="{{ $page->getUrl('/edit') }}"
class="button outline icon heading-edit-icon ml-s px-s" title="{{ trans('entities.pages_edit_content_link')}}">@icon('edit')</a>
@endif
</div>
</div>

18
resources/views/pages/show.blade.php
View File

@ -11,22 +11,8 @@
</div> </div>
<div class="content-wrap card"> <div class="content-wrap card">
<div class="page-content flex" page-display="{{ $page->id }}"> <div class="page-content" page-display="{{ $page->id }}">
@include('pages.pointer', ['page' => $page])
<div class="pointer-container" id="pointer">
<div class="pointer anim {{ userCan('page-update', $page) ? 'is-page-editable' : ''}}" >
<span class="icon text-primary">@icon('link') @icon('include', ['style' => 'display:none;'])</span>
<span class="input-group">
<input readonly="readonly" type="text" id="pointer-url" placeholder="url">
<button class="button icon" data-clipboard-target="#pointer-url" type="button" title="{{ trans('entities.pages_copy_link') }}">@icon('copy')</button>
</span>
@if(userCan('page-update', $page))
<a href="{{ $page->getUrl('/edit') }}" id="pointer-edit" data-edit-href="{{ $page->getUrl('/edit') }}"
class="button icon heading-edit-icon" title="{{ trans('entities.pages_edit_content_link')}}">@icon('edit')</a>
@endif
</div>
</div>
@include('pages.page-display') @include('pages.page-display')
</div> </div>
</div> </div>