mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-07-31 15:24:31 +03:00
ZIP Exports: Built out initial import view
Added syles for non-custom, non-image file inputs. Started planning out back-end handling.
This commit is contained in:
@ -545,6 +545,43 @@ input[type=color] {
|
||||
outline: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.custom-simple-file-input {
|
||||
max-width: 100%;
|
||||
border: 1px solid;
|
||||
@include lightDark(border-color, #DDD, #666);
|
||||
border-radius: 4px;
|
||||
padding: $-s $-m;
|
||||
}
|
||||
.custom-simple-file-input::file-selector-button {
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.4em;
|
||||
padding: $-xs $-s;
|
||||
border: 1px solid;
|
||||
font-weight: 400;
|
||||
outline: 0;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
margin-right: $-m;
|
||||
@include lightDark(color, #666, #AAA);
|
||||
@include lightDark(border-color, #CCC, #666);
|
||||
&:hover, &:focus, &:active {
|
||||
@include lightDark(color, #444, #BBB);
|
||||
border: 1px solid #CCC;
|
||||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
|
||||
background-color: #F2F2F2;
|
||||
@include lightDark(background-color, #f8f8f8, #444);
|
||||
filter: none;
|
||||
}
|
||||
&:active {
|
||||
border-color: #BBB;
|
||||
background-color: #DDD;
|
||||
color: #666;
|
||||
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
input.shortcut-input {
|
||||
width: auto;
|
||||
max-width: 120px;
|
||||
|
@ -5,27 +5,30 @@
|
||||
<div class="container small">
|
||||
|
||||
<main class="card content-wrap auto-height mt-xxl">
|
||||
<div class="grid half left-focus v-end gap-m wrap">
|
||||
<div>
|
||||
<h1 class="list-heading">{{ trans('entities.import') }}</h1>
|
||||
<p class="text-muted mb-s">
|
||||
TODO - Desc
|
||||
{{-- {{ trans('entities.permissions_desc') }}--}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="list-heading">{{ trans('entities.import') }}</h1>
|
||||
<form action="{{ url('/import') }}" method="POST">
|
||||
{{ csrf_field() }}
|
||||
<div class="flex-container-row justify-flex-end">
|
||||
<div class="form-group mb-m">
|
||||
@include('form.checkbox', ['name' => 'images', 'label' => 'Include Images'])
|
||||
@include('form.checkbox', ['name' => 'attachments', 'label' => 'Include Attachments'])
|
||||
<div class="flex-container-row justify-space-between wrap gap-x-xl gap-y-s">
|
||||
<p class="flex min-width-l text-muted mb-s">
|
||||
Import content using a portable zip export from the same, or a different, instance.
|
||||
Select a ZIP file to import then press "Validate Import" to proceed.
|
||||
After the file has been uploaded and validated you'll be able to configure & confirm the import in the next view.
|
||||
</p>
|
||||
<div class="flex-none min-width-l flex-container-row justify-flex-end">
|
||||
<div class="mb-m">
|
||||
<label for="file">Select ZIP file to upload</label>
|
||||
<input type="file"
|
||||
accept=".zip,application/zip,application/x-zip-compressed"
|
||||
name="file"
|
||||
id="file"
|
||||
class="custom-simple-file-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-right">
|
||||
<a href="{{ url('/books') }}" class="button outline">{{ trans('common.cancel') }}</a>
|
||||
<button type="submit" class="button">{{ trans('entities.import') }}</button>
|
||||
<button type="submit" class="button">{{ trans('entities.import_validate') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
|
Reference in New Issue
Block a user