Skip to content

Commit

Permalink
Merge pull request gertie-sheshe#1 from andela-gnyenyeshi/improve-sty…
Browse files Browse the repository at this point in the history 
…ling

Improve styling
  • Loading branch information
andela-gnyenyeshi committed Apr 29, 2016
2 parents 4de1bc2 + a614a2f commit 7f86e7c
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 79 deletions.
22 changes: 12 additions & 10 deletions public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@
font-weight: normal;
font-style: normal;
}
nav .brand-logo {
/*nav .brand-logo {
left: 3%;
}

*/
#black {
background-color: #000;
}
Expand Down Expand Up @@ -47,18 +47,20 @@ nav .brand-logo {

#register {
font-family: learningcurve;
margin-left: 40px;
}

.row {
margin-left: 40px;
}

.delete {
cursor: pointer;
}

#get-button {
margin-bottom: 30px;
left: 45%;
.centered {
display: flex;
justify-content: center;
align-items: center;
}

@media screen and (min-width: 480px) {
.brand-logo {
margin-left: 2%;
}
}
93 changes: 64 additions & 29 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,45 +9,80 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tech In Pink</title>
</head>

<body>
<nav>
<div class="nav-wrapper #ff4081 pink darken-4">
<a id="font" href="#" class="brand-logo">RegisterAPP</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a id="get-started">GET STARTED</a></li>
</ul>
<div class="row">
<nav>
<div class="nav-wrapper #ff4081 pink darken-4">
<a id="font" href="#" class="brand-logo">RegisterAPP</a>
<a href="#" data-activates="nav-side" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a class="get-started">GET STARTED</a></li>
</ul>
<ul id="nav-side" class="side-nav">
<li><a class="get-started">GET STARTED</a></li>
</ul>
</div>
</nav>
<div id="o" class="row">
<div id="black">
<div id="back"></div>
<div class="content">
<div class="row">
<div class="col s12">
<h2 id="font">Tech In Pink</h2>
<h4 id="font">Register all the awesome ladies at Start from Scratch</h4>
</div>
</div>
</div>
</div>
</div>
</nav>

<div id="o">
<div id="black">
<div id="back"></div>
<div class="content">
<div class="row">
<div class="col s12">
<h2 id="font">Tech In Pink</h2>
<h4 id="font">Register all the awesome ladies at Start from Scratch</h4>
<div id="p" class='row'>
<h4 class='col s12' id='register'>Register Attendee: </h4>
<form class='col s12'>
<div class='row'>
<div class='input-field col s6'>
<input type='text' id='attendee'>
<label for='attendee'> Attendee </label>
</div>
</div>
<div class='row'>
<div class='input-field col s6'>
<input type='email' id='email'>
<label for='email'> Email </label>
<a id='post-button' class='waves-effect waves-light btn #880e4f pink darken-4'>Add</a>
</div>
</div>
</form>
<div class='container centered'><a id='get-button' class='waves-effect waves-light btn #880e4f pink darken-4'>View all</a></div>
<br/>
<hr>
<div class='col s12'>
<table class='striped' id='list'>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Venue</th>
<th>Day</th>
</tr>
</thead>
<tbody>
<tr>
<td class='name'>Gertrude</td>
<td>[email protected]</td>
<td>Andela</td>
<td>Saturday</td>
<td><i class='material-icons delete'>delete</i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<!-- <div>
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
</div>
</form>
</div> -->
<!-- <a id="get-button" class="waves-effect waves-light btn #880e4f pink darken-4">GET</a>
<a id="post-button" class="waves-effect waves-light btn #880e4f pink darken-4">POST</a> -->
</body>

</html>
50 changes: 10 additions & 40 deletions public/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
$(function () {

$(".button-collapse").sideNav();

// GET function
$(document).on('click', '#get-button', function() {
$.ajax({
Expand Down Expand Up @@ -65,45 +68,12 @@ $(function () {
});

// GET STARTED button function
$('#get-started').on('click', function() {
document.getElementById('o').innerHTML = "<h4 id='register'>Register Attendee: </h4> " +
"<form class='col s12'> " +
"<div class='row'> " +
"<div class='input-field col s6'> " +
"<input type='text' id='attendee'> " +
"<label for='attendee'> Attendee </label>" +
"</div> " +
"</div>" +
"<div class='row'> " +
"<div class='input-field col s6'> " +
"<input type='email' id='email'> " +
"<label for='email'> Email </label>" +
"<a id='post-button' class='waves-effect waves-light btn #880e4f pink darken-4'>Add</a>" +
"</div> " +
"</div>" +
"</form> " +
"<a id='get-button' class='waves-effect waves-light btn #880e4f pink darken-4 col s2 offset-s8'>View all</a><hr>" +
"<div class='row'> " +
"<table class='striped col s10 offset-s1' id='list'> " +
"<thead> " +
"<tr> " +
"<th>Name</th> " +
"<th>Email</th> " +
"<th>Venue</th> " +
"<th>Day</th>" +
"</tr> " +
"</thead> " +
"<tbody> " +
"<tr> " +
"<td class='name'>Gertrude</td> " +
"<td>[email protected]</td>" +
"<td>Andela</td>" +
"<td>Saturday</td> " +
"<td><i class='material-icons delete'>delete</i></td> " +
"</tr> " +
"</tbody> " +
"</table> " +
"</div>";
$('#get-started').text('');
$('.get-started').on('click', function() {
$('#o').fadeOut();
$('#p').show();
$('.get-started').text('');
$('#nav-side').hide();
$('#sidenav-overlay').hide();
$('.button-collapse').hide();
});
});

0 comments on commit 7f86e7c

Please sign in to comment.