mirror of
https://github.com/jcreek/phldnhack.git
synced 2026-07-12 18:43:43 +00:00
A visually pleasing teacher page with currently not working modals, despite apparently correct code that was directly copied from the materialize.css examples.
This commit is contained in:
jcreek
+117
-3
@@ -10,8 +10,116 @@
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/ractive" id="teacher"><div class="row">
|
||||
<div class="col s12 m6 offset-m3">
|
||||
<script type="text/ractive" id="teacher"><!-- {{JSON.stringify(.)}} -->
|
||||
|
||||
|
||||
<!-- Navbar goes here -->
|
||||
<nav>
|
||||
<div class="nav-wrapper">
|
||||
<!-- Using the Logo as a Modal Trigger (added the modal-trigger class) -->
|
||||
<a href="#modal1" class="brand-logo right modal-trigger">Click here for the Modal</a>
|
||||
|
||||
<ul id="nav-mobile" class="left hide-on-med-and-down">
|
||||
<li><a href="#">Class Data</a></li>
|
||||
<li><a href="#">Notifications</a></li>
|
||||
<li><a href="#">Administrate Students</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Modal Trigger -->
|
||||
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
|
||||
|
||||
<!-- Modal Structure -->
|
||||
<div id="modal1" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Modal Header</h4>
|
||||
<p>A bunch of text</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Layout here -->
|
||||
<div class="row">
|
||||
<div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
|
||||
<!-- Grey navigation panel
|
||||
|
||||
This content will be:
|
||||
3-columns-wide on large screens,
|
||||
4-columns-wide on medium screens,
|
||||
12-columns-wide on small screens -->
|
||||
<ul class='fields'> <!--from http://learn.ractivejs.org/partials/2 -->
|
||||
{{#each fields:i}}
|
||||
{{>field}}
|
||||
{{/each}}
|
||||
<strong>Fields are in here</strong>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
|
||||
<!-- Teal page content
|
||||
|
||||
This content will be:
|
||||
9-columns-wide on large screens,
|
||||
8-columns-wide on medium screens,
|
||||
12-columns-wide on small screens -->
|
||||
|
||||
<div class="card z-depth-2">
|
||||
<div class="card-content">
|
||||
<span class="card-title grey-text">{{studentName}} - {{age}}</span>
|
||||
<p>I am a very simple card. I am good at containing small bits of information.
|
||||
I am convenient because I require little markup to use effectively.</p>
|
||||
Class 8Y/IT1 <br>
|
||||
ICT Module Box <br>
|
||||
<br>
|
||||
Behaviour <br>
|
||||
etc. <br>
|
||||
<p>This is where the actual table data goes </p>
|
||||
|
||||
<table class="highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="id">Name</th>
|
||||
<th data-field="name">Item Name</th>
|
||||
<th data-field="price">Item Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alvin</td>
|
||||
<td>Eclair</td>
|
||||
<td>$0.87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alan</td>
|
||||
<td>Jellybean</td>
|
||||
<td>$3.76</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonathan</td>
|
||||
<td>Lollipop</td>
|
||||
<td>$7.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shannon</td>
|
||||
<td>KitKat</td>
|
||||
<td>$9.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="col s12 m6 offset-m3">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title grey-text">{{studentName}} - {{age}}</span>
|
||||
@@ -20,5 +128,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
@@ -5,3 +5,22 @@ Ractive.components.parent = Ractive.extend({
|
||||
Ractive.components.teacher = Ractive.extend({
|
||||
template:'#teacher'
|
||||
});
|
||||
|
||||
// $(document).ready(function(){
|
||||
// // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
|
||||
// $('.modal-trigger').leanModal({
|
||||
// dismissible: false, // Modal can be dismissed by clicking outside of the modal
|
||||
// opacity: .5, // Opacity of modal background
|
||||
// in_duration: 300, // Transition in duration
|
||||
// out_duration: 200, // Transition out duration
|
||||
// ready: function() { alert('Ready'); }, // Callback for Modal open
|
||||
// complete: function() { alert('Closed'); } // Callback for Modal close
|
||||
// }
|
||||
// );
|
||||
// });
|
||||
|
||||
$(document).ready(function(){
|
||||
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
|
||||
$('.modal-trigger').leanModal();
|
||||
});
|
||||
|
||||
|
||||
+124
-10
@@ -3,16 +3,9 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>RCard</title>
|
||||
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
|
||||
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
|
||||
|
||||
<!-- Compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
|
||||
|
||||
<!-- Compiled and minified JavaScript -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
|
||||
|
||||
<script src='/index.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -28,8 +21,116 @@
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/ractive" id="teacher"><div class="row">
|
||||
<div class="col s12 m6 offset-m3">
|
||||
<script type="text/ractive" id="teacher"><!-- {{JSON.stringify(.)}} -->
|
||||
|
||||
|
||||
<!-- Navbar goes here -->
|
||||
<nav>
|
||||
<div class="nav-wrapper">
|
||||
<!-- Using the Logo as a Modal Trigger (added the modal-trigger class) -->
|
||||
<a href="#modal1" class="brand-logo right modal-trigger">Click here for the Modal</a>
|
||||
|
||||
<ul id="nav-mobile" class="left hide-on-med-and-down">
|
||||
<li><a href="#">Class Data</a></li>
|
||||
<li><a href="#">Notifications</a></li>
|
||||
<li><a href="#">Administrate Students</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Modal Trigger -->
|
||||
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
|
||||
|
||||
<!-- Modal Structure -->
|
||||
<div id="modal1" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Modal Header</h4>
|
||||
<p>A bunch of text</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Layout here -->
|
||||
<div class="row">
|
||||
<div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
|
||||
<!-- Grey navigation panel
|
||||
|
||||
This content will be:
|
||||
3-columns-wide on large screens,
|
||||
4-columns-wide on medium screens,
|
||||
12-columns-wide on small screens -->
|
||||
<ul class='fields'> <!--from http://learn.ractivejs.org/partials/2 -->
|
||||
{{#each fields:i}}
|
||||
{{>field}}
|
||||
{{/each}}
|
||||
<strong>Fields are in here</strong>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
|
||||
<!-- Teal page content
|
||||
|
||||
This content will be:
|
||||
9-columns-wide on large screens,
|
||||
8-columns-wide on medium screens,
|
||||
12-columns-wide on small screens -->
|
||||
|
||||
<div class="card z-depth-2">
|
||||
<div class="card-content">
|
||||
<span class="card-title grey-text">{{studentName}} - {{age}}</span>
|
||||
<p>I am a very simple card. I am good at containing small bits of information.
|
||||
I am convenient because I require little markup to use effectively.</p>
|
||||
Class 8Y/IT1 <br>
|
||||
ICT Module Box <br>
|
||||
<br>
|
||||
Behaviour <br>
|
||||
etc. <br>
|
||||
<p>This is where the actual table data goes </p>
|
||||
|
||||
<table class="highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="id">Name</th>
|
||||
<th data-field="name">Item Name</th>
|
||||
<th data-field="price">Item Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alvin</td>
|
||||
<td>Eclair</td>
|
||||
<td>$0.87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alan</td>
|
||||
<td>Jellybean</td>
|
||||
<td>$3.76</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonathan</td>
|
||||
<td>Lollipop</td>
|
||||
<td>$7.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shannon</td>
|
||||
<td>KitKat</td>
|
||||
<td>$9.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="col s12 m6 offset-m3">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title grey-text">{{studentName}} - {{age}}</span>
|
||||
@@ -38,10 +139,23 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<div id='load'></div>
|
||||
|
||||
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
|
||||
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
|
||||
|
||||
<!-- Compiled and minified JavaScript -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
|
||||
|
||||
<script src='/index.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -8,6 +8,25 @@ Ractive.components.teacher = Ractive.extend({
|
||||
template:'#teacher'
|
||||
});
|
||||
|
||||
// $(document).ready(function(){
|
||||
// // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
|
||||
// $('.modal-trigger').leanModal({
|
||||
// dismissible: false, // Modal can be dismissed by clicking outside of the modal
|
||||
// opacity: .5, // Opacity of modal background
|
||||
// in_duration: 300, // Transition in duration
|
||||
// out_duration: 200, // Transition out duration
|
||||
// ready: function() { alert('Ready'); }, // Callback for Modal open
|
||||
// complete: function() { alert('Closed'); } // Callback for Modal close
|
||||
// }
|
||||
// );
|
||||
// });
|
||||
|
||||
$(document).ready(function(){
|
||||
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
|
||||
$('.modal-trigger').leanModal();
|
||||
});
|
||||
|
||||
|
||||
|
||||
$.getJSON('/data/'+location.pathname.split('/').slice(3).join('/'), function(res){
|
||||
|
||||
|
||||
@@ -1,5 +1,113 @@
|
||||
<!-- {{JSON.stringify(.)}} -->
|
||||
|
||||
|
||||
<!-- Navbar goes here -->
|
||||
<nav>
|
||||
<div class="nav-wrapper">
|
||||
<!-- Using the Logo as a Modal Trigger (added the modal-trigger class) -->
|
||||
<a href="#modal1" class="brand-logo right modal-trigger">Click here for the Modal</a>
|
||||
|
||||
<ul id="nav-mobile" class="left hide-on-med-and-down">
|
||||
<li><a href="#">Class Data</a></li>
|
||||
<li><a href="#">Notifications</a></li>
|
||||
<li><a href="#">Administrate Students</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Modal Trigger -->
|
||||
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
|
||||
|
||||
<!-- Modal Structure -->
|
||||
<div id="modal1" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Modal Header</h4>
|
||||
<p>A bunch of text</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Layout here -->
|
||||
<div class="row">
|
||||
<div class="col s12 m6 offset-m3">
|
||||
<div class="col s12 m4 l3"> <!-- Note that "m4 l3" was added -->
|
||||
<!-- Grey navigation panel
|
||||
|
||||
This content will be:
|
||||
3-columns-wide on large screens,
|
||||
4-columns-wide on medium screens,
|
||||
12-columns-wide on small screens -->
|
||||
<ul class='fields'> <!--from http://learn.ractivejs.org/partials/2 -->
|
||||
{{#each fields:i}}
|
||||
{{>field}}
|
||||
{{/each}}
|
||||
<strong>Fields are in here</strong>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m8 l9"> <!-- Note that "m8 l9" was added -->
|
||||
<!-- Teal page content
|
||||
|
||||
This content will be:
|
||||
9-columns-wide on large screens,
|
||||
8-columns-wide on medium screens,
|
||||
12-columns-wide on small screens -->
|
||||
|
||||
<div class="card z-depth-2">
|
||||
<div class="card-content">
|
||||
<span class="card-title grey-text">{{studentName}} - {{age}}</span>
|
||||
<p>I am a very simple card. I am good at containing small bits of information.
|
||||
I am convenient because I require little markup to use effectively.</p>
|
||||
Class 8Y/IT1 <br>
|
||||
ICT Module Box <br>
|
||||
<br>
|
||||
Behaviour <br>
|
||||
etc. <br>
|
||||
<p>This is where the actual table data goes </p>
|
||||
|
||||
<table class="highlight">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-field="id">Name</th>
|
||||
<th data-field="name">Item Name</th>
|
||||
<th data-field="price">Item Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alvin</td>
|
||||
<td>Eclair</td>
|
||||
<td>$0.87</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Alan</td>
|
||||
<td>Jellybean</td>
|
||||
<td>$3.76</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Jonathan</td>
|
||||
<td>Lollipop</td>
|
||||
<td>$7.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shannon</td>
|
||||
<td>KitKat</td>
|
||||
<td>$9.99</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="col s12 m6 offset-m3">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<span class="card-title grey-text">{{studentName}} - {{age}}</span>
|
||||
@@ -8,4 +116,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +1,22 @@
|
||||
Ractive.components.teacher = Ractive.extend({
|
||||
template:'#teacher'
|
||||
});
|
||||
|
||||
// $(document).ready(function(){
|
||||
// // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
|
||||
// $('.modal-trigger').leanModal({
|
||||
// dismissible: false, // Modal can be dismissed by clicking outside of the modal
|
||||
// opacity: .5, // Opacity of modal background
|
||||
// in_duration: 300, // Transition in duration
|
||||
// out_duration: 200, // Transition out duration
|
||||
// ready: function() { alert('Ready'); }, // Callback for Modal open
|
||||
// complete: function() { alert('Closed'); } // Callback for Modal close
|
||||
// }
|
||||
// );
|
||||
// });
|
||||
|
||||
$(document).ready(function(){
|
||||
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
|
||||
$('.modal-trigger').leanModal();
|
||||
});
|
||||
|
||||
|
||||
+7
-7
@@ -3,16 +3,9 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>RCard</title>
|
||||
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
|
||||
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
|
||||
|
||||
<!-- Compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
|
||||
|
||||
<!-- Compiled and minified JavaScript -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
|
||||
|
||||
<script src='/index.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -20,5 +13,12 @@
|
||||
|
||||
<div id='load'></div>
|
||||
|
||||
<script src='http://cdn.ractivejs.org/latest/ractive.js'></script>
|
||||
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
|
||||
|
||||
<!-- Compiled and minified JavaScript -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
|
||||
|
||||
<script src='/index.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user