@ozdao/prometheus-framework 0.2.109 → 0.2.111

package/src/modules/landing/components/elements/AnimatedGrid.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="grid">
+    <div class="grid-lines"></div>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+  .grid {
+    perspective: 450px;
+    background-size: cover;
+  }
+
+  .grid-lines {
+    width: 100%;
+    height: 200%;
+    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 0), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 0);
+    background-size: 45px 30px;
+    background-repeat: repeat;
+    transform-origin: 100% 0 0;
+    animation: play 15s linear infinite;
+  }
+
+  @keyframes play {
+    0% {
+      transform: rotateX(45deg) translateY(-50%);
+    }
+    100% {
+      transform: rotateX(45deg) translateY(0);
+    }
+  }
+</style>

package/src/modules/landing/components/elements/FloatingImages.vue

@@ -77,6 +77,7 @@ const createFloatingImages = () => {
     
     imgElement.src = imageSrc;
     imgElement.classList.add('floating-image');
+
     if (props.config.class) {
       imgElement.classList.add(props.config.class);
     }
@@ -108,13 +109,13 @@ const createFloatingImages = () => {
     imgElement.style.animation = `floatUp linear infinite`;
     imgElement.style.animationDuration = `${Math.random() * (props.config.maxDuration - props.config.minDuration) + props.config.minDuration}s`;
 
-    document.querySelector(props.container).appendChild(imgElement);
+    if (props.container) document.querySelector(props.container).appendChild(imgElement);
 
     imgElement.addEventListener("animationiteration", () => {
       const newSpawnPoint = props.config.spawnPoints[Math.floor(Math.random() * props.config.spawnPoints.length)];
       const newDeviation = (Math.random() - 0.5) * 2 * 10;
-      imgElement.style.left = `${newSpawnPoint + newDeviation}%`;
-    });
+        imgElement.style.left = `${newSpawnPoint + newDeviation}%`;
+      });
   });
 };
 

package/src/modules/landing/components/pages/Home.vue

@@ -10,6 +10,7 @@
 		<MobileApp/>
 		<JoinUs/>
 		<SubscribeNewsletter/>
+		<FeaturedUsers/>
 		<div class="pd-thin">
 			<SectionGuide/>
 		</div>
@@ -21,18 +22,20 @@
 
 <script setup="props">
 	// Need to refactor
-	import SectionsSection 		from '@pf/src/modules/landing/components/sections/SectionsSection.vue'
+	import SectionsSection from '@pf/src/modules/landing/components/sections/SectionsSection.vue'
 	// Module landing
-	import SectionFeatures			from '@pf/src/modules/landing/components/sections/SectionFeatures.vue'
-	import MobileApp 		from '@pf/src/modules/landing/components/sections/MobileApp.vue'
-	import SectionGuide 		from '@pf/src/modules/landing/components/sections/SectionGuide.vue'
-	import SectionEarn 		from '@pf/src/modules/landing/components/sections/SectionEarn.vue'
+	import SectionFeatures from '@pf/src/modules/landing/components/sections/SectionFeatures.vue'
+	import MobileApp from '@pf/src/modules/landing/components/sections/MobileApp.vue'
+	import SectionGuide from '@pf/src/modules/landing/components/sections/SectionGuide.vue'
+	import SectionEarn from '@pf/src/modules/landing/components/sections/SectionEarn.vue'
 	// Module community
-	import HotPosts 		from '@pf/src/modules/community/components/sections/HotPosts.vue'
+	import HotPosts from '@pf/src/modules/community/components/sections/HotPosts.vue'
 	// Module Products
-	import MenuSection 			from '@pf/src/modules/products/components/sections/MenuSection.vue'
-	import PopularProducts 	from '@pf/src/modules/products/components/sections/PopularProducts.vue'
-	import HeroRecommendation 			from '@pf/src/modules/products/components/sections/HeroRecommendation.vue'
+	import MenuSection from '@pf/src/modules/products/components/sections/MenuSection.vue'
+	import PopularProducts from '@pf/src/modules/products/components/sections/PopularProducts.vue'
+	import HeroRecommendation from '@pf/src/modules/products/components/sections/HeroRecommendation.vue'
+	// Module users
+	import FeaturedUsers from '@pf/src/modules/users/components/sections/FeaturedUsers.vue' 
 	// Not working
 	import JoinUs 		from '@pf/src/modules/community/components/sections/JoinUs.vue'
 	import SubscribeNewsletter 		from '@pf/src/modules/orders/components/sections/SubscribeNewsletter.vue'

package/src/modules/landing/components/sections/HeroSection.vue

