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'
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('facebook', iconClass) + 'Facebook', fn: () => photo.share(photoID, 'facebook') },
@ -303,7 +303,7 @@ contextMenu.shareAlbum = function(albumID, e) {
let iconClass = 'ionicons'
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('facebook', iconClass) + 'Facebook', fn: () => album.share('facebook') },

26
src/styles/_animations.scss
View File

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

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

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

41
src/styles/_content.scss
View File

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

20
src/styles/_imageview.scss
View File

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

8
src/styles/_loading.scss
View File

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

40
src/styles/_message.scss
View File

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

12
src/styles/_sidebar.scss
View File

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