From b726048cf6afcf86e52afd3efc70c5e41e0a7d78 Mon Sep 17 00:00:00 2001 From: Junwei Zhao Date: Wed, 18 Sep 2024 23:00:40 +1000 Subject: [PATCH] Update style --- have-been-to/countries.db | Bin 20480 -> 20480 bytes have-been-to/static/js/globe.js | 25 +++++++++++- have-been-to/templates/index.html | 63 ++++++++++++++++++++---------- 3 files changed, 66 insertions(+), 22 deletions(-) diff --git a/have-been-to/countries.db b/have-been-to/countries.db index 760f7e38e408b1cd20c3663fe2b586a174a9ed29..39a65500f700405bba0e31b63d22ff59550f0bc3 100644 GIT binary patch delta 152 zcmZozz}T>Wae_3X?nD`9M%|4GOZY`N_!ltnKjZ((zmIL@N76bov{#pD>HghTT@QZLVi!*|iae-K1b)1ve x=|`}Wae_3X+C&*=MzxIzOZWxY_%|`|KjZ((zmIGS zzm9?b`er_b9{!0FBqp!Zk6?KQRJvKv;Wob{g9Hb&wq! { controls.zoomOut(); }); + + // Update renderer size + updateRendererSize(); + + // Add event listener for sidebar toggle + document.querySelector('button[x-on\\:click]').addEventListener('click', updateRendererSize); + + // Add event listener for window resize + window.addEventListener('resize', updateRendererSize); } function onWindowResize() { @@ -236,13 +245,14 @@ function updateCountryList() { ul.innerHTML = ''; countries.forEach(country => { const li = document.createElement('li'); - li.className = 'flex justify-between items-center bg-gray-100 p-2 rounded'; + li.className = 'flex justify-between items-center bg-gray-800 p-2 rounded'; const span = document.createElement('span'); span.textContent = country; + span.className = 'text-gray-200'; li.appendChild(span); const removeButton = document.createElement('button'); removeButton.textContent = '删除'; - removeButton.className = 'bg-red-500 text-white px-2 py-1 rounded text-sm hover:bg-red-600 transition duration-200'; + removeButton.className = 'bg-red-600 text-white px-2 py-1 rounded text-sm hover:bg-red-700 transition duration-200'; removeButton.onclick = () => removeCountry(country); li.appendChild(removeButton); ul.appendChild(li); @@ -395,3 +405,14 @@ function exportMap() { link.click(); document.body.removeChild(link); } + +function updateRendererSize() { + const mapContainer = document.getElementById('map'); + const width = mapContainer.clientWidth; + const height = mapContainer.clientHeight; + + camera.aspect = width / height; + camera.updateProjectionMatrix(); + + renderer.setSize(width, height); +} diff --git a/have-been-to/templates/index.html b/have-been-to/templates/index.html index d7e25ce..1a3b42a 100644 --- a/have-been-to/templates/index.html +++ b/have-been-to/templates/index.html @@ -5,6 +5,7 @@ 我去过的国家 + - +
-
-

国家列表

-
    -
    - - + +
    + + + +
    +

    国家列表

    +
      +
      + + +
      + +

      +
      +

      高亮颜色

      +
      +
      +
      - -

      -
      -

      高亮颜色

      -
      -
      -
      -
      - -
      - - + + +
      +
      + +
      + +
      +