Merge pull request #713 from waynestate/feature/flag-upgrade

Feature/flag upgrade
waynestate · May 2, 2024 · 2403127 · 2403127
2 parents 31a8b1a + c2e2214
commit 2403127
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 44 deletions.
diff --git a/factories/Flag.php b/factories/Flag.php
@@ -23,9 +23,9 @@ public function create($limit = 1, $flatten = false, $options = [])
         for ($i = 1; $i <= $limit; $i++) {
             $data[$i] = [
                 'class' => 'flag',
-                'title' => 'Make a',
+                'title' => 'Make a <em>Gift</em>',
                 'link' => 'https://wayne.edu',
-                'excerpt' => 'Gift',
+                'excerpt' => '',
             ];
 
             $data[$i] = array_replace_recursive($data[$i], $options);

diff --git a/resources/scss/components/_flag.scss b/resources/scss/components/_flag.scss
@@ -1,41 +1,73 @@
-.flag {
-    @apply absolute hidden mt:flex z-40 bg-gold text-green-800 hover:text-green-900 items-center justify-center mr-4 right-0 pt-0 duration-500;
-
-    transition-property: height, padding;
-    width: 140px;
-    height: 30px;
-
-    // Pointy bottom
-    &::after {
-        @apply border-gold absolute duration-500;
-
-        transition-property: top;
-        border-left-color: transparent;
-        border-right-color: transparent;
-        border-style: solid;
-        border-width: 12px 70px 0;
-        top: 30px;
-        content: "";
-        left: 0;
+.flag__container {
+    .flag {
+        &__title {
+            @apply uppercase text-sm tracking-wide leading-3 relative z-50;
+        }
+
+        em,
+        &__excerpt {
+            @apply normal-case text-xl italic font-serif pl-0.5 leading-3;
+        }
     }
 
-    &:hover {
-        @apply duration-500;
+    &.flag--sm {
+        @apply mx-4;
 
-        transition-property: height, padding;
-        height: 38px;
-        padding-top: 8px;
+        .flag {
+            @extend .gold-gradient-button;
 
-        &::after {
-            top: 38px;
+            @apply w-full font-normal mt:hidden;
         }
     }
 
-    &__title {
-        @apply uppercase text-sm tracking-wide pt-1.5 pt-1;
-    }
+    &.flag--mt {
+        @apply row relative;
+
+        .flag {
+            @apply absolute hidden mt:flex z-40 bg-gold text-green-800 hover:text-green-900 items-center justify-center mr-4 right-0 px-2 duration-500;
+
+            transition-property: height, padding;
+            min-width: 140px;
+            height: 28px;
+
+            &__container {
+                @apply row relative;
+            }
 
-    &__excerpt {
-        @apply normal-case text-xl italic font-serif pt-0.5 pl-1;
+            // Pointy bottom
+            &::after {
+                @apply bg-gold absolute duration-500;
+
+                clip-path: polygon(0 0, 100% 0, 100% 4%, 50% 14%, 0 4%);
+                //clip-path: polygon(0 0, 100% 0, 100% 12%, 50% 4%, 0 12%);
+                transition-property: top;
+                width: 100%;
+                height: 8rem;
+                top: 24px;
+                content: "";
+                left: 0;
+
+                /*
+                @apply border-gold absolute duration-500;
+
+                border-left-color: transparent;
+                border-right-color: transparent;
+                border-style: solid;
+                border-width: 12px 70px 0;
+                */
+            }
+
+            &:hover {
+                @apply duration-500;
+
+                transition-property: height, padding;
+                height: 30px;
+                padding-top: 8px;
+
+                &::after {
+                    top: 28px;
+                }
+            }
+        }
     }
 }
diff --git a/resources/views/components/flag.blade.php b/resources/views/components/flag.blade.php
@@ -1,10 +1,10 @@
 {{--
     $flag => array // [['title', 'link', 'excerpt']]
 --}}
-<div class="row relative">
+<div class="flag__container {{ $class ?? '' }}">
     <a class="flag" href="{{ $flag['link'] }}">
-        <span class="flag__title">{{ $flag['title'] }}</span>
-        @if($flag['excerpt'] != '')
+        <span class="flag__title">{!! $flag['title'] !!}</span>
+        @if(!empty($flag['excerpt']))
             <span class="flag__excerpt">{{ $flag['excerpt'] }}</span>
         @endif
     </a>

diff --git a/resources/views/layouts/contained-hero.blade.php b/resources/views/layouts/contained-hero.blade.php
@@ -31,7 +31,7 @@
     @endif
 
     @if(!empty($base['flag']))
-        @include('components.flag', ['flag' => $base['flag']])
+        @include('components.flag', ['flag' => $base['flag'], 'class' => 'flag--mt'])
     @endif
 </header>
 
@@ -67,9 +67,7 @@
                 @endif
 
                 @if(!empty($base['flag']))
-                    <div class="min-w-full px-4 mt:px-0 mb-4 mt:hidden">
-                        <a href="{{ $base['flag']['link'] }}" class="button w-full flag__title">{{ $base['flag']['title'] }} <span class="flag__excerpt">{{ $base['flag']['excerpt'] }}</span></a>
-                    </div>
+                    @include('components.flag', ['flag' => $base['flag'], 'class' => 'flag--sm'])
                 @endif
 
                 @yield('below_menu')

diff --git a/resources/views/layouts/main.blade.php b/resources/views/layouts/main.blade.php
@@ -31,7 +31,7 @@
     @endif
 
     @if(!empty($base['flag']))
-        @include('components.flag', ['flag' => $base['flag']])
+        @include('components.flag', ['flag' => $base['flag'], 'class' => 'flag--mt'])
     @endif
 </header>
 
@@ -67,9 +67,7 @@
                 @endif
 
                 @if(!empty($base['flag']))
-                    <div class="min-w-full px-4 mt:px-0 mb-4 mt:hidden">
-                        <a href="{{ $base['flag']['link'] }}" class="button w-full flag__title">{{ $base['flag']['title'] }} <span class="flag__excerpt">{{ $base['flag']['excerpt'] }}</span></a>
-                    </div>
+                    @include('components.flag', ['flag' => $base['flag'], 'class' => 'flag--sm'])
                 @endif
 
                 @yield('below_menu')