Skip to content

S
smogonet
Commit e81a9949 authored by Antek Grzanka's avatar Antek Grzanka
Browse files
Options

Fix CSS.

parent d3f38233
Hide whitespace changes
Inline Side-by-side
Showing with 37 additions and 31 deletions
index.html
View file @ e81a9949
......@@ -31,10 +31,10 @@
padding-right: 6px;
}
#pollution-value {
font-size: 25px;
font-size: 35px;
}
.mr-10 { margin-right: 10px; }
.ml-30 { margin-left: 30px; }
.ml-20 { margin-left: 20px; }
.selectedPollutionCity {
......@@ -84,6 +84,7 @@
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
padding-left: 10px;
}
.select-box .city-list {
......@@ -112,19 +113,44 @@
<body id="body">
<div id="main-box">
</div>
<div id="left-side" style="float: center;">
Aktualny stan powietrza:
<div>
<div style="float:left;">Aktualny stan powietrza:</div>
<div style="float:right;margin-right:5px;">
<a class="selectedPollutionCity selectedPollutionCitySmall">
<span class="selectedPollutionCityWrapper" id="pollution-city-wrapper">
<span class="stationName" id="pollution-station-name">Al. Krasińskiego</span>
</span>
<span class="selectedPollutionCityWrapper" id="pollution-arrow-wrapper">
<span class="showList arrowDown" id="pollution-arrow">rozwiń</span>
</span>
<div class="select-box" id="select-pollution-menu">
<ul class="city-list left">
<li value="00000000-0000-0000-0000-000000000001" name="Al. Krasińskiego" onclick="onStationChosen(this)">Al. Krasińskiego</li>
<li value="00000000-0000-0000-0000-000000000003" name="ul. Bujaka" onclick="onStationChosen(this)">ul. Bujaka</li>
<li value="00000000-0000-0000-0000-000000000002" name="ul. Bulwarowa" onclick="onStationChosen(this)">ul. Bulwarowa</li>
</ul>
<ul class="city-list right">
<li value="00000000-0000-0000-0000-00000000000f" name="ul. Złoty Róg" onclick="onStationChosen(this)">ul. Złoty Róg</li>
<li value="00000000-0000-0000-0000-00000000000e" name="os. Piastów" onclick="onStationChosen(this)">os. Piastów</li>
<li value="00000000-0000-0000-0000-00000000000d" name="ul. Dietla" onclick="onStationChosen(this)">ul. Dietla</li>
</ul>
</div>
</a>
</div>
</div>
<div id="right-side" style="text-indent: 0.5rem; text-top: 1rem;">
<img class="margin-top:10px" src="data:image/png;base64,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621pyenMuCfY0tfn+9KSTb363/Rs+5mMCQAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAj6WFrASr4+35eWrOZyvS0tecqMewKYlAkAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBvgcA4Chm+z6L2fYzGRMAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEEfSwtYyeV6W1pyOjPuCWBSJgAAECQAACBIAABAkAAAgCAfAgQ4iq/P96Ulm3r1g72z7WcyJgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgKCPpQWs5OvzfWnJai7X29KSp8y4J4BJmQAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABAkAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACPJzwABHMdvPWs+2n8mYAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAEPSxtICVzPg72TPuCWBSJgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBH0sLgLe3t8v1trQE4ExMAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABAkAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABD0vrRgd5frbWkJAEzn63PVM9oEAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHNx/ARXdb82H7YErAAAAAElFTkSuQmCC" width="15%" height="15%">
<img style="margin-top:-8px;float:left" src="data:image/png;base64,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621pyenMuCfY0tfn+9KSTb363/Rs+5mMCQAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAj6WFrASr4+35eWrOZyvS0tecqMewKYlAkAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBvgcA4Chm+z6L2fYzGRMAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEEfSwtYyeV6W1pyOjPuCWBSJgAAECQAACBIAABAkAAAgCAfAgQ4iq/P96Ulm3r1g72z7WcyJgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgKCPpQWs5OvzfWnJai7X29KSp8y4J4BJmQAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABAkAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACPJzwABHMdvPWs+2n8mYAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAEPSxtICVzPg72TPuCWBSJgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBH0sLgLe3t8v1trQE4ExMAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABAkAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABD0vrRgd5frbWkJAEzn63PVM9oEAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHNx/ARXdb82H7YErAAAAAElFTkSuQmCC" width="24%" height="24%">
<div style="float:left; width:76%">
<div style="width:100%;margin-top:35px">
<span id="pollution-value" class="ml-20">?</span>
<span id="value-id">% normy</span>
<span id="value-symbol" class="ml-10">PM<sub>10</sub></span>
</div>
<span id="value-symbol" class="ml-30 mr-10">PM<sub>10</sub></span>
</div>
<span id="pollution-value">?</span>
<!--<select id="select-station" style="float: right; display: center; font-weight: bold;">-->
<!--<option value="00000000-0000-0000-0000-000000000003">ul. Bujaka</option>-->
......@@ -135,29 +161,9 @@
<!--<option value="00000000-0000-0000-0000-00000000000d">ul. Dietla</option>-->
<!--</select>-->
<a class="selectedPollutionCity selectedPollutionCitySmall">
<span class="selectedPollutionCityWrapper" id="pollution-city-wrapper">
<span class="stationName" id="pollution-station-name">Al. Krasińskiego</span>
</span>
<span class="selectedPollutionCityWrapper" id="pollution-arrow-wrapper">
<span class="showList arrowDown" id="pollution-arrow">rozwiń</span>
</span>
<div class="select-box" id="select-pollution-menu">
<ul class="city-list left">
<li value="00000000-0000-0000-0000-000000000001" name="Al. Krasińskiego" onclick="onStationChosen(this)">Al. Krasińskiego</li>
<li value="00000000-0000-0000-0000-000000000003" name="ul. Bujaka" onclick="onStationChosen(this)">ul. Bujaka</li>
<li value="00000000-0000-0000-0000-000000000002" name="ul. Bulwarowa" onclick="onStationChosen(this)">ul. Bulwarowa</li>
</ul>
<ul class="city-list right">
<li value="00000000-0000-0000-0000-00000000000f" name="ul. Złoty Róg" onclick="onStationChosen(this)">ul. Złoty Róg</li>
<li value="00000000-0000-0000-0000-00000000000e" name="os. Piastów" onclick="onStationChosen(this)">os. Piastów</li>
<li value="00000000-0000-0000-0000-00000000000d" name="ul. Dietla" onclick="onStationChosen(this)">ul. Dietla</li>
</ul>
</div>
</a>
<span id="value-id">%</span>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment