Mercurial > gemma

changeset 2871:2cdf43c84a8c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: aligned width of searchbar and content box
author Markus Kottlaender <markus@intevation.de>
date Fri, 29 Mar 2019 14:23:06 +0100
parents 35f6e4383161
children bfea3f80ca9a
files client/src/components/Bottlenecks.vue client/src/components/Search.vue
diffstat 2 files changed, 30 insertions(+), 14 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Bottlenecks.vue	Fri Mar 29 13:37:17 2019 +0100
+++ b/client/src/components/Bottlenecks.vue	Fri Mar 29 14:23:06 2019 +0100
@@ -7,13 +7,18 @@
     />
     <UITableHeader
       :columns="[
-        { id: 'properties.name', title: `${nameLabel}`, class: 'col-4' },
+        { id: 'properties.name', title: `${nameLabel}`, width: '200px' },
+        {
+          id: 'properties.responsible_country',
+          title: `${countryLabel}`,
+          width: '80px'
+        },
         {
           id: 'properties.current',
           title: `${latestmeasurementLabel}`,
-          class: 'col-3'
+          width: '150px'
         },
-        { id: 'properties.from', title: `${chainageLabel}`, class: 'col-3' }
+        { id: 'properties.from', title: `${chainageLabel}`, width: '150px' }
       ]"
     />
     <UITableBody
@@ -22,15 +27,18 @@
       :active="openBottleneck"
       v-slot="{ item: bottleneck }"
     >
-      <div class="col-4 py-2 text-left">
+      <div class="table-cell truncate text-left" style="width: 200px">
         <a href="#" @click="selectBottleneck(bottleneck)">{{
           bottleneck.properties.name
         }}</a>
       </div>
-      <div class="col-3 py-2">
+      <div class="table-cell text-center" style="width: 80px">
+        {{ bottleneck.properties.responsible_country }}
+      </div>
+      <div class="table-cell" style="width: 150px">
         {{ bottleneck.properties.current | surveyDate }}
       </div>
-      <div class="col-3 py-2">
+      <div class="table-cell" style="width: 150px">
         {{
           displayCurrentChainage(
             bottleneck.properties.from,
@@ -38,7 +46,10 @@
           )
         }}
       </div>
-      <div class="col-2 py-2 pr-0 text-right d-flex flex-column">
+      <div
+        class="table-cell pr-0 text-right d-flex flex-column"
+        style="width: 30px"
+      >
         <a
           class="text-info mt-auto mb-auto mr-2"
           @click="loadSurveys(bottleneck)"
@@ -66,11 +77,8 @@
         </a>
       </div>
       <div
-        :class="[
-          'col-12 p-0',
-          'surveys',
-          { open: openBottleneck === bottleneck }
-        ]"
+        :class="['p-0', 'surveys', { open: openBottleneck === bottleneck }]"
+        style="width: 100%"
       >
         <a
           href="#"
@@ -99,6 +107,11 @@
           color: #fff !important
       .surveys
         border-bottom: solid 1px $color-info
+    .table-cell
+      padding: 0 3px
+      border-right: solid 1px #dee2e6
+      &:last-child
+        border-right: none
     .surveys
       overflow: hidden
       max-height: 0
@@ -147,6 +160,9 @@
     bottlenecksLabel() {
       return this.$gettext("Bottlenecks");
     },
+    countryLabel() {
+      return this.$gettext("Country");
+    },
     nameLabel() {
       return this.$gettext("Name");
     },
--- a/client/src/components/Search.vue	Fri Mar 29 13:37:17 2019 +0100
+++ b/client/src/components/Search.vue	Fri Mar 29 14:23:06 2019 +0100
@@ -74,7 +74,7 @@
 <style lang="scss" scoped>
 .searchcontainer {
   opacity: 0.96;
-  width: 663px;
+  width: 660px;
 }
 
 .searchcontainer .searchbar {
@@ -83,7 +83,7 @@
 }
 
 .searchgroup {
-  width: 631px;
+  width: 628px;
   overflow: hidden;
 }