Skip to content

Commit

Permalink
Merge pull request #588 from tighten/mla/style-cleanup
Browse files Browse the repository at this point in the history 
Cleanup
  • Loading branch information
@MarcyLina
MarcyLina authored Jun 11, 2024
2 parents 1121480 + 5f8a05e commit 0313a63
Show file tree
Hide file tree
Showing 7 changed files with 116 additions and 99 deletions.
3 changes: 3 additions & 0 deletions app/Nova/Module.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
use App\Nova\Filters\ModuleSkillLevel;
use Illuminate\Http\Request;
use Laravel\Nova\Fields\BelongsToMany;
use Laravel\Nova\Fields\Boolean;
use Laravel\Nova\Fields\HasMany;
use Laravel\Nova\Fields\ID;
use Laravel\Nova\Fields\Select;
Expand Down Expand Up @@ -55,6 +56,8 @@ public function fields(Request $request)
Text::make('Description')->hideFromIndex(),
]),

Boolean::make('Is Bonus'),

Select::make('Skill Level')
->options(EloquentModule::SKILL_LEVELS)
->displayUsingLabels()
Expand Down
34 changes: 23 additions & 11 deletions resources/js/components/Completables/CompletedBadge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,29 @@
>
<template slot-scope="{ toggle, isCompleted }">
<button
class="relative flex items-start px-4 py-2 font-bold leading-5 text-left cursor-pointer text-teal hover:text-teal focus:outline-none sm:leading-6 lg:text-xl lg:leading-8 lg:items-center"
:class="{ 'text-emerald': isCompleted }"
class="relative flex items-start px-4 py-2 font-bold leading-5 text-left transition rounded cursor-pointer text-emerald bg-teal bg-opacity-20 focus:outline-none sm:leading-6 lg:leading-8 lg:items-center"
:class="
isCompleted
? 'bg-opacity-10 hover:bg-opacity-20'
: 'bg-opacity-25 hover:bg-opacity-30'
"
@click="toggle"
>
<span
class="absolute inset-0 w-full h-full transition-all duration-200 ease-in-out rounded-md bg-opacity-20 bg-teal hover:bg-opacity-10"
:class="{ 'opacity-50 hover:opacity-30': isCompleted }"
></span>
<span>
{{ badgeText }}
</span>

<svg
v-if="isCompleted"
class="w-3 h-3 ml-3 fill-current"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M10 0c5.523 0 10 4.477 10 10s-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0zm3.94 5.94L8.5 11.378l-1.94-1.94-2.12 2.122 4.06 4.06 7.56-7.56-2.12-2.122z"
fill-rule="evenodd"
/>
</svg>
</button>
</template>
</completable>
Expand All @@ -27,20 +39,20 @@ import Completable from "./Completable.vue";
export default {
components: {
Completable
Completable,
},
props: {
badgeText: {
type: String,
required: true
required: true,
},
initialIsCompleted: {
type: Boolean,
default: false
default: false,
},
type: {},
id: {}
}
id: {},
},
};
</script>
3 changes: 1 addition & 2 deletions resources/js/components/Modules/ModuleListing.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<div
class="w-full grid grid-cols-12 px-4 space-y-4 md:space-y-0 lg:mt-18 md:px-8 lg:px-20 2xl:px-32"
class="grid w-full grid-cols-12 px-4 space-y-4 md:space-y-0 lg:mt-18 md:px-8 lg:px-20 2xl:px-32"
>
<div
v-if="userLoggedIn"
Expand Down Expand Up @@ -422,4 +422,3 @@ export default {
--vs-dropdown-option-padding: 3px 10px;
}
</style>
-->
4 changes: 2 additions & 2 deletions resources/views/auth/login.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

