pingu_98/cosmicpi-rpi_V1.5
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Optimize for mobile devices

Browse source
This commit is contained in:
Darko Lukic 2018-03-24 21:16:19 +01:00
parent bf840d5961
commit 599cf4375e
8 changed files with 83 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/index.html
View file

@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title>Cosmic Pi UI</title>
</head>

2
ui/package.json
View file

@ -4,7 +4,7 @@
"description": "Web interface for Cosmic Pi",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"dev": "webpack-dev-server --open --mode development --disable-host-check --host 0.0.0.0",
"build": "webpack --progress --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},

9
ui/src/assets/css/main.css
View file

@ -108,13 +108,10 @@ hr {
#sidebar .hideable {
display: none;
}
}
.box {
border: 1px solid #ddd;
background-color: #f5f5f5;
padding: 20px;
border-radius: 5px;
.card {
margin: 0 -25px;
}
}
.card-narrow {

12
ui/src/components/Login.vue
View file

@ -1,7 +1,11 @@
<template>
<div class="col-md-4 offset-md-4 col-sm-6 offset-sm-4 box">
<h3 class="text-center">Login</h3>
<hr />
<div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 ">
<div class="card card-default">
<div class="card-header">
<h3>Login</h3>
</div>
<div class="card-body">
<div v-if="!authFail" class="alert alert-warning" role="alert">
Login is required to access to settings
</div>
@ -17,6 +21,8 @@
</div>
<button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</form>
</div>
</div>
</div>
</template>

9
ui/src/components/Science.vue
View file

@ -1,8 +1,11 @@
<template>
<div class="row">
<div class="col-md-8 offset-md-2 col-sm-12 box">
<div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2">
<div class="card card-default">
<div class="card-header">
<h3>Export Data</h3>
<hr />
</div>
<div class="card-body">
<div class="row">
<div class="form-group col">
<label for="fromDate">From date:</label>
@ -24,6 +27,8 @@
</div>
</div>
</div>
</div>
</div>
</div>
</template>

4
ui/src/components/dashboard/Dashboard.vue
View file

@ -1,10 +1,10 @@
<template>
<div>
<div class="row">
<div class="col-6">
<div class="col-sm-12 col-md-6">
<Histogram></Histogram>
</div>
<div class="col-6">
<div class="col-sm-12 col-md-6">
<Location :longitude=lastLongitude :latitude=lastLatitude></Location>
</div>
</div>

4
ui/src/components/dashboard/Histogram.vue
View file

@ -3,14 +3,14 @@
<div class="card-header">
<h5>Histogram</h5>
<div class="row">
<div class="col-10">
<div class="col-sm-9 col-md-10">
<p class="small">
Showing data in period {{from}} - {{to}} ({{period}}s),
<b>{{ numberOfEvents }}</b> events with
bin size <b>{{ binSize }}s</b>
</p>
</div>
<div class="col-2">
<div class="col-sm-3 col-md-2">
<input v-model="binSize" class="form-control" min="1" type="number"/>
</div>
</div>

21
ui/src/components/settings/Wifi.vue
View file

@ -1,7 +1,11 @@
<template>
<div class="col-md-4 offset-md-4 col-sm-6 offset-sm-4 box">
<h3 class="text-center">Wifi</h3>
<hr />
<div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 ">
<div class="card card-default">
<div class="card-header">
<h3>Wifi</h3>
</div>
<div class="card-body">
<div v-if="connected" class="alert alert-success">
Great, you are already connected to wifi network <b>{{ currentWifi }}</b>!
</div>
@ -22,6 +26,8 @@
</div>
<button type="submit" ref="submit" class="btn btn-primary btn-lg btn-block">Connect</button>
</form>
</div>
</div>
</div>
</template>
@ -72,12 +78,3 @@ export default {
},
}
</script>
<style>
.box {
border: 1px solid #ddd;
background-color: #f5f5f5;
padding: 20px;
border-radius: 5px;
}
</style>