Merge pull request #330 from patudom/2-size-modals

2 size modals

radwave/src/Radwave.vue

@@ -480,8 +480,11 @@ export default defineComponent({
     }
   },
   data() {
-    const phaseOpacitySlope = -1 / 80;
-    const phaseOpacityIntercept = 1 - phaseOpacitySlope * 100;
+    const initialOpacity = 0.5;
+    const fadeStartPhase = 100;
+    const fadeEndPhase = 180;
+    const phaseOpacitySlope = -initialOpacity / (fadeEndPhase - fadeStartPhase);
+    const phaseOpacityIntercept = initialOpacity * fadeEndPhase / (fadeEndPhase - fadeStartPhase);
     const initial2DPosition = {
       raRad: 6,
       decRad: 1,
@@ -518,10 +521,13 @@ export default defineComponent({
       phaseCol: 3,
       clusterLayers: [] as SpreadSheetLayer[],
 
+      initialOpacity,
+      fadeStartPhase,
+      fadeEndPhase,
       phaseOpacitySlope,
       phaseOpacityIntercept,
       clusterColor: "#1f3cf1",
-      defaultClusterDecay: 15,
+      defaultClusterDecay: 5,
 
       sunColor: "#ffff0a",
       sunLayer: null as SpreadSheetLayer | null,
@@ -906,10 +912,7 @@ export default defineComponent({
 
     opacityForPhase(phase: number): number {
       const adjustedPhase = 180 - Math.abs(180 - phase);
-      if (adjustedPhase <= 100) {
-        return 1;
-      }
-      return Math.min(Math.max(this.phaseOpacitySlope * adjustedPhase + this.phaseOpacityIntercept, 0), 1);
+      return Math.min(Math.max(this.phaseOpacitySlope * adjustedPhase + this.phaseOpacityIntercept, 0), this.initialOpacity);
     },
 
     setupClusterLayers(): Promise<SpreadSheetLayer[]> {
@@ -928,6 +931,7 @@ export default defineComponent({
             layer.set_opacity(this.opacityForPhase(phase));
             layer.set_color(color);
             layer.set_scaleFactor(70);
+            //console.log(layer);
             return layer;
           });
         });
@@ -1067,7 +1071,16 @@ export default defineComponent({
 }
 
 #modal-loading {
-  background-image: url("./assets/radwave_landing.png");
+
+
+  @media (max-width: 699px) {
+    background-image: url("./assets/radwave_landing_mobile.png");
+  }
+
+  @media (min-width: 700px) {
+    background-image: url("./assets/radwave_landing_desktop.png");
+  }
+
   background-position: center;
   background-size: 100%;
   background-repeat: no-repeat;