1
0
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:
Dan Brown
2024-10-29 14:21:32 +00:00
parent 4051d5b803
commit a56a28fbb7
4 changed files with 62 additions and 15 deletions

View File

@ -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;

View File

@ -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>