Weatherwatch Interface

index.html

<nav class="special-color" role="navigation">
  <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">weather<strong>watch</strong><i class="wi wi-day-cloudy right"></i></a>
    <ul id="nav-mobile" class="right">
      <li><a>Temperature</a></li>
      <li class="active"><a>Humidity</a></li>
      <li><a>Pressure</a></li>
      <li><a>Lux</a></li>
    </ul>
  </div>
</nav>

<main>
  <div class="container main-container">
    <div class="graph-card card white darken-1">
      <div class="card-content text-special">
        <span class="card-title">Humidity / Today</span>
        <div id="graph__container">
        </div>
      </div>
      <div class="card-action">
        <a class="btn waves-effect active">Today</a>
        <a class="btn waves-effect">This Month</a>
        <a class="btn waves-effect">This Year</a>
        <a class="btn waves-effect">All Time</a>
      </div>
    </div>

    <div class="stats-cards">
      <div class="card white darken-1">
        <div class="card-content text-special">
          <h4>78%</h4>
          <span class="card-title">Average</span>
        </div>
      </div>

      <div class="card white darken-1">
        <div class="card-content text-special">
          <h4>42%</h4>
          <span class="card-title">Minimum</span>
        </div>
      </div>

      <div class="card white darken-1">
        <div class="card-content text-special">
          <h4>98%</h4>
          <span class="card-title">Maximum</span>
        </div>
      </div>
    </div>
  </div>
</main>


<footer class="page-footer special-color center-align white-text">
  <div class="container">
    <div class="row">
      <div class="col m3">
        <h6>Temperature</h6> 24.3
        <i class="wi wi-celsius"></i>
      </div>
      <div class="col m3">
        <h6>Humidity</h6> 83%
      </div>
      <div class="col m3">
        <h6>Pressure (hPa)</h6> 420
      </div>
      <div class="col m3">
        <h6>Lux</h6> 1024
      </div>
    </div>
  </div>

  <div class="footer-copyright">
    <div class="container">
      <div class="left">
        Last reading: 17/11/2016 - 13:40
      </div>
      <div class="right">
        Made by <a class="white-text text-lighten-3" href="http://autophagy.io">Autophagy</a>
      </div>
    </div>
</footer>

script.js

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Value'],
    [new Date(2016, 11, 17, 10, 0, 0, 0), 54],
    [new Date(2016, 11, 17, 10, 15, 0, 0), 56],
    [new Date(2016, 11, 17, 10, 45, 0, 0), 59],
    [new Date(2016, 11, 17, 11, 0, 0, 0), 61],
    [new Date(2016, 11, 17, 12, 0, 0, 0), 72],
    [new Date(2016, 11, 17, 13, 0, 0, 0), 83],
    [new Date(2016, 11, 17, 14, 0, 0, 0), 76],
    [new Date(2016, 11, 17, 15, 0, 0, 0), 70],
    [new Date(2016, 11, 17, 16, 0, 0, 0), 55],
    [new Date(2016, 11, 17, 17, 0, 0, 0), 62]
  ]);

  var options = {
    legend: 'none',
    hAxis: {
      textStyle: {
        color: '#bfbfbf'
      },
      gridlines: {
        color: '#d8d8d8'
      }
    },
    vAxis: {
      minValue: 0,
      textStyle: {
        color: '#bfbfbf'
      },
      gridlines: {
        color: '#d8d8d8'
      }
    },
    series: {
      0: {
        color: '#585ab1'
      }
    },
    chartArea: {
      left: '40',
      width: "92%",
      height: "90%"
    }
  };

  var chart = new google.visualization.AreaChart(document.getElementById('graph__container'));
  chart.draw(data, options);
}

$(window).resize(function() {
  if (this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
    $(this).trigger('resizeEnd');
  }, 500);
});

$(window).on('resizeEnd', function() {
  console.log('pineapple');
  drawChart();
});

scripts

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

style.less

html, 
body {
    height: 100%;
    max-width: 100%;
    background-color: #ececec;
}

.brand-logo {
  font-weight: 300;
}

main {
  min-height: ~'calc(100vh - 445px)';
}

h6 {
  font-weight: 500;
}

.main-container {
  display: flex;
  justify-content: space-between;
}

.graph-card {
  width: ~'calc(100% - 175px)';
}

.stats-cards {
  width: 160px;
  text-align: center;
}

#graph__container {
  height: ~'calc(100vh - 413px)';
}

#graph__container canvas {
  width: 100%;
}

footer button {
  width: 100px;
  margin-left: 10px;
  margin-right: 10px;
}

.special-color {
  background-color: #585ab1 !important;
}

.text-special {
  color: #585ab1 !important;
}

.btn {
  background-color: #585ab1;
}

.btn:hover {
  background-color: #7172bc;
}

.btn.active {
  background-color: #373976;
}

.tabs .tab {
  height: 64px;
}

@media screen and (max-width: 1100px) {
  .main-container {
    flex-wrap: wrap;
  }
  
  .stats-cards, .graph-card {
    width: 100%;
  }
  
  .stats-cards {
    display: flex;
    justify-content: space-between;
  }
  
  .stats-cards .card {
    width: 30%;
  }
}

@media screen and (max-width: 992px) {
  #nav-mobile {
    width: 100%;
  } 
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />

weatherwatch-interface.markdown

Weatherwatch Interface

A Pen by Mika on CodePen.

License.