mirror of
https://github.com/correl/elm-mdl.git
synced 2024-12-18 03:00:11 +00:00
34 lines
1,019 B
HTML
34 lines
1,019 B
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
|
||
|
|
<title>elm-mdl-demo</title>
|
||
|
|
|
||
|
|
<!-- MDL -->
|
||
|
|
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||
|
|
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.min.css" />
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<!-- elm -->
|
||
|
|
<script src="built/elm.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var isSmallScreenQuery = window.matchMedia('(max-width: 1024px)');
|
||
|
|
|
||
|
|
app = Elm.fullscreen(Elm.Main,
|
||
|
|
{ isSmallScreenSignal : isSmallScreenQuery.matches
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
/* Connect Material/isSmallScreenSignal. */
|
||
|
|
isSmallScreenQuery.addListener(function () {
|
||
|
|
app.ports.isSmallScreenSignal.send(isSmallScreenQuery.matches);
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|