wip

krasch · Dec 19, 2024 · ce9a46c · ce9a46c
1 parent 8a6d4d1
commit ce9a46c
Show file tree

Hide file tree

Showing 6 changed files with 225 additions and 129 deletions.
diff --git a/index.html b/index.html
@@ -106,14 +106,17 @@
 </template>
 
 <template id="template-city-menu">
-    <div class="city-menu card">
-        <div class="title"></div>
-        <div class="row menu-entry">
-            <!-- id, name and for will be made unique when instantiating the template -->
+    <menu class="city-menu">
+        <li class="title"></li>
+        <li><em>Mit x Umstiegen erreichbar</em></li>
+        <li><button>Reiserouten anzeigen</button></li>
+        <li><button>Aufenthalt einfügen</button></li>
+        <!--div class="row menu-entry">
+            <id, name and for will be made unique when instantiating the templat>
             <input type="checkbox" id="city-menu-routes" name="city-menu-routes" value="routes">
-            <label for="city-menu-routes">Routen hierher</label>
-        </div>
-    </div>
+            <label for="city-menu-routes"><span class="slider"></span>Routen hierher</label>
+        </div-->
+    </menu>
 </template>
 
 <template id="template-edge-menu">

diff --git a/script/components/map/mapObjects.js b/script/components/map/mapObjects.js
@@ -88,11 +88,11 @@ class CityMenu {
   }
 
   update(diff) {
-    if (diff.key === "isDestination") {
+    /*if (diff.key === "isDestination") {
       if (diff.newValue === true)
         this.#entries["routes"].style.setProperty("display", "flex");
       else this.#entries["routes"].style.setProperty("display", "none");
-    }
+    }*/
   }
 
   #initMenuEntry(element, cityId, cityName) {

diff --git a/style/colors.css b/style/colors.css
@@ -1,29 +1,37 @@
 body {
-    --color1: 27,158,119;
-    --color2: 217,95,2;
-    --color3: 117,112,179;
-    --color4: 231,41,138;
-    --color5: 102,166,30;
+  --color1: 27, 158, 119;
+  --color2: 217, 95, 2;
+  --color3: 117, 112, 179;
+  --color4: 231, 41, 138;
+  --color5: 102, 166, 30;
 
-    --color-background: #81a0be;
-    --color-dark: #2f4f69;
-    --color-light: #f9f3ea;
+  --color-background: #81a0be;
+  --color-dark: #2f4f69;
+  --color-light: #f9f3ea;
 
-    --color-map-beige: #F6F0E6;
-    --color-map-blue: #B3CFEB;
-    --color-map-green: #DDE9CC;
+  --color-map-beige: #f6f0e6;
+  --color-map-blue: #b3cfeb;
+  --color-map-green: #dde9cc;
 
-    /* https://codepen.io/sosuke/pen/Pjoqqp */
-    --filter-white: invert(100%);
-    /* #f9f3ea */
-    --filter-beige: invert(95%) sepia(9%) saturate(656%) hue-rotate(315deg) brightness(105%) contrast(95%);
-    --filter-darkgrey: invert(73%) sepia(0%) saturate(0%) hue-rotate(158deg) brightness(94%) contrast(89%);
-    /* 2f4f69 */
-    --filter-dark-blue:  invert(26%) sepia(17%) saturate(1428%) hue-rotate(165deg) brightness(98%) contrast(88%);
-     /* 0c3e87 looks nicer for marker*/
-    --filter-dark-blue2: invert(19%) sepia(96%) saturate(1482%) hue-rotate(201deg) brightness(84%) contrast(100%);
-    /* #2f4169 */
-    --filter-dark-blue2-hover: invert(22%) sepia(42%) saturate(701%) hue-rotate(183deg) brightness(93%) contrast(91%);
-    /* 81a0be*/
-    --filter-light-blue: invert(58%) sepia(51%) saturate(225%) hue-rotate(168deg) brightness(97%) contrast(83%);
-}
+  --color-modal: #286099;
+
+  /* https://codepen.io/sosuke/pen/Pjoqqp */
+  --filter-white: invert(100%);
+  /* #f9f3ea */
+  --filter-beige: invert(95%) sepia(9%) saturate(656%) hue-rotate(315deg)
+    brightness(105%) contrast(95%);
+  --filter-darkgrey: invert(73%) sepia(0%) saturate(0%) hue-rotate(158deg)
+    brightness(94%) contrast(89%);
+  /* 2f4f69 */
+  --filter-dark-blue: invert(26%) sepia(17%) saturate(1428%) hue-rotate(165deg)
+    brightness(98%) contrast(88%);
+  /* 0c3e87 looks nicer for marker*/
+  --filter-dark-blue2: invert(19%) sepia(96%) saturate(1482%) hue-rotate(201deg)
+    brightness(84%) contrast(100%);
+  /* #2f4169 */
+  --filter-dark-blue2-hover: invert(22%) sepia(42%) saturate(701%)
+    hue-rotate(183deg) brightness(93%) contrast(91%);
+  /* 81a0be*/
+  --filter-light-blue: invert(58%) sepia(51%) saturate(225%) hue-rotate(168deg)
+    brightness(97%) contrast(83%);
+}
diff --git a/style/layout.css b/style/layout.css
@@ -1,79 +1,84 @@
 body {
-    margin: 0;
-    padding: 0;
-    font-family: helvetica, arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  font-family: helvetica, arial, sans-serif;
 }
 
