Skip to content

GitLab

Commit d96323a7 authored by Weiser's avatar Weiser
Browse files

css

parent b04ad954
Hide whitespace changes
Inline Side-by-side
frontend/src/components/weather/currentData.css
View file @ d96323a7
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
} }
.filter input[type="text"], .filter input[type="text"],
.filter select { .filter select {
width: 100%; width: 100%;
padding: 8px; padding: 8px;
...@@ -44,39 +45,43 @@ ...@@ -44,39 +45,43 @@
#apiUrloutput { #apiUrloutput {
width: 1250px; width: 1250px;
} }
.list-container { .field_write{
width: 300px; margin-top: 30px;
margin: 20px auto; display: flex;
font-family: Arial, sans-serif; flex-direction: row;
} }
.fw{
.list-item { margin-left:20px;
border: 1px solid #ccc;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
transition: background-color 0.3s;
cursor: pointer;
} }
.h1{
.list-item:hover { margin-bottom: -30px;
background-color: #f0f0f0;
} }
.thq-grid-5{
.title { display: flex;
font-size: 18px; flex-direction: column;
font-weight: bold;
} }
.h2{
.subtitle { margin-top: 40px;
font-size: 14px;
color: #666;
} }
.location{
margin-top: 40px;
}
.time{
margin-top:40px;
margin-left:80px;
}
.dataselect{
display: flex;
flex-direction: row;
.APIButton {
display: block;
margin: 10px auto;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
} }
.data{
margin-top:40px;
margin-left:80px;
}
.h3{
margin-bottom: 10px;
}
.generate{
margin-top: 20px;
}
\ No newline at end of file
frontend/src/components/weather/currentData.js
View file @ d96323a7
...@@ -17,7 +17,12 @@ const Currentdata = (props) => { ...@@ -17,7 +17,12 @@ const Currentdata = (props) => {
<div className="home-container"> <div className="home-container">
<div> <div>
<div className="thq-grid-5"> <div className="thq-grid-5">
<div class="filter"> <div class="h1">
<h1>Choose your City</h1>
<br />
</div>
<div class="field_write">
<div class="fw">
<label htmlFor="location">Location:</label> <label htmlFor="location">Location:</label>
<input <input
type="text" type="text"
...@@ -36,208 +41,233 @@ const Currentdata = (props) => { ...@@ -36,208 +41,233 @@ const Currentdata = (props) => {
lon={item.lon} lon={item.lon}
/> />
))} ))}
<br /> </div>
<div class="fw">
<label for="region">Region:</label> <label for="region">Region:</label>
<input type="text" id="region_text" placeholder="Region" /> <input type="text" id="region_text" placeholder="Region" />
<br /> </div>
<div class="fw">
<label>Country:</label> <label>Country:</label>
<input type="text" id="country_text" placeholder="Country" /> <input type="text" id="country_text" placeholder="Country" />
<br /> </div>
<div class="fw">
<label>Latitude:</label> <label>Latitude:</label>
<input type="text" id="latitude_text" placeholder="Latitude" /> <input type="text" id="latitude_text" placeholder="Latitude" />
</div>
<div class="fw">
<label>Longitude:</label> <label>Longitude:</label>
<input type="text" id="longitude_text" placeholder="Longitude" /> <input type="text" id="longitude_text" placeholder="Longitude" />
<br />
</div>
<div>
<input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label>
<br />
<input type="checkbox" id="region" className="checkBoxFilter" />
<label> Region</label>
<br />
<input type="checkbox" id="country" className="checkBoxFilter" />
<label> Country</label>
<br />
<input type="checkbox" id="lon" className="checkBoxFilter" />
<label> Longitude</label>
<br />
<input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label>
<br />
<input type="checkbox" id="tz_id" className="checkBoxFilter" />
<label> Timezone Id</label>
<br />
<input
type="checkbox"
id="localtime_epoch"
className="checkBoxFilter"
/>
<label> Localtime Epoch</label>
<br />
<input type="checkbox" id="localtime" className="checkBoxFilter" />
<label> Localtime</label>
<br />
<input
type="checkbox"
id="last_updated_epoch"
className="checkBoxFilter"
/>
<label> Last Updated Epoch</label>
<br />
<input
type="checkbox"
id="last_updated"
className="checkBoxFilter"
/>
<label> Last Updated</label>
<br />
<input type="checkbox" id="temp" className="checkBoxFilter" />
<label for="temp">Temp</label>
<br />
<input type="checkbox" id="id_day" className="checkBoxFilter" />
<label for="id_day">ID Day</label>
<br />
<input
type="checkbox"
id="condition_text"
className="checkBoxFilter"
/>
<label for="condition">Condition Text</label>
<br />
<input
type="checkbox"
id="condition"
className="checkBoxFilter"
/>
<input
type="checkbox"
id="wind_degree"
className="checkBoxFilter"
/>
<label for="wind_degree">Wind Degree</label>
<br />
<input type="checkbox" id="wind_dir" className="checkBoxFilter" />
<label for="wind_dir">Wind Direction</label>
<br />
<input type="checkbox" id="pressure" className="checkBoxFilter" />
<label for="pressure">Pressure</label>
<br />
<input type="checkbox" id="precip" className="checkBoxFilter" />
<label for="precip">Precip</label>
<br />
<input type="checkbox" id="humidity" className="checkBoxFilter" />
<label for="humidity">Humidity</label>
<br />
<input type="checkbox" id="cloud" className="checkBoxFilter" />
<label for="cloud">Cloud</label>
<br />
<input type="checkbox" id="feelslike" className="checkBoxFilter" />
<label for="feelslike">Feelslike</label>
<br />
<input type="checkbox" id="windchill" className="checkBoxFilter" />
<label for="windchill">Windchill</label>
<br />
<input type="checkbox" id="heatindex" className="checkBoxFilter" />
<label for="heatindex">Heatindex</label>
<br />
<input type="checkbox" id="dewpoint" className="checkBoxFilter" />
<label for="dewpoint">Dewpoint</label>
<br />
<input type="checkbox" id="vis" className="checkBoxFilter" />
<label for="vis">Visibility </label>
<br />
<input type="checkbox" id="uv" className="checkBoxFilter" />
<label for="uv">UV Index</label>
<br />
<input type="checkbox" id="gust" className="checkBoxFilter" />
<label for="gust">Gust </label>
<br />
<input
type="checkbox"
id="air_quality_co"
className="checkBoxFilter"
/>
<label for="air_quality_co">Air Quality CO</label>
<br />
<input
type="checkbox"
id="air_quality_no2"
className="checkBoxFilter"
/>
<label for="air_quality_no2">Air Quality NO2</label>
<br />
<input
type="checkbox"
id="air_quality_o3"
className="checkBoxFilter"
/>
<label for="air_quality_o3">Air Quality O3</label>
<br />
<input
type="checkbox"
id="air_quality_so2"
className="checkBoxFilter"
/>
<label for="air_quality_so2">Air Quality SO2</label>
<br />
<input
type="checkbox"
id="air_quality_pm2_5"
className="checkBoxFilter"
/>
<label for="air_quality_pm2_5">Air Quality PM2.5</label>
<br />
<input
type="checkbox"
id="air_quality_pm10"
className="checkBoxFilter"
/>
<label for="air_quality_pm10">Air Quality PM10</label>
<br />
<input
type="checkbox"
id="air_quality_us_epa_index"
className="checkBoxFilter"
/>
<label for="air_quality_us_epa_index">US EPA Index</label>
<br />
<input
type="checkbox"
id="air_quality_gb_defra_index"
className="checkBoxFilter"
/>
<label for="air_quality_gb_defra_index">GB DEFRA Index</label>
<br />
<div>
<label for="units">Choose a unit:</label>
<select name="unnits" id="units">
<option value="world">Rest of The World</option>
<option value="american">
American units: /eagles per shool shootings
</option>
</select>
</div>
<div>
<button className="thq-button-filled" onClick={getData}>
Generate
</button>
</div>
<br />
<div class="output">
<h2>Output:</h2>
<br />
<pre id="weatherData"></pre>
</div>
<div id="apiUrl">
<label>API URL:</label>
<br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div> </div>
</div>
</div>
<div class="h2">
<h2>Choose the variables you want.</h2>
</div>
<div className="dataselect">
<div class="location">
<div class="h3">
<h3>Location</h3>
</div>
<input type="checkbox" id="name" className="checkBoxFilter" />
<label> City Name</label>
<br />
<input type="checkbox" id="region" className="checkBoxFilter" />
<label> Region</label>
<br />
<input type="checkbox" id="country" className="checkBoxFilter" />
<label> Country</label>
<br />
<input type="checkbox" id="lon" className="checkBoxFilter" />
<label> Longitude</label>
<br />
<input type="checkbox" id="lat" className="checkBoxFilter" />
<label> Latitude</label>
<br />
</div>
<div class="time">
<div class="h3">
<h3>Time</h3>
</div>
<input type="checkbox" id="tz_id" className="checkBoxFilter" />
<label> Timezone Id</label>
<br />
<input
type="checkbox"
id="localtime_epoch"
className="checkBoxFilter"
/>
<label> Localtime Epoch</label>
<br />
<input type="checkbox" id="localtime" className="checkBoxFilter" />
<label> Localtime</label>
<br />
<input
type="checkbox"
id="last_updated_epoch"
className="checkBoxFilter"
/>
<label> Last Updated Epoch</label>
<br />
<input
type="checkbox"
id="last_updated"
className="checkBoxFilter"
/>
<label> Last Updated</label>
<br />
</div>
<div class="data">
<div class="h3">
<h3>Temperature</h3>
</div>
<input type="checkbox" id="temp" className="checkBoxFilter" />
<label for="temp">Temp</label>
<br />
<input type="checkbox" id="id_day" className="checkBoxFilter" />
<label for="id_day">ID Day</label>
<br />
<input type="checkbox"id="condition_text"className="checkBoxFilter"/>
<label for="condition">Condition Text</label>
<br />
</div>
<div class="data">
<div class="h3">
<h3>Wind</h3>
</div>
<input type="checkbox" id="wind_degree" className="checkBoxFilter" />
<label for="wind_degree">Wind Degree</label>
<br />
<input type="checkbox" id="wind_dir" className="checkBoxFilter" />
<label for="wind_dir">Wind Direction</label>
<br />
<input type="checkbox" id="pressure" className="checkBoxFilter" />
<label for="pressure">Pressure</label>
<br />
<input type="checkbox" id="precip" className="checkBoxFilter" />
<label for="precip">Precip</label>
<br />
<input type="checkbox" id="humidity" className="checkBoxFilter" />
<label for="humidity">Humidity</label>
<br />
<input type="checkbox" id="cloud" className="checkBoxFilter" />
<label for="cloud">Cloud</label>
<br />
</div>
<div class="data">
<div class="h3">
<h3>Temperature</h3>
</div>
<input type="checkbox" id="feelslike" className="checkBoxFilter" />
<label for="feelslike">Feelslike</label>
<br />
<input type="checkbox" id="windchill" className="checkBoxFilter" />
<label for="windchill">Windchill</label>
<br />
<input type="checkbox" id="heatindex" className="checkBoxFilter" />
<label for="heatindex">Heatindex</label>
<br />
<input type="checkbox" id="dewpoint" className="checkBoxFilter" />
<label for="dewpoint">Dewpoint</label>
<br />
<input type="checkbox" id="vis" className="checkBoxFilter" />
<label for="vis">Visibility </label>
<br />
<input type="checkbox" id="uv" className="checkBoxFilter" />
<label for="uv">UV Index</label>
<br />
<input type="checkbox" id="gust" className="checkBoxFilter" />
<label for="gust">Gust </label>
<br />
</div>
<div class="data">
<div class="h3">
<h3>Air Quality</h3>
</div>
<input
type="checkbox"
id="air_quality_co"
className="checkBoxFilter"
/>
<label for="air_quality_co">Air Quality CO</label>
<br />
<input
type="checkbox"
id="air_quality_no2"
className="checkBoxFilter"
/>
<label for="air_quality_no2">Air Quality NO2</label>
<br />
<input
type="checkbox"
id="air_quality_o3"
className="checkBoxFilter"
/>
<label for="air_quality_o3">Air Quality O3</label>
<br />
<input
type="checkbox"
id="air_quality_so2"
className="checkBoxFilter"
/>
<label for="air_quality_so2">Air Quality SO2</label>
<br />
<input
type="checkbox"
id="air_quality_pm2_5"
className="checkBoxFilter"
/>
<label for="air_quality_pm2_5">Air Quality PM2.5</label>
<br />
<input
type="checkbox"
id="air_quality_pm10"
className="checkBoxFilter"
/>
<label for="air_quality_pm10">Air Quality PM10</label>
<br />
<input
type="checkbox"
id="air_quality_us_epa_index"
className="checkBoxFilter"
/>
<label for="air_quality_us_epa_index">US EPA Index</label>
<br />
<input
type="checkbox"
id="air_quality_gb_defra_index"
className="checkBoxFilter"
/>
<label for="air_quality_gb_defra_index">GB DEFRA Index</label>
<br />
</div>
</div>
<div>
<label for="units">Choose a unit:</label>
<select name="unnits" id="units">
<option value="world">Rest of The World</option>
<option value="american">
American units: /eagles per shool shootings
</option>
</select>
</div>
<div class="generate">
<button className="thq-button-filled" onClick={getData}>
Generate
</button>
</div>
<br />
<div class="output">
<h2>Output:</h2>
<br /> <br />
<pre id="weatherData"></pre>
</div>
<div id="apiUrl">
<label>API URL:</label>
<br /> <br />
<input className="input" type="text" id="apiUrloutput" readOnly />
</div> </div>
</div> <br />
<br />
</div> </div>
</div> </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

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal