Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Gallery tweaks

Browse Source 
Also fix hide thumbnails
This commit is contained in:
Jordan Bates 2013-08-25 17:12:00 -07:00
parent 4435b84f3f
commit a62323915d
5 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
builds/4chan-X.user.js
View File

File diff suppressed because one or more lines are too long

6
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

2
src/General/Config.coffee
View File

@ -403,7 +403,7 @@ Config =
] ]
gallery: gallery:
'Hide thumbnails': [ 'Hide Thumbnails': [
false false
] ]
# Fit Width =/= Fit width # Fit Width =/= Fit width

56
src/General/css/style.css
View File

@ -1112,7 +1112,7 @@ a:only-of-type > .remove {
background: rgba(0,0,0,.5); background: rgba(0,0,0,.5);
border-left: 1px solid #222; border-left: 1px solid #222;
} }
.hide-thumbnails .gal-thumbnails { .gal-hide-thumbnails .gal-thumbnails {
display: none; display: none;
} }
.gal-thumb img { .gal-thumb img {
@ -1174,10 +1174,16 @@ a:only-of-type > .remove {
display: <%= flex %>; display: <%= flex %>;
<%= align %>-items: flex-start; <%= align %>-items: flex-start;
<%= justify %>: space-around; <%= justify %>: space-around;
overflow: auto; overflow: hidden;
/* Flex > Non-Flex child max-width and overflow fix (Firefox only?) */ /* Flex > Non-Flex child max-width and overflow fix (Firefox only?) */
width: 1%; width: 1%;
} }
:root:not(.gal-fit-height) .gal-image {
overflow-y: scroll !important;
}
:root:not(.gal-fit-width) .gal-image {
overflow-x: scroll !important;
}
.gal-image a { .gal-image a {
margin: auto; margin: auto;
line-height: 0; line-height: 0;
@ -1192,14 +1198,21 @@ a:only-of-type > .remove {
font-size: 2em; font-size: 2em;
margin-right: 10px; margin-right: 10px;
top: 5px; top: 5px;
color: #ffffff;
text-shadow: 0px 0px 1px #000000;
} }
.gal-buttons i { .gal-buttons i {
vertical-align: baseline; vertical-align: baseline;
border-top-width: .5em; border-top-width: .4em;
border-right-width: .3em; border-right-width: .25em;
border-left-width: .3em; border-left-width: .25em;
}
.gal-buttons .menu-button {
bottom: 2px;
color: #ffffff;
text-shadow: 0px 0px 1px #000000;
}
.gal-close {
color: #ffffff;
text-shadow: 0px 0px 1px #000000;
} }
.gal-buttons, .gal-buttons,
.gal-name, .gal-name,
@ -1207,13 +1220,13 @@ a:only-of-type > .remove {
position: fixed; position: fixed;
right: 178px; right: 178px;
} }
.hide-thumbnails .gal-buttons, .gal-hide-thumbnails .gal-buttons,
.hide-thumbnails .gal-count, .gal-hide-thumbnails .gal-count,
.hide-thumbnails .gal-name { .gal-hide-thumbnails .gal-name {
right: 28px; right: 28px;
} }
.gal-name { .gal-name {
bottom: 5px; bottom: 6px;
background: rgba(0,0,0,0.6) !important; background: rgba(0,0,0,0.6) !important;
border-radius: 3px; border-radius: 3px;
padding: 1px 5px 2px 5px; padding: 1px 5px 2px 5px;
@ -1221,13 +1234,30 @@ a:only-of-type > .remove {
color: white !important; color: white !important;
} }
.gal-name:hover, .gal-name:hover,
.gal-close:hover { .gal-close:hover,
.gal-buttons .menu-button:hover {
color: rgb(95, 95, 101) !important; color: rgb(95, 95, 101) !important;
} }
.gal-count { .gal-count {
bottom: 26px; bottom: 27px;
background: rgba(0,0,0,0.6) !important; background: rgba(0,0,0,0.6) !important;
border-radius: 3px; border-radius: 3px;
padding: 1px 5px 2px 5px; padding: 1px 5px 2px 5px;
color: #ffffff !important; color: #ffffff !important;
} }
:root:not(.gal-fit-width) .gal-name {
bottom: 23px !important;
}
:root:not(.gal-fit-width) .gal-count {
bottom: 44px !important;
}
:root:not(.gal-fit-height):not(.gal-hide-thumbnails) .gal-buttons,
:root:not(.gal-fit-height):not(.gal-hide-thumbnails) .gal-name,
:root:not(.gal-fit-height):not(.gal-hide-thumbnails) .gal-count {
right: 195px !important;
}
:root.gal-hide-thumbnails:not(.gal-fit-height) .gal-buttons,
:root.gal-hide-thumbnails:not(.gal-fit-height) .gal-name,
:root.gal-hide-thumbnails:not(.gal-fit-height) .gal-count {
right: 44px !important;
}

2
src/Images/Gallery.coffee
View File

@ -247,7 +247,7 @@ Gallery =
label = $.el 'label', label = $.el 'label',
innerHTML: "<input type=checkbox name='#{name}'> #{name}" innerHTML: "<input type=checkbox name='#{name}'> #{name}"
input = label.firstElementChild input = label.firstElementChild
if ['Fit Width', 'Fit Height'].contains name if ['Fit Width', 'Fit Height', 'Hide Thumbnails'].contains name
$.on input, 'change', Gallery.cb.setFitness $.on input, 'change', Gallery.cb.setFitness
input.checked = Conf[name] input.checked = Conf[name]
$.event 'change', null, input $.event 'change', null, input