Skip to content

Commit f6b6c50

Browse files
MuhammetCoskunMuhammetCoskun
authored
🏃🏻‍♂️ Oyla hazır oylamalar css düzenle (#38)
1 parent 6b07a53 commit f6b6c50

File tree

4 files changed

+119
-84
lines changed

4 files changed

+119
-84
lines changed

‎lib

‎oyla/sayfa.css

+62-28
Original file line numberDiff line numberDiff line change
@@ -30,36 +30,48 @@
3030
overflow: visible;
3131
}
3232

33-
#oyytitle {
34-
text-align: center;
35-
margin: 2em auto;
36-
font-weight: 700;
37-
width: 300px;
38-
}
39-
4033
#oyyddc {
4134
position: relative;
42-
margin: auto;
43-
width: 80%;
44-
max-width: 250px;
35+
display: flex;
36+
width: 55%;
4537
border-radius: 5px;
38+
align-items: center;
39+
justify-content: space-between;
40+
margin: 2em 2em 0;
41+
}
42+
43+
#oyytitle {
4644
}
4745

4846
#oyyddb {
4947
display: flex;
5048
justify-content: space-between;
5149
align-items: center;
52-
width: 100%;
50+
width: 50%;
5351
border: 1px solid rgb(0 0 0 / 10%);
54-
padding: 0.5em;
52+
padding: 0.5em 1em;
53+
}
54+
55+
@media (max-width: 700px) {
56+
#oyyddc {
57+
flex-direction: column;
58+
width: 100%;
59+
align-items: flex-start;
60+
}
61+
}
62+
63+
@media (max-width: 700px) {
64+
#oyytitle {
65+
margin-bottom: 1em;
66+
}
5567
}
5668

5769
#oyyul {
5870
position: absolute;
5971
top: 35px;
6072
right: 0;
6173
display: block;
62-
width: 100%;
74+
width: 50%;
6375
max-width: 250px;
6476
margin: 1em 0;
6577
padding: 0;
@@ -73,6 +85,13 @@
7385
transform-origin: top center;
7486
}
7587

88+
@media (max-width: 700px) {
89+
#oyyul {
90+
top: 65px;
91+
right: auto;
92+
}
93+
}
94+
7695
.oyyli {
7796
height: 40px;
7897
margin: 1px;
@@ -92,14 +111,24 @@
92111
}
93112

94113
#oyy0 {
114+
margin: 2em;
115+
width: 100%;
116+
}
117+
118+
#oyywc {
95119
display: flex;
96-
flex-direction: column;
97120
align-items: center;
98-
max-width: 600px;
99-
margin: 1em;
100-
padding: 1em;
101-
border-radius: 10px;
102-
background-color: #fff;
121+
}
122+
123+
@media (max-width: 700px) {
124+
#oyywc {
125+
flex-direction: column;
126+
align-items: flex-start;
127+
}
128+
}
129+
130+
#oyyfb {
131+
margin-right: 3em;
103132
}
104133

105134
.oyyb {
@@ -114,7 +143,7 @@
114143
background-color: #fff;
115144
border: 1px solid rgba(0 0 0 / 10%);
116145
border-radius: 10px;
117-
max-width: 250px;
146+
width: 180px;
118147
box-sizing: border-box;
119148
margin-bottom: 1em;
120149
}
@@ -187,9 +216,8 @@
187216
.oyyor {
188217
width: 100%;
189218
display: flex;
190-
justify-content: center;
191-
align-self: center;
192-
margin: 1em;
219+
justify-content: left;
220+
margin: 2em 1em 1em 0;
193221
}
194222

195223
#oyy2 {
@@ -202,9 +230,9 @@
202230
.oyyta {
203231
border: 1px solid rgb(0 0 0 / 10%);
204232
border-radius: 5px;
233+
resize: vertical;
205234
width: 100%;
206-
height: 80px;
207-
resize: none;
235+
min-height: 6em;
208236
box-sizing: border-box;
209237
padding: 1em;
210238
font-family: inherit;
@@ -216,7 +244,7 @@
216244
#oyycvscc {
217245
display: flex;
218246
flex-wrap: wrap;
219-
margin: 1em 0;
247+
margin: 1em 0 0.5em;
220248
}
221249

222250
.oyycvsc {
@@ -227,10 +255,15 @@
227255
border-radius: 5px;
228256
padding: 0.5em 0 0.5em 1em;
229257
margin-right: 1em;
258+
margin-bottom: 0.5em;
259+
}
260+
261+
#oyycvse {
262+
margin-bottom: 0.5em;
230263
}
231264

232265
.oyycvs {
233-
width: 50px;
266+
width: 125px;
234267
font-size: inherit;
235268
border: none;
236269
outline: none;
@@ -243,7 +276,6 @@
243276
height: 22px;
244277
border-radius: 4px;
245278
transition: all 0.3s;
246-
margin-left: 0.5em;
247279
}
248280

249281
.oyycvsk:before,
@@ -279,6 +311,8 @@
279311
border-radius: 5px;
280312
padding: 0.5em;
281313
outline: none;
314+
width: 125px;
315+
margin-left: 1em;
282316
}
283317

284318
.oyc {

‎oyla/sayfa.html

+54-53
Original file line numberDiff line numberDiff line change
@@ -20,86 +20,87 @@ <h2><a href="/">KimlikDAO</a></h2>
2020
<div id="oy">
2121
<div id=oyyb data-en="Create Proposal">Yeni Oylama Öner</div>
2222
<div id="oyy" style="display:none">
23-
<div id=oyytitle data-en="Create Proposal">Yeni Oylama Öner</div>
2423
<div id=oyyddc>
24+
<div id=oyytitle data-en="Create Proposal">Yeni Oylama Öner</div>
2525
<button id=oyyddb>
26-
<div id="oyyso0" data-en="Price Change">Fiyat Değişikliği</div>
26+
<div id="oyyso2" data-en="Community Vote">Topluluk Önerisi</div>
27+
<div id="oyyso0" data-en="Price Change" style="display:none">Fiyat Değişikliği</div>
2728
<div id="oyyso1" data-en="Trade Proposal" style="display:none">Takas Önerisi</div>
28-
<div id="oyyso2" data-en="Community Vote" style="display:none">Topluluk Önerisi</div>
2929
<div id="oyyso3" data-en="Custom Proposal" style="display:none">Kendin Belirle</div>
3030
<img id=oyyddok src="/oyla/dropdownok.svg" alt="" width="10" height="10">
3131
</button>
3232
<ul id=oyyul style="display:none">
33+
<li id=oyyo2 class="oyyli" data-en="Community Vote">Topluluk Önerisi</li>
3334
<li id=oyyo0 class="oyyli" data-en="Price Change">Fiyat Değişikliği</li>
3435
<li id=oyyo1 class="oyyli" data-en="Trade Proposal">Takas Önerisi</li>
35-
<li id=oyyo2 class="oyyli" data-en="Community Vote">Topluluk Önerisi</li>
3636
<li id=oyyo3 class="oyyli" data-en="Custom Proposal">Kendin Belirle</li>
3737
</ul>
3838
</div>
3939
<div id="oyyc">
40-
<div id=oyy0>
41-
<div id=oyyfb class="oyyb" data-en="Enter new price for TCKT.">TCKT’nin yeni fiyatını girin.</div>
42-
<div id=oyyfddc>
43-
<input type="number" id=oyyfi placeholder="0.0">
44-
<button id=oyytb>
45-
<div id=oyyst2 class="oyyst"><img src="/al/ödeme/USDC.svg" height=24 width=24> USDC</div>
46-
<div id=oyyst1 class="oyyst" style="display:none"><img src="/al/ödeme/USDT.svg" height=24 width=24> USDT
47-
</div>
48-
<div id=oyyst3 class="oyyst" style="display:none"><img src="/al/ödeme/TRYB.svg" height=24 width=24> TRYB
49-
</div>
50-
<div id=oyyst0x1 class="oyyst" style="display:none"><img src="/al/ödeme/ETH.svg" height=24 width=24> ETH
51-
</div>
52-
<div id=oyyst0xa86a class="oyyst" style="display:none"><img src="/al/ödeme/AVAX.svg" height=24
53-
width=24> AVAX
54-
</div>
55-
<div id=oyyst0x89 class="oyyst" style="display:none"><img src="/al/ödeme/MATIC.svg" height=24
56-
width=24> MATIC
57-
</div>
58-
<div id=oyyst0xfa class="oyyst" style="display:none"><img src="/al/ödeme/FTM.svg" height=24 width=24> FTM
59-
</div>
60-
<div id=oyyst0xa4b1 class="oyyst" style="display:none"><img src="/al/ödeme/ETH.svg" height=24
61-
width=24> ETH
62-
</div>
63-
<div id=oyyst0x38 class="oyyst" style="display:none"><img src="/al/ödeme/BNB.svg" height=24 width=24> BNB
64-
</div>
65-
</button>
66-
<ul id=oyddul style="display:none">
67-
<li id=oyyt2 class="oyddli"><img src="/al/ödeme/USDC.svg" height=24 width=24> USDC</li>
68-
<li id=oyyt1 class="oyddli"><img src="/al/ödeme/USDT.svg" height=24 width=24> USDT</li>
69-
<li id=oyyt3 class="oyddli"><img src="/al/ödeme/TRYB.svg" height=24 width=24> TRYB</li>
70-
<li id=oyyt0x1 class="oyddli" style="display:none"><img src="/al/ödeme/ETH.svg" height=24 width=24> ETH
71-
</li>
72-
<li id=oyyt0xa86a class="oyddli" style="display:none"><img src="/al/ödeme/AVAX.svg" height=24
73-
width=24> AVAX</li>
74-
<li id=oyyt0x89 class="oyddli" style="display:none"><img src="/al/ödeme/MATIC.svg" height=24
75-
width=24> MATIC</li>
76-
<li id=oyyt0xfa class="oyddli" style="display:none"><img src="/al/ödeme/FTM.svg" height=24 width=24> FTM
77-
</li>
78-
<li id=oyyt0xa4b1 class="oyddli" style="display:none"><img src="/al/ödeme/ETH.svg" height=24 width=24> ETH
79-
</li>
80-
</ul>
40+
<div id=oyy0 style="display:none">
41+
<div id=oyywc>
42+
<div id=oyyfb class="oyyb" data-en="Enter new price for TCKT.">TCKT’nin yeni fiyatını girin.</div>
43+
<div id=oyyfddc>
44+
<input type="number" id=oyyfi placeholder="0.0">
45+
<button id=oyytb>
46+
<div id=oyyst2 class="oyyst"><img src="/al/ödeme/USDC.svg" height=24 width=24> USDC</div>
47+
<div id=oyyst1 class="oyyst" style="display:none"><img src="/al/ödeme/USDT.svg" height=24 width=24> USDT
48+
</div>
49+
<div id=oyyst3 class="oyyst" style="display:none"><img src="/al/ödeme/TRYB.svg" height=24 width=24> TRYB
50+
</div>
51+
<div id=oyyst0x1 class="oyyst" style="display:none"><img src="/al/ödeme/ETH.svg" height=24 width=24> ETH
52+
</div>
53+
<div id=oyyst0xa86a class="oyyst" style="display:none"><img src="/al/ödeme/AVAX.svg" height=24
54+
width=24> AVAX
55+
</div>
56+
<div id=oyyst0x89 class="oyyst" style="display:none"><img src="/al/ödeme/MATIC.svg" height=24
57+
width=24> MATIC
58+
</div>
59+
<div id=oyyst0xfa class="oyyst" style="display:none"><img src="/al/ödeme/FTM.svg" height=24
60+
width=24> FTM
61+
</div>
62+
<div id=oyyst0xa4b1 class="oyyst" style="display:none"><img src="/al/ödeme/ETH.svg" height=24
63+
width=24> ETH
64+
</div>
65+
<div id=oyyst0x38 class="oyyst" style="display:none"><img src="/al/ödeme/BNB.svg" height=24
66+
width=24> BNB
67+
</div>
68+
</button>
69+
<ul id=oyddul style="display:none">
70+
<li id=oyyt2 class="oyddli"><img src="/al/ödeme/USDC.svg" height=24 width=24> USDC</li>
71+
<li id=oyyt1 class="oyddli"><img src="/al/ödeme/USDT.svg" height=24 width=24> USDT</li>
72+
<li id=oyyt3 class="oyddli"><img src="/al/ödeme/TRYB.svg" height=24 width=24> TRYB</li>
73+
<li id=oyyt0x1 class="oyddli" style="display:none"><img src="/al/ödeme/ETH.svg" height=24 width=24> ETH
74+
</li>
75+
<li id=oyyt0xa86a class="oyddli" style="display:none"><img src="/al/ödeme/AVAX.svg" height=24
76+
width=24> AVAX</li>
77+
<li id=oyyt0x89 class="oyddli" style="display:none"><img src="/al/ödeme/MATIC.svg" height=24
78+
width=24> MATIC</li>
79+
<li id=oyyt0xfa class="oyddli" style="display:none"><img src="/al/ödeme/FTM.svg" height=24 width=24> FTM
80+
</li>
81+
<li id=oyyt0xa4b1 class="oyddli" style="display:none"><img src="/al/ödeme/ETH.svg" height=24
82+
width=24> ETH
83+
</li>
84+
</ul>
85+
</div>
8186
</div>
8287
<div class="oyyor">
8388
<a href="javascript:" id=oyyfo class="act btn lft" data-en="Confirm">Onayla</a>
8489
<a href="javascript:" id=oyyfr class="btn" data-en="Cancel">İptal</a>
8590
</div>
8691
</div>
8792
<div id="oyy1" style="display:none">WIP</div>
88-
<div id="oyy2" style="display:none">
89-
<div class="oyyb" data-en="Type proposal.">
90-
Önergenizi yazın.
91-
</div>
93+
<div id="oyy2">
94+
<div class="oyyb" data-en="Type proposal.">Önergenizi yazın</div>
9295
<textarea id=oyycva class="oyyta"></textarea>
93-
<div class="oyyb" data-en="Responses">
94-
Seçenekler
95-
</div>
96+
<div class="oyyb" data-en="Responses">Seçenekler</div>
9697
<div id=oyycvscc>
9798
<div class="oyycvsc" style="display:none">
9899
<input type="text" value="Evet" class="oyycvs">
99100
<a href="javascript:" class="oyycvsk" data-en-title="Remove" title="Kaldır"></a>
100101
</div>
102+
<a href="javascript:" id=oyycvse class="btn" data-en-title="Add Respond" title="Seçenek Ekle">+</a>
101103
</div>
102-
<a href="javascript:" id=oyycvse class="btn" data-en-title="Add Respond" title="Seçenek Ekle">+</a>
103104
<div class="oyycvtc"><span data-en="Deadline" data-phantom>Son Tarih</span>
104105
<input type="date" id=oyycvti>
105106
</div>

‎oyla/sayfa.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Cüzdan.bağlanınca(() => {
2020
dom.adla("oyyb").onclick = () => {
2121
dom.adlaGizle("oyyb");
2222
dom.adlaGöster("oyy");
23-
if (!seçilmişÖneriId) seçilmişÖneriId = "0";
23+
if (!seçilmişÖneriId) seçilmişÖneriId = "2";
2424
/** @const {Element} */
2525
const önergeDüğmesi = dom.adla("oyyddb");
2626
/** @const {Element} */
@@ -118,7 +118,7 @@ const komuniteÖnergesiHazırla = () => {
118118
dom.göster(secenek);
119119
secenek.firstElementChild.value = text;
120120
secenek.children[1].onclick = () => secenek.remove();
121-
secenekler.appendChild(secenek);
121+
secenekler.insertBefore(secenek, secenekEkleDüğmesi);
122122
}
123123
secenekEkle(dom.TR ? "Evet" : "Yes");
124124
secenekEkle(dom.TR ? "Hayır" : "No");

0 commit comments

Comments
 (0)