Skip to content

Commit

Permalink
UI cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@ilestis
ilestis committed Jan 8, 2025
1 parent 88be5bd commit a1dcb10
Show file tree
Hide file tree
Showing 9 changed files with 82 additions and 116 deletions.
2 changes: 2 additions & 0 deletions app/View/Components/InfoBox.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,12 @@ public function __construct(
public ?string $url,
public ?string $subtitle,
public ?string $color,
public ?string $urlTooltip,
public ?Campaign $campaign,
public string $target = 'primary-dialog',
public string $background = 'bg-neutral',
public string $subtitleColour = 'text-neutral-content',
public string $urlIcon = 'fa-solid fa-angle-right',
public bool $ajax = false,
public bool $premium = false,
)
Expand Down
2 changes: 1 addition & 1 deletion lang/en/campaigns.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -433,7 +433,7 @@
'title' => 'Overview - :name',
],
'themes' => [
'none' => 'None (defaults to member settings)',
'none' => 'None (defaults to user\'s preference)',
],
'ui' => [
'collapsed' => [
Expand Down
8 changes: 4 additions & 4 deletions lang/en/campaigns/styles.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,12 @@
'title' => 'Reorder styles',
],
'theme' => [
'success' => 'Campaign theme updated.',
'title' => 'Update the campaign theme',
'success' => 'Theme override updated.',
'title' => 'Update the theme override',
'none' => 'Use user\'s preference',
'override' => 'Campaign theme override'
'override' => 'Theme override'
],
'title' => 'Campaign Theming',
'title' => 'Theming',
'update' => [
'success' => 'Style :name updated.',
'title' => 'Update style',
Expand Down
4 changes: 2 additions & 2 deletions lang/en/campaigns/submissions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@
'reason' => 'Your reason',
],
'public' => [
'private' => 'Campaign is private',
'public' => 'Campaign is public',
'private' => 'Campaign is private.',
'public' => 'Campaign is public.',
'title' => 'Public campaign',
],
'toggle' => [
Expand Down
92 changes: 29 additions & 63 deletions resources/views/campaigns/_overview.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,87 +34,53 @@
</div>
@if (!$campaign->boosted() && auth()->check())
@if (auth()->user()->hasBoosterNomenclature()) {
<a class="rounded border h-12 gap-2 flex items-center justify-center cursor-pointer" href="{{ route('settings.boost', ['campaign' => $campaign->id]) }}">
<a class="rounded border h-12 gap-2 flex items-center justify-center cursor-pointer neutral-link" href="{{ route('settings.boost', ['campaign' => $campaign->id]) }}">
<x-icon class="fa-solid fa-angle-right" />
{{ __('crud.actions.enable') }}
</a>
@else
<a class="rounded-full border h-12 w-12 flex gap-2 items-center justify-center cursor-pointer" href="{{ route('settings.premium', ['campaign' => $campaign->id]) }}" data-tooltip data-title="{{ __('campaigns/overview.premium.enable') }}">
<a class="rounded-full border h-12 w-12 flex gap-2 items-center justify-center cursor-pointer neutral-link" href="{{ route('settings.premium', ['campaign' => $campaign->id]) }}" data-tooltip data-title="{{ __('campaigns/overview.premium.enable') }}">
<x-icon class="fa-solid fa-angle-right" />
</a>
@endif
@elseif (auth()->check())
<a class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer" href="{{ route('settings.premium') }}" >
<a class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer neutral-link" href="{{ route('settings.premium') }}" >
<x-icon class="fa-solid fa-angle-right" />
</a>
@endif
</x-box>

<x-box css="flex items-center gap-5">
<div class="rounded {{ $campaign->isPublic() ? 'bg-green-200' : 'bg-neutral' }} w-12 h-12 flex items-center justify-center">
<x-icon class="fa-solid {{ $campaign->isPublic() ? 'fa-check text-green-600' : 'fa-lock text-neutral-content' }}" />
</div>
<div class="flex flex-col gap-0 grow">
<span>{!! __('crud.fields.visibility') !!}</span>
@if ($campaign->isPublic())
<span class="text-green-600">{!! __('campaigns/submissions.public.public') !!}</span>
@else
<span class="text-neutral-content">{!! __('campaigns/submissions.public.private') !!}</span>
@endif
</div>
@can('update', $campaign)
<div class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer" data-url="{{ route('campaign-visibility', [$campaign, 'from' => 'overview']) }}" data-target="primary-dialog" data-toggle="dialog-ajax">
<x-icon class="fa-solid fa-angle-right" />
</div>
@endcan
</x-box>

<x-infoBox
title="{{ __('crud.fields.visibility') }}"
icon="{{ $campaign->isPublic() ? 'fa-solid fa-check text-green-600' : 'fa-solid fa-lock text-neutral-content' }}"
subtitle="{{ $campaign->isPublic() ? __('campaigns/submissions.public.public') : __('campaigns/submissions.public.private') }}"
background="{{ $campaign->isPublic() ? 'bg-green-200' : 'bg-neutral' }}"
subtitleColour="{{ $campaign->isPublic() ? 'text-green-600' : 'text-neutral-content' }}"
:campaign="$campaign"
:url="auth()->check() && auth()->user()->can('update', $campaign) ? route('campaign-visibility', [$campaign, 'from' => 'overview']) : null"
:urlTooltip="__('campaigns/public.title')"
ajax
></x-infoBox>

@if (auth()->check() && $campaign->userIsMember())
<x-box css="flex items-center gap-5">
<div class="rounded bg-neutral w-12 h-12 flex items-center justify-center">
<x-icon class="fa-solid fa-clock text-neutral-content" />
</div>
<div class="flex flex-col gap-0 grow">
<span>{!! __('campaigns/overview.member.title') !!}</span>
<span class="text-neutral-content">{!! __('users/profile.fields.member_since', ['date' => $campaign->members()->where('user_id', auth()->user()->id)->first()?->created_at->isoFormat('MMMM D, Y')]) !!}</span>
</div>
<div class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer" data-target="leave-confirm" data-url="{{ route('campaign.leave', $campaign) }}" data-toggle="dialog-ajax">
<x-icon class="fa-solid fa-angle-right" />
</div>
</x-box>
<x-infoBox
title="{{ __('campaigns/overview.member.title') }}"
icon="fa-solid fa-clock text-neutral-content"
subtitle="{{ __('users/profile.fields.member_since', ['date' => $campaign->members()->where('user_id', auth()->user()->id)->first()?->created_at->isoFormat('MMMM D, Y')]) }}"
:campaign="$campaign"
:url="route('campaign.leave', $campaign)"
:urlTooltip="__('campaigns.leave.title')"
ajax
></x-infoBox>
@endif

@if ($campaign->isPublic())
<x-box css="flex items-center gap-5">
<div class="rounded w-12 h-12 flex bg-neutral items-center justify-center">
<x-icon class="fa-solid fa-users text-neutral-content" />
</div>
<div class="flex flex-col gap-0 grow">
<span>{!! __('campaigns/overview.followers.title') !!}</span>
<span class="text-neutral-content">
{{ trans_choice('campaigns.overview.follower-count', $campaign->follower(), ['amount' => number_format($campaign->follower())]) }}
</span>
</div>
</x-box>
<x-infoBox
:title="__('campaigns/overview.followers.title')"
icon="fa-solid fa-users text-neutral-content"
:subtitle="trans_choice('campaigns.overview.follower-count', $campaign->follower(), ['amount' => number_format($campaign->follower())])"
></x-infoBox>
@endif
</div>

{{--<div class="flex flex-wrap gap-5">--}}

{{-- <a href="#" class="{{ $boxClass }}" data-toggle="dialog"--}}
{{-- data-target="entity-count">--}}
{{-- <i class="fa-solid fa-globe fa-2x" aria-hidden="true"></i>--}}
{{-- <div class="">--}}
{{-- {{ trans_choice('campaigns.overview.entity-count', \App\Facades\CampaignCache::entityCount(), ['amount' => number_format(\App\Facades\CampaignCache::entityCount())]) }}--}}
{{-- </div>--}}
{{-- </a>--}}
{{--</div>--}}

@section('modals')
@parent
<x-dialog id="entity-count" :title="__('campaigns.fields.entity_count')">
<p>
{{ __('campaigns.helpers.entity_count_v3', ['amount' => 6]) }}
</p>
</x-dialog>
@endsection
2 changes: 1 addition & 1 deletion resources/views/campaigns/members/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
<x-grid>
<x-infoBox
title="{{ __('campaigns/members.overview.title') }}"
icon="{{ $campaign->boosted() ? 'fa-solid fa-infinity text-green-500' : 'fa-solid fa-warning text-red-500' }}"
icon="{{ $campaign->boosted() ? 'fa-solid fa-infinity text-green-600' : 'fa-solid fa-warning text-red-500' }}"
subtitle="{{ __('campaigns/members.overview.' . ($campaign->boosted() ? 'unlimited' : 'limited'), ['total' => $campaign->memberLimit(), 'amount' => $rows->total()]) }}"
background="{{ $campaign->boosted() ? 'bg-green-200' : 'bg-red-200' }}"
:campaign="$campaign"
Expand Down
2 changes: 1 addition & 1 deletion resources/views/campaigns/roles/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<x-grid>
<x-infoBox
title="{{ __('campaigns/roles.overview.title') }}"
icon="{{ $campaign->boosted() ? 'fa-solid fa-infinity text-green-500' : 'fa-solid fa-warning text-red-500' }}"
icon="{{ $campaign->boosted() ? 'fa-solid fa-infinity text-green-600' : 'fa-solid fa-warning text-red-500' }}"
subtitle="{{ __('campaigns/roles.overview.' . ($campaign->boosted() ? 'unlimited' : 'limited'), ['total' => $campaign->roleLimit(), 'amount' => $roles->total()]) }}"
background="{{ $campaign->boosted() ? 'bg-green-200' : 'bg-red-200' }}"
:campaign="$campaign"
Expand Down
78 changes: 38 additions & 40 deletions resources/views/campaigns/styles/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,59 +23,57 @@
<x-icon class="question" />
{{ __('crud.actions.help') }}
</a>
@if ($campaign->boosted())
<a href="{{ route('campaign_styles.create', $campaign) }}" class="btn2 btn-primary btn-sm">
<x-icon class="plus" />
{{ __('campaigns/styles.actions.new') }}
</a>
@endif
@if ($campaign->boosted())
<a href="{{ route('campaign_styles.create', $campaign) }}" class="btn2 btn-primary btn-sm">
<x-icon class="plus" />
{{ __('campaigns/styles.actions.new') }}
</a>
@endif
</div>
</div>
@if (!$campaign->boosted())
<x-cta :campaign="$campaign">
<x-cta :campaign="$campaign" :image="false">
<p>{!! __('campaigns/styles.pitch') !!}</p>
</x-cta>
@endif
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<x-infoBox
:title="__('campaigns/styles.theme.override')"
:icon="!empty($theme) ? 'fa-solid fa-check text-green-600' : 'fa-solid fa-user text-neutral-content'"
:subtitle="!empty($theme) ? $theme->__toString() : __('campaigns/styles.theme.none')"
background="{{ !empty($theme) ? 'bg-green-200' : 'bg-neutral' }}"
:campaign="$campaign"
:url="$campaign->boosted() ? route('campaign-theme', $campaign) : null"
:urlTooltip="__('campaigns/styles.theme.title')"
ajax
></x-infoBox>
</div>
@if ($styles->count() === 0)
<x-box>
<x-helper>
{!! __('campaigns/styles.helpers.main', ['here' => '<a href="https://blog.kanka.io/category/tutorials" target="_blank">' . __('campaigns/styles.helpers.here') . '</a>']) !!}
</x-helper>
</x-box>
@else
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<x-box css="flex items-center gap-5">
<div class="rounded {{ !empty($theme) ? 'bg-green-200' : 'bg-neutral' }} w-12 h-12 flex items-center justify-center">
<x-icon class="fa-solid {{ !empty($theme) ? 'fa-check text-green-600' : 'fa-user text-neutral-content' }}" />
</div>
<div class="flex flex-col gap-0 grow">
<span>{!! __('campaigns/styles.theme.override') !!}</span>
@if (!empty($theme))
<span class="text-green-600">{!! $theme->__toString() !!}</span>
@else
<span class="text-neutral-content">{!! __('campaigns/styles.theme.none') !!}</span>
@endif
</div>
<div class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer" data-url="{{ route('campaign-theme', $campaign) }}" data-target="primary-dialog" data-toggle="dialog-ajax">
<x-icon class="fa-solid fa-angle-right" />
</div>
</x-box>
</div>
@if ($styles->count() === 0)
<x-box>
<x-helper>
{!! __('campaigns/styles.helpers.main', ['here' => '<a href="https://blog.kanka.io/category/tutorials" target="_blank">' . __('campaigns/styles.helpers.here') . '</a>']) !!}
</x-helper>
</x-box>
@else
@if(Datagrid::hasBulks())
<x-form :action="['campaign_styles.bulk', $campaign]" direct>
<div id="datagrid-parent" class="table-responsive">
@include('layouts.datagrid._table', ['rows' => $styles])
</div>
</x-form>
@else
@if(Datagrid::hasBulks())
<x-form :action="['campaign_styles.bulk', $campaign]" direct>
<div id="datagrid-parent" class="table-responsive">
@include('layouts.datagrid._table', ['rows' => $styles])
</div>
@endif
</x-form>
@else
<div id="datagrid-parent" class="table-responsive">
@include('layouts.datagrid._table', ['rows' => $styles])
</div>
@endif
@endif
@if ($campaign->boosted())
@includeWhen(!$reorderStyles->isEmpty(), 'campaigns.styles._reorder')
@endif
</div>
@endsection
Expand Down
8 changes: 4 additions & 4 deletions resources/views/components/info-box.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
</div>
@if ($url)
@if ($ajax)
<div class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer" data-target="{{ $target }}" data-url="{{ $url }}" data-toggle="dialog-ajax">
<x-icon class="fa-solid fa-angle-right" />
<div class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer" data-target="{{ $target }}" data-url="{{ $url }}" data-toggle="dialog-ajax" @if ($urlTooltip) data-tooltip data-title="{{ $urlTooltip }}" @endif>
<x-icon class="{{ $urlIcon }}"/>
</div>
@else
<a class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer" href="{{ $route }}" >
<x-icon class="fa-solid fa-angle-right" />
<a class="rounded-full border h-12 w-12 flex items-center justify-center cursor-pointer" href="{{ $route }}" @if ($urlTooltip) data-tooltip data-title="{{ $urlTooltip }}" @endif >
<x-icon class="{{ $urlIcon }}" />
</a>
@endif
@elseif ($premium && !$campaign->boosted())
Expand Down

0 comments on commit a1dcb10

Please sign in to comment.