<div class="mt-6">
<span class="block w-full rounded-md shadow-sm">
<a href="{{ route_wlocale('login.github') }}" class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-white no-underline transition duration-200 ease-in-out border border-transparent rounded-md focus:bg-white focus:text-purple bg-purple hover:bg-white hover:text-purple hover:no-underline focus:outline-none border-purple active:bg-white active:text-purple">
<a href="{{ route_wlocale('login.github') }}" class="flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-white no-underline transition duration-200 ease-in-out border border-transparent rounded-md hover:border-purple focus:border-purple focus:bg-white focus:text-purple bg-purple hover:bg-white hover:text-purple hover:no-underline focus:outline-none border-purple active:bg-white active:text-purple">
<span>{{ __('Log in') }} or {{ __('Register') }} with</span>
<span class="ml-2 text-lg"><i class="fa fa-github" aria-label="Github" title="Github"></i></span>
</a>
Expand Down Expand Up @@ -105,7 +105,7 @@ class="font-medium transition duration-200 ease-in-out text-purple hover:text-vi
<div class="mt-6">
<span class="block w-full rounded-md shadow-sm">
<button type="submit"
class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white no-underline transition duration-200 ease-in-out border border-transparent rounded-md focus:bg-white focus:text-purple bg-purple hover:bg-white hover:text-purple hover:no-underline focus:outline-none border-purple active:bg-white active:text-purple">
class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white no-underline transition duration-200 ease-in-out border border-transparent rounded-md hover:border-purple focus:border-purple focus:bg-white focus:text-purple bg-purple hover:bg-white hover:text-purple hover:no-underline focus:outline-none border-purple active:bg-white active:text-purple">
{{ __('Log in') }}
</button>
</span>
Expand Down
94 changes: 49 additions & 45 deletions resources/views/modules/show.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
@extends('layouts.app')

@php
$level = !$module->is_bonus ? $module->skill_level : 'bonus';
switch ($level) {
case 'intermediate':
$bgColor = 'bg-sea';
break;
case 'advanced':
$bgColor = 'bg-merlot';
break;
case 'bonus':
$bgColor = 'bg-steel';
break;
default:
$bgColor = 'bg-emerald';
break;
}
$level = !$module->is_bonus ? $module->skill_level : 'bonus';
switch ($level) {
case 'intermediate':
$bgColor = 'bg-sea';
break;
case 'advanced':
$bgColor = 'bg-merlot';
break;
case 'bonus':
$bgColor = 'bg-steel';
break;
default:
$bgColor = 'bg-emerald';
break;
}
@endphp

@section('content')
Expand All @@ -31,8 +31,8 @@
@if (Auth::user()->hasTrack() && Auth::user()->track->modules->contains($module->id))
<completed-button
:initial-is-completed="{{ $completedModules->contains($module->id) ? 'true' : 'false' }}"
type="{{ $module->getMorphClass() }}"
id="{{ $module->id }}">
id="{{ $module->id }}"
type="{{ $module->getMorphClass() }}">
</completed-button>
@endif
@endauth
Expand All @@ -56,34 +56,39 @@
<ul class="flex flex-wrap -m-1 md:-m-2">
@forelse ($skills as $skill)
@if ($loop->index < 4)
<skill
<skill :init-completed="{{ $completedSkills->contains($skill->id) ? 'true' : 'false' }}"
@if (Auth::check() && Auth::user()->hasTrack() && Auth::user()->track->modules->contains($module->id)) :completable="true" @else :completable="false" @endif
:init-completed="{{ $completedSkills->contains($skill->id) ? 'true' : 'false' }}"
id="{{ $skill->id }}"
text="{{ $skill->name }}"
type="{{ $skill->getMorphClass() }}"
></skill>
type="{{ $skill->getMorphClass() }}"></skill>
@else
<skill x-show="showMore"
@if (Auth::check() && Auth::user()->hasTrack() && Auth::user()->track->modules->contains($module->id)) :completable="true" @else :completable="false" @endif
:init-completed="{{ $completedSkills->contains($skill->id) ? 'true' : 'false' }}"
id="{{ $skill->id }}"
text="{{ $skill->name }}"
type="{{ $skill->getMorphClass() }}"
></skill>
<skill :init-completed="{{ $completedSkills->contains($skill->id) ? 'true' : 'false' }}"
@if (Auth::check() && Auth::user()->hasTrack() && Auth::user()->track->modules->contains($module->id)) :completable="true" @else :completable="false" @endif
id="{{ $skill->id }}"
text="{{ $skill->name }}"
type="{{ $skill->getMorphClass() }}"
x-show="showMore"></skill>
@endif

@if ($loop->index == 3 && count($skills) > 4)
<button x-on:click="showMore = !showMore;" x-show="!showMore" class="relative block px-4 py-2 m-1 font-bold leading-5 text-left md:m-2 text-teal sm:leading-6 lg:text-xl lg:leading-8">
<span class="absolute inset-0 w-full h-full transition-all duration-200 ease-in-out rounded-md bg-opacity-20 bg-teal"></span>
<span>+ {{ count($skills) - 4 . ' ' . __('more') }}</span>
<button
class="relative block px-4 py-2 m-1 font-bold leading-5 text-left md:m-2 text-emerald sm:leading-6 lg:leading-8"
x-on:click="showMore = !showMore;"
x-show="!showMore">
<span
class="absolute inset-0 w-full h-full transition-all duration-200 ease-in-out rounded-md bg-opacity-20 bg-teal"></span>
<span>+ {{ count($skills) - 4 . ' ' . __('more') }}</span>
</button>
@endif

