andis/fetsite
1
0
Fork 0
forked from bofh/fetsite
Code Issues Pull Requests Releases Wiki Activity

Implemented Lackis infoscreen layout

Browse Source
This commit is contained in:
Pet
2018-04-12 20:33:09 +02:00
parent 22cf26f76c
commit ef1135962e
4 changed files with 376 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
app/assets/stylesheets/infoscreenframe.css Normal file
View File

@@ -0,0 +1,134 @@
html {
background-color: #fff;
overflow: hidden;
}
body {
display: flex;
flex-flow: wrap;
height: 100vh;
justify-content: space-between;
flex-direction: column;
}
.header {
height: 200px;
width: 100%
}
svg {
padding-top: 2em;
}
.impulsPath {
fill: none;
stroke: #04669c;
stroke-miterlimit: 1;
stroke-width: 6px;
stroke-dasharray: 1946.243;
stroke-dashoffset: 0;
stroke-linejoin: round;
stroke-linecap: round;
animation: dash 10s ease-out infinite;
animation-direction: normal;
}
.FET-logotext-stroke {
fill: #fff;
}
#FET-logotext {
opacity: 0;
animation: logotext 10s ease-in infinite;
}
.content-area {
height: auto;
width: 100%;
}
.footer {
width: 100%;
height: 150px;
background-color: #04669c;
padding-bottom: 10px;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
color: #fff;
flex-basis: bottom;
}
.footer h3,
p {
margin: 0;
padding: 0 20px;
font-family: Helvetica, Arial;
letter-spacing: 0.1em;
}
.footer h3 {
padding-top: 20px;
}
.footer .adress {
margin: auto;
text-align: left;
}
.footer .contact {
margin: auto;
text-align: center;
}
.footer .servicecontainer{
display: inline-flex;
margin: auto;
}
.footer .servicecontainer .servicetime {
margin: auto;
text-align: right;
}
.footer .servicecontainer .servicetime #time {
font-size: 0.7em
}
.footer .servicecontainer .servicestatus{
margin: auto;
width:20px;
height: 100%
padding-right: 30px;
background-color: #fff;
}
/*K E Y F R A M E S*/
@keyframes dash {
from {
stroke-dashoffset: 1946.243;
opacity: 0;
stroke-width: 0.5;
}
to {
opacity: 1;
stroke-dashoffset: 0;
stroke-width: 5px;
}
}
@keyframes logotext {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

42
app/views/home/infoscreen.html.erb
View File

@@ -3,6 +3,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= stylesheet_link_tag "themes/"+theme_name+"/application", :media => "all" unless theme_name.empty? %>
<%= stylesheet_link_tag "application", :media=>"all" if theme_name.empty? %>
<%= stylesheet_link_tag "infoscreenframe.css" %>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag "jmpress" %>
@@ -10,7 +11,7 @@
</head>
<body>
<%= image_tag "infoscreen_header_provisorisch.png" %> <%#header picture/animation %>
<%= content_tag(:iframe,'', width: 300, height: 200, src: "/iframe/infoscreenframe.html") %> <%#header picture/animation %>
<div id ="jmpress" style="padding-top: 100px">
<% i=1 %>
<% @neuigkeiten.each do |n| %>
@@ -52,44 +53,9 @@
<% end %>
</div>
<%
raw("zeitfunktion")
require 'time'
close_time = Time.parse "03:00 pm"
open_time = Time.parse "09:00 am"
current_time = Time.now
if (current_time > open_time)
raw("OPEN")
else
raw("CLOSED")
end
%>
<script>
var d = new Date();
var n = d.getDay();
var now = d.getHours() + "." + d.getMinutes();
var weekdays = [
["Sunday"],
["Monday", 9.00, 15.00],
["Tuesday", 9.00, 15.00],
["Wednesday", 9.00, 15.00],
["Thursday", 9.00, 15.00],
["Friday", 9.00, 12.00],
["Saturday"] // we are closed, sorry!
];
var day = weekdays[n];
if (now > day[1] && now < day[2]) {
document.write("<div id='footer' style='background: green; height:100px; width:1280px; bottom:1px; position:absolute'>");
document.write("OPEN");
}
else {
document.write("<div id='footer' style='background: red; height:100px; width:1280px; bottom:1px; position:absolute'>");
document.write("CLOSED");
}
</script>
<div id='footer_text' style='text-align: center; height:900px; width:1280px'>
<h1>Servicezeiten:9-15 blabla, service@fet blabla, content von lacki ;) Freitag 9-12</h1>
<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all" style="height:10px; z-index: 2000; left: 5px; right: 5px; bottom: 5px; height: 10px; position:absolute">
<div id="" class="ui-progressbar-value ui-widget-header ui-corner-left" style=""></div>
</div>