Skip to content

Commit 975d503

Browse files
mwunderlmwunderl
committed
navbar and style
1 parent 9c19686 commit 975d503

File tree

3 files changed

+158
-14
lines changed

3 files changed

+158
-14
lines changed

‎public/css/scorekeep.css‎

Lines changed: 124 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,131 @@
1-
/* Main page */
2-
#main, #session {
1+
/*
2+
* Base structure
3+
*/
4+
5+
html,
6+
body {
7+
height: 100%;
8+
background-color: #fff;
9+
}
10+
body {
11+
color: #000;
312
text-align: center;
4-
width: 300px;
5-
padding: 10px;
6-
margin: 10px;
7-
position: absolute;
8-
left: 10px;
913
}
10-
#game {
14+
15+
/* Extra markup and styles for table-esque vertical and horizontal centering */
16+
.site-wrapper {
17+
display: table;
18+
width: 100%;
19+
height: 100%; /* For at least Firefox */
20+
min-height: 100%;
21+
}
22+
.site-wrapper-inner {
23+
display: table-cell;
24+
vertical-align: top;
25+
}
26+
.cover-container {
27+
margin-right: auto;
28+
margin-left: auto;
29+
}
30+
31+
/* Padding for spacing */
32+
.inner {
33+
padding: 2rem;
34+
}
35+
36+
/*
37+
* Header
38+
*/
39+
40+
.masthead {
41+
margin-bottom: 15px;
42+
padding-bottom: 10px;
43+
background-color: #fff;
44+
}
45+
46+
.masthead-brand {
47+
margin-bottom: 0;
48+
}
49+
50+
.nav-masthead .nav-link {
51+
padding: .25rem 0;
52+
font-weight: bold;
53+
color: #FF851B;
54+
}
55+
56+
.nav-masthead .nav-link + .nav-link {
57+
margin-left: 1rem;
58+
}
59+
60+
.nav-masthead .active {
61+
color: #000;
62+
}
63+
64+
@media (min-width: 48em) {
65+
.masthead-brand {
66+
float: left;
67+
}
68+
.nav-masthead {
69+
float: right;
70+
}
71+
}
72+
73+
74+
/*
75+
* Cover
76+
*/
77+
78+
.cover {
79+
padding: 0 1.5rem;
80+
}
81+
.cover .btn-lg {
82+
padding: .75rem 1.25rem;
83+
font-weight: bold;
84+
}
85+
86+
/*
87+
* Affix and center
88+
*/
89+
90+
@media (min-width: 40em) {
91+
/* Pull out the header and footer */
92+
.masthead {
93+
position: fixed;
94+
top: 0;
95+
}
96+
.mastfoot {
97+
position: fixed;
98+
bottom: 0;
99+
}
100+
/* Start the vertical centering */
101+
.site-wrapper-inner {
102+
vertical-align: middle;
103+
}
104+
/* Handle the widths */
105+
.masthead,
106+
.mastfoot,
107+
.cover-container {
108+
width: 100%; /* Must be percentage or pixels for horizontal alignment */
109+
}
110+
}
111+
112+
@media (min-width: 62em) {
113+
.masthead,
114+
.mastfoot,
115+
.cover-container {
116+
width: 42rem;
117+
}
118+
}
119+
/* Main page */
120+
#instructions {
121+
display: none;
122+
margin-top: 75px;
123+
}
124+
#main, #session, #game {
11125
text-align: center;
12126
width: 350px;
13127
padding: 10px;
14-
margin: 10px;
15-
position: absolute;
16-
left: 10px;
128+
margin: auto;
17129
}
18130
.session-game {
19131
text-align: left;
@@ -43,7 +155,7 @@
43155
.button {
44156
background-color: #f39c12;
45157
width: 100px;
46-
margin-left: 128px;
158+
margin-left: 176px;
47159
margin-top: 10px;
48160
border-radius: 5px;
49161
border-width: 2px;

‎public/index.html‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,41 @@
2424
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.js"></script>
2525
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
2626
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
27+
<script>
28+
function showhide(div) {
29+
if ( document.getElementById(div).style.display == 'block') {
30+
document.getElementById(div).style.display = 'none';
31+
}
32+
else {
33+
document.getElementById(div).style.display = 'block';
34+
}
35+
}
36+
</script>
2737
</head>
2838

2939
<body>
30-
<div class="navbar">Scorekeep</div>
31-
<div ng-view></div>
40+
<div class="site-wrapper">
41+
<div class="site-wrapper-inner">
42+
<div class="cover-container">
43+
<div class="masthead clearfix">
44+
<div class="inner">
45+
<h3 class="masthead-brand">Scorekeep</h3>
46+
<nav class="nav nav-masthead">
47+
<a class="nav-link" href='#/' onclick="showhide('instructions');return false;">Instructions</a>
48+
<a class="nav-link" target="blank" href="https://aws.amazon.com/elasticbeanstalk/">Powered by AWS Elastic Beanstalk</a>
49+
</nav>
50+
</div>
51+
</div>
52+
<div class="inner cover" id="instructions">
53+
<h3 class="cover-heading">Using the web app</h1>
54+
<p>Use the form below to create a user and session. When you click <b>Create</b>, the web app calls the Scorekeep API to create a user and a session, and joins the session lobby. If you don't enter a username, Scorekeep calls a separate web API to generate a random name.</p>
55+
<p>To create and join a second user to the session, open the web app in a second tab, enter the session ID shown in the lobby, and click <b>Join</b>.</p>
56+
<p>In the session lobby, enter a game name, and set the rules to <b>Tic Tac Toe</b>. Click <b>Create</b> to create a game.</p>
57+
<p>Choose <b>Play</b> with each user to start the game.</p>
58+
</div>
59+
<div ng-view></div>
60+
</div>
61+
</div>
62+
</div>
3263
</body>
3364
</html>

‎public/session.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<div id="session">
22
<div class="session-header">{{ session.name }}</div>
3+
<div>Session ID: {{ session.id }}</div>
34
<div id="user"><h6>{{ user.name}}</h6></div>
45
<div class="sub-header">Create a game</div>
56
<div id="create-game-form">

0 commit comments

Comments
 (0)