💄 Oyla sayfası css düzelt (#38)

Author: MuhammetCoskun

oyla/sayfa.css

@@ -23,19 +23,11 @@
   }
 }
 
-#oyy:hover {
-  box-shadow: 2px 10px 50px rgb(0 0 0 / 15%);
-}
-
 #oyy.open_form {
   max-width: 800px;
   width: 80%;
   max-height: 1000px;
   cursor: default;
-  transition-property: width, max-height;
-  transition-duration: 0.1s, 0.1s;
-  transition-delay: 0, 0.1s;
-  transition-timing-function: ease-in;
 }
 
 #oyytitle {
@@ -75,6 +67,7 @@
 
 .oyy_tablabel.sol {
   border-left: none;
+  width: 34%;
 }
 
 @media (max-width: 320px) {
@@ -185,14 +178,16 @@
   justify-content: center;
   align-items: center;
   width: 90px;
-  border: 1px solid rgb(0 0 0 / 15%);
-  box-sizing: border-box;
   border-radius: 10px;
   margin: 5px;
   cursor: pointer;
   padding: 0.5em 0;
 }
 
+.oyytli.sel {
+  background: rgb(0 0 0 / 5%);
+}
+
 .oyynp {
   display: flex;
   width: 60px;
@@ -226,7 +221,7 @@
   width: 80%;
   background-color: #fff;
   box-shadow: 2px 2px 10px rgb(0 0 0 / 15%);
-  border-radius: 2px;
+  border-radius: 10px;
   margin-bottom: 3em;
 }
 
@@ -247,12 +242,11 @@
   transition-duration: 0.3s;
   transition-timing-function: ease-in;
   border-bottom: 1px solid rgba(0 0 0 / 10%);
-  border-radius: 2px;
 }
 
 @media (max-width: 425px) {
   .oyok {
-    max-height: 310px;
+    max-height: 280px;
   }
 }
 
@@ -261,8 +255,8 @@
   cursor: default;
 }
 
-.oyok:hover {
-  box-shadow: 2px 10px 50px rgb(0 0 0 / 15%);
+.oyok:last-child {
+  border-radius: 10px;
 }
 
 .oyao_top {

oyla/sayfa.html

@@ -19,7 +19,7 @@ <h2><a href="/">KimlikDAO</a></h2>
   </div>
   <div id="oy">
     <div id="oyy">
-      <div id="oyytitle" data-en="Propose">Yeni Oylama Öner</div>
+      <div id="oyytitle" data-en="Create Proposal">Yeni Oylama Öner</div>
       <div id="oyytabs">
         <input type="radio" id="oyytab0" name="tabs" checked="checked">
         <label for="oyytab0" class="oyy_tablabel sol" data-en="TCKT Price Change">TCKT Ücret Değişikliği</label>
@@ -57,14 +57,10 @@ <h2><a href="/">KimlikDAO</a></h2>
                 </div>
                 <div id=oyys0x1 class="oyysto">ETH <img src="/al/ödeme/ETH.svg" height=24 width=24>
                 </div>
-                <div id=oyys0xa86a class="oyysto">AVAX <img src="/al/ödeme/AVAX.svg" height=24
-                    width=24></div>
-                <div id=oyys0x89 class="oyysto">MATIC <img src="/al/ödeme/MATIC.svg" height=24
-                    width=24></div>
-                <div id=oyys0xfa class="oyysto">FTM <img src="/al/ödeme/FTM.svg" height=24
-                    width=24></div>
-                <div id=oyys0xa4b1 class="oyysto">ETH <img src="/al/ödeme/ETH.svg" height=24
-                    width=24></div>
+                <div id=oyys0xa86a class="oyysto">AVAX <img src="/al/ödeme/AVAX.svg" height=24 width=24></div>
+                <div id=oyys0x89 class="oyysto">MATIC <img src="/al/ödeme/MATIC.svg" height=24 width=24></div>
+                <div id=oyys0xfa class="oyysto">FTM <img src="/al/ödeme/FTM.svg" height=24 width=24></div>
+                <div id=oyys0xa4b1 class="oyysto">ETH <img src="/al/ödeme/ETH.svg" height=24 width=24></div>
               </div>
             </div>
           </div>

oyla/sayfa.js

@@ -21,6 +21,9 @@ dom.adla("oyy").onclick = () => {
 /** @param {string} yeniAğ  Ağ değişince UI'da gösterir*/
 const fiyatDeğişikliğiFormuHazırla = (yeniAğ) => {
   let seçilmişToken;
+  for (let i = 0; i < dom.adla("oyytul").childElementCount; ++i) {
+    dom.adla("oyytul").children[i].classList.remove("sel")
+  }
   dom.göster(dom.adla("oyy" + yeniAğ));
   // Diğer Ağ tokenlarını UI'dan cıkar
   for (const diğerAğ in Cüzdan.Paralar) {
@@ -39,16 +42,18 @@ const fiyatDeğişikliğiFormuHazırla = (yeniAğ) => {
   // Li'lere click Handler ekle
   dom.adla("oyytul").onclick = (e) => {
     if (e.target.nodeName == "UL") return;
+    if (seçilmişToken) dom.adla("oyy" + seçilmişToken).classList.remove("sel");
     const id = e.target.nodeName == "LI"
       ? e.target.id.slice(3)
       : e.target.parentElement.id.slice(3);
     for (let i = 0; i < dom.adla("oyystoc").childElementCount; ++i) {
       dom.gizle(dom.adla("oyystoc").children[i])
     }
     dom.adlaGöster("oyys" + id);
+    dom.adla("oyy" + id).classList.add("sel");
     seçilmişToken = id;
   }
-  // Onayla iptal click handler
+  // Onayla iptal click handler ekle
   dom.adla("oyyo").onclick = () => {
     const fiyat = dom.adla("oyyyf").value;
     if (fiyat == null || fiyat == undefined || fiyat == "") return;