Buttons fixed

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -37,7 +37,7 @@
 
       <!-- We've overriden the default "completeButton" slot content -->
       <template v-slot:completeButton>
-        <div v-if="!submitted">
+        <div class="f-submit" v-if="!submitted">
           <button 
             class="o-btn-action"
             ref="button"
@@ -48,7 +48,10 @@
           >
               <span>{{ language.submitText }}</span>
           </button>
-          <span class="f-enter-desc">{{ language.pressEnter }}</span>
+          <a class="f-enter-desc"
+            href="#"
+            v-on:click.prevent="onSendData()">
+           {{ language.pressEnter }}</a>
         </div>
 
         <p class="text-success" v-if="submitted">Submitted succesfully.</p>

examples/questionnaire/branding.css

@@ -123,19 +123,14 @@ span.f-answered{
   opacity: .9;
 } 
 
-.o-btn-action:focus {
-  border: 1px double white;
-  outline: 1px solid black;
-} 
-
 /*footer*/
 .f-footer .footer-inner-wrap{
   background-color: rgba(255,255,255,0.75);
 }
 
 @media screen and (max-width:479px) {
   .f-footer .footer-inner-wrap{
-    background-color: rgba(0,0,0,0.05);
+    background-color: rgba(180,180,180,0.15);
   }
 
 }

examples/quiz/Example.vue

@@ -35,7 +35,7 @@
 
       <!-- We've overriden the default "completeButton" slot content -->
       <template v-slot:completeButton>
-        <div v-if="!submitted">
+        <div class="f-submit" v-if="!submitted">
           <button
             class="o-btn-action"
             ref="button"
@@ -45,7 +45,11 @@
             aria-label="Press to submit">
             <span>Calculate score</span>
           </button>
-          <span class="f-enter-desc">{{ language.pressEnter }}</span>
+          <a 
+            class="f-enter-desc"
+            href="#"
+            v-on:click.prevent="onQuizSubmit()">
+            {{ language.pressEnter }}</a>
         </div>
         <p class="text-success" v-if="submitted && score < 4">"You scored {{ score }} out of {{ total }}. There's a lot of room for improvement."</p>
         <p class="text-success" v-else-if="submitted && score < 7">"You scored {{ score }} out of {{ total }}. Not bad at all!"</p>

examples/quiz/branding.css

@@ -144,11 +144,6 @@ span.f-answered{
   opacity: .9;
 }
 
-.o-btn-action:focus {
-  border: 1px double var(--bg-color);
-  outline: 1px solid var(--button-color);
-} 
-
 /*footer*/
 .f-footer .footer-inner-wrap{
   background-color: var(--footer-color);

src/assets/css/common.css

@@ -144,16 +144,17 @@ svg.logo {
   outline: 0;
   cursor: pointer;
   padding: 0 1.4rem 0;
-  margin-bottom: 20px;
   text-align: center;
   display: inline-block;
   min-height: 44px;
+  white-space: pre-wrap;
+  max-width: 100%;
+  margin-bottom: 20px;
 } 
 
 .o-btn-action {
   z-index: 1;
   line-height: 45px;
-  height: 44px;
   font-weight: 900;
   text-transform: lowercase;
 }
@@ -166,9 +167,14 @@ svg.logo {
 }
 
 .f-enter-desc {
+  display: inline-block;
   margin-left: 0.6rem;
 }
 
+.f-enter {
+  margin-bottom: 20px;
+}
+
 /*v-form*/
 .v-form {
   margin-top: 26vh;
@@ -544,6 +550,10 @@ a.f-disabled {
   max-width: 760px;
 }
 
+f.submit {
+  margin-bottom: 20px;
+}
+
 /*
   media-start
 */

src/components/FlowForm.vue

@@ -39,7 +39,12 @@
             v-bind:aria-label="language.ariaSubmitText">
                 <span>{{ language.submitText }}</span>
             </button>
-             <span class="f-enter-desc">{{ language.pressEnter }}</span>
+             <a 
+              class="f-enter-desc"
+              href="#"
+              v-on:click.prevent="submit()"
+              v-if="!submitted">
+             {{ language.pressEnter }}</a>
           </slot>
         </div>
       </div>

src/components/Question.vue

@@ -50,7 +50,7 @@
         </div>
         <p v-if="question.description" class="description">{{ question.description }}</p>
       </div>
-      <div class="animate fade-in-up f-enter" v-if="showOkButton()">
+      <div class="animate fade-in f-enter" v-if="showOkButton()">
         <button 
           class="o-btn-action"
           type="button"
@@ -62,7 +62,11 @@
             <span v-if="question.type === QuestionType.SectionBreak">{{ language.continue }}</span>
             <span v-else>{{ language.ok }}</span>
         </button>
-        <span class="f-enter-desc">{{ language.pressEnter }}</span>
+        <a 
+          class="f-enter-desc"
+          href="#"
+          v-on:click.prevent="onEnter">
+          {{ language.pressEnter }}</a>
       </div>
 
       <div v-if="showInvalid()" class="f-invalid" role="alert" aria-live="assertive">{{ language.invalidPrompt }}</div>