fix: open status dot and card distance display

7e69ff3a · Hugo SUBTIL · 9ae3c1bb · 7e69ff3a · 7e69ff3a · 7e69ff3a
Commit 7e69ff3a authored 4 years ago by Hugo SUBTIL
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -66,19 +66,4 @@
    align-items: center;
    display: flex;
  }
-  // Find somthing better than redeclare class. Mixins ?
-  .ico-dot-available {
-    height: 12px;
-    width: 12px;
-    background-color: $green;
-    border-radius: 50%;
-    margin-right: 8px;
-  }
-  .ico-dot-unavailable {
-    height: 12px;
-    width: 12px;
-    background-color: $grey;
-    border-radius: 50%;
-    margin-right: 8px;
-  }
 }
--- a/src/app/models/structure.model.ts
+++ b/src/app/models/structure.model.ts
@@ -66,24 +66,24 @@ export class Structure {
    } else if (this.openedOn.day) {
      return 'Fermé - Ouvre ' + this.openedOn.day + ' à ' + this.openedOn.schedule;
    } else {
-      return 'Fermé - Aucun horaire disponible ';
+      return 'Aucun horaire disponible ';
    }
  }

  /**
   * Return a range, according to the distance, between [1,3] to get a distance reference.
-   * - [0,500m] => 1
-   * - [500m,1km] => 2
-   * - [1km, [ => 3
+   * - [0,5km] => 1
+   * - [5km,10km] => 2
+   * - [10km, [ => 3
   */
  public getDistanceRange(): number {
    if (!this.distance) {
      return 3;
    } else {
      // If it's in km
-      if (this.distance.length > 3) {
+      if (parseInt(this.distance, 10) > 10000) {
        return 3;
-      } else if (parseInt(this.distance, 10) < 500) {
+      } else if (parseInt(this.distance, 10) < 5000) {
        // If it's between 0 and 500 m
        return 1;
      } else {

--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -47,7 +47,10 @@
      <span>{{ structure.openDisplay() }}</span>
    </div>
    <ng-template #closed>
-      <span class="ico-dot-unavailable"></span>
+      <span *ngIf="structure.openedOn.day; else unkown" class="ico-dot-unavailable"></span>
+    </ng-template>
+    <ng-template #unkown>
+      <span class="ico-dot-unknown"></span>
    </ng-template>
  </div>
 </div>
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -27,5 +27,6 @@
  span {
    @include cn-regular-14;
    margin-right: 8px;
+    display: inline-block;
  }
 }
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -55,21 +55,21 @@
  width: 12px;
  background-color: $green;
  border-radius: 50%;
-  display: inline-block;
+  margin-right: 8px;
 }
 .ico-dot-unavailable {
  height: 12px;
  width: 12px;
  background-color: $red;
  border-radius: 50%;
-  display: inline-block;
+  margin-right: 8px;
 }
 .ico-dot-unknown {
  height: 12px;
  width: 12px;
  background-color: $grey-4;
  border-radius: 50%;
-  display: inline-block;
+  margin-right: 8px;
 }

 .ico-marker-pin {

--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
 $text-font: 'Trebuchet MS', 'Helvetica', sans-serif;
 $footer-text-font: 'Arial', 'Helvetica', sans-serif;
-$title-font: 'Courier New', 'Helvetica', sans-serif;
+$title-font: 'Trebuchet MS', 'Helvetica', sans-serif;

 $font-size-xsmall: 0.875em; // 14px
 $font-size-small: 1em; // 16px

--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <title>Pamn</title>
+    <title>Ram</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />