Merge pull request #1255 from c2corg/bulma-update-fixes

Fix CSS problems introduced either with Bulma or Vue CLI updates
c2corg · Jun 25, 2020 · 34a082c · 34a082c
2 parents d47556e + 07840a3
commit 34a082c
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 70 deletions.
diff --git a/src/assets/sass/main.scss b/src/assets/sass/main.scss
@@ -1,31 +1,44 @@
 @import './variables.scss';
 @import './scrollbar.scss';
 
-@import "~bulma/sass/utilities/_all.sass";
+// with bulma 0.8.0, buttons are now 2.5em high. Use the following lines to restore previous behaviour.
+$control-border-width: 1px;
+$control-height: 2.25em;
+$control-padding-vertical: calc(0.375em - #{$control-border-width});
+$control-padding-horizontal: calc(0.625em - #{$control-border-width});
+$button-border-width: $control-border-width !default;
+$button-padding-vertical: calc(0.375em - #{$button-border-width});
+$button-padding-horizontal: 0.75em;
 
-@import "~bulma/sass/base/_all.sass";
-
-@import "~bulma/sass/components/card.sass";
-@import "~bulma/sass/components/dropdown.sass";
-@import "~bulma/sass/components/level.sass";
-@import "~bulma/sass/components/modal.sass";
-
-@import "~bulma/sass/elements/box.sass";
-@import "~bulma/sass/elements/button.sass";
-@import "~bulma/sass/elements/container.sass";
-@import "~bulma/sass/elements/content.sass";
-@import "~bulma/sass/form/_all.sass";
-@import "~bulma/sass/elements/icon.sass";
-@import "~bulma/sass/elements/image.sass";
-@import "~bulma/sass/elements/notification.sass";
-@import "~bulma/sass/elements/progress.sass";
-@import "~bulma/sass/elements/other.sass";
-@import "~bulma/sass/elements/table.sass";
-@import "~bulma/sass/elements/tag.sass";
-@import "~bulma/sass/elements/title.sass";
-
-@import "~bulma/sass/grid/columns.sass";
-@import "~bulma/sass/layout/section.sass";
+@import '~bulma/sass/utilities/_all.sass';
+//
+@import '~bulma/sass/base/_all.sass';
+//
+@import '~bulma/sass/elements/box.sass';
+@import '~bulma/sass/elements/button.sass';
+@import '~bulma/sass/elements/container.sass';
+@import '~bulma/sass/elements/content.sass';
+@import '~bulma/sass/elements/icon.sass';
+@import '~bulma/sass/elements/image.sass';
+@import '~bulma/sass/elements/notification.sass';
+@import '~bulma/sass/elements/progress.sass';
+@import '~bulma/sass/elements/other.sass';
+@import '~bulma/sass/elements/table.sass';
+@import '~bulma/sass/elements/tag.sass';
+@import '~bulma/sass/elements/title.sass';
+//
+@import '~bulma/sass/form/_all.sass';
+//
+@import '~bulma/sass/components/card.sass';
+@import '~bulma/sass/components/dropdown.sass';
+@import '~bulma/sass/components/level.sass';
+@import '~bulma/sass/components/modal.sass';
+//
+@import '~bulma/sass/grid/columns.sass';
+//
+@import '~bulma/sass/helpers/_all.sass';
+//
+@import '~bulma/sass/layout/section.sass';
 
 @import '~bulma-checkradio';
 // bulma checkradio isn't customizable with variables. Overrides its classes

diff --git a/src/assets/sass/variables.scss b/src/assets/sass/variables.scss
@@ -68,15 +68,7 @@ $box-shadow: rgba(10, 10, 10, 0.1) 0 2px 3px 0, rgba(10, 10, 10, 0.1) 0 0 0 1px;
  */
 $navbar-height: 3.25rem;
 
-// TODO bulkma 0.7.3 will introduce $input-placeholder-color
-// but it's not yet (14/12/2018) available on npm
-$input-placeholder-color: rbg(160, 160, 160);
-
-::placeholder {
-  /* Chrome, Firefox, Opera, Safari 10.1+ */
-  color: #aaa !important;
-  opacity: 1; /* Firefox */
-}
+$input-placeholder-color: rgb(160, 160, 160);
 
 @import '~bulma/sass/utilities/initial-variables.sass';
 @import '~bulma/sass/utilities/functions.sass';

diff --git a/src/components/generics/DocumentField.vue b/src/components/generics/DocumentField.vue
@@ -1,32 +1,29 @@
 <template>
   <!-- This a generic component that display field value of a document for any kind of field  -->
   <span>
-    <activities v-if="field.name == 'activities'" :activities="document.activities" class="has-text-secondary" />
+    <activities v-if="field.name == 'activities'" :activities="document.activities" class="has-text-secondary" /><!--
 
-    <a v-else-if="field.type === 'url'" :href="value">
-      {{ value }}
-    </a>
+ --><a v-else-if="field.type === 'url'" :href="value">{{ value }}</a
+    ><!--
 
-    <span v-else-if="field.type === 'date_time'">
-      {{ $moment.toLocalizedString(value, 'LLL') }}
-    </span>
+ --><span v-else-if="field.type === 'date_time'">{{ $moment.toLocalizedString(value, 'LLL') }}</span
+    ><!--
 
-    <textual-array v-else-if="isArray" :array="value" :i18n="field.i18n" :i18n-context="field.i18nContext" />
+ --><textual-array v-else-if="isArray" :array="value" :i18n="field.i18n" :i18n-context="field.i18nContext" /><!--
 
-    <span v-else-if="typeof value === 'boolean'">
+ --><span v-else-if="typeof value === 'boolean'">
       <span v-if="value" v-translate>
         yes
       </span>
       <span v-else v-translate>
         no
-      </span>
-    </span>
+      </span> </span
+    ><!--
 
-    <span v-else-if="field.i18n">
-      {{ $gettext(value, field.i18nContext) }}
-    </span>
+ --><span v-else-if="field.i18n">{{ $gettext(value, field.i18nContext) }} </span
+    ><!--
 
-    <span v-else>{{ divisor ? Math.round(value / divisor) : value }}</span
+ --><span v-else>{{ divisor ? Math.round(value / divisor) : value }}</span
     ><!--
     --><span v-if="showUnit && !field.skipSpaceBeforeUnit">&nbsp;</span
     ><!--

diff --git a/src/components/generics/TextualArray.vue b/src/components/generics/TextualArray.vue
@@ -1,10 +1,9 @@
 <template>
-  <span v-if="array">
-    <span v-for="(item, i) of array" :key="i">
-      <span>{{ i18n ? $gettext(item, i18nContext) : item }}</span>
-      <span v-if="i != array.length - 1">, </span>
-    </span>
-  </span>
+  <span v-if="array"
+    ><span v-for="(item, i) of array" :key="i"
+      >{{ i18n ? $gettext(item, i18nContext) : item }}<span v-if="i != array.length - 1">, </span>
+    </span></span
+  >
 </template>
 
 <script>

diff --git a/src/components/generics/pretty-links/PrettyRouteLink.vue b/src/components/generics/pretty-links/PrettyRouteLink.vue
@@ -1,7 +1,6 @@
 <template>
   <document-link :document="route" class="pretty-route-link has-hover-background">
     <document-title :document="route" />
-    <span>&nbsp;</span>
     <activities
       v-if="!hideActivities"
       :activities="route.activities"

diff --git a/src/views/document/utils/DocumentViewHeader.vue b/src/views/document/utils/DocumentViewHeader.vue
@@ -33,7 +33,6 @@
           <slot name="icon-document">
             <icon-document :document-type="documentType" />
           </slot>
-          <span>&thinsp;</span>
           <document-title :document="document" uppercase-first-letter />
 
           <!-- outing specific  -->

diff --git a/src/views/document/utils/field-viewers/DoubleNumericField.vue b/src/views/document/utils/field-viewers/DoubleNumericField.vue
@@ -1,7 +1,7 @@
 <template>
   <label-value v-if="value1 && value2" :label="label">
     <span>{{ signPlus }}{{ value1 }}&nbsp;{{ field1.unit }}</span>
-    <span>&nbsp;/&nbsp;</span>
+    <span>/</span>
     <span>{{ signMinus }}{{ value2 }}&nbsp;{{ field2.unit }}</span>
   </label-value>
   <field-view v-else-if="value1" :document="document" :field="field1" />

diff --git a/src/views/document/utils/field-viewers/LabelValue.vue b/src/views/document/utils/field-viewers/LabelValue.vue
@@ -23,15 +23,16 @@ export default {
 </script>
 
 <style scoped>
-/*
-.label-value span{
-    // TODO : icon activities is bigger. vertical align, and be careful to other items
-    // vertical-align: middle;
-    // display: inline-block;
+:lang(fr) .label-value-label:after {
+  content: '\00a0:';
 }
-*/
-
-.label-value-label:after {
-  content: ' :\00a0'; /* \00a0 is nbsp */
+:lang(it) .label-value-label:after,
+:lang(de) .label-value-label:after,
+:lang(en) .label-value-label:after,
+:lang(es) .label-value-label:after,
+:lang(ca) .label-value-label:after,
+:lang(eu) .label-value-label:after,
+:lang(zh) .label-value-label:after {
+  content: ':';
 }
 </style>
diff --git a/src/views/document/utils/field-viewers/ProfilesLinks.vue b/src/views/document/utils/field-viewers/ProfilesLinks.vue
@@ -1,7 +1,6 @@
 <template>
   <span v-if="profiles.length">
     <icon-profile class="is-size-5" />
-    <span>&nbsp;</span>
     <document-link
       v-for="profile of profiles"
       :key="profile.document_id"

diff --git a/src/views/documents/DocumentsView.vue b/src/views/documents/DocumentsView.vue
@@ -36,7 +36,6 @@
               :class="listMode ? 'has-text-primary' : ''"
               :title="$gettext('List mode')"
             />
-            <span>&thinsp;</span>
             <fa-icon
               v-show="displayMode !== 'map'"
               icon="th"

diff --git a/src/views/portals/YetiView.vue b/src/views/portals/YetiView.vue
@@ -7,7 +7,6 @@
         <div class="yeti-icon is-inline-block">
           <icon-yeti />
         </div>
-        <span>&thinsp;</span>
         <span>YETI - Un outil de préparation de course</span>
       </h1>
     </div>

diff --git a/src/views/static-views/SeracView.vue b/src/views/static-views/SeracView.vue
@@ -95,7 +95,7 @@
             <h2 class="title is-2 has-text-light has-text-centered">
               {{ $gettext('xreports') | uppercaseFirstLetter }}
             </h2>
-            <div class="columns is-multiline is-variable is-mobile">
+            <div class="columns is-multiline is-mobile serac-activities">
               <topoguide-view-small-link
                 class="column topoguide-view-small-link"
                 v-for="eventActivity of $options.event_activities"
@@ -159,6 +159,12 @@ export default {
   background-color: rgba(21, 50, 69, 0.6);
 }
 
+.serac-activities {
+  max-width: 699px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .button {
   display: inline-block;
   width: 100%;