-html, body {
-    height: 100%;
+html,
+body {
+  height: 100%;
 }
 
 #map {
-    z-index: 1;
+  z-index: 1;
 
-    position: absolute;
-    left: 0;
-    top: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
 
-    height: 100%;
-    width: 100%;
+  height: 100%;
+  width: 100%;
 }
 
 #icon {
-    z-index: 2;
+  z-index: 2;
 
-    position: absolute;
-    left: 2rem;
-    top: 2rem;
+  position: absolute;
+  left: 2rem;
+  top: 2rem;
 
-    height: 6rem;
+  height: 6rem;
 
-    filter: var(--filter-white);
+  filter: var(--filter-white);
 }
 
 #sidebar {
-    z-index: 3;
+  z-index: 3;
 
-    position: absolute;
-    left: 0;
-    top: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
 
-    height: 100%;
-    width: 500px;
+  height: 100%;
+  width: 500px;
 
-    visibility: hidden;
+  visibility: hidden;
 }
 
 #modal {
-    z-index: 4;
+  z-index: 4;
 
-    /* center horizontally and vertically */
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+  /* center horizontally and vertically */
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
 
-    min-height: 50%;
-    min-width: 50%;
+  min-height: 50%;
+  min-width: 50%;
 }
 
 /*******************************************************
  the card/menu with title, used in map, calendar, modal
 *******************************************************/
 
-.card {
-    display: flex;
-    flex-direction: column;
+menu {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  display: flex;
+  flex-direction: column;
 
-    border-radius: 5px;
-    overflow: hidden; /* this is necessary to really get the round corners */
+  border-radius: 5px;
+  overflow: hidden; /* this is necessary to really get the round corners */
 }
 
-.card > * {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+menu > li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
-    /*margin: 0;*/
-    padding: 5px;
+  margin: 0;
+  padding: 5px;
 }
diff --git a/style/map/map.css b/style/map/map.css
@@ -94,18 +94,96 @@
 ************************************************/
 
 .city-menu {
-  border-color: var(--color-background);
+  width: 12rem;
+
+  --color-menu-highlight: var(--color-modal);
+
+  border-color: var(--color-menu-highlight);
 }
 
 .city-menu .title {
-  background-color: var(--color-dark);
   color: white;
+  background-color: var(--color-menu-highlight);
+  letter-spacing: 0.02rem;
 }
 
-.city-menu .menu-entry {
-  color: var(--color-dark);
+.city-menu li {
+  width: 100%;
+  padding: 0;
+}
+
+.city-menu li:not(button) {
+  /*padding: 5px;*/
+}
+
+.city-menu button {
+  width: 100%;
+  height: 1.3rem;
+
+  padding: 0;
+  margin: 0;
+  text-align: left;
+
+  /*box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);*/
+
+  cursor: pointer;
+
+  background: white;
+  color: var(--color-menu-highlight);
+}
+
+.city-menu .symbol-eye {
+  content: "👁";
+}
+
+.city-menu button:hover {
+  border-color: var(--color-menu-highlight);
+  background-color: var(--color-menu-highlight);
+  color: white;
+}
+
+/*.city-menu button {
+  width: 95%;
+
+  border: 1px solid white;
+  border-radius: 0.25rem;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+
+  padding: 0.2rem;
+
+  cursor: pointer;
+
+  background: white;
+  color: var(--color-menu-highlight);
+}
+
+.city-menu em {
 }
 
+.city-menu ul {
+}
+
+.city-menu button:enabled:hover {
+  border-color: var(--color-menu-highlight);
+  background-color: var(--color-menu-highlight);
+  color: white;
+}
+
+.city-menu button:disabled {
+  cursor: default;
+  box-shadow: none;
+  color: lightgray;
+}
+
+.city-menu .symbol-scissors {
+  transform: rotate(-90deg);
+  display: inline-block;
+}
+
+.city-menu .menu-entry {
+  color: var(--color-menu-highlight);
+}*/
+
 /* when hovering the background color changes */
 .city-menu .menu-entry:hover {
   background-color: var(--color-background);