remove aside transition to mobile

8 files changed, 200 insertions, 319 deletions

diff --git a/packages/anastasis-webui/src/components/menu/NavigationBar.tsx b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx
index 02004c105..8d5a0473b 100644
--- a/packages/anastasis-webui/src/components/menu/NavigationBar.tsx
+++ b/packages/anastasis-webui/src/components/menu/NavigationBar.tsx
@@ -51,7 +51,7 @@ export function NavigationBar({ onMobileMenu, title }: Props): VNode {
         >
           Report a bug
         </a>
-        <a
+        {/* <a
           role="button"
           class="navbar-burger"
           aria-label="menu"
@@ -64,7 +64,7 @@ export function NavigationBar({ onMobileMenu, title }: Props): VNode {
           <span aria-hidden="true" />
           <span aria-hidden="true" />
           <span aria-hidden="true" />
-        </a>
+        </a> */}
       </div>
 
       <div class="navbar-menu ">
diff --git a/packages/anastasis-webui/src/components/menu/index.tsx b/packages/anastasis-webui/src/components/menu/index.tsx
index 89add9603..fd4aab149 100644
--- a/packages/anastasis-webui/src/components/menu/index.tsx
+++ b/packages/anastasis-webui/src/components/menu/index.tsx
@@ -85,8 +85,8 @@ export function NotificationCard({
               n.type === "ERROR"
                 ? "message is-danger"
                 : n.type === "WARN"
-                ? "message is-warning"
-                : "message is-info"
+                  ? "message is-warning"
+                  : "message is-info"
             }
           >
             <div class="message-header">
@@ -112,7 +112,8 @@ export function NotYetReadyAppMenu({
 
   return (
     <div
-      class={mobileOpen ? "has-aside-mobile-expanded" : ""}
+      class="has-aside-mobile-expanded"
+      // class={mobileOpen ? "has-aside-mobile-expanded" : ""} 
       onClick={() => setMobileOpen(false)}
     >
       <NavigationBar
diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
index f86994c97..86a2f08ee 100644
--- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
@@ -1,13 +1,12 @@
-/* eslint-disable @typescript-eslint/camelcase */
 import { UserAttributeSpec, validators } from "anastasis-core";
-import { Fragment, h, VNode } from "preact";
+import { isAfter, parse } from "date-fns";
+import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { useAnastasisContext } from "../../context/anastasis";
-import { AnastasisClientFrame, withProcessLabel } from "./index";
-import { TextInput } from "../../components/fields/TextInput";
 import { DateInput } from "../../components/fields/DateInput";
 import { NumberInput } from "../../components/fields/NumberInput";
-import { isAfter, parse } from "date-fns";
+import { TextInput } from "../../components/fields/TextInput";
+import { useAnastasisContext } from "../../context/anastasis";
+import { AnastasisClientFrame, withProcessLabel } from "./index";
 
 export function AttributeEntryScreen(): VNode {
   const reducer = useAnastasisContext()
@@ -48,10 +47,10 @@ export function AttributeEntryScreen(): VNode {
       })}
     >
       <div class="columns" style={{ maxWidth: 'unset' }}>
-        <div class="column is-half">
+        <div class="column">
           {fieldList}
         </div>
-        <div class="column is-is-half" >
+        <div class="column" >
           <p>This personal information will help to locate your secret.</p>
           <h1 class="title">This stays private</h1>
           <p>The information you have entered here:</p>
diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
index 6e3ca2941..e06dbfedd 100644
--- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
@@ -156,7 +156,7 @@ export function AuthenticationEditorScreen(): VNode {
       onNext={handleNext}
     >
       <div class="columns">
-        <div class="column is-half">
+        <div class="column">
           <div>
             {getKeys(authMethods).map((method) => (
               <MethodButton key={method} method={method} />
@@ -195,7 +195,7 @@ export function AuthenticationEditorScreen(): VNode {
             </ConfirmModal>
           )}
         </div>
-        <div class="column is-half">
+        <div class="column">
           <p class="block">
             When recovering your wallet, you will be asked to verify your
             identity via the methods you configure here. The list of
diff --git a/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
index 82f06c34f..f1f2802ae 100644
--- a/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx
@@ -67,248 +67,3 @@ export const MismatchedChallengeId = createExample(TestedComponent, {
   selected_challenge_uuid: 'no-no-no'
 } as ReducerState);
 
-export const SmsChallenge = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'SMS to 555-5555',
-      type: 'sms',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-
-} as ReducerState);
-
-export const QuestionChallenge = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-
-} as ReducerState);
-
-export const EmailChallenge = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'Email to sebasjm@some-domain.com',
-      type: 'email',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-
-} as ReducerState);
-
-export const PostChallenge = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'Letter to address in postal code ABC123',
-      type: 'post',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-
-} as ReducerState);
-
-
-export const QuestionChallengeMessageFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.Message,
-      message: 'Challenge should be solved'
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeServerFailureFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.ServerFailure,
-      http_status: 500,
-      error_response: "Couldn't connect to mysql"
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeRedirectFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.Redirect,
-      http_status: 302,
-      redirect_url: 'http://video.taler.net'
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeMessageRateLimitExceededFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.RateLimitExceeded,
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeUnsupportedFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.Unsupported,
-      http_status: 500,
-      unsupported_method: 'Question'
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeTruthUnknownFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.TruthUnknown,
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengeAuthIbanFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_state: RecoveryStates.ChallengeSelecting,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.AuthIban,
-      challenge_amount: "EUR:1",
-      credit_iban: "DE12345789000",
-      business_name: "Data Loss Incorporated",
-      wire_transfer_subject: "Anastasis 987654321",
-      answer_code: 987654321,
-      // Fields that follow are only for compatibility with C reducer,
-      // will be removed eventually,
-      details: {
-        business_name: "foo",
-        challenge_amount: "foo",
-        credit_iban: "foo",
-        wire_transfer_subject: "foo",
-      },
-      method: "iban",
-    }
-  }
-
-} as ReducerState);
-
-export const QuestionChallengePaymentFeedback = createExample(TestedComponent, {
-  ...reducerStatesExample.challengeSolving,
-  recovery_information: {
-    challenges: [{
-      cost: 'USD:1',
-      instructions: 'does P equals NP?',
-      type: 'question',
-      uuid: 'ASDASDSAD!1'
-    }],
-    policies: [],
-  },
-  selected_challenge_uuid: 'ASDASDSAD!1',
-  challenge_feedback: {
-    'ASDASDSAD!1': {
-      state: ChallengeFeedbackStatus.Payment,
-      taler_pay_uri : "taler://pay/...",
-      provider : "https://localhost:8080/",
-      payment_secret : "3P4561HAMHRRYEYD6CM6J7TS5VTD5SR2K2EXJDZEFSX92XKHR4KG"
-     }
-  }
-} as ReducerState);
-
diff --git a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
index ec6c7735b..5e17c9aa1 100644
--- a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
@@ -1,4 +1,4 @@
-import { Fragment, h, VNode } from "preact";
+import { h, VNode } from "preact";
 import { AnastasisClientFrame } from ".";
 import {
   ChallengeFeedback,
@@ -6,7 +6,7 @@ import {
 } from "../../../../anastasis-core/lib";
 import { Notifications } from "../../components/Notifications";
 import { useAnastasisContext } from "../../context/anastasis";
-import { authMethods, AuthMethodSolveProps, KnownAuthMethods } from "./authMethod";
+import { authMethods, KnownAuthMethods } from "./authMethod";
 
 export function SolveOverviewFeedbackDisplay(props: { feedback?: ChallengeFeedback }): VNode {
   const { feedback } = props;
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx
index a325b3843..f0ec92d4d 100644
--- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx
@@ -54,3 +54,186 @@ export const WithoutFeedback = createExample(TestedComponent[type].solve, {
   id: 'uuid-1',
 });
 
+export const MessageFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.Message,
+      message: 'Challenge should be solved'
+    }
+  }
+
+} as ReducerState);
+
+export const ServerFailureFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.ServerFailure,
+      http_status: 500,
+      error_response: "Couldn't connect to mysql"
+    }
+  }
+
+} as ReducerState);
+
+export const RedirectFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.Redirect,
+      http_status: 302,
+      redirect_url: 'http://video.taler.net'
+    }
+  }
+
+} as ReducerState);
+
+export const MessageRateLimitExceededFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.RateLimitExceeded,
+    }
+  }
+
+} as ReducerState);
+
+export const UnsupportedFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.Unsupported,
+      http_status: 500,
+      unsupported_method: 'Question'
+    }
+  }
+
+} as ReducerState);
+
+export const TruthUnknownFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.TruthUnknown,
+    }
+  }
+
+} as ReducerState);
+
+export const AuthIbanFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.AuthIban,
+      challenge_amount: "EUR:1",
+      credit_iban: "DE12345789000",
+      business_name: "Data Loss Incorporated",
+      wire_transfer_subject: "Anastasis 987654321",
+      answer_code: 987654321,
+      // Fields that follow are only for compatibility with C reducer,
+      // will be removed eventually,
+      details: {
+        business_name: "foo",
+        challenge_amount: "foo",
+        credit_iban: "foo",
+        wire_transfer_subject: "foo",
+      },
+      method: "iban",
+    }
+  }
+
+} as ReducerState);
+
+export const PaymentFeedback = createExample(TestedComponent[type].solve, {
+  ...reducerStatesExample.challengeSolving,
+  recovery_information: {
+    challenges: [{
+      cost: 'USD:1',
+      instructions: 'does P equals NP?',
+      type: 'question',
+      uuid: 'ASDASDSAD!1'
+    }],
+    policies: [],
+  },
+  selected_challenge_uuid: 'ASDASDSAD!1',
+  challenge_feedback: {
+    'ASDASDSAD!1': {
+      state: ChallengeFeedbackStatus.Payment,
+      taler_pay_uri : "taler://pay/...",
+      provider : "https://localhost:8080/",
+      payment_secret : "3P4561HAMHRRYEYD6CM6J7TS5VTD5SR2K2EXJDZEFSX92XKHR4KG"
+     }
+  }
+} as ReducerState);
+
diff --git a/packages/anastasis-webui/src/scss/_aside.scss b/packages/anastasis-webui/src/scss/_aside.scss
index c9332b252..37297babf 100644
--- a/packages/anastasis-webui/src/scss/_aside.scss
+++ b/packages/anastasis-webui/src/scss/_aside.scss
@@ -19,7 +19,6 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-@include desktop {
   html {
     &.has-aside-left {
       &.has-aside-expanded {
@@ -52,7 +51,6 @@
       }
     }
   }
-}
 
 aside.aside {
   display: none;
@@ -129,58 +127,3 @@ aside.aside {
   }
 }
 
-@include touch {
-  nav.navbar {
-    @include transition(margin-left);
-  }
-  aside.aside {
-    @include transition(left);
-  }
-  html.has-aside-mobile-transition {
-    body {
-      overflow-x: hidden;
-    }
-    body,
-    nav.navbar {
-      width: 100vw;
-    }
-    aside.aside {
-      width: $aside-mobile-width;
-      display: block;
-      left: $aside-mobile-width * -1;
-
-      .image {
-        img {
-          max-width: $aside-mobile-width * 0.33;
-        }
-      }
-
-      .menu-list {
-        li.is-active {
-          ul {
-            display: block;
-          }
-          background-color: $body-background-color;
-        }
-        li {
-          @include icon-with-update-mark($aside-icon-width);
-          margin-top: 8px;
-          margin-bottom: 8px;
-        }
-        a {
-          span.menu-item-label {
-            display: inline-block;
-          }
-        }
-      }
-    }
-  }
-  div.has-aside-mobile-expanded {
-    nav.navbar {
-      margin-left: $aside-mobile-width;
-    }
-    aside.aside {
-      left: 0;
-    }
-  }
-}