This commit is contained in:
Ruud
2014-12-17 22:00:43 +01:00
parent 02ff0acc64
commit 6a0220b496
11 changed files with 245 additions and 49 deletions
@@ -231,26 +231,29 @@ var MovieList = new Class({
new Element('div.menus').adopt(
self.navigation_counter = new Element('span.counter[title=Total]'),
self.filter_menu = new BlockMenu(self, {
'class': 'filter'
'class': 'filter',
'button_class': 'icon-filter'
}),
self.navigation_actions = new Element('ul.actions', {
self.navigation_actions = new Element('div.actions', {
'events': {
'click:relay(li)': function(e, el){
'click': function(e, el){
(e).stop();
var new_view = self.current_view == 'list' ? 'thumb' : 'list';
var a = 'active';
self.navigation_actions.getElements('.'+a).removeClass(a);
self.changeView(el.get('data-view'));
this.addClass(a);
self.changeView(new_view);
self.navigation_actions.getElement('[data-view='+new_view+']')
.addClass(a);
el.inject(el.getParent(), 'top');
el.getSiblings().hide();
setTimeout(function(){
el.getSiblings().setStyle('display', null);
}, 100);
}
}
}),
self.navigation_menu = new BlockMenu(self, {
'class': 'extra'
'class': 'extra',
'button_class': 'icon-dots'
})
)
);
@@ -273,7 +276,7 @@ var MovieList = new Class({
'change': self.search.bind(self)
}
})
).addClass('search');
).addClass('search icon-search');
var available_chars;
self.filter_menu.addEvent('open', function(){
@@ -310,8 +313,8 @@ var MovieList = new Class({
// Actions
['thumb', 'list'].each(function(view){
var current = self.current_view == view;
new Element('li', {
'class': 'icon2 ' + view + (current ? ' active ' : ''),
new Element('a', {
'class': 'button icon-' + view + (current ? ' active ' : ''),
'data-view': view
}).inject(self.navigation_actions, current ? 'top' : 'bottom');
});
@@ -2,19 +2,25 @@
.page.movies {
z-index: 21; // Sets navigation above
bottom: auto;
}
.page.movies_wanted, .page.movies_manage {
top: $header-height;
padding: 0;
}
.list_list {
font-size: 15px;
font-weight: 300;
background: #f2f2f2;
.poster {
display: none;
}
.movie {
border-bottom: 1px solid #e6e6e6;
display: block;
border-top: 1px solid #f2f2f2;
position: relative;
cursor: pointer;
@@ -45,14 +51,14 @@
}
.quality {
span {
float: left;
color: #FFF;
font-size: .8em;
font-size: .7em;
padding: 2px 4px;
background: rgba(0,0,0,.2);
border-radius: 1px;
margin-left: 2px;
margin: 2px 0 0 2px;
}
}
}
@@ -63,7 +69,7 @@
.thumb_list {
font-size: 12px;
padding: $padding/2 $padding;
padding: 0 $padding;
.movie {
@include span(6);
@@ -83,7 +89,6 @@
overflow: hidden;
width: 100%;
float: left;
opacity: .05;
}
.data {
@@ -189,3 +194,126 @@
}
}
}
.alph_nav {
.mass_edit_form {
display: none;
}
.menus {
margin-right: $padding;
.button {
padding: 0 $padding/2;
line-height: $header-height;
font-size: 24px;
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.counter, .more_menu, .actions {
float: left;
}
.counter {
line-height: $header-height;
}
.actions {
a {
display: none;
}
.active {
display: inline-block;
}
}
.filter {
margin-top: -2px;
.search {
position: relative;
&:before {
position: absolute;
height: 100%;
line-height: 38px;
padding-left: $padding/2;
font-size: 16px;
opacity: .5;
}
input {
width: 100%;
padding: $padding/2 $padding/2 $padding/2 $padding*1.5;
background: $background_color;
border: none;
border-bottom: 1px solid #f2f2f2;
}
}
.numbers {
padding: $padding/2;
li {
float: left;
width: 10%;
height: 30px;
line-height: 30px;
text-align: center;
color: rgba(0,0,0,.2);
cursor: default;
&.active {
background: #f2f2f2;
}
&.available {
color: rgba(0,0,0,1);
cursor: pointer;
&:hover {
background: #f2f2f2;
}
}
}
}
}
.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;
}
}
}
}
}
@@ -42,6 +42,7 @@ Page.Movies = new Class({
page.list.navigation.inject(self.navigation);
self.current_page = page;
self.navigation.activate(page_name.toLowerCase());
}
+52
View File
@@ -0,0 +1,52 @@
{
"name": "icons",
"css_prefix_text": "icon-",
"css_use_suffix": false,
"hinting": true,
"units_per_em": 1000,
"ascent": 850,
"glyphs": [
{
"uid": "9dd9e835aebe1060ba7190ad2b2ed951",
"css": "search",
"code": 59394,
"src": "fontawesome"
},
{
"uid": "b1887b423d2fd15c345e090320c91ca0",
"css": "thumbs",
"code": 59397,
"src": "fontawesome"
},
{
"uid": "f805bb95d40c7ef2bc51b3d50d4f2e5c",
"css": "list",
"code": 59398,
"src": "fontawesome"
},
{
"uid": "e99461abfef3923546da8d745372c995",
"css": "settings",
"code": 59393,
"src": "fontawesome"
},
{
"uid": "4109c474ff99cad28fd5a2c38af2ec6f",
"css": "filter",
"code": 59396,
"src": "fontawesome"
},
{
"uid": "c311c48d79488965b0fab7f9cd12b6b5",
"css": "left-arrow",
"code": 59392,
"src": "entypo"
},
{
"uid": "d10920db2e79c997c5e783279291970c",
"css": "dots",
"code": 59395,
"src": "entypo"
}
]
}
Binary file not shown.
+7 -4
View File
@@ -6,10 +6,13 @@
<font id="icons" horiz-adv-x="1000" >
<font-face font-family="icons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="settings" unicode="&#xe800;" d="m571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 15 20 15h124q7 0 13-4t7-12l15-103q28-9 50-21l80 60q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-13 0-6-4-12-9-12-29-38t-30-39q14-28 23-55l102-15q7-1 12-7t4-13z" horiz-adv-x="857.1" />
<glyph glyph-name="search" unicode="&#xe801;" d="m643 386q0 103-74 176t-176 74-177-74-73-176 73-177 177-73 176 73 74 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 84-84 125-31 153 31 152 84 126 125 84 153 31 152-31 126-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
<glyph glyph-name="dots" unicode="&#xe802;" d="m110 460q46 0 78-32t32-78q0-44-32-77t-78-33-78 33-32 77q0 46 32 78t78 32z m350 0q46 0 78-32t32-78q0-44-33-77t-77-33-77 33-33 77q0 46 32 78t78 32z m350 0q46 0 78-32t32-78q0-44-32-77t-78-33-78 33-32 77q0 46 32 78t78 32z" horiz-adv-x="920" />
<glyph glyph-name="left-arrow" unicode="&#xe803;" d="m242 626q14 16 39 16t41-16q38-36 0-80l-186-196 186-194q38-44 0-80-16-16-40-16t-40 16l-226 236q-16 16-16 38 0 24 16 40 206 214 226 236z" horiz-adv-x="341" />
<glyph glyph-name="left-arrow" unicode="&#xe800;" d="m242 626q14 16 39 16t41-16q38-36 0-80l-186-196 186-194q38-44 0-80-16-16-40-16t-40 16l-226 236q-16 16-16 38 0 24 16 40 206 214 226 236z" horiz-adv-x="341" />
<glyph glyph-name="settings" unicode="&#xe801;" d="m571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 15 20 15h124q7 0 13-4t7-12l15-103q28-9 50-21l80 60q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-13 0-6-4-12-9-12-29-38t-30-39q14-28 23-55l102-15q7-1 12-7t4-13z" horiz-adv-x="857.1" />
<glyph glyph-name="search" unicode="&#xe802;" d="m643 386q0 103-74 176t-176 74-177-74-73-176 73-177 177-73 176 73 74 177z m286-465q0-29-22-50t-50-21q-30 0-50 21l-191 191q-100-69-223-69-80 0-153 31t-125 84-84 125-31 153 31 152 84 126 125 84 153 31 152-31 126-84 84-126 31-152q0-123-69-223l191-191q21-21 21-51z" horiz-adv-x="928.6" />
<glyph glyph-name="dots" unicode="&#xe803;" d="m110 460q46 0 78-32t32-78q0-44-32-77t-78-33-78 33-32 77q0 46 32 78t78 32z m350 0q46 0 78-32t32-78q0-44-33-77t-77-33-77 33-33 77q0 46 32 78t78 32z m350 0q46 0 78-32t32-78q0-44-32-77t-78-33-78 33-32 77q0 46 32 78t78 32z" horiz-adv-x="920" />
<glyph glyph-name="filter" unicode="&#xe804;" d="m783 685q9-23-8-39l-275-275v-414q0-23-22-33-7-3-14-3-15 0-25 11l-143 143q-10 10-10 25v271l-275 275q-18 16-8 39 9 22 33 22h714q23 0 33-22z" horiz-adv-x="785.7" />
<glyph glyph-name="thumbs" unicode="&#xe805;" d="m286 154v-108q0-22-16-37t-38-16h-178q-23 0-38 16t-16 37v108q0 22 16 38t38 15h178q22 0 38-15t16-38z m0 285v-107q0-22-16-38t-38-15h-178q-23 0-38 15t-16 38v107q0 23 16 38t38 16h178q22 0 38-16t16-38z m357-285v-108q0-22-16-37t-38-16h-178q-23 0-38 16t-16 37v108q0 22 16 38t38 15h178q23 0 38-15t16-38z m-357 571v-107q0-22-16-38t-38-16h-178q-23 0-38 16t-16 38v107q0 22 16 38t38 16h178q22 0 38-16t16-38z m357-286v-107q0-22-16-38t-38-15h-178q-23 0-38 15t-16 38v107q0 23 16 38t38 16h178q23 0 38-16t16-38z m357-285v-108q0-22-16-37t-38-16h-178q-22 0-38 16t-16 37v108q0 22 16 38t38 15h178q23 0 38-15t16-38z m-357 571v-107q0-22-16-38t-38-16h-178q-23 0-38 16t-16 38v107q0 22 16 38t38 16h178q23 0 38-16t16-38z m357-286v-107q0-22-16-38t-38-15h-178q-22 0-38 15t-16 38v107q0 23 16 38t38 16h178q23 0 38-16t16-38z m0 286v-107q0-22-16-38t-38-16h-178q-22 0-38 16t-16 38v107q0 22 16 38t38 16h178q23 0 38-16t16-38z" horiz-adv-x="1000" />
<glyph glyph-name="list" unicode="&#xe806;" d="m286 154v-108q0-22-16-37t-38-16h-178q-23 0-38 16t-16 37v108q0 22 16 38t38 15h178q22 0 38-15t16-38z m0 285v-107q0-22-16-38t-38-15h-178q-23 0-38 15t-16 38v107q0 23 16 38t38 16h178q22 0 38-16t16-38z m714-285v-108q0-22-16-37t-38-16h-535q-23 0-38 16t-16 37v108q0 22 16 38t38 15h535q23 0 38-15t16-38z m-714 571v-107q0-22-16-38t-38-16h-178q-23 0-38 16t-16 38v107q0 22 16 38t38 16h178q22 0 38-16t16-38z m714-286v-107q0-22-16-38t-38-15h-535q-23 0-38 15t-16 38v107q0 23 16 38t38 16h535q23 0 38-16t16-38z m0 286v-107q0-22-16-38t-38-16h-535q-23 0-38 16t-16 38v107q0 22 16 38t38 16h535q23 0 38-16t16-38z" horiz-adv-x="1000" />
</font>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.
Binary file not shown.
+1
View File
@@ -16,6 +16,7 @@ var BlockMenu = new Class({
self.more_option_ul = new Element('ul')
),
self.button = new Element('a.button' + (self.options.button_class ? '.' + self.options.button_class : ''), {
'text': self.options.button_text || '',
'events': {
'click': function(){
self.el.toggleClass('show');
+12 -10
View File
@@ -1,11 +1,11 @@
/* Fonts */
@font-face {
font-family: 'icons';
src: url('../fonts/icons.eot?74719531');
src: url('../fonts/icons.eot?74719531#iefix') format('embedded-opentype'),
url('../fonts/icons.woff?74719531') format('woff'),
url('../fonts/icons.ttf?74719531') format('truetype'),
url('../fonts/icons.svg?74719531#icons') format('svg');
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');
font-weight: normal;
font-style: normal;
}
@@ -16,11 +16,13 @@
font-weight: normal;
speak: none;
}
.icon-left-arrow:before { content: '\e803'; }
.icon-settings:before { content: '\e800'; }
.icon-search:before { content: '\e801'; }
.icon-dots:before { content: '\e802'; }
.icon-left-arrow:before { content: '\e803'; }
.icon-left-arrow:before { content: '\e800'; }
.icon-settings:before { content: '\e801'; }
.icon-search:before { content: '\e802'; }
.icon-dots:before { content: '\e803'; }
.icon-filter:before { content: '\e804'; }
.icon-thumb:before { content: '\e805'; }
.icon-list:before { content: '\e806'; }
@font-face {
font-family: 'OpenSans';
+20 -14
View File
@@ -5,12 +5,11 @@ body, html {
font-size: 14px;
line-height: 1.5;
font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
font-weight: 300;
height: 100%;
margin: 0;
padding: 0;
background: $menu_color;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
}
@@ -23,10 +22,14 @@ a {
text-decoration: none;
}
input, textarea, select {
font-size: 1em;
font-weight: 300;
}
.header {
width: $header-width;
font-weight: 200;
min-width: $header-width;
a {
color: #FFF;
@@ -37,7 +40,6 @@ a {
.logo {
background: $couch_color;
opacity: .05;
display: block;
text-align: center;
@@ -84,8 +86,8 @@ a {
.pages {
height: 100%;
width: 100%;
overflow: auto;
overflow-x: hidden;
overflow: hidden;
position: relative;
}
.footer {
@@ -97,9 +99,14 @@ a {
}
.page {
position: relative;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
padding: $padding 0;
overflow: auto;
&.active {
display: block;
@@ -128,13 +135,12 @@ a {
line-height: $header-height;
padding: $padding;
color: rgba(0,0,0,.5);
font-weight: 300;
&.active {
color: rgba(0,0,0,1);
}
}
}
.active a {
color: #000;
}
}
}
@@ -145,4 +151,4 @@ a {
.level_#{$i} {
z-index: #{$i * 10};
}
}
}