feat: add CarousellMe feature with profile, listings and reviews components

2025-06-19 17:45:45 +08:00
parent 1fdf10c0da
commit 360da364ff
23 changed files with 1431 additions and 3 deletions
--- a/03_source/mobile/src/pages/CarousellMe/style.scss
+++ b/03_source/mobile/src/pages/CarousellMe/style.scss
@@ -0,0 +1,118 @@
+#carousell-me-page {
+  .setting-icons {
+    ion-button::part(native) {
+      // https://ionicframework.com/docs/theming/css-shadow-parts
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  ion-content {
+    --padding-bottom: 5rem;
+  }
+
+  ion-toolbar {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    right: 0;
+
+    --background: transparent;
+    --color: white;
+  }
+
+  ion-toolbar ion-back-button,
+  ion-toolbar ion-button,
+  ion-toolbar ion-menu-button {
+    --color: white;
+  }
+
+  .about-header {
+    position: relative;
+
+    width: 100%;
+    height: 15%;
+  }
+
+  .about-header .about-image {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    opacity: 0;
+
+    transition: opacity 500ms ease-in-out;
+  }
+
+  .about-header .madison {
+    background-image: url('https://cdn.dribbble.com/users/438226/screenshots/16695232/media/145ec731468579d04291d11c4c389c65.png');
+    filter: brightness(75%);
+  }
+
+  .about-info {
+    position: absolute;
+    margin-top: -10px;
+    border-radius: 10px;
+    background: var(--ion-background-color, #fff);
+  }
+
+  .about-info h3 {
+    margin-top: 0;
+  }
+
+  .about-info ion-list {
+    padding-top: 0;
+  }
+
+  .about-info p {
+    line-height: 130%;
+
+    color: var(--ion-color-dark);
+  }
+
+  .about-info ion-icon {
+    margin-inline-end: 32px;
+  }
+
+  /*
+   * iOS Only
+   */
+
+  .ios .about-info {
+    --ion-padding: 19px;
+  }
+
+  .ios .about-info h3 {
+    font-weight: 700;
+  }
+
+  .profile-test {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    position: relative;
+    height: 50px;
+
+    ion-icon {
+      font-size: 1.5rem;
+      margin-left: 1rem;
+    }
+  }
+}
+
+#date-input-popover {
+  --offset-y: -var(--ion-safe-area-bottom);
+
+  --max-width: 90%;
+  --width: 336px;
+}