mirror of
https://github.com/axeloz/filesharing.git
synced 2025-05-06 10:03:55 +02:00
Factoring template header and footer
This commit is contained in:
parent
5a003c316a
commit
9f05df5951
GPG key ID:
73C0A5961B6BC740
8 changed files with 83 additions and 125 deletions
|
|
@ -1,18 +1,7 @@
|
|||
@extends('layout')
|
||||
|
||||
@section('content')
|
||||
<div>
|
||||
<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">
|
||||
<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>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="my-10 text-center text-base font-title uppercase text-primary">
|
||||
@lang('app.cannot-upload-blocked-ip')
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-10 text-center text-base font-title uppercase text-primary">
|
||||
@lang('app.cannot-upload-blocked-ip')
|
||||
</div>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -72,78 +72,69 @@
|
|||
|
||||
@section('content')
|
||||
<div x-data="download">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<div class="grow text-center">{{ config('app.name') }}</div>
|
||||
</h1>
|
||||
<div class="p-5">
|
||||
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase">
|
||||
@lang('app.preview-bundle')
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-wrap items-center">
|
||||
<p class="w-6/12 px-1">
|
||||
<span class="font-title text-xs text-primary uppercase mr-1">
|
||||
@lang('app.upload-title')
|
||||
</span>
|
||||
<span x-text="metadata.title"></span>
|
||||
</p>
|
||||
<p class="w-4/12 px-1">
|
||||
<span class="font-title text-xs text-primary uppercase mr-1">
|
||||
@lang('app.created-at')
|
||||
</span>
|
||||
<span x-text="created_at"></span>
|
||||
</p>
|
||||
<p class="w-2/12 px-1">
|
||||
<span class="font-title text-xs text-primary uppercase mr-1">
|
||||
@lang('app.fullsize')
|
||||
</span>
|
||||
<span x-text="humanSize(metadata.fullsize)"></span>
|
||||
</p>
|
||||
<p class="w-full px-1" x-show="metadata.description">
|
||||
<span class="font-title text-xs text-primary uppercase mr-1">
|
||||
@lang('app.upload-description')
|
||||
</span>
|
||||
<span x-text="metadata.description"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-5">
|
||||
<h2 class="font-title text-2xl mb-5 text-primary font-medium uppercase">
|
||||
@lang('app.preview-bundle')
|
||||
</h2>
|
||||
<div>
|
||||
<h2 class="font-title font-xs uppercase text-primary px-1 mt-5">Files</h2>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center">
|
||||
<p class="w-6/12 px-1">
|
||||
<span class="font-title text-xs text-primary uppercase mr-1">
|
||||
@lang('app.upload-title')
|
||||
</span>
|
||||
<span x-text="metadata.title"></span>
|
||||
</p>
|
||||
<p class="w-4/12 px-1">
|
||||
<span class="font-title text-xs text-primary uppercase mr-1">
|
||||
@lang('app.created-at')
|
||||
</span>
|
||||
<span x-text="created_at"></span>
|
||||
</p>
|
||||
<p class="w-2/12 px-1">
|
||||
<span class="font-title text-xs text-primary uppercase mr-1">
|
||||
@lang('app.fullsize')
|
||||
</span>
|
||||
<span x-text="humanSize(metadata.fullsize)"></span>
|
||||
</p>
|
||||
<p class="w-full px-1" x-show="metadata.description">
|
||||
<span class="font-title text-xs text-primary uppercase mr-1">
|
||||
@lang('app.upload-description')
|
||||
</span>
|
||||
<span x-text="metadata.description"></span>
|
||||
</p>
|
||||
</div>
|
||||
<ul id="output" class="text-xs mt-1 max-h-32 overflow-y-scroll pb-3" x-show="Object.keys(metadata.files).length > 0">
|
||||
<template x-for="f in metadata.files" :key="f.uuid">
|
||||
<li class="leading-5 list-inside even:bg-gray-50 rounded px-2">
|
||||
<p class="float-left w-9/12 overflow-hidden" x-text="f.original.substring(0, 40)"></p>
|
||||
<p class="float-right w-2/12 text-right" float-right text-xs" x-text="humanSize(f.filesize)"></p>
|
||||
<span class="clear-both"> </span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
||||
<div class="grid grid-cols-2 gap-10 mt-10 text-center items-center">
|
||||
<div>
|
||||
<h2 class="font-title font-xs uppercase text-primary px-1 mt-5">Files</h2>
|
||||
<p class="font-xs font-medium">
|
||||
<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">
|
||||
<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>
|
||||
<span x-text="expires_at"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul id="output" class="text-xs mt-1 max-h-32 overflow-y-scroll pb-3" x-show="Object.keys(metadata.files).length > 0">
|
||||
<template x-for="f in metadata.files" :key="f.uuid">
|
||||
<li class="leading-5 list-inside even:bg-gray-50 rounded px-2">
|
||||
<p class="float-left w-9/12 overflow-hidden" x-text="f.original.substring(0, 40)"></p>
|
||||
<p class="float-right w-2/12 text-right" float-right text-xs" x-text="humanSize(f.filesize)"></p>
|
||||
<span class="clear-both"> </span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
||||
<div class="grid grid-cols-2 gap-10 mt-10 text-center items-center">
|
||||
<div>
|
||||
<p class="font-xs font-medium">
|
||||
<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">
|
||||
<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>
|
||||
<span x-text="expires_at"></span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
@include('partials.button', [
|
||||
'way' => 'right',
|
||||
'text' => __('app.download-all'),
|
||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 7.5h-.75A2.25 2.25 0 004.5 9.75v7.5a2.25 2.25 0 002.25 2.25h7.5a2.25 2.25 0 002.25-2.25v-7.5a2.25 2.25 0 00-2.25-2.25h-.75m-6 3.75l3 3m0 0l3-3m-3 3V1.5m6 9h.75a2.25 2.25 0 012.25 2.25v7.5a2.25 2.25 0 01-2.25 2.25h-7.5a2.25 2.25 0 01-2.25-2.25v-.75" />',
|
||||
'action' => 'downloadAll'
|
||||
])
|
||||
</div>
|
||||
<div>
|
||||
@include('partials.button', [
|
||||
'way' => 'right',
|
||||
'text' => __('app.download-all'),
|
||||
'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 7.5h-.75A2.25 2.25 0 004.5 9.75v7.5a2.25 2.25 0 002.25 2.25h7.5a2.25 2.25 0 002.25-2.25v-7.5a2.25 2.25 0 00-2.25-2.25h-.75m-6 3.75l3 3m0 0l3-3m-3 3V1.5m6 9h.75a2.25 2.25 0 012.25 2.25v7.5a2.25 2.25 0 01-2.25 2.25h-7.5a2.25 2.25 0 01-2.25-2.25v-.75" />',
|
||||
'action' => 'downloadAll'
|
||||
])
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1,11 @@
|
|||
<footer></footer>
|
||||
<footer class="relative mt-5 h-6">
|
||||
|
||||
<div class="absolute right-0 top-0 text-[.6rem] text-slate-100 text-right px-2 py-1 italic bg-primary rounded-tl-lg">
|
||||
Made with
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-primary-light fill-primary-superlight inline w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
||||
</svg>
|
||||
by
|
||||
<a class="text-white" href="https://github.com/axeloz" target="_blank">axeloz</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1 +1,7 @@
|
|||
<header></header>
|
||||
<header class="bg-gradient-to-r from-primary-light to-primary px-2 py-4 text-center">
|
||||
<a href="/">
|
||||
<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>
|
||||
</h1>
|
||||
</a>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -106,12 +106,6 @@
|
|||
|
||||
@section('content')
|
||||
<div x-data="bundle">
|
||||
<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">
|
||||
<div class="grow text-center">{{ config('app.name') }}</div>
|
||||
</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.existing-bundles')</p>
|
||||
|
|
|
|||
|
|
@ -17,8 +17,12 @@
|
|||
<body class="font-display text-[13px] selection:bg-purple-100 outline-none select-none">
|
||||
|
||||
<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">
|
||||
<div class="relative bg-white md:border border-primary md:rounded-lg md:overflow-hidden shadow-lg shadow-black/30 hover:shadow-black/40 transition-all">
|
||||
@include('header')
|
||||
|
||||
@yield('content')
|
||||
|
||||
@include('footer')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -55,13 +55,6 @@
|
|||
|
||||
@section('content')
|
||||
<div x-data="login">
|
||||
<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">
|
||||
|
||||
<div class="grow text-center">{{ config('app.name') }}</div>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
// Getting all bundles store in local storage
|
||||
bundles = localStorage.getItem('bundles')
|
||||
|
||||
// If not bundle found, back to homepage
|
||||
// If no bundle found, back to homepage
|
||||
if (bundles == null || bundles == '') {
|
||||
window.location.href = '/'
|
||||
return false
|
||||
|
|
@ -368,7 +368,7 @@
|
|||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(el.value)
|
||||
.then(() => {
|
||||
alert("Copied to clipboard");
|
||||
//alert("Copied to clipboard");
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -400,35 +400,6 @@
|
|||
|
||||
@section('content')
|
||||
<div x-data="upload">
|
||||
<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">
|
||||
<div class="w-1/12 text-center">
|
||||
{{-- If bundle is locked --}}
|
||||
<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">
|
||||
<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]">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue