@eturnity/eturnity_reusable_components 6.46.5-EPDM-7690-9162.1 → 6.46.5-EPDM-9185.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.46.5-EPDM-7690-9162.1",
+  "version": "6.46.5-EPDM-9185.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/projectMarker/index.vue

@@ -2,6 +2,7 @@
   <page-container>
     <marker-container
       v-if="markerData"
+      :withDate="!!date"
       :backgroundColor="markerData.color"
       :hasIcon="!!iconName"
       :isEditionAllowed="editionAllowed"
@@ -19,12 +20,7 @@
         size="10px"
         :cursor="cursor"
       />
-      <span>
-        {{ markerData.translations[activeLanguage].name }}
-        <span v-if="!!date">
-          | {{ date }}
-        </span>
-      </span>
+      <span>{{ markerData.translations[activeLanguage].name }}</span>
       <dot-wrapper
         v-if="editionAllowed"
         class="dotContainer"
@@ -52,6 +48,9 @@
         </edit-item>
       </edit-container>
     </marker-container>
+    <date v-if="!!date">
+      {{ date }}
+    </date>
     <modal
       :isOpen="deleteModalOpened"
       @on-close="closeDeleteModal"
@@ -101,7 +100,6 @@ import MainButton from '../buttons/mainButton'
 const PageContainer = styled.div`
   display: flex;
   align-items: center;
-  gap: 10px;
   font-size: 12px;
   line-height: 14px;
 `
@@ -119,6 +117,7 @@ const CtaContainer = styled.div`
 
 const MarkerAttrs = {
   backgroundColor: String,
+  withDate: Boolean,
   hasIcon: Boolean,
   isEditionAllowed: Boolean,
   isActive: Boolean,
@@ -135,7 +134,8 @@ const MarkerContainer = styled('div', MarkerAttrs)`
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
   props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border-radius: 4px;
+  border: 1px solid ${(props) => props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border-radius: ${(props) => props.withDate ? '4px 0 0 4px' : '4px'};
   white-space: nowrap;
   cursor: ${(props) => props.isEditionAllowed ? 'pointer' : props.cursor};
 
@@ -193,6 +193,13 @@ const IconContainer = styled.div`
   line-height: 0;
 `
 
+const Date = styled.div`
+  padding: 2px 5px;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+`
+
 export default {
   name: "project-marker",
   components: {
@@ -210,7 +217,8 @@ export default {
     CtaContainer,
     PageTitle,
     PageSubtitle,
-    MainButton
+    MainButton,
+    Date
   },
   props: {
     markerData: {

package/src/components/threeDots/index.vue

@@ -331,7 +331,7 @@ export default {
     },
     findRelativeParent(element) {
       while (element.parentElement) {
-        if (window.getComputedStyle(element.parentElement).position === 'relative' || window.getComputedStyle(element.parentElement).position === 'absolute') {
+        if (window.getComputedStyle(element.parentElement).position === 'relative') {
           return element.parentElement
         }
         element = element.parentElement