arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Code adjustments

Browse Source
This commit is contained in:
Tobias Reich 2015-09-28 19:11:30 +02:00
parent 453c587129
commit 9a0d13b878
10 changed files with 88 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.css vendored
View File

Binary file not shown.

BIN
dist/main.js vendored
View File

Binary file not shown.

4
src/scripts/contextMenu.js
View File

@ -282,7 +282,7 @@ contextMenu.sharePhoto = function(photoID, e) {
iconClass = 'ionicons' iconClass = 'ionicons'
let items = [ let items = [
{ title: `<input readonly id="link" value="${ link }">`, fn: () => {}, class: 'noHover' }, { title: `<input readonly id="link" value="${ link }">`, fn: () => {}, class: 'basicContext__item--noHover' },
{ }, { },
{ title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => photo.share(photoID, 'twitter') }, { title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => photo.share(photoID, 'twitter') },
{ title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => photo.share(photoID, 'facebook') }, { title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => photo.share(photoID, 'facebook') },
@ -303,7 +303,7 @@ contextMenu.shareAlbum = function(albumID, e) {
let iconClass = 'ionicons' let iconClass = 'ionicons'
let items = [ let items = [
{ title: `<input readonly id="link" value="${ location.href }">`, fn: () => {}, class: 'noHover' }, { title: `<input readonly id="link" value="${ location.href }">`, fn: () => {}, class: 'basicContext__item--noHover' },
{ }, { },
{ title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => album.share('twitter') }, { title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => album.share('twitter') },
{ title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => album.share('facebook') }, { title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => album.share('facebook') },

26
src/styles/_animations.scss
View File

@ -1,4 +1,4 @@
/* Animation Setter ------------------------------------------------*/ // Animation Setter ---------------------------------------------------- //
.fadeIn { .fadeIn {
animation-name: fadeIn; animation-name: fadeIn;
animation-duration: .3s; animation-duration: .3s;
@ -13,19 +13,7 @@
animation-timing-function: $timing; animation-timing-function: $timing;
} }
/* moveUp ------------------------------------------------*/ // Fade -------------------------------------------------------------- //
@keyframes moveUp {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* fadeIn ------------------------------------------------*/
@keyframes fadeIn { @keyframes fadeIn {
0% { 0% {
opacity: 0; opacity: 0;
@ -35,7 +23,6 @@
} }
} }
/* fadeOut ------------------------------------------------*/
@keyframes fadeOut { @keyframes fadeOut {
0% { 0% {
opacity: 1; opacity: 1;
@ -45,7 +32,7 @@
} }
} }
/* moveBackground ------------------------------------------------*/ // Move -------------------------------------------------------------- //
@keyframes moveBackground { @keyframes moveBackground {
0% { 0% {
background-position-x: 0px; background-position-x: 0px;
@ -55,7 +42,7 @@
} }
} }
/* zoomIn ------------------------------------------------*/ // Zoom -------------------------------------------------------------- //
@keyframes zoomIn { @keyframes zoomIn {
0% { 0% {
opacity: 0; opacity: 0;
@ -67,7 +54,6 @@
} }
} }
/* zoomOut ------------------------------------------------*/
@keyframes zoomOut { @keyframes zoomOut {
0% { 0% {
opacity: 1; opacity: 1;
@ -79,7 +65,7 @@
} }
} }
/* popIn ------------------------------------------------*/ // PopIn -------------------------------------------------------------- //
@keyframes popIn { @keyframes popIn {
0% { 0% {
opacity: 0; opacity: 0;
@ -91,7 +77,7 @@
} }
} }
/* pulse ------------------------------------------------*/ // Pulse -------------------------------------------------------------- //
@keyframes pulse { @keyframes pulse {
0% { 0% {
opacity: 1; opacity: 1;

12
src/styles/_basicContext.extended.scss
View File

@ -1,4 +1,4 @@
/* Context ------------------------------------------------*/ // Extended Theme -------------------------------------------------------------- //
.basicContext { .basicContext {
&__data .cover { &__data .cover {
@ -27,7 +27,7 @@
height: 14px; height: 14px;
} }
/* Link ------------------------------------------------*/ // Link -------------------------------------------------------------- //
&__data input#link { &__data input#link {
margin: -2px 0; margin: -2px 0;
padding: 5px 7px 6px; padding: 5px 7px 6px;
@ -40,13 +40,13 @@
outline: none; outline: none;
} }
/* No Hover ------------------------------------------------*/ // No hover -------------------------------------------------------------- //
&__item.noHover &__data { &__item--noHover &__data {
padding-right: 12px; padding-right: 12px;
} }
&__item.noHover:hover &__data { &__item--noHover:hover &__data {
background: none; background: none !important;
} }
} }

41
src/styles/_content.scss
View File

@ -16,9 +16,11 @@
background: white(.02); background: white(.02);
} }
&--sidebar { width: calc(100% - 300px); } &--sidebar {
width: calc(100% - 300px);
}
/* Animations ------------------------------------------------------------------- */ // Animations -------------------------------------------------------------- //
&.contentZoomIn .album, &.contentZoomIn .album,
&.contentZoomIn .photo { &.contentZoomIn .photo {
animation-name: zoomIn; animation-name: zoomIn;
@ -37,7 +39,7 @@
animation-name: fadeOut; animation-name: fadeOut;
} }
/* Albums and Photos ------------------------------------------------*/ // Albums and Photos ------------------------------------------------------ //
.album, .album,
.photo { .photo {
position: relative; position: relative;
@ -54,7 +56,7 @@
position: absolute; position: absolute;
width: 200px; width: 200px;
height: 200px; height: 200px;
background-color: #222; background: #222;
box-shadow: 0 2px 5px black(.5); box-shadow: 0 2px 5px black(.5);
border: 1px solid white(.5); border: 1px solid white(.5);
transition: opacity .3s ease-out, transform .3s ease-out, border-color .3s ease-out; transition: opacity .3s ease-out, transform .3s ease-out, border-color .3s ease-out;
@ -72,7 +74,7 @@
} }
} }
/* Album ------------------------------------------------*/ // Album -------------------------------------------------------------- //
.album { .album {
img:first-child, img:first-child,
img:nth-child(2) { img:nth-child(2) {
@ -81,20 +83,25 @@
} }
&:hover img:nth-child(1), &:hover img:nth-child(1),
&:hover img:nth-child(2) { opacity: 1; } &:hover img:nth-child(2) {
opacity: 1;
}
&:hover img:nth-child(1) { transform: rotate(-2deg) translateY(10px) translateX(-12px); } &:hover img:nth-child(1) {
transform: rotate(-2deg) translateY(10px) translateX(-12px);
}
&:hover img:nth-child(2) { transform: rotate(5deg) translateY(-8px) translateX(12px); } &:hover img:nth-child(2) {
transform: rotate(5deg) translateY(-8px) translateX(12px);
}
} }
/* Album/Photo Overlay ------------------------------------------------*/ // Overlay -------------------------------------------------------------- //
.album .overlay, .album .overlay,
.photo .overlay { .photo .overlay {
position: absolute; position: absolute;
margin: 0 1px; margin: 0 1px;
width: 200px; width: 200px;
background: black(.6);
background: linear-gradient(to bottom, black(0), black(.6)); background: linear-gradient(to bottom, black(0), black(.6));
bottom: 1px; bottom: 1px;
} }
@ -143,9 +150,11 @@
} }
.album img[data-overlay='false'] + .overlay h1, .album img[data-overlay='false'] + .overlay h1,
.album img[data-overlay='false'] + .overlay a { text-shadow: none; } .album img[data-overlay='false'] + .overlay a {
text-shadow: none;
}
/* Badges ------------------------------------------------*/ // Badge -------------------------------------------------------------- //
.album .badges, .album .badges,
.photo .badges { .photo .badges {
position: relative; position: relative;
@ -168,7 +177,9 @@
text-shadow: 0 1px 0 black(.4); text-shadow: 0 1px 0 black(.4);
opacity: .9; opacity: .9;
&--visible { display: inline-block; } &--visible {
display: inline-block;
}
.iconic { .iconic {
fill: #fff; fill: #fff;
@ -178,7 +189,7 @@
} }
} }
/* Divider ------------------------------------------------*/ // Divider -------------------------------------------------------------- //
.divider { .divider {
margin: 50px 0 0; margin: 50px 0 0;
padding: 10px 0 0; padding: 10px 0 0;
@ -207,7 +218,7 @@
} }
/* No Content ------------------------------------------------*/ // No content -------------------------------------------------------------- //
.no_content { .no_content {
position: absolute; position: absolute;
top: 50%; top: 50%;

20
src/styles/_imageview.scss
View File

@ -9,26 +9,28 @@
background-color: rgba(10, 10, 10, .98); background-color: rgba(10, 10, 10, .98);
transition: background-color .3s; transition: background-color .3s;
/* Modes ------------------------------------------------*/ // Modes -------------------------------------------------------------- //
&.view { background-color: inherit; } &.view { background-color: inherit; }
&.full { background-color: black(1); } &.full { background-color: black(1); }
/* ImageView ------------------------------------------------*/ // ImageView -------------------------------------------------------------- //
#image { #image {
position: absolute; position: absolute;
top: 60px; top: 60px;
right: 30px; right: 30px;
bottom: 30px; bottom: 30px;
left: 30px; left: 30px;
transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce;
will-change: transform;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 50% 50%; background-position: 50% 50%;
background-size: contain; background-size: contain;
transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce;
animation-name: zoomIn; animation-name: zoomIn;
animation-duration: .3s; animation-duration: .3s;
animation-timing-function: $timingBounce; animation-timing-function: $timingBounce;
will-change: transform;
&.small { &.small {
top: 50%; top: 50%;
@ -45,7 +47,7 @@
} }
} }
/* Previous/Next Buttons ------------------------------------------------*/ // Previous/Next Buttons -------------------------------------------------------------- //
.arrow_wrapper { .arrow_wrapper {
position: fixed; position: fixed;
width: 15%; width: 15%;
@ -84,9 +86,13 @@
} }
&:hover a#previous, &:hover a#previous,
&:hover a#next { transform: translateX(0); } &:hover a#next {
transform: translateX(0);
}
a:hover { opacity: 1; } a:hover {
opacity: 1;
}
.iconic { .iconic {
fill: white(.8); fill: white(.8);

8
src/styles/_loading.scss
View File

@ -1,23 +1,25 @@
#loading { #loading {
display: none;
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 3px; height: 3px;
background-size: 100px 3px; background-size: 100px 3px;
background-repeat: repeat-x; background-repeat: repeat-x;
border-bottom: 1px solid black(.3); border-bottom: 1px solid black(.3);
display: none;
animation-name: moveBackground; animation-name: moveBackground;
animation-duration: .3s; animation-duration: .3s;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-timing-function: linear; animation-timing-function: linear;
/* Modes ------------------------------------------------*/ // Modes -------------------------------------------------------------- //
&.loading { &.loading {
height: 3px; height: 3px;
background-image: linear-gradient(to right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%); background-image: linear-gradient(to right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
z-index: 2; z-index: 2;
} }
&.error { &.error {
height: 40px; height: 40px;
background-color: #2f0d0e; background-color: #2f0d0e;
@ -25,7 +27,7 @@
z-index: 1; z-index: 1;
} }
/* Content ------------------------------------------------*/ // Content -------------------------------------------------------------- //
h1 { h1 {
margin: 13px 13px 0 13px; margin: 13px 13px 0 13px;
color: #ddd; color: #ddd;

40
src/styles/_message.scss
View File

@ -7,12 +7,20 @@
background: linear-gradient(to bottom, #444, #333); background: linear-gradient(to bottom, #444, #333);
box-shadow: 0 1px 4px black(.2), inset 0 1px 0 white(.05); box-shadow: 0 1px 4px black(.2), inset 0 1px 0 white(.05);
/* Reset default styles ------------------------------------------------*/ // Reset -------------------------------------------------------------- //
.basicModal__content { padding: 0; } &__content {
.basicModal__content p { margin: 0; } padding: 0;
.basicModal__buttons { box-shadow: none; } }
/* Text ------------------------------------------------*/ &__content p {
margin: 0;
}
&__buttons {
box-shadow: none;
}
// Text -------------------------------------------------------------- //
p { p {
padding: 10px 30px; padding: 10px 30px;
color: white(.9); color: white(.9);
@ -43,8 +51,8 @@
&.less { padding-bottom: 30px; } &.less { padding-bottom: 30px; }
} }
/* Buttons ------------------------------------------------*/ // Buttons -------------------------------------------------------------- //
.basicModal__button { &__button {
padding: 13px 0 15px; padding: 13px 0 15px;
background: black(.02); background: black(.02);
color: white(.5); color: white(.5);
@ -71,7 +79,7 @@
&.hidden { display: none; } &.hidden { display: none; }
} }
/* Inputs ------------------------------------------------*/ // Inputs -------------------------------------------------------------- //
input.text { input.text {
padding: 9px 2px; padding: 9px 2px;
width: 100%; width: 100%;
@ -95,7 +103,7 @@
&:last-child { margin-bottom: 10px; } &:last-child { margin-bottom: 10px; }
} }
/* Radio Buttons ------------------------------------------------*/ // Radio Buttons ----------------------------------------------------------- //
.choice { .choice {
padding: 0 30px 15px; padding: 0 30px 15px;
width: 100%; width: 100%;
@ -136,7 +144,7 @@
} }
} }
/* Checked */ // Checked
label input:checked ~ .checkbox { label input:checked ~ .checkbox {
background: black(.5); background: black(.5);
.iconic { .iconic {
@ -145,7 +153,7 @@
} }
} }
/* Active */ // Active
label input:active ~ .checkbox { label input:active ~ .checkbox {
background: black(.3); background: black(.3);
.iconic { opacity: .8; } .iconic { opacity: .8; }
@ -170,7 +178,7 @@
} }
} }
/* Select ------------------------------------------------*/ // Select -------------------------------------------------------------- //
.select { .select {
display: inline-block; display: inline-block;
position: relative; position: relative;
@ -229,7 +237,7 @@
} }
} }
/* Version ------------------------------------------------*/ // Version -------------------------------------------------------------- //
.version { .version {
margin: -5px 0 0; margin: -5px 0 0;
padding: 0 30px 30px !important; padding: 0 30px 30px !important;
@ -242,7 +250,7 @@
span a { color: white(.3); } span a { color: white(.3); }
} }
/* Title ------------------------------------------------*/ // Title -------------------------------------------------------------- //
h1 { h1 {
float: left; float: left;
width: 100%; width: 100%;
@ -254,7 +262,7 @@
text-align: center; text-align: center;
} }
/* Rows ------------------------------------------------*/ // Rows -------------------------------------------------------------- //
.rows { .rows {
margin: 0 8px 8px; margin: 0 8px 8px;
width: calc(100% - 16px); width: calc(100% - 16px);
@ -266,7 +274,7 @@
box-shadow: inset 0 0 3px black(.4); box-shadow: inset 0 0 3px black(.4);
} }
/* Row ------------------------------------------------*/ // Row -------------------------------------------------------------- //
.rows .row { .rows .row {
float: left; float: left;
padding: 8px 0; padding: 8px 0;

12
src/styles/_sidebar.scss
View File

@ -18,7 +18,7 @@
user-select: none !important; user-select: none !important;
} }
/* Header ------------------------------------------------*/ // Header -------------------------------------------------------------- //
&__header { &__header {
float: left; float: left;
height: 49px; height: 49px;
@ -37,7 +37,7 @@
text-align: center; text-align: center;
} }
/* Wrapper ------------------------------------------------*/ // Wrapper -------------------------------------------------------------- //
&__wrapper { &__wrapper {
float: left; float: left;
height: calc(100% - 49px); height: calc(100% - 49px);
@ -46,7 +46,7 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
/* Divider ------------------------------------------------*/ // Divider -------------------------------------------------------------- //
&__divider { &__divider {
float: left; float: left;
padding: 12px 0 8px; padding: 12px 0 8px;
@ -67,7 +67,7 @@
} }
} }
/* Edit ------------------------------------------------*/ // Edit -------------------------------------------------------------- //
.edit { .edit {
display: inline-block; display: inline-block;
margin-left: 3px; margin-left: 3px;
@ -88,7 +88,7 @@
} }
} }
/* Table ------------------------------------------------*/ // Table -------------------------------------------------------------- //
table { table {
float: left; float: left;
margin: 10px 0 15px 20px; margin: 10px 0 15px 20px;
@ -110,7 +110,7 @@
} }
} }
/* Tags ------------------------------------------------*/ // Tags -------------------------------------------------------------- //
#tags { #tags {
width: calc(100% - 40px); width: calc(100% - 40px);
margin: 16px 20px 12px 20px; margin: 16px 20px 12px 20px;