UX: Update splash screen, button, and footer styles #2360
This commit is contained in:
Michael Mayer
parent
1efc1e3de5
commit
61dfd2cf50
|
|
@ -5,18 +5,23 @@
|
|||
</div>
|
||||
</noscript>
|
||||
<div id="splash-info" class="has-js splash-info">
|
||||
{{if .config.Imprint}}
|
||||
{{if .config.Imprint}}
|
||||
{{if .config.ImprintUrl}}<a href="{{ .config.ImprintUrl }}" target="_blank" class="imprint">{{ .config.Imprint }}</a>
|
||||
{{else}}<span class="imprint">{{ .config.Imprint }}</span>{{end}}
|
||||
{{else}}
|
||||
<span class="quote-0">One picture is worth a thousand words.</span>
|
||||
<span class="quote-1">It's not the camera, but who's behind the camera.</span>
|
||||
<span class="quote-2">The pictures you want tomorrow, you have to take today.</span>
|
||||
<span class="quote-3">A camera captures light, our mind captures images.</span>
|
||||
<span class="quote-4">If you can shoot on the street you can shoot anything.</span>
|
||||
<span class="quote-5">When asked what equipment you use, say it's your eyes.</span>
|
||||
<span class="quote-6">Photography is the only language that can be understood anywhere in the world.</span>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<div class="edition">
|
||||
{{ .config.Edition }}
|
||||
</div>
|
||||
<div class="days">
|
||||
<span class="quote-0">One picture is worth a thousand words.</span>
|
||||
<span class="quote-1">It's not the camera, but who's behind the camera.</span>
|
||||
<span class="quote-2">The pictures you want tomorrow, you have to take today.</span>
|
||||
<span class="quote-3">A camera captures light, our mind captures images.</span>
|
||||
<span class="quote-4">If you can shoot on the street you can shoot anything.</span>
|
||||
<span class="quote-5">When asked what equipment you use, say it's your eyes.</span>
|
||||
<span class="quote-6">Photography is the only language that can be understood anywhere in the world.</span>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<script>
|
||||
const el = document.getElementById("splash-info");
|
||||
|
|
|
|||
17
assets/templates/splash.tmpl
Normal file
17
assets/templates/splash.tmpl
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" data-color-mode="dark" data-light-theme="light" data-dark-theme="dark" class="overflow-y-hidden">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0{{if not .config.Settings.UI.Zoom }}, maximum-scale=1.0, user-scalable=no{{end}}">
|
||||
<title>{{if and .config.SiteCaption .config.Sponsor }}{{ .config.SiteCaption }}{{else}}{{ .config.Name }}{{end}}</title>
|
||||
{{template "favicons.tmpl" .}}
|
||||
<link rel="stylesheet" href="{{ .config.CssUri }}">
|
||||
<link rel="manifest" href="{{ .config.ManifestUri }}" crossorigin="use-credentials">
|
||||
</head>
|
||||
<body class="{{ .config.Flags }} nojs">
|
||||
|
||||
{{template "app.tmpl" .}}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,15 +4,15 @@
|
|||
<v-layout wrap align-top pt-3>
|
||||
<v-flex xs12 sm6 class="px-0 pb-2 body-1 text-selectable text-xs-left">
|
||||
<strong><router-link to="/about" class="text-link">{{ $config.getEdition() }}</router-link></strong>
|
||||
<a href="https://docs.photoprism.app/release-notes/" class="body-link" target="_blank" :title="version">Build {{ build }}</a>
|
||||
<span class="body-link text-selectable">Build <a href="https://docs.photoprism.app/release-notes/" target="_blank" :title="version">{{ build }}</a></span>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs12 sm6 class="px-0 pb-2 body-1 text-xs-center text-sm-right">
|
||||
<span class="hidden-xs-only">
|
||||
<div class="hidden-xs-only">
|
||||
<a href="https://raw.githubusercontent.com/photoprism/photoprism/develop/NOTICE"
|
||||
target="_blank" class="text-link">3rd-party software packages</a>
|
||||
<a href="https://photoprism.app/team/" target="_blank">© 2018-2022 PhotoPrism UG</a>
|
||||
</span>
|
||||
</div>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-actions>
|
||||
|
|
|
|||
|
|
@ -92,20 +92,22 @@ footer {
|
|||
padding: 6px 24px 12px;
|
||||
}
|
||||
|
||||
#photoprism .footer a {
|
||||
#photoprism .footer div > span,
|
||||
#photoprism .footer div > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 599px) {
|
||||
#photoprism .footer a {
|
||||
#photoprism .footer div > span,
|
||||
#photoprism .footer div > a {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#photoprism .footer a.text-link {
|
||||
#photoprism .footer .text-link {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#photoprism .footer a.body-link {
|
||||
#photoprism .footer .body-link {
|
||||
float:right;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,17 +43,16 @@
|
|||
}
|
||||
|
||||
#photoprism .animate-rainbow {
|
||||
background: repeating-linear-gradient(315deg, #b8edff, #d4b8ff, #9afbfe, #ffb3e0, #c2fde4);
|
||||
background-size: 200% 200%;
|
||||
|
||||
-webkit-animation: rainbow 6s ease infinite;
|
||||
-moz-animation: rainbow 6s ease infinite;
|
||||
animation: rainbow 6s ease infinite;
|
||||
background: repeating-linear-gradient(127deg,#5a2a97, #564dad, #006caa, #34bbc1, #5cba50, #ebdd08, #f49d08, #f03933, #ed1b36);
|
||||
background-size: 110% 110%;
|
||||
-webkit-animation: rainbow 10s ease infinite;
|
||||
-moz-animation: rainbow 10s ease infinite;
|
||||
animation: rainbow 10s ease infinite;
|
||||
}
|
||||
|
||||
#photoprism .static-rainbow {
|
||||
background-size: 200% 200%;
|
||||
background: repeating-linear-gradient(315deg, #b8edff, #d4b8ff, #9afbfe, #ffb3e0, #c2fde4) 100% 50%;
|
||||
background: repeating-linear-gradient(127deg, #5a2a97, #564dad, #006caa, #34bbc1, #5cba50, #ebdd08, #f49d08, #f03933, #ed1b36) 100% 100%;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
|
|
|
|||
|
|
@ -96,20 +96,19 @@
|
|||
}
|
||||
|
||||
#photoprism div.loading-circle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -2px;
|
||||
bottom: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
border-top: 5px #7e29ff solid;
|
||||
border-right: 5px #6d02ff solid;
|
||||
border-bottom: 5px #5812fa solid;
|
||||
border-left: 5px #7C4DFF solid;
|
||||
overflow: visible;
|
||||
border-top: 5px #980cff solid;
|
||||
border-right: 5px #692afe solid;
|
||||
border-bottom: 5px #4045fe solid;
|
||||
border-left: 5px #692afe solid;
|
||||
border-radius: 50%;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
|
|
@ -169,7 +168,7 @@
|
|||
right: 0;
|
||||
}
|
||||
|
||||
#splash-info > span {
|
||||
#photoprism .days > span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -208,9 +207,19 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#splash-info {
|
||||
#splash-info,
|
||||
#splash-info a {
|
||||
text-align: center;
|
||||
color: #7c7c78;
|
||||
color: #858581;
|
||||
}
|
||||
|
||||
#splash-info .edition {
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#splash-info .highlight {
|
||||
color: #bbbbb5;
|
||||
}
|
||||
|
||||
#noscript-info {
|
||||
|
|
@ -218,6 +227,7 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#splash-info .imprint,
|
||||
#noscript-info a {
|
||||
color: #bbbbb5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,10 +24,6 @@ body .application {
|
|||
}
|
||||
|
||||
button.v-btn.compact {
|
||||
font-size: 13px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
button.v-btn.compact .v-icon {
|
||||
font-size: 22px;
|
||||
font-size: 14px;
|
||||
height: 34px;
|
||||
}
|
||||
|
|
@ -6,6 +6,6 @@
|
|||
background-position: bottom center;
|
||||
}
|
||||
|
||||
.auth-login.wallpaper {
|
||||
.background-welcome {
|
||||
background-image: url(https://cdn.photoprism.app/wallpaper/welcome.jpg);
|
||||
}
|
||||
|
|
@ -88,7 +88,7 @@ export default {
|
|||
};
|
||||
},
|
||||
watch: {
|
||||
show: function (show) {
|
||||
show: function () {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 text-xs-right class="pt-3">
|
||||
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
|
||||
<v-btn depressed color="secondary-light" class="action-cancel compact" @click.stop="cancel">
|
||||
<translate key="Cancel">Cancel</translate>
|
||||
</v-btn>
|
||||
<v-btn color="primary-button" depressed dark class="action-confirm"
|
||||
<v-btn color="primary-button" depressed dark class="action-confirm compact"
|
||||
@click.stop="confirm">
|
||||
<translate key="Delete">Yes</translate>
|
||||
</v-btn>
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
</div>
|
||||
</v-flex>
|
||||
<v-flex xs12 text-xs-right class="pt-3">
|
||||
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
|
||||
<v-btn depressed color="secondary-light" class="action-cancel" @click.stop="cancel">
|
||||
<translate key="Cancel">Cancel</translate>
|
||||
</v-btn>
|
||||
<v-btn color="primary-button" depressed dark class="action-confirm"
|
||||
<v-btn color="primary-button" depressed dark compact class="action-confirm"
|
||||
@click.stop="confirm">
|
||||
<translate key="Delete">Delete</translate>
|
||||
</v-btn>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<v-btn
|
||||
color="secondary-light"
|
||||
depressed small
|
||||
depressed
|
||||
@click="close"
|
||||
>
|
||||
<translate>Cancel</translate>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<v-btn
|
||||
color="primary-button"
|
||||
dark depressed small
|
||||
dark depressed
|
||||
class="action-update-reload"
|
||||
@click="reload"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@
|
|||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs6 :text-xs-right="!rtl" :text-xs-left="rtl" class="pa-2">
|
||||
<v-btn small depressed dark color="primary-button" class="ma-0 action-save"
|
||||
<v-btn depressed dark color="primary-button" class="ma-0 action-save"
|
||||
@click.stop.exact="update(link)">
|
||||
<translate>Save</translate>
|
||||
</v-btn>
|
||||
|
|
|
|||
|
|
@ -28,18 +28,18 @@
|
|||
<v-card-actions class="pt-0">
|
||||
<v-layout row wrap class="px-2">
|
||||
<v-flex xs12 sm4 text-xs-right text-sm-left class="py-2">
|
||||
<v-btn small depressed color="secondary-light"
|
||||
class="action-close"
|
||||
<v-btn depressed color="secondary-light"
|
||||
class="action-close compact"
|
||||
@click.stop="close">
|
||||
<translate>No thanks</translate>
|
||||
</v-btn>
|
||||
</v-flex>
|
||||
<v-flex xs12 sm8 text-xs-right class="py-2">
|
||||
<v-btn small depressed color="primary-button" class="white--text action-close"
|
||||
<v-btn depressed color="primary-button" class="white--text action-close compact"
|
||||
@click.stop="signIn">
|
||||
<translate>I'm a sponsor</translate>
|
||||
</v-btn>
|
||||
<v-btn small depressed color="primary-button" class="white--text action-close"
|
||||
<v-btn depressed color="primary-button" class="white--text action-close compact"
|
||||
@click.stop="signUp">
|
||||
<translate>Sign Up</translate>
|
||||
</v-btn>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<v-container fluid fill-height class="auth-login wallpaper pa-3" :style="wallpaper()">
|
||||
<v-container fluid fill-height class="auth-login wallpaper background-welcome pa-3" :style="wallpaper()">
|
||||
<v-layout align-center justify-center>
|
||||
<v-flex xs12 sm8 md4 xl3 xxl2>
|
||||
<v-form ref="form" dense class="auth-login-form" accept-charset="UTF-8" @submit.prevent="login">
|
||||
|
|
|
|||
|
|
@ -34,11 +34,17 @@ func registerRoutes(router *gin.Engine, conf *config.Config) {
|
|||
})
|
||||
|
||||
// Rainbow Page.
|
||||
router.GET(conf.BaseUri("/rainbow"), func(c *gin.Context) {
|
||||
router.GET(conf.BaseUri("/_rainbow"), func(c *gin.Context) {
|
||||
clientConfig := conf.PublicConfig()
|
||||
c.HTML(http.StatusOK, "rainbow.tmpl", gin.H{"config": clientConfig})
|
||||
})
|
||||
|
||||
// Splash Screen.
|
||||
router.GET(conf.BaseUri("/_splash"), func(c *gin.Context) {
|
||||
clientConfig := conf.PublicConfig()
|
||||
c.HTML(http.StatusOK, "splash.tmpl", gin.H{"config": clientConfig})
|
||||
})
|
||||
|
||||
// JSON-REST API Version 1
|
||||
v1 := router.Group(conf.BaseUri(config.ApiUri))
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue