Windy/lsky-pro
1
0
Fork 0
mirror of https://github.com/lsky-org/lsky-pro.git synced 2025-01-08 11:57:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄 完成我的图片页面基础样式

Browse Source
This commit is contained in:
WispX 2021-12-19 16:06:48 +08:00
parent 68a55a8617
commit 01b4502c45
29 changed files with 6003 additions and 2800 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

667
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -17,14 +17,17 @@
"axios": "^0.21",
"blueimp-canvas-to-blob": "^3.29.0",
"blueimp-file-upload": "^10.32.0",
"blueimp-gallery": "^3.4.0",
"blueimp-load-image": "^5.16.0",
"clipboard": "^2.0.8",
"deepmerge": "^4.2.2",
"jquery": "^3.6.0",
"jquery.photoswipe": "^1.1.1",
"justifiedGallery": "^3.8.1",
"laravel-mix": "^6.0.39",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"lodash": "^4.17.19",
"photoswipe": "^4.1.3",
"postcss": "^8.2.1",
"postcss-import": "^12.0.1",
"resolve-url-loader": "^4.0.0",

132
public/css/app.css vendored
View File

@ -391,7 +391,7 @@ Ensure the default browser behavior of the `hidden` attribute.
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.divide-y > *, .border, .border-2, .border-b-2, .border-l-4, .border-t, .border-r, .border-b, .border-l {
.divide-y > *, .border, .border-2, .border-0, .border-b-2, .border-l-4, .border-t, .border-r, .border-b {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
@ -663,32 +663,32 @@ select {
.right-2 {
right: 0.5rem;
}
.-left-64 {
left: -16rem;
}
.left-0 {
left: 0px;
}
.top-0 {
top: 0px;
}
.right-0 {
right: 0px;
}
.bottom-0 {
bottom: 0px;
}
.top-0 {
top: 0px;
}
.-left-64 {
left: -16rem;
}
.z-0 {
z-index: 0;
}
.z-\[1\] {
z-index: 1;
.z-\[9\] {
z-index: 9;
}
.z-10 {
z-index: 10;
}
.z-\[9\] {
z-index: 9;
.z-\[1\] {
z-index: 1;
}
.m-2 {
margin: 0.5rem;
@ -764,15 +764,9 @@ select {
.mr-4 {
margin-right: 1rem;
}
.-mr-1 {
margin-right: -0.25rem;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.flex {
display: flex;
}
@ -863,8 +857,8 @@ select {
.w-6 {
width: 1.5rem;
}
.w-56 {
width: 14rem;
.w-36 {
width: 9rem;
}
.max-w-xl {
max-width: 36rem;
@ -1017,10 +1011,6 @@ select {
.divide-solid > :not([hidden]) ~ :not([hidden]) {
border-style: solid;
}
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-divide-opacity));
}
.overflow-hidden {
overflow: hidden;
}
@ -1068,6 +1058,9 @@ select {
.border-2 {
border-width: 2px;
}
.border-0 {
border-width: 0px;
}
.border-b-2 {
border-bottom-width: 2px;
}
@ -1083,9 +1076,6 @@ select {
.border-b {
border-bottom-width: 1px;
}
.border-l {
border-left-width: 1px;
}
.border-solid {
border-style: solid;
}
@ -1123,13 +1113,9 @@ select {
--tw-border-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-border-opacity));
}
.border-black {
.border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-indigo-600 {
--tw-border-opacity: 1;
border-color: rgb(79 70 229 / var(--tw-border-opacity));
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
@ -1175,24 +1161,9 @@ select {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.bg-slate-200 {
--tw-bg-opacity: 1;
background-color: rgb(226 232 240 / var(--tw-bg-opacity));
}
.bg-slate-100 {
--tw-bg-opacity: 1;
background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}
.bg-gray-500 {
--tw-bg-opacity: 1;
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
}
.bg-opacity-75 {
--tw-bg-opacity: 0.75;
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.fill-current {
fill: currentColor;
}
@ -1205,6 +1176,9 @@ select {
.p-6 {
padding: 1.5rem;
}
.p-1 {
padding: 0.25rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
@ -1253,6 +1227,14 @@ select {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.py-1\.5 {
padding-top: 0.375rem;
padding-bottom: 0.375rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
@ -1277,9 +1259,6 @@ select {
.pl-0 {
padding-left: 0px;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
@ -1430,10 +1409,6 @@ select {
--tw-text-opacity: 1;
color: rgb(71 85 105 / var(--tw-text-opacity));
}
.text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.underline {
text-decoration: underline;
}
@ -1444,9 +1419,6 @@ select {
.opacity-70 {
opacity: 0.7;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-0 {
opacity: 0;
}
@ -1474,6 +1446,10 @@ select {
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@ -1500,19 +1476,22 @@ select {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-150 {
transition-duration: 150ms;
}
.duration-500 {
transition-duration: 500ms;
}
.duration-300 {
transition-duration: 300ms;
}
@ -1522,12 +1501,6 @@ select {
.duration-75 {
transition-duration: 75ms;
}
.duration-100 {
transition-duration: 100ms;
}
.duration-500 {
transition-duration: 500ms;
}
.ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@ -1541,6 +1514,10 @@ select {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.hover\:border-blue-500:hover {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@ -1646,10 +1623,6 @@ select {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
}
.focus\:ring-indigo-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
}
.focus\:ring-opacity-50:focus {
--tw-ring-opacity: 0.5;
}
@ -1659,9 +1632,6 @@ select {
.focus\:ring-offset-gray-800:focus {
--tw-ring-offset-color: #1f2937;
}
.focus\:ring-offset-gray-100:focus {
--tw-ring-offset-color: #f3f4f6;
}
.active\:bg-gray-100:active {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@ -1684,6 +1654,10 @@ select {
.group:hover .group-hover\:block {
display: block;
}
.group:hover .group-hover\:border-blue-500 {
--tw-border-opacity: 1;
border-color: rgb(59 130 246 / var(--tw-border-opacity));
}
.dark .dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
@ -1838,6 +1812,14 @@ select {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.md\:hover\:w-52:hover {
width: 13rem;
}
.md\:focus\:w-52:focus {
width: 13rem;
}
}
@media (min-width: 1024px) {

110
public/css/justified-gallery/justifiedGallery.min.css vendored Normal file
View File

@ -0,0 +1,110 @@
/*!
* justifiedGallery - v3.8.1
* http://miromannino.github.io/Justified-Gallery/
* Copyright (c) 2020 Miro Mannino
* Licensed under the MIT license.
*/
.justified-gallery {
width: 100%;
position: relative;
overflow: hidden;
}
.justified-gallery > a,
.justified-gallery > div,
.justified-gallery > figure {
position: absolute;
display: inline-block;
overflow: hidden;
/* background: #888888; To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
filter: "alpha(opacity=10)";
opacity: 0.1;
margin: 0;
padding: 0;
}
.justified-gallery > a > img,
.justified-gallery > div > img,
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img,
.justified-gallery > a > svg,
.justified-gallery > div > svg,
.justified-gallery > figure > svg,
.justified-gallery > a > a > svg,
.justified-gallery > div > a > svg,
.justified-gallery > figure > a > svg {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
border: none;
filter: "alpha(opacity=0)";
opacity: 0;
}
.justified-gallery > a > .jg-caption,
.justified-gallery > div > .jg-caption,
.justified-gallery > figure > .jg-caption {
display: none;
position: absolute;
bottom: 0;
padding: 5px;
background-color: #000000;
left: 0;
right: 0;
margin: 0;
color: white;
font-size: 12px;
font-weight: 300;
font-family: sans-serif;
}
.justified-gallery > a > .jg-caption.jg-caption-visible,
.justified-gallery > div > .jg-caption.jg-caption-visible,
.justified-gallery > figure > .jg-caption.jg-caption-visible {
display: initial;
filter: "alpha(opacity=70)";
opacity: 0.7;
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.justified-gallery > .jg-entry-visible {
filter: "alpha(opacity=100)";
opacity: 1;
background: none;
}
.justified-gallery > .jg-entry-visible > img,
.justified-gallery > .jg-entry-visible > a > img,
.justified-gallery > .jg-entry-visible > svg,
.justified-gallery > .jg-entry-visible > a > svg {
filter: "alpha(opacity=100)";
opacity: 1;
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
-o-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.justified-gallery > .jg-filtered {
display: none;
}
.justified-gallery > .jg-spinner {
position: absolute;
bottom: 0;
margin-left: -24px;
padding: 10px 0 10px 0;
left: 50%;
filter: "alpha(opacity=100)";
opacity: 1;
overflow: initial;
}
.justified-gallery > .jg-spinner > span {
display: inline-block;
filter: "alpha(opacity=0)";
opacity: 0;
width: 8px;
height: 8px;
margin: 0 4px 0 4px;
background-color: #000;
border-radius: 6px;
}

482
public/css/photo-swipe/default-skin/default-skin.css vendored Normal file
View File

@ -0,0 +1,482 @@
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
Contents:
1. Buttons
2. Share modal and links
3. Index indicator ("1 of X" counter)
4. Caption
5. Loading indicator
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
*/
/*
1. Buttons
*/
/* <button> css reset */
.pswp__button {
width: 44px;
height: 44px;
position: relative;
background: none;
cursor: pointer;
overflow: visible;
-webkit-appearance: none;
display: block;
border: 0;
padding: 0;
margin: 0;
float: right;
opacity: 0.75;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
-webkit-box-shadow: none;
box-shadow: none; }
.pswp__button:focus, .pswp__button:hover {
opacity: 1; }
.pswp__button:active {
outline: none;
opacity: 0.9; }
.pswp__button::-moz-focus-inner {
padding: 0;
border: 0; }
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
opacity: 1; }
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
background: url(default-skin.png) 0 0 no-repeat;
background-size: 264px 88px;
width: 44px;
height: 44px; }
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
.pswp--svg .pswp__button,
.pswp--svg .pswp__button--arrow--left:before,
.pswp--svg .pswp__button--arrow--right:before {
background-image: url(default-skin.svg); }
.pswp--svg .pswp__button--arrow--left,
.pswp--svg .pswp__button--arrow--right {
background: none; } }
.pswp__button--close {
background-position: 0 -44px; }
.pswp__button--share {
background-position: -44px -44px; }
.pswp__button--fs {
display: none; }
.pswp--supports-fs .pswp__button--fs {
display: block; }
.pswp--fs .pswp__button--fs {
background-position: -44px 0; }
.pswp__button--zoom {
display: none;
background-position: -88px 0; }
.pswp--zoom-allowed .pswp__button--zoom {
display: block; }
.pswp--zoomed-in .pswp__button--zoom {
background-position: -132px 0; }
/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
visibility: hidden; }
/*
Arrow buttons hit area
(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
background: none;
top: 50%;
margin-top: -50px;
width: 70px;
height: 100px;
position: absolute; }
.pswp__button--arrow--left {
left: 0; }
.pswp__button--arrow--right {
right: 0; }
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
content: '';
top: 35px;
background-color: rgba(0, 0, 0, 0.3);
height: 30px;
width: 32px;
position: absolute; }
.pswp__button--arrow--left:before {
left: 6px;
background-position: -138px -44px; }
.pswp__button--arrow--right:before {
right: 6px;
background-position: -94px -44px; }
/*
2. Share modal/popup and links
*/
.pswp__counter,
.pswp__share-modal {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
.pswp__share-modal {
display: block;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
position: absolute;
z-index: 1600;
opacity: 0;
-webkit-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
-webkit-backface-visibility: hidden;
will-change: opacity; }
.pswp__share-modal--hidden {
display: none; }
.pswp__share-tooltip {
z-index: 1620;
position: absolute;
background: #FFF;
top: 56px;
border-radius: 2px;
display: block;
width: auto;
right: 44px;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
-webkit-backface-visibility: hidden;
will-change: transform; }
.pswp__share-tooltip a {
display: block;
padding: 8px 12px;
color: #000;
text-decoration: none;
font-size: 14px;
line-height: 18px; }
.pswp__share-tooltip a:hover {
text-decoration: none;
color: #000; }
.pswp__share-tooltip a:first-child {
/* round corners on the first/last list item */
border-radius: 2px 2px 0 0; }
.pswp__share-tooltip a:last-child {
border-radius: 0 0 2px 2px; }
.pswp__share-modal--fade-in {
opacity: 1; }
.pswp__share-modal--fade-in .pswp__share-tooltip {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0); }
/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
padding: 16px 12px; }
a.pswp__share--facebook:before {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: -12px;
right: 15px;
border: 6px solid transparent;
border-bottom-color: #FFF;
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none; }
a.pswp__share--facebook:hover {
background: #3E5C9A;
color: #FFF; }
a.pswp__share--facebook:hover:before {
border-bottom-color: #3E5C9A; }
a.pswp__share--twitter:hover {
background: #55ACEE;
color: #FFF; }
a.pswp__share--pinterest:hover {
background: #CCC;
color: #CE272D; }
a.pswp__share--download:hover {
background: #DDD; }
/*
3. Index indicator ("1 of X" counter)
*/
.pswp__counter {
position: absolute;
left: 0;
top: 0;
height: 44px;
font-size: 13px;
line-height: 44px;
color: #FFF;
opacity: 0.75;
padding: 0 10px; }
/*
4. Caption
*/
.pswp__caption {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
min-height: 44px; }
.pswp__caption small {
font-size: 11px;
color: #BBB; }
.pswp__caption__center {
text-align: left;
max-width: 420px;
margin: 0 auto;
font-size: 13px;
padding: 10px;
line-height: 20px;
color: #CCC; }
.pswp__caption--empty {
display: none; }
/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
visibility: hidden; }
/*
5. Loading indicator (preloader)
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
*/
.pswp__preloader {
width: 44px;
height: 44px;
position: absolute;
top: 0;
left: 50%;
margin-left: -22px;
opacity: 0;
-webkit-transition: opacity 0.25s ease-out;
transition: opacity 0.25s ease-out;
will-change: opacity;
direction: ltr; }
.pswp__preloader__icn {
width: 20px;
height: 20px;
margin: 12px; }
.pswp__preloader--active {
opacity: 1; }
.pswp__preloader--active .pswp__preloader__icn {
/* We use .gif in browsers that don't support CSS animation */
background: url(preloader.gif) 0 0 no-repeat; }
.pswp--css_animation .pswp__preloader--active {
opacity: 1; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
-webkit-animation: clockwise 500ms linear infinite;
animation: clockwise 500ms linear infinite; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
-webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
.pswp--css_animation .pswp__preloader__icn {
background: none;
opacity: 0.75;
width: 14px;
height: 14px;
position: absolute;
left: 15px;
top: 15px;
margin: 0; }
.pswp--css_animation .pswp__preloader__cut {
/*
The idea of animating inner circle is based on Polymer ("material") loading indicator
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
*/
position: relative;
width: 7px;
height: 14px;
overflow: hidden; }
.pswp--css_animation .pswp__preloader__donut {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
height: 14px;
border: 2px solid #FFF;
border-radius: 50%;
border-left-color: transparent;
border-bottom-color: transparent;
position: absolute;
top: 0;
left: 0;
background: none;
margin: 0; }
@media screen and (max-width: 1024px) {
.pswp__preloader {
position: relative;
left: auto;
top: auto;
margin: 0;
float: right; } }
@-webkit-keyframes clockwise {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes clockwise {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@-webkit-keyframes donut-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0); }
50% {
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg); }
100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }
@keyframes donut-rotate {
0% {
-webkit-transform: rotate(0);
transform: rotate(0); }
50% {
-webkit-transform: rotate(-140deg);
transform: rotate(-140deg); }
100% {
-webkit-transform: rotate(0);
transform: rotate(0); } }
/*
6. Additional styles
*/
/* root element of UI */
.pswp__ui {
-webkit-font-smoothing: auto;
visibility: visible;
opacity: 1;
z-index: 1550; }
/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
position: absolute;
left: 0;
top: 0;
height: 44px;
width: 100%; }
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
-webkit-backface-visibility: hidden;
will-change: opacity;
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
visibility: visible; }
.pswp__top-bar,
.pswp__caption {
background-color: rgba(0, 0, 0, 0.5); }
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
background-color: rgba(0, 0, 0, 0.3); }
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
opacity: 0; }
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
opacity: 0; }
/*
pswp__ui--hidden class is added when controls are hidden
e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
/* Force paint & create composition layer for controls. */
opacity: 0.001; }
/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
display: none; }
.pswp__element--disabled {
display: none !important; }
.pswp--minimal--dark .pswp__top-bar {
background: none; }

BIN
public/css/photo-swipe/default-skin/default-skin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 547 B

1
public/css/photo-swipe/default-skin/default-skin.svg Normal file
View File

@ -0,0 +1 @@
<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/css/photo-swipe/default-skin/preloader.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 866 B

179
public/css/photo-swipe/photoswipe.css vendored Normal file
View File

@ -0,0 +1,179 @@
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
display: none;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
-ms-touch-action: none;
touch-action: none;
z-index: 1500;
-webkit-text-size-adjust: 100%;
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
-webkit-backface-visibility: hidden;
outline: none; }
.pswp * {
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.pswp img {
max-width: none; }
/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
opacity: 0.001;
will-change: opacity;
/* for open/close transition */
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--open {
display: block; }
.pswp--zoom-allowed .pswp__img {
/* autoprefixer: off */
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.pswp--zoomed-in .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab; }
.pswp--dragging .pswp__img {
/* autoprefixer: off */
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing; }
/*
Background is added as a separate element.
As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
will-change: opacity; }
.pswp__scroll-wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden; }
.pswp__container,
.pswp__zoom-wrap {
-ms-touch-action: none;
touch-action: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0; }
/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; }
.pswp__zoom-wrap {
position: absolute;
width: 100%;
-webkit-transform-origin: left top;
-ms-transform-origin: left top;
transform-origin: left top;
/* for open/close transition */
-webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp__bg {
will-change: opacity;
/* for open/close transition */
-webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
-webkit-transition: none;
transition: none; }
.pswp__container,
.pswp__zoom-wrap {
-webkit-backface-visibility: hidden; }
.pswp__item {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden; }
.pswp__img {
position: absolute;
width: auto;
height: auto;
top: 0;
left: 0; }
/*
stretched thumbnail or div placeholder element (see below)
style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
-webkit-backface-visibility: hidden; }
/*
div element that matches size of large image
large image loads on top of it
*/
.pswp__img--placeholder--blank {
background: #222; }
.pswp--ie .pswp__img {
width: 100% !important;
height: auto !important;
left: 0;
top: 0; }
/*
Error message appears when image is not loaded
(JS option errorMsg controls markup)
*/
.pswp__error-msg {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 14px;
line-height: 16px;
margin-top: -8px;
color: #CCC; }
.pswp__error-msg a {
color: #CCC;
text-decoration: underline; }

2267
public/js/app.js vendored
View File

File diff suppressed because it is too large Load Diff

8
public/js/app.js.LICENSE.txt
View File

@ -1,8 +0,0 @@
/**
* @license
* Lodash <https://lodash.com/>
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/

0
public/js/jquery.fileupload.js → public/js/blueimp-file-upload/jquery.fileupload.js vendored
View File

0
public/js/jquery.iframe-transport.js → public/js/blueimp-file-upload/jquery.iframe-transport.js vendored
View File

0
public/js/jquery.ui.widget.js → public/js/blueimp-file-upload/jquery.ui.widget.js vendored
View File

0
public/js/load-image.all.min.js → public/js/blueimp-load-image/load-image.all.min.js vendored
View File

7
public/js/clipboard/clipboard.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
public/js/justified-gallery/jquery.justifiedGallery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4807
public/js/photo-swipe/jquery.photoswipe-global.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

4
public/js/photo-swipe/photoswipe-ui-default.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
public/js/photo-swipe/photoswipe.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

19
public/mix-manifest.json
View File

@ -3,8 +3,19 @@
"/css/app.css": "/css/app.css",
"/css/common.css": "/css/common.css",
"/css/fontawesome.css": "/css/fontawesome.css",
"/js/jquery.ui.widget.js": "/js/jquery.ui.widget.js",
"/js/jquery.iframe-transport.js": "/js/jquery.iframe-transport.js",
"/js/jquery.fileupload.js": "/js/jquery.fileupload.js",
"/js/load-image.all.min.js": "/js/load-image.all.min.js"
"/js/blueimp-file-upload/jquery.ui.widget.js": "/js/blueimp-file-upload/jquery.ui.widget.js",
"/js/blueimp-file-upload/jquery.iframe-transport.js": "/js/blueimp-file-upload/jquery.iframe-transport.js",
"/js/blueimp-file-upload/jquery.fileupload.js": "/js/blueimp-file-upload/jquery.fileupload.js",
"/js/blueimp-load-image/load-image.all.min.js": "/js/blueimp-load-image/load-image.all.min.js",
"/css/justified-gallery/justifiedGallery.min.css": "/css/justified-gallery/justifiedGallery.min.css",
"/js/justified-gallery/jquery.justifiedGallery.min.js": "/js/justified-gallery/jquery.justifiedGallery.min.js",
"/css/photo-swipe/photoswipe.css": "/css/photo-swipe/photoswipe.css",
"/css/photo-swipe/default-skin/default-skin.css": "/css/photo-swipe/default-skin/default-skin.css",
"/css/photo-swipe/default-skin/default-skin.png": "/css/photo-swipe/default-skin/default-skin.png",
"/css/photo-swipe/default-skin/default-skin.svg": "/css/photo-swipe/default-skin/default-skin.svg",
"/css/photo-swipe/default-skin/preloader.gif": "/css/photo-swipe/default-skin/preloader.gif",
"/js/photo-swipe/photoswipe.min.js": "/js/photo-swipe/photoswipe.min.js",
"/js/photo-swipe/photoswipe-ui-default.min.js": "/js/photo-swipe/photoswipe-ui-default.min.js",
"/js/photo-swipe/jquery.photoswipe-global.js": "/js/photo-swipe/jquery.photoswipe-global.js",
"/js/clipboard/clipboard.min.js": "/js/clipboard/clipboard.min.js"
}

9
resources/js/bootstrap.js vendored
View File

@ -1,5 +1,10 @@
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
window.$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
}
})
/**
* We'll load the axios HTTP library which allows us to easily issue requests
@ -7,9 +12,9 @@ window.$ = window.jQuery = require('jquery');
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
// window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening

2
resources/views/components/dropdown.blade.php
View File

@ -12,7 +12,7 @@
x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="transform opacity-100 scale-100"
x-transition:leave-end="transform opacity-0 scale-95"
class="absolute {{ $classes[$direction] }} mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
class="absolute z-[1] {{ $classes[$direction] }} mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu-button"

13
resources/views/components/upload.blade.php
View File

@ -1,9 +1,9 @@
@push('scripts')
<script src="{{ asset('js/jquery.ui.widget.js') }}"></script>
<script src="{{ asset('js/jquery.iframe-transport.js') }}"></script>
<script src="{{ asset('js/jquery.fileupload.js') }}"></script>
<script src="{{ asset('js/load-image.all.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
<script src="{{ asset('js/blueimp-file-upload/jquery.ui.widget.js') }}"></script>
<script src="{{ asset('js/blueimp-file-upload/jquery.iframe-transport.js') }}"></script>
<script src="{{ asset('js/blueimp-file-upload/jquery.fileupload.js') }}"></script>
<script src="{{ asset('js/blueimp-load-image/load-image.all.min.js') }}"></script>
<script src="{{ asset('js/clipboard/clipboard.min.js') }}"></script>
@endpush
<div class="pb-6 h-full">
@ -132,9 +132,6 @@
limitConcurrentUploads: 3,
pasteZone: $(document),
dropZone: $('#picker-dnd'),
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
},
formData: (form) => {
},

49
resources/views/images.blade.php
View File

@ -1,7 +1,13 @@
@section('title', '我的图片')
@push('styles')
<link rel="stylesheet" href="{{ asset('css/justified-gallery/justifiedGallery.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/photo-swipe/photoswipe.css') }}">
<link rel="stylesheet" href="{{ asset('css/photo-swipe/default-skin/default-skin.css') }}">
@endpush
<x-app-layout>
<div class="flex justify-between items-center bg-white h-12 border-solid border-b px-2 space-x-2">
<div class="flex justify-between items-center bg-white h-12 border-solid border-b px-2">
<div class="hidden md:block">
<a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href=""><i class="fas fa-folder-open text-blue-500"></i> 新建相册</a>
</div>
@ -19,8 +25,45 @@
</x-slot>
</x-dropdown>
</div>
<div class="flex space-x-2 items-center">
<input type="text" class="px-2.5 py-1.5 border-0 outline-none rounded bg-gray-100 text-sm transition-all duration-300 w-36 md:hover:w-52 md:focus:w-52" placeholder="输入关键字搜索...">
<x-dropdown direction="left">
<x-slot name="trigger">
<a class="text-sm py-2 px-3 hover:bg-gray-100 rounded text-gray-800" href="javascript:void(0)">排序 <i class="fas fa-sort-alpha-up text-blue-500"></i></a>
</x-slot>
<x-slot name="content">
<x-dropdown-link href="javascript:void(0)">最新</x-dropdown-link>
<x-dropdown-link href="javascript:void(0)">最早</x-dropdown-link>
<x-dropdown-link href="javascript:void(0)">最大</x-dropdown-link>
<x-dropdown-link href="javascript:void(0)">最小</x-dropdown-link>
</x-slot>
</x-dropdown>
</div>
</div>
<div>
<x-no-data message="这里什么都没有呢～"/>
<div id="photo-grid">
@foreach(Auth::user()->images()->get() as $image)
<a href="javascript:void(0)" class="rounded p-1 border-2 border-transparent hover:border-blue-500">
<img src="{{ $image->url }}">
</a>
@endforeach
</div>
@push('scripts')
<script src="{{ asset('js/justified-gallery/jquery.justifiedGallery.min.js') }}"></script>
<script src="{{ asset('js/photo-swipe/jquery.photoswipe-global.js') }}"></script>
<script>
$("#photo-grid").justifiedGallery({
rowHeight : 180,
margins: 10,
border: 10,
}).photoSwipe('img', {
allowPanToNext: true,
shareButtons: [
{id: 'facebook', label: 'Share on Facebook', url: 'https://www.facebook.com/sharer/sharer.php?u=@{{url}}'},
{id: 'twitter', label: 'Tweet', url: 'https://twitter.com/intent/tweet?text=@{{text}}&url=@{{url}}'},
{id: 'download', label: 'Download image', url: '@{{raw_image_url}}', download: true}
],
});
</script>
@endpush
</x-app-layout>

2
resources/views/layouts/app.blade.php
View File

@ -3,7 +3,7 @@
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="keywords" content="Lsky Pro"/>
<meta name="description" content="Lsky Pro, Your photo album on the cloud."/>

2
resources/views/layouts/guest.blade.php
View File

@ -2,7 +2,7 @@
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="relative min-full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="keywords" content="Lsky Pro"/>
<meta name="description" content="Lsky Pro, Your photo album on the cloud."/>

4
resources/views/layouts/user-nav.blade.php
View File

@ -12,8 +12,8 @@
<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
@csrf
<x-dropdown-link href="{{ route('/') }}">上传图片</x-dropdown-link>
<x-dropdown-link href="{{ route('/') }}">仪表盘</x-dropdown-link>
<x-dropdown-link href="{{ route('upload') }}">上传图片</x-dropdown-link>
<x-dropdown-link href="{{ route('dashboard') }}">仪表盘</x-dropdown-link>
<x-dropdown-link href="{{ route('/') }}">设置</x-dropdown-link>
<x-dropdown-link :href="route('logout')" onclick="event.preventDefault(); this.closest('form').submit();">
{{ __('Log Out') }}

22
webpack.mix.js vendored
View File

@ -19,8 +19,22 @@ mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'pub
mix.less('resources/css/fontawesome.less', 'public/css');
mix.less('resources/css/common.less', 'public/css');
mix.copy('node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js', 'public/js');
mix.copy('node_modules/blueimp-file-upload/js/jquery.iframe-transport.js', 'public/js');
mix.copy('node_modules/blueimp-file-upload/js/jquery.fileupload.js', 'public/js');
mix.copy('node_modules/blueimp-load-image/js/load-image.all.min.js', 'public/js')
mix.copy('node_modules/blueimp-file-upload/js/vendor/jquery.ui.widget.js', 'public/js/blueimp-file-upload');
mix.copy('node_modules/blueimp-file-upload/js/jquery.iframe-transport.js', 'public/js/blueimp-file-upload');
mix.copy('node_modules/blueimp-file-upload/js/jquery.fileupload.js', 'public/js/blueimp-file-upload');
mix.copy('node_modules/blueimp-load-image/js/load-image.all.min.js', 'public/js/blueimp-load-image')
// justifiedGallery
mix.copy('node_modules/justifiedGallery/dist/css/justifiedGallery.min.css', 'public/css/justified-gallery');
mix.copy('node_modules/justifiedGallery/dist/js/jquery.justifiedGallery.min.js', 'public/js/justified-gallery');
// photoSwipe
mix.copy('node_modules/photoswipe/dist/photoswipe.css', 'public/css/photo-swipe');
mix.copy('node_modules/photoswipe/dist/default-skin', 'public/css/photo-swipe/default-skin');
mix.copy('node_modules/photoswipe/dist/photoswipe.min.js', 'public/js/photo-swipe');
mix.copy('node_modules/photoswipe/dist/photoswipe-ui-default.min.js', 'public/js/photo-swipe')
// jquery Photoswipe
mix.copy('node_modules/jquery.photoswipe/dist/jquery.photoswipe-global.js', 'public/js/photo-swipe')
// clipboard
mix.copy('node_modules/clipboard/dist/clipboard.min.js', 'public/js/clipboard')