@@ -32,43 +32,45 @@
 
 <template>
 	<div 
-	id="hero" 
-	class="t-center cols-1 flex-center flex section"
+		id="hero" 
+		class="t-center cols-1 flex-center flex"
 	>
 
 		<div 
-		class="flex-column flex-center flex pd-big radius-medium col"
+			class="flex-column flex-center flex pd-big radius-medium"
 		>
 			<h1 
-			class="mn-b-medium" 
-			v-html="t('HERO.TITLE')"
+				class="mn-b-medium" 
+				v-html="t('HERO.TITLE')"
 			/>
 
 			<p 
-			class="w-m-60r mn-b-big t-transp p-big" 
-			v-html="t('HERO.DESCRIPTION')"
-			></p>
+				class="w-m-60r mn-b-big t-transp p-big" 
+				v-html="t('HERO.DESCRIPTION')"
+			/>
 
 			<div 
-			class="mobile-w-100 t-white gap-small cols-2"
+				class="mobile-w-100 t-white gap-small cols-2"
 			>
 				<button  
-				@click="router.push('/catalog')" 
-				class="w-100 bg-dark t-white button">
+					@click="router.push('/catalog')" 
+					class="w-100 bg-dark t-white button"
+				>
 					{{t('HERO.ACTION')}}
 				</button>
 
 				<button 
-				@click="store.commit('toggleBackCall')"
-				class="w-100 bg-light t-dark br-light button">
+					@click="store.commit('toggleBackCall')"
+					class="w-100 bg-light t-dark br-light button"
+				>
 					{{t('HERO.SUBACTION')}}
 				</button>
 			</div>
 
 		</div>
-
 	</div>
 </template>
 
 <style lang="scss" scoped>
+
 </style>

package/src/modules/landing/components/sections/MobileApp.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="mobileApp" class="pd-thin">
+  <div id="mobileApp">
     <section class="pos-relative cols-2 pd-thin o-hidden bg-black t-white radius-extra">
       <div class="z-index-1 h-100">
         <img 
@@ -119,40 +119,15 @@ const { t, te } = useI18n(props.textData)
 </script>
 
 <style lang="scss">
-
-.grid {
-  perspective: 450px;
-  background-size: cover;
-}
-
-.grid-lines {
-  width: 100%;
-  height: 200%;
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 0), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 0);
-  background-size: 45px 30px;
-  background-repeat: repeat;
-  transform-origin: 100% 0 0;
-  animation: play 15s linear infinite;
-}
-
-@keyframes play {
-  0% {
-    transform: rotateX(45deg) translateY(-50%);
-  }
-  100% {
-    transform: rotateX(45deg) translateY(0);
-  }
-}
-
  @media screen and (max-width: 1025px) {
-    #mobileApp {
-      text-align: center;
-      > section {
-        flex-direction: column;
-        > div {
-          order: 1;
-        }
+  #mobileApp {
+    text-align: center;
+    > section {
+      flex-direction: column;
+      > div {
+        order: 1;
       }
     }
   }
+}
 </style>

package/src/modules/landing/components/sections/SectionHeroToken.vue

@@ -2,6 +2,8 @@
 	import { useRouter } from 'vue-router'
 	import { useI18n } from 'vue-i18n'
 
