From 2b0420e7134b8979562067dd3a640b2470f3dfeb Mon Sep 17 00:00:00 2001
From: EkaterinaVu <ekaterina.vujasinovic@gmail.com>
Date: Thu, 17 Sep 2020 18:00:56 +0200
Subject: [PATCH 1/4] Fix links CSS

---
 src/assets/css/common.css   | 8 ++++++--
 src/components/Question.vue | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 2f6abb5e..a5000f50 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -332,8 +332,8 @@ a.f-link,
 .field-submittype .section-wrap a {
   margin-right: 10px;
   color: inherit;
-  border-bottom: 1px solid;
-  white-space: pre-wrap;
+  border-bottom: 1px dotted;
+  word-break: break-word;
 }
 
 a.f-link:hover, 
@@ -440,6 +440,10 @@ p.description {
   padding-right: 4rem;
 }
 
+p.description span {
+  margin-right: 10px;
+}
+
 /*f-radios (multiple-choice)*/
 ul.f-radios {
   margin: 0;
diff --git a/src/components/Question.vue b/src/components/Question.vue
index 3a46584d..08549a42 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -50,7 +50,7 @@
           </div>
         </div>
         <p v-if="question.description || question.descriptionLink" class="description">
-          {{ question.description }}
+          <span>{{ question.description }}</span>
           <a
             v-for="(link, index) in question.descriptionLink" 
             class="f-link" 

From e6f2174f24b7cd7d7c6ae0d55938b7e9bbb2e487 Mon Sep 17 00:00:00 2001
From: EkaterinaVu <ekaterina.vujasinovic@gmail.com>
Date: Thu, 17 Sep 2020 19:02:18 +0200
Subject: [PATCH 2/4] Fixed description section

---
 examples/questionnaire/Example.vue | 6 ++++++
 src/components/Question.vue        | 6 ++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/examples/questionnaire/Example.vue b/examples/questionnaire/Example.vue
index 3c51bcaf..5528437d 100644
--- a/examples/questionnaire/Example.vue
+++ b/examples/questionnaire/Example.vue
@@ -90,6 +90,12 @@
             id: 'first_name',
             tagline: 'Hi! Welcome to our demo survey 😊',
             title: 'What is your first name?',
+            description: 'description', 
+            descriptionLink: [
+              new LinkOption({
+                url: 'example.com'
+              })
+            ],
             type: QuestionType.Text,
             required: true,
             placeholder: 'Start typing here...'
diff --git a/src/components/Question.vue b/src/components/Question.vue
index 08549a42..205ea002 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -50,16 +50,14 @@
           </div>
         </div>
         <p v-if="question.description || question.descriptionLink" class="description">
-          <span>{{ question.description }}</span>
+          <span v-if="question.description">{{ question.description }}</span>
           <a
             v-for="(link, index) in question.descriptionLink" 
             class="f-link" 
             v-bind:key="'m' + index"
             v-bind:href="link.url"
             v-bind:target="link.target"
-          >
-            {{ link.text || link.url }}
-          </a>
+          >{{ link.text || link.url }}</a>
         </p>
 
       </div>

From 8687588587d66281fddc540c183799f795de3d1c Mon Sep 17 00:00:00 2001
From: EkaterinaVu <ekaterina.vujasinovic@gmail.com>
Date: Thu, 17 Sep 2020 19:05:11 +0200
Subject: [PATCH 3/4] Remove description from Example

---
 examples/questionnaire/Example.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/examples/questionnaire/Example.vue b/examples/questionnaire/Example.vue
index 5528437d..3c51bcaf 100644
--- a/examples/questionnaire/Example.vue
+++ b/examples/questionnaire/Example.vue
@@ -90,12 +90,6 @@
             id: 'first_name',
             tagline: 'Hi! Welcome to our demo survey 😊',
             title: 'What is your first name?',
-            description: 'description', 
-            descriptionLink: [
-              new LinkOption({
-                url: 'example.com'
-              })
-            ],
             type: QuestionType.Text,
             required: true,
             placeholder: 'Start typing here...'

From 7a7756813cac132936cbe2795d4f219c50563e7b Mon Sep 17 00:00:00 2001
From: Nikola P <nikola@ditdot.hr>
Date: Thu, 17 Sep 2020 19:24:31 +0200
Subject: [PATCH 4/4] Fixed link styles, imported component to quiz

---
 examples/quiz/Example.vue |  2 +-
 src/assets/css/common.css | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/examples/quiz/Example.vue b/examples/quiz/Example.vue
index d0047ca8..b381ce27 100644
--- a/examples/quiz/Example.vue
+++ b/examples/quiz/Example.vue
@@ -68,7 +68,7 @@
 
   // Import necessary components and classes
   import FlowForm from '../../src/components/FlowForm.vue'
-  import QuestionModel, { QuestionType, ChoiceOption} from '../../src/models/QuestionModel'
+  import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from '../../src/models/QuestionModel'
   import LanguageModel from '../../src/models/LanguageModel'
   // If using the npm package, use the following line instead of the ones above.
   // import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index a5000f50..5839fab4 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -327,10 +327,8 @@ span.f-answered{
 }
 
 /*links*/
-
 a.f-link, 
 .field-submittype .section-wrap a {
-  margin-right: 10px;
   color: inherit;
   border-bottom: 1px dotted;
   word-break: break-word;
@@ -435,15 +433,19 @@ span.f-text {
   margin-right: .6rem;
 }
 
+/*description*/
 p.description {
   margin-top: 0;
   padding-right: 4rem;
 }
 
-p.description span {
-  margin-right: 10px;
+p.description span,
+p.description a.f-link {
+  margin-right: 8px;
 }
 
+
+
 /*f-radios (multiple-choice)*/
 ul.f-radios {
   margin: 0;