refactor(windy-plugin): cleanup styles

.prettierignore

@@ -7,6 +7,7 @@
 
 /apps/fxc-front/public
 /apps/fxc-tiles/src/assets/airspaces
+/libs/windy-sounding/types
 /.nx/cache
 /.nx/workspace-data
 

libs/windy-sounding/.prettierignore

@@ -0,0 +1,2 @@
+dist/
+types/

libs/windy-sounding/package.json

@@ -26,8 +26,8 @@
     "clean": "rm -rf dist",
     "lint": "eslint . --max-warnings=0",
     "lint:fix": "eslint . --fix",
-    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
-    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,scss,less,md}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,scss,less,md}\"",
     "manifest": "node generate-manifest.js dist",
     "preview": "pnpm build:dev --watch & pnpm build:prod --watch & vite preview",
     "upload:prepare": "rm -rf dist && pnpm build:prod && pnpm build:dev && pnpm build:config && pnpm manifest",

libs/windy-sounding/src/style/desktop.less

@@ -0,0 +1,101 @@
+// Desktop-Specific Styles
+
+// Windy container overrides for desktop.
+#device-desktop #plugin-windy-plugin-fxc-soundings .plugin__content {
+  padding: 25px !important;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+// Plugin title bar in desktop header.
+#wsp-title {
+  #wsp-icon {
+    position: relative;
+    top: -3px;
+    margin-right: 0.3em;
+    vertical-align: middle;
+  }
+
+  #wsp-dev {
+    position: absolute;
+    bottom: -3px;
+    left: 35px;
+  }
+
+  #wsp-version {
+    margin-left: 0.5em;
+  }
+}
+
+#wsp-sounding {
+  // Desktop grid layout for diagram, favorite shortcuts, and sponsor banner.
+  #device-desktop & {
+    display: grid;
+    justify-items: stretch;
+    grid-template-rows: auto 1fr auto;
+  }
+
+  // Weather model selector & metadata (desktop only).
+  #wsp-model {
+    padding: 0 0 1em;
+
+    dl {
+      display: grid;
+      grid-gap: 4px 16px;
+      grid-template-columns: max-content;
+      align-items: center;
+    }
+
+    dt {
+      font-style: italic;
+    }
+
+    dd {
+      font-weight: 500;
+      grid-column-start: 2;
+    }
+
+    select {
+      background: inherit;
+      color: inherit;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: 2em;
+      padding: 2px 4px;
+      font-size: inherit;
+      font-family: inherit;
+      font-weight: 500;
+      cursor: pointer;
+
+      option {
+        background: #333;
+        color: #fff;
+      }
+    }
+  }
+
+  // Favorite location shortcut buttons (desktop only).
+  #wsp-flyto {
+    padding-top: 0.5em;
+
+    .button {
+      line-height: 1em;
+      padding: 0.3em 0.6em;
+      margin: 0.1em 0.2em;
+
+      &:hover {
+        background-color: var(--color-gray);
+      }
+
+      &.selected {
+        background-color: var(--color-orange);
+      }
+    }
+  }
+
+  // Sponsor banner (desktop only).
+  #wsp-sponsor {
+    padding: 0.5em;
+    text-align: center;
+    background-color: var(--color-gray-dark);
+  }
+}

libs/windy-sounding/src/style/mobile.less

@@ -0,0 +1,103 @@
+// Mobile-Specific Styles
+
+// Windy container overrides for mobile.
+#device-mobile #plugin-windy-plugin-fxc-soundings .plugin__content {
+  pointer-events: initial;
+}
+
+#plugin-windy-plugin-fxc-soundings {
+  // Mobile bottom sheet container.
+  &.plugin-mobile-bottom-small {
+    padding: 0;
+    max-height: fit-content !important;
+
+    .desktop-only {
+      display: none;
+    }
+
+    .plugin__content {
+      position: initial;
+    }
+  }
+}
+
+#wsp-sounding {
+  // Drag handle for resizing the mobile sounding diagram.
+  #wsp-resize {
+    cursor: move;
+
+    rect {
+      fill: lightgray;
+      stroke: black;
+      stroke-width: 0.3px;
+    }
+
+    line {
+      stroke: darkgrey;
+      stroke-width: 2px;
+    }
+  }
+
+  // Mobile bottom bar selector (model & favorite location).
+  #wsp-favorite {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    padding: 10px 0;
+    margin: 0;
+    background-color: var(--color-red);
+
+    & > div {
+      cursor: pointer;
+    }
+
+    .select {
+      width: 100%;
+      text-align: center;
+      white-space: nowrap;
+
+      &:before,
+      &:after {
+        display: inline-block;
+        position: relative;
+        top: -2px;
+      }
+
+      &:after {
+        transform-origin: center center;
+        transition: transform 0.3s;
+        transform: rotate(-90deg);
+      }
+
+      &.active::after {
+        transform: rotate(0);
+      }
+
+      small {
+        padding: 0 5px;
+        display: inline-block;
+        max-width: 120px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+  }
+
+  // Dropdown list options for model / favorites (mobile only).
+  .options {
+    padding: 5px;
+    width: 100%;
+    background-color: var(--color-red);
+    text-align: center;
+
+    & > span {
+      display: inline-block;
+      border-radius: 1em;
+      padding: 2px 5px;
+      margin: 0 5px;
+
+      &.selected {
+        background-color: var(--color-red-light);
+      }
+    }
+  }
+}