+	import AnimatedGrid from '@pf/src/modules/landing/components/elements/AnimatedGrid.vue'
+
 	const props = defineProps({
 	  textData: {
 	    type: Object,
@@ -61,9 +63,7 @@
 			/>
 		</div>
 
-		<div class="w-100 h-100 pos-absolute pos-t-0 pos-r-0 z-index-0 grid ">
-			<div class="grid-lines"></div>
-		</div>
+		<AnimatedGrid class="w-100 h-100 pos-absolute pos-t-0 pos-r-0 z-index-0" />
 
 	</div>
 </template>
@@ -92,47 +92,20 @@
 		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
 	}
 
-/* animation */
-
-@keyframes slide {
-	0% {	
-		transform:translateX(-00%); 
-		opacity: 0;
-	}
-	20% {
-		opacity: 1
-	}
-	80% {
-		opacity: 1
-	}
-	100% {
-		transform:translateX(100%); 
-			opacity: 0
+	@keyframes slide {
+		0% {	
+			transform:translateX(-00%); 
+			opacity: 0;
+		}
+		20% {
+			opacity: 1
+		}
+		80% {
+			opacity: 1
+		}
+		100% {
+			transform:translateX(100%); 
+				opacity: 0
+		}
 	}
-}
-	
-
-.grid {
-  perspective: 450px;
-  background-size: cover;
-}
-
-.grid-lines {
-  width: 100%;
-  height: 200%;
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 0), linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 0);
-  background-size: 45px 30px;
-  background-repeat: repeat;
-  transform-origin: 100% 0 0;
-  animation: play 15s linear infinite;
-}
-
-@keyframes play {
-  0% {
-    transform: rotateX(45deg) translateY(-50%);
-  }
-  100% {
-    transform: rotateX(45deg) translateY(0);
-  }
-}
 </style>

package/src/modules/landing/landing.client.js

@@ -3,9 +3,11 @@ import MobileApp from './components/sections/MobileApp.vue';
 import SectionFeatures from './components/sections/SectionFeatures.vue';
 
 import FloatingImages from './components/elements/FloatingImages.vue';
+import AnimatedGrid from './components/elements/AnimatedGrid.vue';
 
 export {
   MobileApp,
+  SectionFeatures,
   FloatingImages,
-  SectionFeatures
+  AnimatedGrid
 };

package/src/modules/users/components/sections/FeaturedUsers.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="pd-extra o-hidden w-100">
+    <div class="content">
+      <span class="h2 mn-b-big">
+        Ask over 5 million people who have trusted us for decades
+      </span>
+    </div>
+    <div class="gap-thin flex flex-nowrap">
+      <CardUser 
+        v-for="user in usersList" 
+        class="selector flex-child bg-grey pd-small radius-small"
+        :user="user" 
+        :photo="user.profile.photo"
+        :name="user.profile.name || user.phone || user.username"
+        :phone="'DJ'" 
+      /> 
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+import * as users from '@pf/src/modules/users/store/users'
+
+import CardUser from '@pf/src/modules/users/components/blocks/CardUser.vue'
+
+const usersList = ref([])
+
+onMounted(async() => {
+  usersList.value = await users.actions.read({
+  })
+});
+</script>
+
+<style lang="scss">
+  .selector {
+    flex-grow: 1;
+    flex-basis: 0;
+    min-width: 0;
+  }
+</style>

package/src/styles/base/all.scss

@@ -191,6 +191,8 @@ body {
     &-items-baseline 	{ align-items: baseline; } 
 	}
 
+	.d-inline-flex 				{display: inline-flex; }	
+
 	.align-self-start {
 		align-self: start;
 	}

package/src/styles/config.scss

@@ -32,34 +32,58 @@
     }
 }
 
-
-@mixin generate-utility-classes($class-name, $css-property, $modifiers, $values) {
+@mixin generate-utility-classes($class-name, $css-property, $modifiers, $values, $breakpoints: null) {
+  // Генерация базовых классов без модификаторов и медиа-запросов
   @each $value-key, $value in $values {
-    // Генерация классов без модификаторов
     .#{$class-name}-#{$value-key} {
       #{$css-property}: $value;
     }
-    // Генерация отрицательных классов без модификаторов
     .#{$class-name}-#{$value-key}-negative {
-		  #{$css-property}: -$value;
-		}
-
-    // Генерация классов с модификаторами
+      #{$css-property}: -$value;
+    }
+    
     @if $modifiers {
       @each $modifier, $css-modifier in $modifiers {
         .#{$class-name}-#{$modifier}-#{$value-key} {
           #{$css-property}-#{$css-modifier}: $value;
         }
-        // Генерация отрицательных классов с модификаторами
         .#{$class-name}-#{$modifier}-#{$value-key}-negative {
           #{$css-property}-#{$css-modifier}: calc(#{$value} * -1);
         }
       }
     }
   }
