@ozdao/prometheus-framework 0.2.109 → 0.2.110

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/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) {