mirror of
https://github.com/axeloz/filesharing.git
synced 2025-05-06 10:03:55 +02:00
[WIP] Responsive
This commit is contained in:
parent
21a5000182
commit
2b114b8622
GPG key ID:
73C0A5961B6BC740
4 changed files with 397 additions and 399 deletions
|
|
@ -106,62 +106,60 @@
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div x-data="bundle">
|
<div x-data="bundle">
|
||||||
<div class="relative bg-white border border-primary rounded-lg overflow-hidden">
|
<div class="bg-gradient-to-r from-primary-light to-primary px-2 py-4 text-center">
|
||||||
<div class="bg-gradient-to-r from-primary-light to-primary px-2 py-4 text-center">
|
<h1 class="relative font-title font-medium font-body text-4xl text-center text-white uppercase flex items-center">
|
||||||
<h1 class="relative font-title font-medium font-body text-4xl text-center text-white uppercase flex items-center">
|
<div class="grow text-center">{{ config('app.name') }}</div>
|
||||||
<div class="grow text-center">{{ config('app.name') }}</div>
|
</h1>
|
||||||
</h1>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-5">
|
<div class="p-5">
|
||||||
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase flex items-center">
|
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase flex items-center">
|
||||||
<p>@lang('app.existing-bundles')</p>
|
<p>@lang('app.existing-bundles')</p>
|
||||||
<p class="text-sm bg-primary rounded-full ml-2 text-white px-3" x-text="Object.keys(bundles).length"></p>
|
<p class="text-sm bg-primary rounded-full ml-2 text-white px-3" x-text="Object.keys(bundles).length"></p>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<span x-show="bundles == null || Object.keys(bundles).length == 0">@lang('app.no-existing-bundle')</span>
|
<span x-show="bundles == null || Object.keys(bundles).length == 0">@lang('app.no-existing-bundle')</span>
|
||||||
<select
|
<select
|
||||||
class="w-full py-4 text-slate-700 bg-transparent h-8 p-0 py-1 border-b border-primary-superlight focus:ring-0 invalid:border-b-red-500 invalid:bg-red-50"
|
class="w-full py-4 text-slate-700 bg-transparent h-8 p-0 py-1 border-b border-primary-superlight focus:ring-0 invalid:border-b-red-500 invalid:bg-red-50"
|
||||||
name="expiry"
|
name="expiry"
|
||||||
id="upload-expiry"
|
id="upload-expiry"
|
||||||
x-model="currentBundle"
|
x-model="currentBundle"
|
||||||
x-on:change="redirectToBundle()"
|
x-on:change="redirectToBundle()"
|
||||||
x-show="bundles != null && Object.keys(bundles).length > 0"
|
x-show="bundles != null && Object.keys(bundles).length > 0"
|
||||||
>
|
>
|
||||||
<option>-</option>
|
<option>-</option>
|
||||||
|
|
||||||
<template x-if="Object.keys(pending).length > 0">
|
<template x-if="Object.keys(pending).length > 0">
|
||||||
<optgroup label="{{ __('app.pending') }}">
|
<optgroup label="{{ __('app.pending') }}">
|
||||||
<template x-for="bundle in pending">
|
<template x-for="bundle in pending">
|
||||||
<option :value="bundle.bundle_id" x-text="bundle.label"></option>
|
<option :value="bundle.bundle_id" x-text="bundle.label"></option>
|
||||||
</template>
|
</template>
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template x-if="Object.keys(active).length > 0">
|
<template x-if="Object.keys(active).length > 0">
|
||||||
<optgroup label="{{ __('app.active') }}">
|
<optgroup label="{{ __('app.active') }}">
|
||||||
<template x-for="bundle in active">
|
<template x-for="bundle in active">
|
||||||
<option :value="bundle.bundle_id" x-text="bundle.label"></option>
|
<option :value="bundle.bundle_id" x-text="bundle.label"></option>
|
||||||
</template>
|
</template>
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template x-if="Object.keys(expired).length > 0">
|
<template x-if="Object.keys(expired).length > 0">
|
||||||
<optgroup label="{{ __('app.expired') }}">
|
<optgroup label="{{ __('app.expired') }}">
|
||||||
<template x-for="bundle in expired">
|
<template x-for="bundle in expired">
|
||||||
<option :value="bundle.bundle_id" x-text="bundle.label"></option>
|
<option :value="bundle.bundle_id" x-text="bundle.label"></option>
|
||||||
</template>
|
</template>
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</template>
|
</template>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<h2 class="mt-10 font-title text-2xl mb-5 text-primary font-medium uppercase">@lang('app.or-create')</h2>
|
<h2 class="mt-10 font-title text-2xl mb-5 text-primary font-medium uppercase">@lang('app.or-create')</h2>
|
||||||
|
|
||||||
<div class="my-8 text-center text-base font-title uppercase text-primary">
|
<div class="my-8 text-center text-base font-title uppercase text-primary">
|
||||||
<a x-on:click="newBundle()" class="cursor-pointer border px-5 py-3 border-primary rounded hover:bg-primary hover:text-white text-primary">
|
<a x-on:click="newBundle()" class="cursor-pointer border px-5 py-3 border-primary rounded hover:bg-primary hover:text-white text-primary">
|
||||||
@lang('app.create-new-upload')
|
@lang('app.create-new-upload')
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,11 @@
|
||||||
|
|
||||||
<body class="font-display text-[13px] selection:bg-purple-100 outline-none select-none">
|
<body class="font-display text-[13px] selection:bg-purple-100 outline-none select-none">
|
||||||
|
|
||||||
<div class="fixed min-w-xl max-w-3xl left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] md:w-2/3">@yield('content')</div>
|
<div class="md:fixed md:min-w-xl md:max-w-3xl md:left-[50%] md:top-[50%] md:translate-x-[-50%] md:translate-y-[-50%] md:w-2/3">
|
||||||
|
<div class="relative bg-white md:border border-primary md:rounded-lg md:overflow-hidden">
|
||||||
|
@yield('content')
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
@stack('scripts')
|
@stack('scripts')
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -55,70 +55,68 @@
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div x-data="login">
|
<div x-data="login">
|
||||||
<div class="relative bg-white border border-primary rounded-lg overflow-hidden">
|
<div class="bg-gradient-to-r from-primary-light to-primary px-2 py-4 text-center">
|
||||||
<div class="bg-gradient-to-r from-primary-light to-primary px-2 py-4 text-center">
|
<h1 class="relative font-title font-medium font-body text-4xl text-center text-white uppercase flex items-center">
|
||||||
<h1 class="relative font-title font-medium font-body text-4xl text-center text-white uppercase flex items-center">
|
|
||||||
|
|
||||||
<div class="grow text-center">{{ config('app.name') }}</div>
|
<div class="grow text-center">{{ config('app.name') }}</div>
|
||||||
</h1>
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-5">
|
||||||
|
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase flex items-center">
|
||||||
|
<p>@lang('app.authentication')</p>
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<template x-if="error">
|
||||||
|
<div class="w-full my-3 rounded px-3 py-2 bg-red-100 text-red-600" x-text="error"></div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
{{-- Login --}}
|
||||||
|
<div class="">
|
||||||
|
<p class="font-title uppercase">
|
||||||
|
@lang('app.login')
|
||||||
|
<span class="text-base">*</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<input
|
||||||
|
x-model="user.login"
|
||||||
|
class="w-full p-0 bg-transparent text-slate-700 h-8 py-1 rounded-none border-b border-purple-300 outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
||||||
|
type="text"
|
||||||
|
name="login"
|
||||||
|
id="user-login"
|
||||||
|
maxlength="40"
|
||||||
|
@keyup.enter="loginUser()"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-5">
|
{{-- Password --}}
|
||||||
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase flex items-center">
|
<div class="mt-5">
|
||||||
<p>@lang('app.authentication')</p>
|
<p class="font-title uppercase">
|
||||||
</h2>
|
@lang('app.password')
|
||||||
|
<span class="text-base">*</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
<template x-if="error">
|
<input
|
||||||
<div class="w-full my-3 rounded px-3 py-2 bg-red-100 text-red-600" x-text="error"></div>
|
x-model="user.password"
|
||||||
</template>
|
class="w-full p-0 bg-transparent text-slate-700 h-8 py-1 rounded-none border-b border-purple-300 outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
id="user-password"
|
||||||
|
@keyup.enter="loginUser()"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Buttons --}}
|
||||||
{{-- Login --}}
|
<div class="grid grid-cols-2 gap-10 mt-10 text-center">
|
||||||
<div class="">
|
<div> </div>
|
||||||
<p class="font-title uppercase">
|
<div>
|
||||||
@lang('app.login')
|
@include('partials.button', [
|
||||||
<span class="text-base">*</span>
|
'way' => 'right',
|
||||||
</p>
|
'text' => __('app.do-login'),
|
||||||
|
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />',
|
||||||
<input
|
'action' => 'loginUser'
|
||||||
x-model="user.login"
|
])
|
||||||
class="w-full p-0 bg-transparent text-slate-700 h-8 py-1 rounded-none border-b border-purple-300 outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
|
||||||
type="text"
|
|
||||||
name="login"
|
|
||||||
id="user-login"
|
|
||||||
maxlength="40"
|
|
||||||
@keyup.enter="loginUser()"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Password --}}
|
|
||||||
<div class="mt-5">
|
|
||||||
<p class="font-title uppercase">
|
|
||||||
@lang('app.password')
|
|
||||||
<span class="text-base">*</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<input
|
|
||||||
x-model="user.password"
|
|
||||||
class="w-full p-0 bg-transparent text-slate-700 h-8 py-1 rounded-none border-b border-purple-300 outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
|
||||||
type="password"
|
|
||||||
name="password"
|
|
||||||
id="user-password"
|
|
||||||
@keyup.enter="loginUser()"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Buttons --}}
|
|
||||||
<div class="grid grid-cols-2 gap-10 mt-10 text-center">
|
|
||||||
<div> </div>
|
|
||||||
<div>
|
|
||||||
@include('partials.button', [
|
|
||||||
'way' => 'right',
|
|
||||||
'text' => __('app.do-login'),
|
|
||||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />',
|
|
||||||
'action' => 'loginUser'
|
|
||||||
])
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -400,337 +400,335 @@
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div x-data="upload">
|
<div x-data="upload">
|
||||||
<div class="relative bg-white border border-primary rounded-lg overflow-hidden">
|
<div class="bg-gradient-to-r from-primary-light to-primary px-2 py-4 mb-3 text-center">
|
||||||
<div class="bg-gradient-to-r from-primary-light to-primary px-2 py-4 mb-3 text-center">
|
<h1 class="relative font-title font-medium font-body text-4xl text-center text-white uppercase flex items-center">
|
||||||
<h1 class="relative font-title font-medium font-body text-4xl text-center text-white uppercase flex items-center">
|
<div class="w-1/12 text-center">
|
||||||
<div class="w-1/12 text-center">
|
{{-- If bundle is locked --}}
|
||||||
{{-- If bundle is locked --}}
|
<p title="{{ __('app.bundle-locked') }}" x-show="metadata.completed">
|
||||||
<p title="{{ __('app.bundle-locked') }}" x-show="metadata.completed">
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline w-8 h-8 text-purple-200">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline w-8 h-8 text-purple-200">
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
|
</svg>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- App's title --}}
|
||||||
|
<div class="grow text-center">{{ config('app.name') }}</div>
|
||||||
|
|
||||||
|
|
||||||
|
{{-- Bundle status --}}
|
||||||
|
<div class="w-1/12 gap-2 item-right">
|
||||||
|
{{-- If bundle is expired --}}
|
||||||
|
<p title="{{ __('app.bundle-expired') }}" x-show="isBundleExpired()">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline w-8 h-8 text-purple-200">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Modal box --}}
|
||||||
|
<template x-if="modal.show">
|
||||||
|
<div class="absolute z-40 top-0 left-0 right-0 bottom-0 w-full bg-[#848A97EE]">
|
||||||
|
<div class="absolute z-50 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-white w-3/4 md:w-1/2 p-6 text-center shadow-lg border-2 border-gray-300">
|
||||||
|
<div class="w-full text-center">
|
||||||
|
<p class="relative mx-auto bg-orange-200 rounded-full w-14 h-14">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-8 h-8 inline text-orange-600">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
||||||
</svg>
|
</svg>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<p class="mt-4 font-title font-medium text-primary text-lg">{{ __('app.confirmation') }}</p>
|
||||||
{{-- App's title --}}
|
<div class="mb-6 text-gray-500" x-text="modal.text"></div>
|
||||||
<div class="grow text-center">{{ config('app.name') }}</div>
|
<div class="flex">
|
||||||
|
<div class="w-1/2 text-right px-1">
|
||||||
|
<button class="bg-gray-300 text-black rounded px-3 py-1" x-on:click="modal.show = false">{{ __('app.cancel') }}</button>
|
||||||
{{-- Bundle status --}}
|
</div>
|
||||||
<div class="w-1/12 gap-2 item-right">
|
<div class="w-1/2 text-left px-1"><button class="bg-primary text-white rounded px-3 py-1" x-on:click="confirmModal()">{{ __('app.confirm') }}</button></div>
|
||||||
{{-- If bundle is expired --}}
|
|
||||||
<p title="{{ __('app.bundle-expired') }}" x-show="isBundleExpired()">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline w-8 h-8 text-purple-200">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
</h1>
|
<div class="p-5">
|
||||||
|
{{-- Steps --}}
|
||||||
|
<div class="rounded-t-md grid grid-cols-3 gap-2 leading-3 mb-10">
|
||||||
|
<template x-for="(s, i) in steps">
|
||||||
|
<div class="p-2">
|
||||||
|
<div class="rounded mb-4 w-full h-1" :class="(i + 1) <= step ? 'bg-primary' : 'bg-gray-200'"></div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div x-html="s.icon"></div>
|
||||||
|
<div>
|
||||||
|
<p class="leading-[.9rem] font-title px-1 uppercase text-sm text-primary" x-text="'{{ __('app.step') }} '+ (i + 1)"></p>
|
||||||
|
<h2 class="leading-[.9rem] px-1 text-xs font-medium" x-text="s.title"></h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Modal box --}}
|
<div class="mt-10">
|
||||||
<template x-if="modal.show">
|
|
||||||
<div class="absolute z-40 top-0 left-0 right-0 bottom-0 w-full bg-[#848A97EE]">
|
{{-- STEP 1 --}}
|
||||||
<div class="absolute z-50 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-white w-1/2 p-6 text-center shadow-lg border-2 border-gray-300">
|
<div x-cloak x-show="step == 1">
|
||||||
<div class="w-full text-center">
|
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase">
|
||||||
<p class="relative mx-auto bg-orange-200 rounded-full w-14 h-14">
|
@lang('app.upload-settings')
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-8 h-8 inline text-orange-600">
|
</h2>
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
|
||||||
</svg>
|
{{-- Title --}}
|
||||||
</p>
|
<div class="">
|
||||||
</div>
|
<p class="font-title uppercase">
|
||||||
<p class="mt-4 font-title font-medium text-primary text-lg">{{ __('app.confirmation') }}</p>
|
@lang('app.upload-title')
|
||||||
<div class="mb-6 text-gray-500" x-text="modal.text"></div>
|
<span class="text-base">*</span>
|
||||||
<div class="flex">
|
</p>
|
||||||
<div class="w-1/2 text-right px-1">
|
|
||||||
<button class="bg-gray-300 text-black rounded px-3 py-1" x-on:click="modal.show = false">{{ __('app.cancel') }}</button>
|
<input
|
||||||
</div>
|
x-model="metadata.title"
|
||||||
<div class="w-1/2 text-left px-1"><button class="bg-primary text-white rounded px-3 py-1" x-on:click="confirmModal()">{{ __('app.confirm') }}</button></div>
|
class="w-full p-0 bg-transparent text-slate-700 h-8 py-1 rounded-none border-b border-purple-300 outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
||||||
</div>
|
type="text"
|
||||||
|
name="title"
|
||||||
|
id="upload-title"
|
||||||
|
maxlength="70"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="p-5">
|
{{-- Description --}}
|
||||||
{{-- Steps --}}
|
<div class="mt-5">
|
||||||
<div class="rounded-t-md grid grid-cols-3 gap-2 leading-3 mb-10">
|
<span class="font-title uppercase">@lang('app.upload-description')</span>
|
||||||
<template x-for="(s, i) in steps">
|
|
||||||
<div class="p-2">
|
|
||||||
<div class="rounded mb-4 w-full h-1" :class="(i + 1) <= step ? 'bg-primary' : 'bg-gray-200'"></div>
|
|
||||||
|
|
||||||
<div class="flex items-center">
|
<textarea
|
||||||
<div x-html="s.icon"></div>
|
x-model="metadata.description"
|
||||||
<div>
|
maxlength="300"
|
||||||
<p class="leading-[.9rem] font-title px-1 uppercase text-sm text-primary" x-text="'{{ __('app.step') }} '+ (i + 1)"></p>
|
class="w-full p-0 bg-transparent text-slate-700 h-18 py-1 rounded-none border-b border-purple-300 outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
||||||
<h2 class="leading-[.9rem] px-1 text-xs font-medium" x-text="s.title"></h2>
|
type="text"
|
||||||
</div>
|
name="description"
|
||||||
</div>
|
id="upload-description"
|
||||||
</div>
|
/></textarea>
|
||||||
</template>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-10">
|
{{-- Expiration --}}
|
||||||
|
<div class="flex flex-wrap items-center mt-5">
|
||||||
{{-- STEP 1 --}}
|
<div class="w-full mb-5 md:mb-0 md:w-1/3 pr-2">
|
||||||
<div x-cloak x-show="step == 1">
|
|
||||||
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase">
|
|
||||||
@lang('app.upload-settings')
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
{{-- Title --}}
|
|
||||||
<div class="">
|
|
||||||
<p class="font-title uppercase">
|
<p class="font-title uppercase">
|
||||||
@lang('app.upload-title')
|
@lang('app.upload-expiry')
|
||||||
<span class="text-base">*</span>
|
<span class="text-base">*</span>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<select
|
||||||
|
x-model="metadata.expiry""
|
||||||
|
class="w-full text-slate-700 bg-transparent h-8 p-0 py-1 border-b border-primary-superlight focus:ring-0 invalid:border-b-red-500 invalid:bg-red-50"
|
||||||
|
name="expiry"
|
||||||
|
id="upload-expiry"
|
||||||
|
>
|
||||||
|
<option value="0"></option>
|
||||||
|
@foreach (config('sharing.expiry_values') as $k => $e)
|
||||||
|
<option value="{{ Upload::getExpirySeconds($k) }}" {{ $e == config('sharing.default_expiry') ? 'selected' : '' }}>@lang('app.'.$e)</option>
|
||||||
|
@endforeach
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Max downloads --}}
|
||||||
|
<div class="w-full mb-5 md:mb-0 md:w-1/3 pr-2">
|
||||||
|
<p class="font-title uppercase">
|
||||||
|
@lang('app.max-downloads')
|
||||||
|
</p>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
x-model="metadata.title"
|
x-model="metadata.max_downloads"
|
||||||
class="w-full p-0 bg-transparent text-slate-700 h-8 py-1 rounded-none border-b border-purple-300 outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
class="w-full p-0 bg-transparent text-slate-700 h-8 py-1 rounded-none border-b border-purple-300 outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
||||||
type="text"
|
type="number"
|
||||||
name="title"
|
name="max_downloads"
|
||||||
id="upload-title"
|
id="upload-max-downloads"
|
||||||
maxlength="70"
|
min="0"
|
||||||
|
max="999"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Description --}}
|
{{-- Password --}}
|
||||||
<div class="mt-5">
|
<div class="w-full mb-5 md:mb-0 md:w-1/3">
|
||||||
<span class="font-title uppercase">@lang('app.upload-description')</span>
|
<span class="font-title uppercase">@lang('app.bundle-password')</span>
|
||||||
|
|
||||||
<textarea
|
<input
|
||||||
x-model="metadata.description"
|
x-model="metadata.password"
|
||||||
maxlength="300"
|
class="w-full bg-transparent text-slate-700 h-8 p-0 py-1 rounded-none border-b border-primary-superlight outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
||||||
class="w-full p-0 bg-transparent text-slate-700 h-18 py-1 rounded-none border-b border-purple-300 outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
placeholder="@lang('app.leave-empty')"
|
||||||
type="text"
|
type="text"
|
||||||
name="description"
|
name="password"
|
||||||
id="upload-description"
|
id="upload-password"
|
||||||
/></textarea>
|
/>
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Expiration --}}
|
|
||||||
<div class="flex flex-wrap items-center mt-5">
|
|
||||||
<div class="w-1/3 pr-2">
|
|
||||||
<p class="font-title uppercase">
|
|
||||||
@lang('app.upload-expiry')
|
|
||||||
<span class="text-base">*</span>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<select
|
|
||||||
x-model="metadata.expiry""
|
|
||||||
class="w-full text-slate-700 bg-transparent h-8 p-0 py-1 border-b border-primary-superlight focus:ring-0 invalid:border-b-red-500 invalid:bg-red-50"
|
|
||||||
name="expiry"
|
|
||||||
id="upload-expiry"
|
|
||||||
>
|
|
||||||
<option value="0"></option>
|
|
||||||
@foreach (config('sharing.expiry_values') as $k => $e)
|
|
||||||
<option value="{{ Upload::getExpirySeconds($k) }}" {{ $e == config('sharing.default_expiry') ? 'selected' : '' }}>@lang('app.'.$e)</option>
|
|
||||||
@endforeach
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Max downloads --}}
|
|
||||||
<div class="w-1/3 pr-2">
|
|
||||||
<p class="font-title uppercase">
|
|
||||||
@lang('app.max-downloads')
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<input
|
|
||||||
x-model="metadata.max_downloads"
|
|
||||||
class="w-full p-0 bg-transparent text-slate-700 h-8 py-1 rounded-none border-b border-purple-300 outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
|
||||||
type="number"
|
|
||||||
name="max_downloads"
|
|
||||||
id="upload-max-downloads"
|
|
||||||
min="0"
|
|
||||||
max="999"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Password --}}
|
|
||||||
<div class="w-1/3">
|
|
||||||
<span class="font-title uppercase">@lang('app.bundle-password')</span>
|
|
||||||
|
|
||||||
<input
|
|
||||||
x-model="metadata.password"
|
|
||||||
class="w-full bg-transparent text-slate-700 h-8 p-0 py-1 rounded-none border-b border-primary-superlight outline-none invalid:border-b-red-500 invalid:bg-red-50"
|
|
||||||
placeholder="@lang('app.leave-empty')"
|
|
||||||
type="text"
|
|
||||||
name="password"
|
|
||||||
id="upload-password"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Buttons --}}
|
|
||||||
<div class="grid grid-cols-2 gap-10 mt-10 text-center">
|
|
||||||
<div> </div>
|
|
||||||
<div>
|
|
||||||
@include('partials.button', [
|
|
||||||
'way' => 'right',
|
|
||||||
'text' => __('app.start-uploading'),
|
|
||||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />',
|
|
||||||
'action' => 'uploadStep'
|
|
||||||
])
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- STEP 2 --}}
|
{{-- Buttons --}}
|
||||||
<div x-cloak class="" x-show="step == 2">
|
<div class="grid grid-cols-2 gap-10 mt-10 text-center">
|
||||||
|
<div> </div>
|
||||||
|
<div>
|
||||||
|
@include('partials.button', [
|
||||||
|
'way' => 'right',
|
||||||
|
'text' => __('app.start-uploading'),
|
||||||
|
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />',
|
||||||
|
'action' => 'uploadStep'
|
||||||
|
])
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- STEP 2 --}}
|
||||||
|
<div x-cloak class="" x-show="step == 2">
|
||||||
|
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase">
|
||||||
|
@lang('app.upload-files-title')
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-4 gap-2">
|
||||||
|
{{-- Dropzone --}}
|
||||||
|
<div>
|
||||||
|
<form class="relative dropzone border-primary border" id="upload-frm" enctype="multipart/form-data">
|
||||||
|
<div class="absolute right-2 bottom-1 text-[.6rem] text-slate-800 italic">
|
||||||
|
@lang('app.maximum-filesize')
|
||||||
|
{{ Upload::fileMaxSize(true) }}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-3 ml-2">
|
||||||
|
<h3 class="font-title flex items-center text-base mb-2 text-primary font-medium uppercase">
|
||||||
|
<p>@lang('app.files-list')</p>
|
||||||
|
<div class="ml-3 flex text-xs bg-primary rounded-full px-1 text-center text-white divide-x">
|
||||||
|
<p
|
||||||
|
class="px-2 text-center"
|
||||||
|
x-text="countFilesOnServer()"
|
||||||
|
:title="'{{ __('app.files-count-on-server') }}'"
|
||||||
|
></p>
|
||||||
|
<p
|
||||||
|
class="px-2 text-center"
|
||||||
|
x-text="maxFiles"
|
||||||
|
:title="'{{ __('app.files-remaining-files') }}'"
|
||||||
|
></p>
|
||||||
|
</div>
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<span class="text-xs text-slate-400" x-show="Object.keys(metadata.files).length == 0">@lang('app.no-file')</span>
|
||||||
|
|
||||||
|
{{-- Files list --}}
|
||||||
|
<ul id="output" class="text-xs max-h-32 overflow-y-scroll pb-3" x-show="Object.keys(metadata.files).length > 0">
|
||||||
|
<template x-for="(f, k) in metadata.files" :key="k">
|
||||||
|
<li
|
||||||
|
title="{{ __('app.click-to-remove') }}"
|
||||||
|
class="relative flex items-center leading-5 list-inside even:bg-gray-50 rounded px-2 cursor-pointer overflow-hidden"
|
||||||
|
x-on:click="deleteFile(f)"
|
||||||
|
>
|
||||||
|
{{-- Progress bar --}}
|
||||||
|
<p class="absolute top-0 left-0 bottom-0 bg-[#9333EA66] w-0" :style="'width: '+f.progress+'%;'"> </p>
|
||||||
|
|
||||||
|
{{-- Status icon --}}
|
||||||
|
<p class="w-[5%]">
|
||||||
|
<template x-if="f.status == true">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline w-4 h-4 text-green-600">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
<template x-if="f.status == false">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline w-4 h-4 text-red-600">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
<template x-if="f.status == 'uploading'">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline w-4 h-4 text-orange-600">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{{-- File name --}}
|
||||||
|
<p class="w-[80%] overflow-hidden whitespace-nowrap relative">
|
||||||
|
<span x-text="f.original"></span>
|
||||||
|
<template x-if="f.message">
|
||||||
|
<span class="w-full px-1 rounded bg-red-100 absolute opacity-0 hover:opacity-95 transition-all duration-300 top-0 left-0" x-html="f.message"></span>
|
||||||
|
</template>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{{-- File size --}}
|
||||||
|
<p class="w-[15%] text-right" float-right text-xs" x-text="humanSize(f.filesize)"></p>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Buttons --}}
|
||||||
|
<div class="grid grid-cols-2 gap-10 mt-10 text-center">
|
||||||
|
<div>
|
||||||
|
@include('partials.button', [
|
||||||
|
'way' => 'left',
|
||||||
|
'text' => __('app.back'),
|
||||||
|
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />',
|
||||||
|
'action' => 'back'
|
||||||
|
])
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
@include('partials.button', [
|
||||||
|
'way' => 'right',
|
||||||
|
'text' => __('app.complete-upload'),
|
||||||
|
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />',
|
||||||
|
'action' => 'completeStep'
|
||||||
|
])
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- STEP 3 --}}
|
||||||
|
<template x-if="step == 3">
|
||||||
|
<div class="" x-show="step == 3">
|
||||||
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase">
|
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase">
|
||||||
@lang('app.upload-files-title')
|
@lang('app.download-links')
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div class="grid grid-cols-4 gap-2">
|
{{-- Preview link --}}
|
||||||
{{-- Dropzone --}}
|
<div class="flex flex-wrap items-center">
|
||||||
<div>
|
<div class="w-1/3 text-right px-2">
|
||||||
<form class="relative dropzone border-primary border" id="upload-frm" enctype="multipart/form-data">
|
@lang('app.preview-link')
|
||||||
<div class="absolute right-2 bottom-1 text-[.6rem] text-slate-800 italic">
|
|
||||||
@lang('app.maximum-filesize')
|
|
||||||
{{ Upload::fileMaxSize(true) }}
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="w-2/3 shadow">
|
||||||
|
<input x-model="metadata.preview_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="col-span-3 ml-2">
|
{{-- Direct download link --}}
|
||||||
<h3 class="font-title flex items-center text-base mb-2 text-primary font-medium uppercase">
|
<div class="flex flex-wrap items-center mt-5">
|
||||||
<p>@lang('app.files-list')</p>
|
<div class="w-1/3 text-right px-2">
|
||||||
<div class="ml-3 flex text-xs bg-primary rounded-full px-1 text-center text-white divide-x">
|
@lang('app.direct-link')
|
||||||
<p
|
</div>
|
||||||
class="px-2 text-center"
|
<div class="w-2/3 shadow">
|
||||||
x-text="countFilesOnServer()"
|
<input x-model="metadata.download_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
|
||||||
:title="'{{ __('app.files-count-on-server') }}'"
|
|
||||||
></p>
|
|
||||||
<p
|
|
||||||
class="px-2 text-center"
|
|
||||||
x-text="maxFiles"
|
|
||||||
:title="'{{ __('app.files-remaining-files') }}'"
|
|
||||||
></p>
|
|
||||||
</div>
|
|
||||||
</h3>
|
|
||||||
|
|
||||||
<span class="text-xs text-slate-400" x-show="Object.keys(metadata.files).length == 0">@lang('app.no-file')</span>
|
|
||||||
|
|
||||||
{{-- Files list --}}
|
|
||||||
<ul id="output" class="text-xs max-h-32 overflow-y-scroll pb-3" x-show="Object.keys(metadata.files).length > 0">
|
|
||||||
<template x-for="(f, k) in metadata.files" :key="k">
|
|
||||||
<li
|
|
||||||
title="{{ __('app.click-to-remove') }}"
|
|
||||||
class="relative flex items-center leading-5 list-inside even:bg-gray-50 rounded px-2 cursor-pointer overflow-hidden"
|
|
||||||
x-on:click="deleteFile(f)"
|
|
||||||
>
|
|
||||||
{{-- Progress bar --}}
|
|
||||||
<p class="absolute top-0 left-0 bottom-0 bg-[#9333EA66] w-0" :style="'width: '+f.progress+'%;'"> </p>
|
|
||||||
|
|
||||||
{{-- Status icon --}}
|
|
||||||
<p class="w-[5%]">
|
|
||||||
<template x-if="f.status == true">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline w-4 h-4 text-green-600">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
<template x-if="f.status == false">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline w-4 h-4 text-red-600">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
<template x-if="f.status == 'uploading'">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="inline w-4 h-4 text-orange-600">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{{-- File name --}}
|
|
||||||
<p class="w-[80%] overflow-hidden whitespace-nowrap relative">
|
|
||||||
<span x-text="f.original"></span>
|
|
||||||
<template x-if="f.message">
|
|
||||||
<span class="w-full px-1 rounded bg-red-100 absolute opacity-0 hover:opacity-95 transition-all duration-300 top-0 left-0" x-html="f.message"></span>
|
|
||||||
</template>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{{-- File size --}}
|
|
||||||
<p class="w-[15%] text-right" float-right text-xs" x-text="humanSize(f.filesize)"></p>
|
|
||||||
</li>
|
|
||||||
</template>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Buttons --}}
|
{{-- Buttons --}}
|
||||||
<div class="grid grid-cols-2 gap-10 mt-10 text-center">
|
<div class="grid grid-cols-2 gap-10 mt-10 text-center">
|
||||||
<div>
|
<div>
|
||||||
@include('partials.button', [
|
|
||||||
'way' => 'left',
|
|
||||||
'text' => __('app.back'),
|
|
||||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />',
|
|
||||||
'action' => 'back'
|
|
||||||
])
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@include('partials.button', [
|
<template x-if="! isBundleExpired()">
|
||||||
'way' => 'right',
|
@include('partials.button', [
|
||||||
'text' => __('app.complete-upload'),
|
'way' => 'right',
|
||||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />',
|
'text' => __('app.delete-bundle'),
|
||||||
'action' => 'completeStep'
|
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />',
|
||||||
])
|
'action' => 'deleteBundle'
|
||||||
|
])
|
||||||
|
</template>
|
||||||
|
<template x-if="isBundleExpired()">
|
||||||
|
<p class="text-xs">
|
||||||
|
@lang('app.bundle-expired')
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
{{-- STEP 3 --}}
|
|
||||||
<template x-if="step == 3">
|
|
||||||
<div class="" x-show="step == 3">
|
|
||||||
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase">
|
|
||||||
@lang('app.download-links')
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
{{-- Preview link --}}
|
|
||||||
<div class="flex flex-wrap items-center">
|
|
||||||
<div class="w-1/3 text-right px-2">
|
|
||||||
@lang('app.preview-link')
|
|
||||||
</div>
|
|
||||||
<div class="w-2/3 shadow">
|
|
||||||
<input x-model="metadata.preview_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Direct download link --}}
|
|
||||||
<div class="flex flex-wrap items-center mt-5">
|
|
||||||
<div class="w-1/3 text-right px-2">
|
|
||||||
@lang('app.direct-link')
|
|
||||||
</div>
|
|
||||||
<div class="w-2/3 shadow">
|
|
||||||
<input x-model="metadata.download_link" class="w-full bg-transparent text-slate-700 h-8 px-2 py-1 rounded-none border border-primary-superlight outline-none" type="text" readonly x-on:click="selectCopy($el)" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Buttons --}}
|
|
||||||
<div class="grid grid-cols-2 gap-10 mt-10 text-center">
|
|
||||||
<div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<template x-if="! isBundleExpired()">
|
|
||||||
@include('partials.button', [
|
|
||||||
'way' => 'right',
|
|
||||||
'text' => __('app.delete-bundle'),
|
|
||||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />',
|
|
||||||
'action' => 'deleteBundle'
|
|
||||||
])
|
|
||||||
</template>
|
|
||||||
<template x-if="isBundleExpired()">
|
|
||||||
<p class="text-xs">
|
|
||||||
@lang('app.bundle-expired')
|
|
||||||
</p>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue