Merge pull request #115 from ditdot-dev/links

Link styles, imported component in quiz example

Author: phre1

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'

src/assets/css/common.css

@@ -334,13 +334,11 @@ span.f-answered{
 }
 
 /*links*/
-
 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, 
@@ -442,11 +440,19 @@ span.f-text {
   margin-right: .6rem;
 }
 
+/*description*/
 p.description {
   margin-top: 0;
   padding-right: 4rem;
 }
 
+p.description span,
+p.description a.f-link {
+  margin-right: 8px;
+}
+
+
+
 /*f-radios (multiple-choice)*/
 ul.f-radios {
   margin: 0;

src/components/Question.vue

@@ -50,16 +50,14 @@
           </div>
         </div>
         <p v-if="question.description || question.descriptionLink" class="description">
-          {{ question.description }}
+          <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>