diff --git a/couchpotato/core/media/_base/search/static/search.js b/couchpotato/core/media/_base/search/static/search.js
index 5fa24888..760155f4 100644
--- a/couchpotato/core/media/_base/search/static/search.js
+++ b/couchpotato/core/media/_base/search/static/search.js
@@ -9,6 +9,12 @@ var BlockSearch = new Class({
var focus_timer = 0;
self.el = new Element('div.search_form').adopt(
+ new Element('a.icon-search', {
+ 'events': {
+ 'click': self.clear.bind(self),
+ 'touchend': self.clear.bind(self)
+ }
+ }),
new Element('div.input').adopt(
self.input = new Element('input', {
'placeholder': 'Search & add a new media',
@@ -29,12 +35,6 @@ var BlockSearch = new Class({
}).delay(100);
}
}
- }),
- new Element('a.icon2', {
- 'events': {
- 'click': self.clear.bind(self),
- 'touchend': self.clear.bind(self)
- }
})
),
self.result_container = new Element('div.results_container', {
diff --git a/couchpotato/core/media/_base/search/static/search.scss b/couchpotato/core/media/_base/search/static/search.scss
index def985fe..5084f380 100644
--- a/couchpotato/core/media/_base/search/static/search.scss
+++ b/couchpotato/core/media/_base/search/static/search.scss
@@ -1,101 +1,78 @@
+@import "couchpotato/static/style/mixins";
+
.search_form {
display: inline-block;
- vertical-align: middle;
- text-align: right;
- transition: all .4s cubic-bezier(0.9,0,0.1,1);
- z-index: 20;
- border: 0 solid transparent;
- border-bottom-width: 4px;
-}
- .search_form:hover {
- border-color: #047792;
- }
+ z-index: 200;
+ width: 44px;
- @media all and (max-width: 480px) {
- .search_form {
- right: 44px;
- }
- }
-
- .search_form.focused,
- .search_form.shown {
- border-color: #04bce6;
- }
-
- .search_form .input {
- height: 100%;
- overflow: hidden;
- width: 45px;
- transition: all .4s cubic-bezier(0.9,0,0.1,1);
- }
-
- .search_form.focused .input,
- .search_form.shown .input {
- width: 380px;
- background: #4e5969;
- }
-
- .search_form .input input {
- border-radius: 0;
- display: block;
- border: 0;
- background: none;
- color: #FFF;
- font-size: 25px;
- height: 100%;
- width: 100%;
- opacity: 0;
- padding: 0 40px 0 10px;
- transition: all .4s ease-in-out .2s;
- }
- .search_form.focused .input input,
- .search_form.shown .input input {
- opacity: 1;
- }
-
- .search_form input::-ms-clear {
- width : 0;
- height: 0;
- }
-
- @media all and (max-width: 480px) {
- .search_form .input input {
- font-size: 15px;
- }
-
- .search_form.focused .input,
- .search_form.shown .input {
- width: 277px;
- }
- }
-
- .search_form .input a {
+ a {
position: absolute;
- top: 0;
- right: 0;
- width: 44px;
+ z-index: 2;
+ top: 50%;
+ left: 0;
height: 100%;
cursor: pointer;
- vertical-align: middle;
text-align: center;
- line-height: 66px;
- font-size: 15px;
color: #FFF;
+ font-size: 20px;
+
+ @include translateY(-50%);
+
}
- .search_form .input a:after {
- content: "\e03e";
+ .input {
+ position: relative;
+ height: 100%;
+
+ &:before {
+ @include transform(rotate(45deg) translateY(-60%));
+ content: '';
+ display: block;
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ background: $background_color;
+ left: 33px;
+ top: 50%;
+ z-index: 1;
+ opacity: 0;
}
- .search_form.shown.filled .input a:after {
- content: "\e04e";
- }
+ input {
+ opacity: 0;
+ position: absolute;
+ top: 0;
+ left: 44px;
+ height: 100%;
+ width: 100%;
+ z-index: 1;
+ box-shadow: 0 0 4px rgba(0,0,0,.1);
- @media all and (max-width: 480px) {
- .search_form .input a {
- line-height: 44px;
+ &::-ms-clear {
+ width : 0;
+ height: 0;
}
}
+ }
+
+ &.focused,
+ &.shown {
+ border-color: #04bce6;
+
+ .input {
+ width: 380px;
+
+ &:before {
+ opacity: 1;
+ }
+
+ input {
+ opacity: 1;
+ }
+ }
+ }
+
+}
.search_form .results_container {
text-align: left;
diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss
index df6d216d..910dfbf7 100644
--- a/couchpotato/core/media/movie/_base/static/movie.scss
+++ b/couchpotato/core/media/movie/_base/static/movie.scss
@@ -6,7 +6,7 @@
}
.page.movies_wanted, .page.movies_manage {
- top: $header-height;
+ top: $header_height;
padding: 0;
}
@@ -20,7 +20,7 @@
.movie {
display: block;
- border-top: 1px solid #f2f2f2;
+ border-top: 1px solid $theme_off;
position: relative;
cursor: pointer;
@@ -146,14 +146,14 @@
.page.movie_details {
- $gab-width: $header-width/3;
+ $gab-width: $header_width/3;
.overlay {
position: fixed;
top: 0;
bottom: 0;
right: 0;
- left: $header-width;
+ left: $header_width;
background: rgba(0,0,0,.6);
border-radius: 3px 0 0 3px;
@@ -161,7 +161,7 @@
display: inline-block;
text-align: center;
font-size: 60px;
- line-height: $header-height;
+ line-height: $header_height;
color: #FFF;
width: $gab-width;
cursor: pointer;
@@ -174,7 +174,7 @@
top: 0;
bottom: 0;
right: 0;
- left: $header-width + $gab-width;
+ left: $header_width + $gab-width;
background: $background_color;
z-index: 200;
border-radius: 3px 0 0 3px;
@@ -183,7 +183,7 @@
margin: 0;
padding: 0 $padding;
font-size: 24px;
- line-height: $header-height;
+ line-height: $header_height;
color: rgba(0,0,0,.5);
font-weight: 300;
}
@@ -207,10 +207,8 @@
.button {
padding: 0 $padding/2;
- line-height: $header-height;
- font-size: 24px;
+ line-height: $header_height;
color: rgba(0, 0, 0, 0.5);
- cursor: pointer;
}
.counter, .more_menu, .actions {
@@ -218,7 +216,7 @@
}
.counter {
- line-height: $header-height;
+ line-height: $header_height;
}
.actions {
@@ -253,7 +251,7 @@
padding: $padding/2 $padding/2 $padding/2 $padding*1.5;
background: $background_color;
border: none;
- border-bottom: 1px solid #f2f2f2;
+ border-bottom: 1px solid $theme_off;
}
}
@@ -270,7 +268,7 @@
cursor: default;
&.active {
- background: #f2f2f2;
+ background: $theme_off;
}
&.available {
@@ -278,41 +276,16 @@
cursor: pointer;
&:hover {
- background: #f2f2f2;
+ background: $theme_off;
}
}
}
}
}
- .more_menu {
- position: relative;
- line-height: 1em;
-
- .wrapper {
- display: none;
- position: absolute;
- width: 320px;
- right: 0;
- top: $header-height;
- background: $background_color;
-
- ul {
- overflow: hidden;
- }
-
- li {
- display: block;
- }
- }
-
- &.show {
- background: #f2f2f2;
-
- .wrapper {
- display: block;
- }
- }
+ .more_menu .wrapper {
+ width: 320px;
+ top: $header_height;
}
}
diff --git a/couchpotato/core/notifications/core/static/notification.js b/couchpotato/core/notifications/core/static/notification.js
index 96e96d58..2a67e78e 100644
--- a/couchpotato/core/notifications/core/static/notification.js
+++ b/couchpotato/core/notifications/core/static/notification.js
@@ -21,7 +21,7 @@ var NotificationBase = new Class({
App.addEvent('load', function(){
App.block.notification = new BlockMenu(self, {
- 'button_class': 'icon2.eye-open',
+ 'button_class': 'icon-notifications',
'class': 'notification_menu',
'onOpen': self.markAsRead.bind(self)
});
diff --git a/couchpotato/static/fonts/config.json b/couchpotato/static/fonts/config.json
index 96dfc93a..2add417d 100644
--- a/couchpotato/static/fonts/config.json
+++ b/couchpotato/static/fonts/config.json
@@ -6,6 +6,24 @@
"units_per_em": 1000,
"ascent": 850,
"glyphs": [
+ {
+ "uid": "48cc210e59ff4bc56b6c8fba6eb384b8",
+ "css": "emo-coffee",
+ "code": 59401,
+ "src": "fontelico"
+ },
+ {
+ "uid": "078fec38562c3f83a1201a908040c141",
+ "css": "emo-sunglasses",
+ "code": 59402,
+ "src": "fontelico"
+ },
+ {
+ "uid": "04688d76a33ce7a7950e40fae79c08ac",
+ "css": "emo-cry",
+ "code": 59400,
+ "src": "fontelico"
+ },
{
"uid": "9dd9e835aebe1060ba7190ad2b2ed951",
"css": "search",
@@ -47,6 +65,12 @@
"css": "dots",
"code": 59395,
"src": "entypo"
+ },
+ {
+ "uid": "51fb22f9ff9d7f60c95ef31e4c59502d",
+ "css": "notifications",
+ "code": 59399,
+ "src": "mfglabs"
}
]
}
\ No newline at end of file
diff --git a/couchpotato/static/fonts/icons.eot b/couchpotato/static/fonts/icons.eot
index 69575550..2dc6375d 100644
Binary files a/couchpotato/static/fonts/icons.eot and b/couchpotato/static/fonts/icons.eot differ
diff --git a/couchpotato/static/fonts/icons.svg b/couchpotato/static/fonts/icons.svg
index a139ac46..3d4b8671 100644
--- a/couchpotato/static/fonts/icons.svg
+++ b/couchpotato/static/fonts/icons.svg
@@ -13,6 +13,10 @@
+
+
+
+
\ No newline at end of file
diff --git a/couchpotato/static/fonts/icons.ttf b/couchpotato/static/fonts/icons.ttf
index 0316d9f5..60102812 100644
Binary files a/couchpotato/static/fonts/icons.ttf and b/couchpotato/static/fonts/icons.ttf differ
diff --git a/couchpotato/static/fonts/icons.woff b/couchpotato/static/fonts/icons.woff
index 128e0863..4debfbc1 100644
Binary files a/couchpotato/static/fonts/icons.woff and b/couchpotato/static/fonts/icons.woff differ
diff --git a/couchpotato/static/scripts/couchpotato.js b/couchpotato/static/scripts/couchpotato.js
index 97565371..5431db74 100644
--- a/couchpotato/static/scripts/couchpotato.js
+++ b/couchpotato/static/scripts/couchpotato.js
@@ -79,7 +79,7 @@
$(self.block.header).addClass('header').adopt(
self.block.navigation = new BlockHeader(self, {}),
self.block.search = new BlockSearch(self, {}),
- self.block.more = new BlockMenu(self, {'button_class': 'icon2.cog'})
+ self.block.more = new BlockMenu(self, {'button_class': 'icon-settings'})
),
self.content = new Element('div.content').adopt(
self.pages_container = new Element('div.pages'),
diff --git a/couchpotato/static/style/fonts.scss b/couchpotato/static/style/fonts.scss
index ff4300a6..50717f50 100644
--- a/couchpotato/static/style/fonts.scss
+++ b/couchpotato/static/style/fonts.scss
@@ -1,11 +1,11 @@
/* Fonts */
@font-face {
font-family: 'icons';
- src: url('../fonts/icons.eot?74719532');
- src: url('../fonts/icons.eot?74719532#iefix') format('embedded-opentype'),
- url('../fonts/icons.woff?74719532') format('woff'),
- url('../fonts/icons.ttf?74719532') format('truetype'),
- url('../fonts/icons.svg?74719532#icons') format('svg');
+ src: url('../fonts/icons.eot?74719534');
+ src: url('../fonts/icons.eot?74719534#iefix') format('embedded-opentype'),
+ url('../fonts/icons.woff?74719534') format('woff'),
+ url('../fonts/icons.ttf?74719534') format('truetype'),
+ url('../fonts/icons.svg?74719534#icons') format('svg');
font-weight: normal;
font-style: normal;
}
@@ -15,6 +15,9 @@
font-style: normal;
font-weight: normal;
speak: none;
+
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
.icon-left-arrow:before { content: '\e800'; }
.icon-settings:before { content: '\e801'; }
@@ -23,6 +26,10 @@
.icon-filter:before { content: '\e804'; }
.icon-thumb:before { content: '\e805'; }
.icon-list:before { content: '\e806'; }
+.icon-notifications:before { content: '\e807'; }
+.icon-emo-cry:before { content: '\e808'; }
+.icon-emo-coffee:before { content: '\e809'; }
+.icon-emo-sunglasses:before { content: '\e80a'; }
@font-face {
font-family: 'OpenSans';
diff --git a/couchpotato/static/style/main.scss b/couchpotato/static/style/main.scss
index 6111ee48..e933b4e1 100644
--- a/couchpotato/static/style/main.scss
+++ b/couchpotato/static/style/main.scss
@@ -25,11 +25,16 @@ a {
input, textarea, select {
font-size: 1em;
font-weight: 300;
+ padding: $padding/2;
+ background: $background_color;
+ border: 1px solid #f2f2f2;
}
+/* Header */
.header {
- width: $header-width;
- min-width: $header-width;
+ width: $header_width;
+ min-width: $header_width;
+ position: relative;
a {
color: #FFF;
@@ -39,6 +44,7 @@ input, textarea, select {
.navigation {
.logo {
+ opacity: .05;
background: $couch_color;
display: block;
text-align: center;
@@ -46,8 +52,8 @@ input, textarea, select {
font-family: Lobster, serif;
color: #FFF;
font-size: 38px;
- line-height: $header-height;
- height: $header-height;
+ line-height: $header_height;
+ height: $header_height;
span:nth-child(odd){
display: block;
@@ -69,8 +75,80 @@ input, textarea, select {
}
}
+
+
+ .menu, .search_form, .notification_menu {
+ position: absolute;
+ bottom: $padding / 3;
+ width: 44px;
+ height: 44px;
+
+ > a {
+ display: inline-block;
+ height: 100%;
+ width: 100%;
+ text-align: center;
+ line-height: 44px;
+ }
+ }
+
+ .notification_menu {
+ left: 50%;
+ @include translateX(-50%);
+
+ .button:before {
+ font-size: 20px;
+ top: -2px;
+ }
+
+ ul {
+ min-height: 60px;
+ max-height: 300px;
+ overflow: auto;
+
+ &:empty:after {
+ content: 'No notifications (yet)';
+ text-align: center;
+ width: 100%;
+ position: absolute;
+ padding: 18px 0;
+ font-size: 15px;
+ font-style: italic;
+ opacity: .4;
+ }
+
+ &:empty:before {
+ content: '\e808';
+ font-family: "icons";
+ }
+ }
+ }
+
+ .menu {
+ left: $padding / 3;
+
+ .button:before {
+ font-size: 20px;
+ top: -2px;
+ }
+ }
+
+ .search_form {
+ right: $padding / 3;
+ }
+
+ .more_menu {
+
+ .wrapper {
+ bottom: 0;
+ left: 44px;
+ right: auto;
+ }
+
+ }
}
+/* Content */
.content {
@include flex(1 auto);
@@ -98,6 +176,7 @@ input, textarea, select {
}
}
+/* Page */
.page {
position: absolute;
top: 0;
@@ -116,8 +195,8 @@ input, textarea, select {
@include flexbox();
position: fixed;
top: 0;
- height: $header-height;
- left: $header-width;
+ height: $header_height;
+ left: $header_width;
right: 0;
background: $background_color;
border-radius: 3px 0 0 3px;
@@ -132,7 +211,7 @@ input, textarea, select {
a {
font-size: 24px;
- line-height: $header-height;
+ line-height: $header_height;
padding: $padding;
color: rgba(0,0,0,.5);
}
@@ -147,8 +226,85 @@ input, textarea, select {
}
+/* Page levels */
@for $i from 1 through 4 {
.level_#{$i} {
z-index: #{$i * 10};
}
}
+
+
+/* Menu basis */
+.more_menu {
+ position: relative;
+ line-height: 1em;
+
+ .button {
+ font-size: 24px;
+ cursor: pointer;
+ display: inline-block;
+
+ &:before {
+ position: relative;
+ }
+ }
+
+ .wrapper {
+ display: none;
+ position: absolute;
+ width: 320px;
+ right: 0;
+ background: $background_color;
+ z-index: 5000;
+
+ &:before {
+ @include transform(rotate(45deg) translateY(-60%));
+ content: '';
+ display: block;
+ position: absolute;
+ height: 20px;
+ width: 20px;
+ background: $background_color;
+ left: -10px;
+ bottom: 2px;
+ z-index: 1;
+ opacity: 0;
+ }
+
+ ul {
+ position: relative;
+ z-index: 2;
+ overflow: hidden;
+ }
+
+ li {
+ display: block;
+ line-height: 1em;
+
+ a {
+ display: block;
+ color: $text_color;
+ padding: $padding/4 $padding/2;
+ }
+
+ &:first-child a {
+ padding-top: $padding/2;
+ }
+
+ &:last-child a {
+ padding-bottom: $padding/2;
+ }
+ }
+ }
+
+ &.show {
+
+ .wrapper {
+ display: block;
+
+ &:before {
+ opacity: 1;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/couchpotato/static/style/mixins.scss b/couchpotato/static/style/mixins.scss
index 54f0d203..a139ec98 100644
--- a/couchpotato/static/style/mixins.scss
+++ b/couchpotato/static/style/mixins.scss
@@ -1,10 +1,11 @@
$couch_color: #ac0000;
$background_color: #FFF;
$menu_color: #111;
-$theme_off: #f2f2f2;
+$theme_off: #eaeaea;
+$text_color: #000;
-$header-height: 80px;
-$header-width: 130px;
+$header_height: 80px;
+$header_width: 132px;
$padding: 20px;
@import "susy";