[WIP] Responsive

This commit is contained in:
Axel 2023-05-17 23:12:46 +02:00
parent 21a5000182
commit 2b114b8622
Signed by: axel
GPG key ID: 73C0A5961B6BC740
4 changed files with 397 additions and 399 deletions

View file

@ -106,7 +106,6 @@
@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>
@ -164,5 +163,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>
@endsection @endsection

View file

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

View file

@ -55,7 +55,6 @@
@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">
@ -122,5 +121,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>
@endsection @endsection

View file

@ -400,7 +400,6 @@
@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">
@ -433,7 +432,7 @@
{{-- Modal box --}} {{-- Modal box --}}
<template x-if="modal.show"> <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-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-1/2 p-6 text-center shadow-lg border-2 border-gray-300"> <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"> <div class="w-full text-center">
<p class="relative mx-auto bg-orange-200 rounded-full w-14 h-14"> <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"> <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">
@ -512,7 +511,7 @@
{{-- Expiration --}} {{-- Expiration --}}
<div class="flex flex-wrap items-center mt-5"> <div class="flex flex-wrap items-center mt-5">
<div class="w-1/3 pr-2"> <div class="w-full mb-5 md:mb-0 md:w-1/3 pr-2">
<p class="font-title uppercase"> <p class="font-title uppercase">
@lang('app.upload-expiry') @lang('app.upload-expiry')
<span class="text-base">*</span> <span class="text-base">*</span>
@ -532,7 +531,7 @@
</div> </div>
{{-- Max downloads --}} {{-- Max downloads --}}
<div class="w-1/3 pr-2"> <div class="w-full mb-5 md:mb-0 md:w-1/3 pr-2">
<p class="font-title uppercase"> <p class="font-title uppercase">
@lang('app.max-downloads') @lang('app.max-downloads')
</p> </p>
@ -549,7 +548,7 @@
</div> </div>
{{-- Password --}} {{-- Password --}}
<div class="w-1/3"> <div class="w-full mb-5 md:mb-0 md:w-1/3">
<span class="font-title uppercase">@lang('app.bundle-password')</span> <span class="font-title uppercase">@lang('app.bundle-password')</span>
<input <input
@ -733,5 +732,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>
@endsection @endsection