diff --git a/jumpapp/assets/css/styles.css b/jumpapp/assets/css/src/styles.css similarity index 82% rename from jumpapp/assets/css/styles.css rename to jumpapp/assets/css/src/styles.css index fad4389..fe1ae42 100644 --- a/jumpapp/assets/css/styles.css +++ b/jumpapp/assets/css/src/styles.css @@ -251,6 +251,61 @@ body { white-space: nowrap; } + .sites.alternate { + width:100%; + margin-top: 20px; + } + .sites.alternate li { + float: left; + width: 50%; + text-align: left; + padding: 0 5px; + margin-bottom: 10px; + } + .sites.alternate li a { + background-color: rgba(255,255,255,0.8); + box-shadow: 0 1px 5px rgba(0,0,0,.3); + padding: 8px; + width: 100%; + transition: background-color .1s, box-shadow .1s; + position:relative; + overflow:hidden; + } + .sites.alternate li a:hover { + background-color:#fff; + box-shadow: 0 1px 5px rgba(0,0,0,.6); + } + .sites.alternate .icon { + width: 35px; + height:35px; + display:inline-block; + padding: 0; + border: none; + border-radius: 6px; + overflow: hidden; + box-shadow: none; + vertical-align: middle; + margin: 0 8px 0 0; + } + .sites.alternate .name { + width:auto; + display:inline-block; + vertical-align: middle; + text-shadow: none; + color: #202124; + position: absolute; + top: 50%; + height: 14px; + line-height: 14px; + margin-top: -7px; + } + + @media (max-width: 500px) { + .sites.alternate li { + width: 100%; + } + } + .tags { display:none; color: #202124; diff --git a/jumpapp/assets/css/styles.16bdbba8f5c4dda86818.min.css b/jumpapp/assets/css/styles.16bdbba8f5c4dda86818.min.css new file mode 100644 index 0000000..6c9d2f8 --- /dev/null +++ b/jumpapp/assets/css/styles.16bdbba8f5c4dda86818.min.css @@ -0,0 +1 @@ +@font-face{font-family:Quicksand;font-style:normal;font-weight:400;src:local(""),url(../font/quicksand-v28-latin-regular.woff2) format("woff2"),url(../font/quicksand-v28-latin-regular.woff) format("woff")}*{box-sizing:border-box}body{background:#000;color:#fff;font-family:sans-serif;margin:0;padding:0;text-align:center}.fixed{bottom:0;left:0;position:fixed;right:0;top:0}.hidden{opacity:0}.enable{display:block!important}.background{background-position:50%;background-repeat:no-repeat;background-size:cover;filter:brightness(.85) blur(10px);transform:scale(1.07);z-index:1}.header-bar{left:0;overflow:hidden;padding:15px 15px 0;position:absolute;right:0;text-align:right;top:0;z-index:100}.show-tags{background-color:#ffffff15;background-image:url(../images/tags.svg);background-position:top 50% left 50%;background-repeat:no-repeat;background-size:35px;border:2px solid #ffffff20;border-radius:50%;cursor:pointer;display:inline-block;height:55px;width:55px}.show-tags:hover{background-color:#fff;background-image:url(../images/tags-dark.svg);border:2px solid #cecece;box-shadow:0 1px 5px rgba(0,0,0,.3);transition:background-color,background-image .1s}.content{display:flex;flex-direction:column;justify-content:center;margin:0 auto;max-width:650px;width:100%;z-index:100}.greeting{font-family:Quicksand,sans-serif;font-size:2.3em;font-weight:400;margin-bottom:15px;margin-top:-50px;text-shadow:1px 1px 2px #000000a0;text-transform:capitalize}.greeting .tagname{text-transform:lowercase}.greeting .tagname span{margin-right:5px;opacity:.5}.widget{display:inline-block;height:58px;padding:5px 10px;user-select:none;z-index:1000}.widget.clickable{border-radius:6px;cursor:pointer}.widget.clickable:hover{background-color:#ffffff15;transition:background-color .1s}.time-weather{bottom:10px;display:block;font-family:Quicksand,sans-serif;font-weight:400;position:absolute;right:15px;text-shadow:1px 1px 2px #000000a0;z-index:100}.time{font-size:2.4em;vertical-align:middle}.time span{font-size:.5em;padding-left:5px}.weather{color:inherit;text-decoration:none}.weather-icon{display:inline-block;font-size:1.9em;height:48px;line-height:48px!important;vertical-align:middle}.weather-icon:before{position:relative}.weather-info{display:inline-flex;flex-direction:column;font-weight:600;line-height:normal;margin-right:10px;text-align:right;vertical-align:middle}.useclientlocation,.weather-info{font-size:14px;text-shadow:1px 1px 1px #000000a0}.useclientlocation{background-image:url(../images/map-pin.svg);background-position:top 50% left 5px;background-repeat:no-repeat;background-size:37px;bottom:10px;display:none;left:15px;line-height:58px;padding:0 10px 0 45px;position:absolute}.sites,.sites li{font-size:14px;list-style-type:none;margin:0;padding:0;user-select:none}.sites li,.sites li a{display:inline-block}.sites li a{border-radius:6px;color:inherit;padding:13px;text-decoration:none}.sites li a:hover{background-color:#ffffff15;transition:background-color .1s}.sites .icon{background-color:#fff;background-image:url(../images/loading.svg);background-position:50%;background-repeat:no-repeat;background-size:20px;border:.2em solid #fff;border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,.3);display:block;height:80px;margin-bottom:8px;padding:15px;width:80px}.sites .icon img{background:#fff;width:100%}.sites .name{word-wrap:break-word;display:block;max-height:3.3em;overflow:hidden;text-overflow:ellipsis;text-shadow:1px 1px 1px #000000a0;white-space:nowrap;width:80px}.sites.alternate{margin-top:20px;width:100%}.sites.alternate li{float:left;margin-bottom:10px;padding:0 5px;text-align:left;width:50%}.sites.alternate li a{background-color:hsla(0,0%,100%,.8);box-shadow:0 1px 5px rgba(0,0,0,.3);overflow:hidden;padding:8px;position:relative;transition:background-color .1s,box-shadow .1s;width:100%}.sites.alternate li a:hover{background-color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.6)}.sites.alternate .icon{border:none;border-radius:6px;box-shadow:none;display:inline-block;height:35px;margin:0 8px 0 0;overflow:hidden;padding:0;vertical-align:middle;width:35px}.sites.alternate .name{color:#202124;display:inline-block;height:14px;line-height:14px;margin-top:-7px;position:absolute;text-shadow:none;top:50%;vertical-align:middle;width:auto}@media (max-width:500px){.sites.alternate li{width:100%}}.tags{background-color:#fff;border:.2em solid #cecece;border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,.3);color:#202124;display:none;font-family:Quicksand,sans-serif;font-weight:400;min-width:250px;padding:15px;position:fixed;right:15px;text-align:left;top:15px;z-index:100}.tags:target{display:block}.tags .header{border-bottom:1px solid #ddd;display:block;font-size:20px;height:35px;line-height:18px;margin-bottom:20px}.tags .header .close{background-image:url(../images/close-dark.svg);background-position:top 50% left 50%;background-repeat:no-repeat;background-size:30px;border:5px solid #fff;border-radius:50%;cursor:pointer;display:inline-block;height:48px;position:absolute;right:0;top:0;width:48px}.tags .header .close:hover{background-color:#f3f3f3}.tags ul{list-style-position:inside;margin:0;padding:0}.tags ul li{margin-bottom:3px;text-transform:lowercase}.tags ul li::marker{color:#bbb;content:"#"}.tags ul li a{border-radius:4px;color:inherit;display:inline-block;margin-left:1px;padding:3px 5px;text-decoration:dotted}.tags ul li a:hover{background-color:#f3f3f3;transition:background-color .1s} \ No newline at end of file diff --git a/jumpapp/assets/js/index.bundle.js b/jumpapp/assets/js/index.52c1dcb71f05502fb292.min.js similarity index 100% rename from jumpapp/assets/js/index.bundle.js rename to jumpapp/assets/js/index.52c1dcb71f05502fb292.min.js diff --git a/jumpapp/classes/Pages/HomePage.php b/jumpapp/classes/Pages/HomePage.php index 78e100d..d05896a 100644 --- a/jumpapp/classes/Pages/HomePage.php +++ b/jumpapp/classes/Pages/HomePage.php @@ -29,6 +29,7 @@ class HomePage extends AbstractPage { return $template->render([ 'hassites' => !empty($sites->get_sites()), 'sites' => $sites->get_sites_by_tag('home'), + 'altlayout' => $this->config->parse_bool($this->config->get('altlayout', false)), ]); }); } diff --git a/jumpapp/classes/Pages/TagPage.php b/jumpapp/classes/Pages/TagPage.php index 04e8d91..670908d 100644 --- a/jumpapp/classes/Pages/TagPage.php +++ b/jumpapp/classes/Pages/TagPage.php @@ -35,6 +35,7 @@ class TagPage extends AbstractPage { return $template->render([ 'hassites' => !empty($taggedsites), 'sites' => $taggedsites, + 'altlayout' => $this->config->parse_bool($this->config->get('altlayout', false)), ]); }); } diff --git a/jumpapp/config.php b/jumpapp/config.php index 5d09d6a..a80b791 100644 --- a/jumpapp/config.php +++ b/jumpapp/config.php @@ -29,6 +29,8 @@ return [ 'bgblur' => getenv('BGBLUR') ?: '70', // Background brightness percentage. 'bgbright' => getenv('BGBRIGHT') ?: '85', + // Display alternative layout of sites list. + 'altlayout' => getenv('ALTLAYOUT') ?: false, // Open Weather Map API key. 'owmapikey' => getenv('OWMAPIKEY') ?: '', diff --git a/jumpapp/templates/footer.mustache b/jumpapp/templates/footer.mustache index df472bd..e21cb84 100644 --- a/jumpapp/templates/footer.mustache +++ b/jumpapp/templates/footer.mustache @@ -23,6 +23,6 @@ {{/ hastags}}
- +