Kitchen tweaks

Author: NoelDeMartin

cypress/integration/kitchen.spec.ts

@@ -19,7 +19,7 @@ describe('Kitchen', () => {
         cy.press('Pa amb tomàquet');
 
         // Act & Assert - Ingredients
-        cy.press('Let\'s cook!');
+        cy.press('Let\'s cook this!');
         cy.see('Mise en place');
         cy.see('Bread');
         cy.see('1 Tomato');
@@ -51,7 +51,7 @@ describe('Kitchen', () => {
     it('Uses timers', () => {
         // Arrange
         cy.press('Pa amb tomàquet');
-        cy.press('Let\'s cook!');
+        cy.press('Let\'s cook this!');
         cy.press('Next');
         cy.press('Show timers');
 
@@ -77,7 +77,7 @@ describe('Kitchen', () => {
     it('Persists state', () => {
         // Arrange
         cy.press('Pa amb tomàquet');
-        cy.press('Let\'s cook!');
+        cy.press('Let\'s cook this!');
         cy.press('Bread');
         cy.press('Next');
         cy.press('Show timers');
@@ -97,7 +97,7 @@ describe('Kitchen', () => {
         cy.see('Timer 1');
 
         cy.ariaLabel('Close the modal').click();
-        cy.press('Show ingredients');
+        cy.press('Previous');
 
         cy.contains('label', 'Bread').within(() => {
             cy.get('input').should('match', ':checked');
@@ -112,12 +112,12 @@ describe('Kitchen', () => {
         cy.press('not now');
 
         // Assert
-        cy.dontSee('Let\'s cook!');
+        cy.dontSee('Let\'s cook this!');
 
         cy.go('back');
         cy.press('Pa amb tomàquet');
         cy.wait(1000);
-        cy.dontSee('Let\'s cook!');
+        cy.dontSee('Let\'s cook this!');
     });
 
 });

src/components/AppHeader.vue

@@ -100,10 +100,6 @@ const navigationButton = $computed(() => {
     return 'logo';
 });
 const backText = $computed(() => {
-    if (Date.now()) {
-        return 'Noel De Martin\'s Public Recipes';
-    }
-
     if (Viewer.active) {
         return collection?.name
             ?? Viewer.collection?.name

src/routing/pages/kitchen/components/KitchenPage.vue

@@ -13,7 +13,7 @@
         <div class="w-full h-full overflow-auto">
             <div class="mx-auto max-w-4xl pt-4 pb-8 px-edge md:pt-10 min-h-full flex flex-col">
                 <template v-if="recipe">
-                    <h1 class="text-gray-500 opacity-50 font-medium tracking-wide uppercase text-xs">
+                    <h1 class="text-gray-500 opacity-50 font-medium tracking-wide uppercase text-xs mr-8">
                         {{ $t('kitchen.title', { recipe: recipe.name }) }}
                     </h1>
                     <h2 class="text-2xl font-semibold mt-4">
@@ -29,16 +29,7 @@
             </div>
         </div>
 
-        <div class="fixed bottom-24 right-8 md:top-32 md:bottom-auto md:right-12 flex flex-col space-y-4 z-10">
-            <CoreButton
-                v-if="showKitchenShortcut && $kitchen.dishes.length > 1"
-                :title="$t('kitchen.index.show')"
-                route="kitchen"
-                secondary
-            >
-                <i-tabler-chef-hat-filled class="w-7 h-7" aria-hidden="true" />
-                <span class="sr-only">{{ $t('kitchen.index.show') }}</span>
-            </CoreButton>
+        <div class="fixed bottom-24 right-8 flex flex-col-reverse space-y-4 space-y-reverse z-10 md:top-32 md:bottom-auto md:right-12 md:flex-col md:space-y-4">
             <CoreButton
                 :title="$t('kitchen.timers.show')"
                 secondary
@@ -53,6 +44,15 @@
                     </span>
                 </div>
             </CoreButton>
+            <CoreButton
+                v-if="showKitchenShortcut && $kitchen.dishes.length > 1"
+                :title="$t('kitchen.index.show')"
+                route="kitchen"
+                secondary
+            >
+                <i-tabler-chef-hat-filled class="w-7 h-7" aria-hidden="true" />
+                <span class="sr-only">{{ $t('kitchen.index.show') }}</span>
+            </CoreButton>
         </div>
     </div>
 </template>

src/routing/pages/kitchen/components/KitchenTimer.vue

@@ -9,7 +9,13 @@
                     {{ time }}
                 </span>
             </div>
-            <div class="flex space-x-2 self-center mt-1">
+            <div
+                class="flex self-center mt-1"
+                :class="{
+                    'flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-2': timer.isPaused(),
+                    'space-x-2': !timer.isPaused(),
+                }"
+            >
                 <CoreButton
                     v-if="timer.isPaused()"
                     secondary
@@ -63,15 +69,15 @@
                     @click="deleteTimer()"
                 >
                     <i-pepicons-trash class="w-4 h-4" aria-hidden="true" />
-                    <span class="sr-only">
+                    <span class="md:sr-only ml-1 text-xs uppercase font-medium" :class="{ 'sr-only': !timer.isPaused() }">
                         {{ $t('kitchen.timers.delete') }}
                     </span>
                 </CoreButton>
             </div>
         </div>
-        <div v-if="timer.hasStarted() && !timer.isOverTime()" class="mt-1 w-full h-2 rounded-full bg-gray-200 relative">
+        <div v-if="timer.hasStarted() && !timer.isOverTime()" class="mt-1 w-full h-2 rounded-full bg-gray-200 relative overflow-hidden">
             <div
-                class="h-full rounded-full absolute left-0 top-0"
+                class="h-full absolute left-0 top-0"
                 :style="`width: ${(timer.duration - timer.getTimeLeft()) * 100 / timer.duration}%`"
                 :class="{
                     'bg-primary-500': !timer.isPaused(),

src/routing/pages/kitchen/constants.ts

@@ -1 +1 @@
-export const KITCHEN_TRANSITION_DURATION = 600;
+export const KITCHEN_TRANSITION_DURATION = 400;

src/services/KitchenService.ts

@@ -128,7 +128,9 @@ export default class CookbookService extends Service<State, ComputedState, Persi
     public async complete(dish: Dish): Promise<void> {
         this.setState({
             dishes: arrayWithout(this.dishes, dish),
-            timers: this.timers.filter(timer => !timer.hasDish(dish)),
+            timers: this.dishes.length === 0
+                ? []
+                : this.timers.filter(timer => !timer.hasDish(dish)),
         });
 
         if (this.dishes.length === 0) {