Refactor back button style
Make it easier to reuse these styles.
This commit is contained in:
parent
d0392a3e04
commit
368cd2f79a
6 changed files with 50 additions and 59 deletions
|
@ -14,8 +14,8 @@
|
||||||
</head>
|
</head>
|
||||||
<body class='signal index'>
|
<body class='signal index'>
|
||||||
<div class='title-bar' id='header'>
|
<div class='title-bar' id='header'>
|
||||||
<div class='back'>
|
<div class='new-conversation-title hide'>
|
||||||
<button></button>
|
<button class='back'></button>
|
||||||
<span class='title-text'>New Message</span>
|
<span class='title-text'>New Message</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
this.$gutter = $('#gutter');
|
this.$gutter = $('#gutter');
|
||||||
this.$contacts = $('#contacts');
|
this.$contacts = $('#contacts');
|
||||||
this.$fab = this.$el.find('.fab');
|
this.$fab = this.$el.find('.fab');
|
||||||
this.$back = this.$el.find('.back');
|
this.$back = this.$el.find('.new-conversation-title');
|
||||||
|
|
||||||
this.newConversationView = new Whisper.NewConversationView();
|
this.newConversationView = new Whisper.NewConversationView();
|
||||||
this.newConversationView.$el.hide().appendTo(this.$gutter);
|
this.newConversationView.$el.hide().appendTo(this.$gutter);
|
||||||
|
@ -40,7 +40,7 @@
|
||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
'keyup': 'keyup',
|
'keyup': 'keyup',
|
||||||
'click .back button': 'hideCompose',
|
'click .back': 'hideCompose',
|
||||||
'click .fab': 'showCompose',
|
'click .fab': 'showCompose',
|
||||||
'select #contacts .contact': 'openConversation',
|
'select #contacts .contact': 'openConversation',
|
||||||
'open .new-conversation': 'openConversation'
|
'open .new-conversation': 'openConversation'
|
||||||
|
|
|
@ -19,23 +19,6 @@
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-bar {
|
|
||||||
button {
|
|
||||||
height: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
margin-right: 8px;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
outline: 0;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timestamp {
|
.timestamp {
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,6 +23,10 @@ body {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -43,6 +47,27 @@ body {
|
||||||
font-family: $roboto-light;
|
font-family: $roboto-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.title-bar button {
|
||||||
|
width: $header-height;
|
||||||
|
height: $header-height;
|
||||||
|
line-height: $header-height;
|
||||||
|
margin-right: 8px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button { cursor: pointer; }
|
||||||
|
|
||||||
|
button.back {
|
||||||
|
float: left;
|
||||||
|
background: $header-color url('/images/back.png') no-repeat center center;
|
||||||
|
|
||||||
|
& + .title-text {
|
||||||
|
text-indent: -$header-height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
|
|
|
@ -26,21 +26,6 @@ input.new-message {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back {
|
|
||||||
display: none;
|
|
||||||
text-align: center;
|
|
||||||
button {
|
|
||||||
float: left;
|
|
||||||
width: $header-height;
|
|
||||||
height: $header-height;
|
|
||||||
background: $header-color url('/images/back.png') no-repeat center center;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
text-indent: -$header-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.new-conversation {
|
.new-conversation {
|
||||||
.new-group-update-form {
|
.new-group-update-form {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -34,6 +34,9 @@ body {
|
||||||
.clearfix:after {
|
.clearfix:after {
|
||||||
clear: both; }
|
clear: both; }
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -52,6 +55,24 @@ body {
|
||||||
line-height: 36px;
|
line-height: 36px;
|
||||||
font-family: Roboto-Light, "Helvetica Neue", Arial, Helvetica, sans-serif; }
|
font-family: Roboto-Light, "Helvetica Neue", Arial, Helvetica, sans-serif; }
|
||||||
|
|
||||||
|
.title-bar button {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
margin-right: 8px;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
outline: 0; }
|
||||||
|
|
||||||
|
button {
|
||||||
|
cursor: pointer; }
|
||||||
|
|
||||||
|
button.back {
|
||||||
|
float: left;
|
||||||
|
background: #f2f2f2 url("/images/back.png") no-repeat center center; }
|
||||||
|
button.back + .title-text {
|
||||||
|
text-indent: -36px; }
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: right;
|
float: right;
|
||||||
|
@ -132,17 +153,6 @@ input.new-message {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
outline: 0; }
|
outline: 0; }
|
||||||
|
|
||||||
.back {
|
|
||||||
display: none;
|
|
||||||
text-align: center; }
|
|
||||||
.back button {
|
|
||||||
float: left;
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
background: #f2f2f2 url("/images/back.png") no-repeat center center; }
|
|
||||||
.back span {
|
|
||||||
text-indent: -36px; }
|
|
||||||
|
|
||||||
.new-conversation .new-group-update-form {
|
.new-conversation .new-group-update-form {
|
||||||
display: none; }
|
display: none; }
|
||||||
.new-conversation .new-group-update-form button.create-group {
|
.new-conversation .new-group-update-form button.create-group {
|
||||||
|
@ -284,18 +294,6 @@ input.new-message {
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
opacity: 0.8; }
|
opacity: 0.8; }
|
||||||
|
|
||||||
.title-bar button {
|
|
||||||
height: 36px;
|
|
||||||
line-height: 36px;
|
|
||||||
margin-right: 8px;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
outline: 0;
|
|
||||||
color: white; }
|
|
||||||
|
|
||||||
button {
|
|
||||||
cursor: pointer; }
|
|
||||||
|
|
||||||
.timestamp {
|
.timestamp {
|
||||||
font-size: smaller; }
|
font-size: smaller; }
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue