Skip to content
Browse files

design update

  • Loading branch information...
1 parent 05f0f0c commit 666a62fc37f3ab449b30df31962855951126f8ea @mrflix mrflix committed
Showing with 51 additions and 54 deletions.
  1. +25 −28 app/assets/design.html
  2. +8 −19 app/styles/home.styl
  3. +18 −7 app/styles/main.styl
View
53 app/assets/design.html
@@ -12,36 +12,20 @@
</head>
<body class="home">
<div id="home">
- <h1>CGIP Form</h1>
+ <h1>Select a country</h1>
<nav class="countrys">
- <a href="#actor_editor" class="bangladesh" data-country="bangladesh">
- <div class="flag" style="background-image: url(images/flags/bd.png);"></div>
- <span>Bangladesh</span>
- </a>
- <a class="dominicanRepublic" data-country="dominicanRepublic">
- <div class="flag" style="background-image: url(images/flags/do.png);"></div>
- <span>Dominican Republic</span>
- </a>
- <a class="kenya" data-country="kenya">
- <div class="flag" style="background-image: url(images/flags/ke.png);"></div>
- <span>Kenya</span>
- </a>
- <a class="maldives" data-country="maldives">
- <div class="flag" style="background-image: url(images/flags/mv.png);"></div>
- <span>Maldives</span>
- </a>
- <a class="mexico" data-country="mx">
- <div class="flag" style="background-image: url(images/flags/mx.png);"></div>
- <span>Mexico</span>
- </a>
- <a class="peru" data-country="pe">
- <div class="flag" style="background-image: url(images/flags/pe.png);"></div>
- <span>Peru</span>
- </a>
+ <a href="#bangladesh" class="bangladesh" title="Bangladesh" style="background-image: url(images/flags/bd.png);"></a>
+ <a href="#dominicanRepublic" class="dominicanRepublic" title="Dominican Republic" style="background-image: url(images/flags/do.png);"></a>
+ <a href="#kenya" class="kenya" title="Kenya" style="background-image: url(images/flags/ke.png);"></a>
+ <a href="#maldives" class="maldives" title="Maldives" style="background-image: url(images/flags/mv.png);"></a>
+ <a href="#mexico" class="mexico" title="Mexico" style="background-image: url(images/flags/mx.png);"></a>
+ <a href="#peru" class="peru" title="Peru" style="background-image: url(images/flags/pe.png);"></a>
</nav>
</div>
- <div id="actor_editor" class="bangladesh">
- <h1>Bangladesh</h1>
+ <div id="actor_editor">
+ <nav class="breadcrumb">
+ <a href="#">Countrys</a><span>&gt;</span><a class="selected">Bangladesh</a>
+ <nav>
<div class="actor" style="left: 342px; top: 145px; ">
<div class="name">Actor A</div>
</div>
@@ -51,6 +35,19 @@
</div>
<script type="text/javascript" src="../vendor/scripts/jquery-1.7.2.js"></script>
<script>
+$('.countrys a').click(function(event){
+ event.preventDefault();
+ router('actor_editor', this.className);
+ $('#actor_editor .breadcrumb .selected').text(this.title);
+});
+
+function router(hash, className){
+ $('#actor_editor').removeClass().addClass(className);
+ location.hash = hash;
+}
+
+router('actor_editor', 'dominicanRepublic');
+
var connection = function(x0, y0, x1, y1, size, color){
this.update = function(x0, y0, x1, y1, size, color){
this.size = size || this.size;
@@ -108,7 +105,7 @@
return this.update(x0, y0, x1, y1, size, color);
};
-var bd = new connection(422, 225, 273, 469, 5, 'white');
+var bd = new connection(342, 145, 193, 389, 5, 'white');
$('#actor_editor').append(bd);
</script>
</body>
View
27 app/styles/home.styl
@@ -8,24 +8,23 @@
#actor_editor
opacity 0
z-index -1
- transition 250ms
+ background #222
&.bangladesh
- background hsl(133,54%,76%)
+ background hsl(205,100%,8%)
.actor
- background hsl(168,34%,55%)
+ background hsl(205,100%,34%)
&:target
opacity 1
z-index 1
h1
margin 0 21px
font-size 144px
- color hsl(133,54%,80%)
h1
- margin 0
+ margin 0 0 21px
+ font-size 144px
line-height 1
- font-size 72px
+ color rgba(255,255,255,.05)
font-weight 300
- color white
.countrys
margin 21px 0
@@ -33,16 +32,6 @@
a
margin 0 21px 21px 0
width 200px
- color white
- font-size 14px
- line-height 30px
- text-decoration none
- text-align center
- float left
- cursor pointer
- .flag
height 120px
- span
- display block
- text-overflow hidden
-
+ float left
+ display block
View
25 app/styles/main.styl
@@ -35,11 +35,22 @@ body
border-radius 160px
cursor default
z-index 1
-#actor_editor
- top 0
- left 0
- width 100%
- height 100%
- position absolute
+#actor_editor
+ top 0
+ left 0
+ width 100%
+ height 100%
+ position absolute
canvas, svg
- position absolute
+ position absolute
+
+.breadcrumb
+ margin 21px
+ span
+ margin 0 5px
+ vertical-align text-bottom
+ a, span
+ color rgba(255,255,255,.34)
+ text-decoration none
+ &.selected
+ color white

0 comments on commit 666a62f

Please sign in to comment.
Something went wrong with that request. Please try again.