Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Styled the 'games list' and 'create game' pages

  • Loading branch information...
commit 21efcb0e14c268f38221c642820a3fa7f5aa422c 1 parent 0d9cec5
@mads379 mads379 authored
Showing with 191 additions and 97 deletions.
  1. +117 −68 resources/style.css
  2. +72 −27 sass/style.scss
  3. +2 −2 src/page.opa
View
185 resources/style.css
@@ -116,19 +116,20 @@ body {
/* line 65, ../sass/style.scss */
.container {
- width: 60%;
- left: 20%;
- margin: 0px;
- top: 100px;
+ margin: 0px auto;
+ width: 755px;
+ left: 50%;
+ margin-left: -377px;
position: absolute;
+ top: 100px;
}
-/* line 72, ../sass/style.scss */
+/* line 74, ../sass/style.scss */
.container#login {
width: 325px;
left: 50%;
margin-left: -162px;
}
-/* line 78, ../sass/style.scss */
+/* line 80, ../sass/style.scss */
.container #login_box {
background: url("/resources/login_box_bg.png");
width: 233px;
@@ -136,34 +137,34 @@ body {
padding-top: 100px;
padding: 100px 46px 0px 46px;
}
-/* line 88, ../sass/style.scss */
+/* line 90, ../sass/style.scss */
.container #login_box .text input {
width: 221px;
}
-/* line 92, ../sass/style.scss */
+/* line 94, ../sass/style.scss */
.container #login_box .button {
float: right;
}
-/* line 94, ../sass/style.scss */
+/* line 96, ../sass/style.scss */
.container #login_box .button .inner {
width: 80px;
}
-/* line 99, ../sass/style.scss */
+/* line 101, ../sass/style.scss */
.container #login_box ul {
margin-top: 10px;
}
-/* line 101, ../sass/style.scss */
+/* line 103, ../sass/style.scss */
.container #login_box ul li {
margin-bottom: 5px;
}
-/* line 107, ../sass/style.scss */
+/* line 109, ../sass/style.scss */
.container .text {
background: url("/resources/input_field_left.png") top left no-repeat;
padding-left: 6px;
display: block;
height: 50px;
}
-/* line 115, ../sass/style.scss */
+/* line 117, ../sass/style.scss */
.container .text input {
background: url("/resources/input_field_right.png") top right no-repeat;
padding: 0px 6px 0px 0px;
@@ -175,15 +176,15 @@ body {
line-height: 13px;
font-weight: bold;
}
-/* line 127, ../sass/style.scss */
+/* line 129, ../sass/style.scss */
.container .text input::-webkit-input-placeholder {
color: #8e6c40;
}
-/* line 130, ../sass/style.scss */
+/* line 132, ../sass/style.scss */
.container .text input:-moz-placeholder {
color: #8e6c40;
}
-/* line 135, ../sass/style.scss */
+/* line 137, ../sass/style.scss */
.container .button {
background: url("/resources/button_sprite_left.png") top left no-repeat;
height: 50px;
@@ -192,7 +193,7 @@ body {
text-decoration: none;
text-align: center;
}
-/* line 145, ../sass/style.scss */
+/* line 147, ../sass/style.scss */
.container .button .inner {
background: url("/resources/button_sprite_right.png") top right no-repeat;
height: 50px;
@@ -205,55 +206,49 @@ body {
font-size: 14px;
text-shadow: white 1px 1px 1px;
}
-/* line 157, ../sass/style.scss */
+/* line 159, ../sass/style.scss */
.container .button:hover {
background-position: 0px -50px;
}
-/* line 159, ../sass/style.scss */
+/* line 161, ../sass/style.scss */
.container .button:hover .inner {
background-position: 100% -50px;
}
-/* line 163, ../sass/style.scss */
+/* line 165, ../sass/style.scss */
.container .button:active {
background-position: 0px -100px;
}
-/* line 165, ../sass/style.scss */
+/* line 167, ../sass/style.scss */
.container .button:active .inner {
background-position: 100% -100px;
}
-/* line 171, ../sass/style.scss */
+/* line 173, ../sass/style.scss */
.container ul {
text-align: left;
}
-/* line 175, ../sass/style.scss */
+/* line 177, ../sass/style.scss */
.container input[type=submit] {
float: right;
margin-top: 20px;
}
/* line 183, ../sass/style.scss */
-.container#lobby input[type=submit] {
- float: none;
- margin-top: 0px;
- width: 260px;
-}
-/* line 191, ../sass/style.scss */
.container#create label {
width: 100px;
display: inline-block;
}
-/* line 196, ../sass/style.scss */
+/* line 188, ../sass/style.scss */
.container#create input {
width: 300px;
}
-/* line 202, ../sass/style.scss */
-.container#lobby #main {
+/* line 195, ../sass/style.scss */
+.container#lobby #main, .container#lobby #create {
background: url("/resources/menu_box_background.png");
padding: 140px 40px 40px 40px;
height: 380px;
width: 675px;
}
-/* line 210, ../sass/style.scss */
-.container#lobby #main ul.menu {
+/* line 203, ../sass/style.scss */
+.container#lobby #main ul.menu, .container#lobby #create ul.menu {
margin: 0;
padding: 0;
border: 0;
@@ -263,7 +258,7 @@ body {
margin-top: 20px;
}
/* line 60, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.3/frameworks/compass/stylesheets/compass/typography/lists/_horizontal-list.scss */
-.container#lobby #main ul.menu li {
+.container#lobby #main ul.menu li, .container#lobby #create ul.menu li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
@@ -274,55 +269,109 @@ body {
padding-right: 4px;
}
/* line 48, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.3/frameworks/compass/stylesheets/compass/typography/lists/_horizontal-list.scss */
-.container#lobby #main ul.menu li:first-child, .container#lobby #main ul.menu li.first {
+.container#lobby #main ul.menu li:first-child, .container#lobby #main ul.menu li.first, .container#lobby #create ul.menu li:first-child, .container#lobby #create ul.menu li.first {
padding-left: 0;
}
/* line 49, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.3/frameworks/compass/stylesheets/compass/typography/lists/_horizontal-list.scss */
-.container#lobby #main ul.menu li:last-child {
+.container#lobby #main ul.menu li:last-child, .container#lobby #create ul.menu li:last-child {
padding-right: 0;
}
/* line 50, ../../../../../../Library/Ruby/Gems/1.8/gems/compass-0.11.3/frameworks/compass/stylesheets/compass/typography/lists/_horizontal-list.scss */
-.container#lobby #main ul.menu li.last {
+.container#lobby #main ul.menu li.last, .container#lobby #create ul.menu li.last {
padding-right: 0;
}
-/* line 215, ../sass/style.scss */
-.container#lobby #main ul.menu li {
+/* line 208, ../sass/style.scss */
+.container#lobby #main ul.menu li, .container#lobby #create ul.menu li {
margin: 10px 0px;
text-align: center;
}
-/* line 222, ../sass/style.scss */
+/* line 215, ../sass/style.scss */
+.container#lobby #create {
+ background-image: url("/resources/menu_create_background.png");
+ padding-top: 68px;
+ padding-bottom: 112px;
+}
+/* line 220, ../sass/style.scss */
+.container#lobby #create .text {
+ float: left;
+ margin-left: 110px;
+ width: 294px;
+}
+/* line 225, ../sass/style.scss */
+.container#lobby #create .button {
+ float: left;
+}
+/* line 228, ../sass/style.scss */
+.container#lobby #create .back {
+ margin-bottom: 190px;
+}
+/* line 233, ../sass/style.scss */
+.container#lobby #join {
+ background: url("/resources/games_background.png") top left no-repeat;
+ width: 435px;
+ height: 740px;
+ padding: 0px 20px;
+ margin-left: 140px;
+}
+/* line 241, ../sass/style.scss */
+.container#lobby #join .back {
+ margin-top: 40px;
+ margin-bottom: 25px;
+ color: #FFEBC7;
+}
+/* line 247, ../sass/style.scss */
+.container#lobby #join #gamesList {
+ margin: 20px;
+ height: 614px;
+ overflow: scroll;
+}
+/* line 252, ../sass/style.scss */
+.container#lobby #join #gamesList li {
+ color: #fff3e4;
+ background: url("/resources/pawn_games_list.png") center left no-repeat;
+ padding-left: 25px;
+ line-height: 28px;
+ height: 28px;
+ font-size: 18px;
+}
+/* line 259, ../sass/style.scss */
+.container#lobby #join #gamesList li:hover {
+ cursor: pointer;
+ color: #000;
+}
+/* line 267, ../sass/style.scss */
.container#lobby .back {
display: inline-block;
margin: 0px 0px 10px 0px;
- color: #000;
+ color: #fff6e4;
text-decoration: none;
}
-/* line 229, ../sass/style.scss */
+/* line 274, ../sass/style.scss */
.container#lobby .button span {
display: block;
width: 140px;
line-height: 50px;
}
-/* line 236, ../sass/style.scss */
+/* line 281, ../sass/style.scss */
.container#lobby .chat .input {
margin-left: 200px;
width: 300px;
}
-/* line 240, ../sass/style.scss */
+/* line 285, ../sass/style.scss */
.container#lobby .chat .input .text {
float: left;
width: 205px;
margin-right: 5px;
}
-/* line 246, ../sass/style.scss */
+/* line 291, ../sass/style.scss */
.container#lobby .chat .input .button {
float: left;
}
-/* line 248, ../sass/style.scss */
+/* line 293, ../sass/style.scss */
.container#lobby .chat .input .button .inner {
width: 70px;
}
-/* line 256, ../sass/style.scss */
+/* line 301, ../sass/style.scss */
.container #chat_messages {
clear: both;
border: 0px;
@@ -332,23 +381,23 @@ body {
color: #ffebc7;
text-shadow: black 1px 1px 1px;
}
-/* line 265, ../sass/style.scss */
+/* line 310, ../sass/style.scss */
.container #chat_messages li {
margin: 3px 0px;
}
-/* line 269, ../sass/style.scss */
+/* line 314, ../sass/style.scss */
.container #chat_messages .user {
font-weight: bold;
}
-/* line 275, ../sass/style.scss */
+/* line 320, ../sass/style.scss */
#status {
height: 45px;
padding-bottom: 30px;
text-align: center;
color: #fff;
}
-/* line 281, ../sass/style.scss */
+/* line 326, ../sass/style.scss */
#status ul {
margin: 0;
padding: 0;
@@ -385,12 +434,12 @@ body {
#status ul li.last {
padding-right: 0;
}
-/* line 290, ../sass/style.scss */
+/* line 335, ../sass/style.scss */
#status ul li {
margin-left: 50px;
float: right;
}
-/* line 295, ../sass/style.scss */
+/* line 340, ../sass/style.scss */
#status ul span {
color: #fff;
}
@@ -398,7 +447,7 @@ body {
/*
The game view
*/
-/* line 309, ../sass/style.scss */
+/* line 354, ../sass/style.scss */
.game .chat {
position: absolute;
left: 0px;
@@ -408,12 +457,12 @@ body {
width: 300px;
height: 100%;
}
-/* line 318, ../sass/style.scss */
+/* line 363, ../sass/style.scss */
.game .chat .input {
position: absolute;
bottom: 10px;
}
-/* line 324, ../sass/style.scss */
+/* line 369, ../sass/style.scss */
.game #board {
position: absolute;
left: 300px;
@@ -421,7 +470,7 @@ body {
top: 0%;
right: 0%;
}
-/* line 331, ../sass/style.scss */
+/* line 376, ../sass/style.scss */
.game #board .wood {
position: relative;
left: 50%;
@@ -431,7 +480,7 @@ body {
padding: 30px;
background: url("/resources/board-bg.png") 0px 0px no-repeat;
}
-/* line 342, ../sass/style.scss */
+/* line 387, ../sass/style.scss */
.game #waiting {
z-index: 1;
position: absolute;
@@ -440,7 +489,7 @@ body {
top: 0px;
background: rgba(0, 0, 0, 0.5);
}
-/* line 350, ../sass/style.scss */
+/* line 395, ../sass/style.scss */
.game #waiting h1 {
text-align: center;
color: #fff;
@@ -457,24 +506,24 @@ body {
/*
End of game view
*/
-/* line 369, ../sass/style.scss */
+/* line 414, ../sass/style.scss */
td, th {
text-align: center;
width: 75px;
height: 75px;
}
-/* line 375, ../sass/style.scss */
+/* line 420, ../sass/style.scss */
.selected {
background: green;
}
-/* line 379, ../sass/style.scss */
+/* line 424, ../sass/style.scss */
.movable {
background: orange;
}
-/* line 384, ../sass/style.scss */
+/* line 429, ../sass/style.scss */
.hidden {
display: none;
}
@@ -482,7 +531,7 @@ td, th {
/*
forms
*/
-/* line 392, ../sass/style.scss */
+/* line 437, ../sass/style.scss */
.error_container {
background: #b30a0a;
margin: 20px 0px;
@@ -490,19 +539,19 @@ td, th {
border: 2px solid black;
color: white;
}
-/* line 399, ../sass/style.scss */
+/* line 444, ../sass/style.scss */
.error_container ul {
text-align: left;
padding-left: 20px;
list-style: disc;
}
-/* line 406, ../sass/style.scss */
+/* line 451, ../sass/style.scss */
.no_errors {
display: none;
}
-/* line 410, ../sass/style.scss */
+/* line 455, ../sass/style.scss */
.has_errors {
display: block;
}
View
99 sass/style.scss
@@ -63,11 +63,13 @@ body {
}
.container {
- width : 60%;
- left : 20%;
- margin : 0px;
- top : 100px;
- position:absolute;
+
+ margin : 0px auto;
+ width : 755px;
+ left : 50%;
+ margin-left: -377px;
+ position :absolute;
+ top: 100px;
&#login {
width : 325px;
@@ -176,17 +178,7 @@ body {
float : right;
margin-top: 20px;
}
-
-
-
- &#lobby {
- input[type=submit] {
- float : none;
- margin-top: 0px;
- width : 260px;
- }
- }
-
+
&#create {
label {
width : 100px;
@@ -197,9 +189,10 @@ body {
width: 300px;
}
}
-
+
&#lobby {
- #main {
+
+ #main, #create {
$padding-top: 140px;
$padding : 40px;
background : url('/resources/menu_box_background.png');
@@ -218,19 +211,71 @@ body {
}
}
}
+
+ #create {
+ background-image: url('/resources/menu_create_background.png');
+ padding-top: 140px - 72px;
+ padding-bottom: 72px + 40px;
+ .text {
+ float: left;
+ margin-left: 110px;
+ width: 294px;
+ }
+ .button {
+ float: left;
+ }
.back {
- display : inline-block;
- margin : 0px 0px 10px 0px;
- color : #000;
- text-decoration: none;
+ margin-bottom: 190px;
}
-
- .button span {
- display: block;
- width: 140px;
- line-height: 50px;
+ }
+
+ #join {
+ $padding: 20px;
+ background: url('/resources/games_background.png') top left no-repeat;
+ width: 475px - ($padding*2);
+ height: 740px;
+ padding: 0px $padding;
+ margin-left: 140px;
+
+ .back {
+ margin-top: 40px;
+ margin-bottom: 25px;
+ color: #FFEBC7;
}
+
+ #gamesList {
+ margin : 20px;
+ height : 614px;
+ overflow: scroll;
+
+ li {
+ color : #fff3e4;
+ background : url('/resources/pawn_games_list.png') center left no-repeat;
+ padding-left: 25px;
+ line-height : 28px;
+ height : 28px;
+ font-size : 18px;
+ &:hover {
+ cursor: pointer;
+ color: #000;
+ }
+ }
+ }
+ }
+
+ .back {
+ display : inline-block;
+ margin : 0px 0px 10px 0px;
+ color : #fff6e4;
+ text-decoration: none;
+ }
+
+ .button span {
+ display: block;
+ width: 140px;
+ line-height: 50px;
+ }
.chat {
.input {
View
4 src/page.opa
@@ -86,8 +86,8 @@ Page = {{
<ul>
<a class="back" onclick={ _ -> create_back_onclick() }> ← Back</a>
<li>
- <input id=#name type="text" placeholder="Name of game" onnewline={_ -> create_game_onclick() }/>
- <a class="button" onclick={ _ -> create_game_onclick() }>Create</a>
+ <span class="text"><input id=#name type="text" placeholder="Name of game" onnewline={_ -> create_game_onclick() }/></span>
+ <a class="button" onclick={ _ -> create_game_onclick() }><span class="inner">Create</span></a>
</li>
</ul>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.