+
+  // Генерация классов с медиа-запросами
+  @if $breakpoints {
+    @each $breakpoint-key, $breakpoint-query in $breakpoints {
+      @media #{$breakpoint-query} {
+        @each $value-key, $value in $values {
+          .#{$breakpoint-key}\:#{$class-name}-#{$value-key} {
+            #{$css-property}: $value;
+          }
+          .#{$breakpoint-key}\:#{$class-name}-#{$value-key}-negative {
+            #{$css-property}: calc(#{$value} * -1);
+          }
+
+          @if $modifiers {
+            @each $modifier, $css-modifier in $modifiers {
+              .#{$breakpoint-key}\:#{$class-name}-#{$modifier}-#{$value-key} {
+                #{$css-property}-#{$css-modifier}: $value;
+              }
+              .#{$breakpoint-key}\:#{$class-name}-#{$modifier}-#{$value-key}-negative {
+                #{$css-property}-#{$css-modifier}: calc(#{$value} * -1);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 
+
 :root {
 	// THEME
 	color-scheme: light dark;
@@ -202,6 +226,13 @@ $percent: (
   '0': 0%,
 );
 
+$breakpoints: (
+  'mobile': "(max-width: 640px)",
+  'tablet': "(min-width: 641px) and (max-width: 1024px)",
+  'desktop': "(min-width: 1025px) and (max-width: 1440px)",
+  'widescreen': "(min-width: 1441px)"
+);
+
 $base: (
   'auto': auto,
   'zero': 0,
@@ -213,29 +244,29 @@ $combined: map-merge($combined, $variables);
 $combined: map-merge($combined, $base);
 
 body {
-	@include generate-utility-classes('pd',	'padding', 		$modifiers, $combined);
-	@include generate-utility-classes('mn', 'margin', 		$modifiers, $combined);
+	@include generate-utility-classes('pd',	'padding', $modifiers, $combined, $breakpoints);
+	@include generate-utility-classes('mn', 'margin', $modifiers, $combined, $breakpoints);
 
-	@include generate-utility-classes('w', 	'width', 			null, $combined);
-	@include generate-utility-classes('h', 	'height', 		null, $combined);
+	@include generate-utility-classes('w', 'width', null, $combined, $breakpoints);
+	@include generate-utility-classes('h', 'height', null, $combined, $breakpoints);
 
-	@include generate-utility-classes('pos-t', 'top', 		null, $combined);
-	@include generate-utility-classes('pos-r', 'right', 	null, $combined);
-	@include generate-utility-classes('pos-b', 'bottom',	null, $combined);
-	@include generate-utility-classes('pos-l', 'left', 		null, $combined);
+	@include generate-utility-classes('pos-t', 'top', null, $combined, $breakpoints);
+	@include generate-utility-classes('pos-r', 'right', null, $combined, $breakpoints);
+	@include generate-utility-classes('pos-b', 'bottom', null, $combined, $breakpoints);
+	@include generate-utility-classes('pos-l', 'left', null, $combined, $breakpoints);
 
-	@include generate-utility-classes('h-max', 'max-height',	null, $combined);
-	@include generate-utility-classes('h-min', 'min-height',	null, $combined);
+	@include generate-utility-classes('h-max', 'max-height', null, $combined, $breakpoints);
+	@include generate-utility-classes('h-min', 'min-height', null, $combined, $breakpoints);
 
-	@include generate-utility-classes('w-max', 'max-width',	null, $combined);
-	@include generate-utility-classes('w-min', 'min-width',	null, $combined);
+	@include generate-utility-classes('w-max', 'max-width',	null, $combined, $breakpoints);
+	@include generate-utility-classes('w-min', 'min-width',	null, $combined, $breakpoints);
 
-	@include generate-utility-classes('radius', 'border-radius',	null, $combined);
+	@include generate-utility-classes('radius', 'border-radius', null, $combined, $breakpoints);
 
-	@include generate-utility-classes('radius-tl', 'border-top-left-radius',	null, $combined);
-	@include generate-utility-classes('radius-br', 'border-bottom-right-radius',	null, $combined);
-	@include generate-utility-classes('radius-tr', 'border-top-right-radius',	null, $combined);
-	@include generate-utility-classes('radius-bl', 'border-bottom-left-radius',	null, $combined);
+	@include generate-utility-classes('radius-tl', 'border-top-left-radius', null, $combined, $breakpoints);
+	@include generate-utility-classes('radius-tr', 'border-top-right-radius', null, $combined, $breakpoints);
+	@include generate-utility-classes('radius-br', 'border-bottom-right-radius', null, $combined, $breakpoints);
+	@include generate-utility-classes('radius-bl', 'border-bottom-left-radius', null, $combined, $breakpoints);
 	
 	@include generate-bg-classes('bg-main', 	'main');
 	@include generate-bg-classes('bg-second',	'second');

package/src/styles/responsive.scss

@@ -1,15 +1,21 @@
 $super-ultra-tiny-flip-phone-max:   240px;
+
 $flip-phone-max:                    320px;
 $phone-portrait-max:                321px;
 $phone-landscape-max:               640px;
+
 $tablet-portrait-min:               641px;
 $tablet-portrait-max:               768px;
+
 $tablet-landscape-min:              769px;
 $tablet-landscape-max:              1024px;
+
 $desktop-min:                       1025px;
 $desktop-max:                       1440px;
+
 $xl-desktop-min:                    1441px;
 $xl-desktop-max:                    1920px;
+
 $xxl-desktop-min:                   1921px;
 
 @media screen and (min-width:  $xxl-desktop-min) {