@if ($loop->last && count($skills) > 4)
<button x-on:click="showMore = !showMore;" x-show="showMore" class="relative block px-4 py-2 m-1 font-bold leading-5 text-left md:m-2 text-teal sm:leading-6 lg:text-xl lg:leading-8">
<span class="absolute inset-0 w-full h-full transition-all duration-200 ease-in-out rounded-md bg-opacity-20 bg-teal"></span>
<span>- {{ count($skills) - 4 . ' ' . __('more') }}</span>
<button
class="relative block px-4 py-2 m-1 font-bold leading-5 text-left md:m-2 text-emerald sm:leading-6 lg:leading-8"
x-on:click="showMore = !showMore;"
x-show="showMore">
<span
class="absolute inset-0 w-full h-full transition-all duration-200 ease-in-out rounded-md bg-opacity-20 bg-teal"></span>
<span>- {{ count($skills) - 4 . ' ' . __('more') }}</span>
</button>
@endif
@empty
Expand Down Expand Up @@ -123,10 +128,9 @@
--}}
</tabs>

<resource-language-preference-switcher
class="px-4 mb-8 sm:px-0"
language="{{ Localization::languageForLocale(locale()) }}"
initial-choice="{{ $currentResourceLanguagePreference }}">
<resource-language-preference-switcher class="px-4 mb-8 sm:px-0"
initial-choice="{{ $currentResourceLanguagePreference }}"
language="{{ Localization::languageForLocale(locale()) }}">
</resource-language-preference-switcher>

<x-panel>
Expand Down Expand Up @@ -165,13 +169,13 @@ class="px-4 mb-8 sm:px-0"
@if ($previousModule)
<div class="flex flex-col items-start text-white group">
<x-button.primary
href="{{ route_wlocale('modules.show', ['module' => $previousModule->slug, 'resourceType' => 'free-resources']) }}"
class="flex tracking-widest uppercase lg:px-10 lg:min-w-[185px] lg:rounded-xl lg:py-3 lg:justify-center"
>
href="{{ route_wlocale('modules.show', ['module' => $previousModule->slug, 'resourceType' => 'free-resources']) }}">
<span class="inline-block mr-4 font-semibold">&lt;</span>
<span class="inline-block font-semibold">Previous</span>
</x-button.primary>
<span class="mt-5 text-sm leading-tight word-spacing-tight sm:text-base sm:leading-tight lg:text-lg lg:leading-tight">
<span
class="mt-5 text-sm leading-tight word-spacing-tight sm:text-base sm:leading-tight lg:text-lg lg:leading-tight">
{!! $previousModule->name !!}
</span>
</div>
Expand All @@ -182,13 +186,13 @@ class="flex tracking-widest uppercase lg:px-10 lg:min-w-[185px] lg:rounded-xl lg
@if ($nextModule)
<div class="flex flex-col items-end text-white group">
<x-button.primary
href="{{ route_wlocale('modules.show', ['module' => $nextModule->slug, 'resourceType' => 'free-resources']) }}"
class="flex tracking-widest uppercase lg:px-10 lg:min-w-[185px] lg:rounded-xl lg:py-3 lg:justify-center"
>
href="{{ route_wlocale('modules.show', ['module' => $nextModule->slug, 'resourceType' => 'free-resources']) }}">
<span class="inline-block font-semibold">Next</span>
<span class="inline-block ml-4 font-semibold">&gt;</span>
</x-button.primary>
<span class="mt-5 text-sm leading-tight text-right word-spacing-tight sm:text-base sm:leading-tight lg:text-lg lg:leading-tight">
<span
class="mt-5 text-sm leading-tight text-right word-spacing-tight sm:text-base sm:leading-tight lg:text-lg lg:leading-tight">
{!! $nextModule->name !!}
</span>
</div>
Expand Down
1 change: 0 additions & 1 deletion resources/views/profile.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,5 +54,4 @@
</form>
</x-panel>
</div>

@endsection
Loading

0 comments on commit 0313a63

Please sign in to comment.