Skip to content

Commit

Permalink
improves "Deployments" styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonasfroeller
jonasfroeller committed Jan 9, 2025
1 parent bc773de commit aa5a424
Showing 1 changed file with 58 additions and 21 deletions.
79 changes: 58 additions & 21 deletions resources/views/livewire/monitors/deployments-view.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,70 @@
<div class="rounded-lg">
<h2 class="text-primary-blue text-xl font-bold mb-4 border-b pb-2">DEPLOYMENTS:</h2>

<div>
@error('deployments')
<div class="mb-4 text-sm text-red-500">{{ $message }}</div>
@enderror

<h2 class="mb-4 text-lg font-semibold">Deployments</h2>

<div class="space-y-4">
@forelse($deployments as $deployment)
<div class="flex justify-between items-center bg-gray-50 px-4 py-3 border-2 border-other-grey rounded-2xl">
<div class="flex items-center space-x-4">
<span class="text-gray-400 text-xs uppercase tracking-wide font-semibold">
{{ $deployment->description ?? 'FIRST DEPLOYMENT' }}
</span>
<span class="text-gray-500 text-sm">
{{ \Carbon\Carbon::parse($deployment->created_at)->format('d.m.Y') }}
</span>
</div>
<div>
@if($deployment->environment_url)
<a href="{{ $deployment->environment_url }}" target="_blank"
class="bg-primary-blue text-white px-4 py-2 text-sm rounded-md hover:bg-blue-800 transition duration-200">
Visit
</a>
@endif
<div class="p-2 border rounded-md border-border-color">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium gap-1
@if($deployment->state === 'SUCCESS') bg-additional-green/10 text-additional-green
@elseif($deployment->state === 'INACTIVE') bg-secondary-grey/10 text-secondary-grey
@elseif($deployment->state === 'FAILURE') bg-additional-red/10 text-additional-red
@endif">
@if($deployment->state === 'SUCCESS')
<sl-icon name="check-circle" class="text-sm"></sl-icon>
@elseif($deployment->state === 'INACTIVE')
<sl-icon name="dash-circle" class="text-sm"></sl-icon>
@elseif($deployment->state === 'FAILURE')
<sl-icon name="x-circle" class="text-sm"></sl-icon>
@endif
{{ $deployment->state }}
</span>
<span class="text-sm text-secondary-grey">
{{ \Carbon\Carbon::parse($deployment->created_at)->diffForHumans() }}
</span>
</div>
<div class="flex space-x-4">
@if($deployment->log_url && $deployment->log_url !== '#')
<a href="{{ $deployment->log_url }}" target="_blank"
class="flex items-center gap-1 text-sm text-primary-blue hover:text-primary-blue/80">
<sl-icon name="journal-text" class="text-sm"></sl-icon>
Logs
</a>
@else
<span class="flex items-center gap-1 text-sm text-secondary-grey">
<sl-icon name="journal-x" class="text-sm"></sl-icon>
No Logs
</span>
@endif
@if($deployment->environment_url && $deployment->environment_url !== '#')
<a href="{{ $deployment->environment_url }}" target="_blank"
class="flex items-center gap-1 text-sm text-primary-blue hover:text-primary-blue/80">
<sl-icon name="box-arrow-up-right" class="text-sm"></sl-icon>
Deployment
</a>
@else
<span class="flex items-center gap-1 text-sm text-secondary-grey">
<sl-icon name="dash-circle-fill" class="text-sm"></sl-icon>
No Deployment
</span>
@endif
</div>
</div>
@if($deployment->description)
<p class="mt-2 text-sm text-secondary-grey">
{{ $deployment->description }}
</p>
@endif
</div>
@empty
<div class="py-4 text-center text-gray-500">
Keine Deployments gefunden
<div class="flex items-center justify-center gap-2 py-4 text-center text-secondary-grey">
<sl-icon name="cloud-slash" class="text-lg"></sl-icon>
No Deployments Found
</div>
@endforelse
</div>
Expand Down

1 comment on commit aa5a424

@jonasfroeller
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

Please sign in to comment.